/* UOK no celular: presentation and how-to page, in the same look as the app */
@font-face { font-family: Coinage; src: url(uok/coinage.ttf); font-display: swap; }
:root { --gold: #D13A43; --gold-soft: #B0313888; --text: #FFFFFF; --muted: #C9CDD6; --card: #000000A6; }

html { background: #0D0D0D; }
body { margin: 0; color: var(--text); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* The UOK logo stays behind the whole page while it scrolls */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(#00000099, #000000CC 55%, #000000E6), url(uok/hero.webp) center / cover no-repeat #0D0D0D; }
h1, h2, h3, .kicker, .button, .num { font-family: Coinage, serif; letter-spacing: .05em; }
a { color: var(--gold); }

.hero { min-height: 72vh; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: center; padding: calc(40px + env(safe-area-inset-top)) 16px 32px; text-align: center; }
.hero-inner { max-width: 640px; margin: 0 auto; }
.hero-icon { border-radius: 18px; box-shadow: 0 6px 24px #000A; }
.kicker { margin: 18px 0 0; font-size: 14px; color: var(--muted); text-transform: uppercase; }
.hero h1 { margin: 6px 0 0; font-size: clamp(30px, 8.5vw, 54px); color: var(--gold); text-transform: uppercase; letter-spacing: .06em;
  text-shadow: 0 2px 0 #000, 0 4px 6px #000, 0 0 18px #000, 0 0 36px #000E; }
.kicker, .lead { text-shadow: 0 2px 6px #000, 0 0 14px #000; }
.lead { margin: 14px auto 0; max-width: 480px; font-size: 18px; color: var(--text); }
.beta { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

/* Like the launcher's play button: a framed red plate with a light edge and a glow */
.button { position: relative; display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 16px 38px; border-radius: 10px;
  border: 1px solid #FF8A90AA; background: linear-gradient(#E0484F, #B03138 55%, #8E242A); color: #FFFFFF; font-size: 18px; font-weight: bold;
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none; text-shadow: 0 2px 3px #0009;
  box-shadow: inset 0 1px 0 #FFFFFF55, inset 0 -3px 0 #0000004D, 0 0 0 3px #00000099, 0 0 0 4px #D13A4366, 0 8px 22px #000C, 0 0 26px #D13A4355;
  transition: transform .15s, box-shadow .15s, filter .15s; }
.button::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #FFFFFF; filter: drop-shadow(0 1px 2px #0008); }
.button:hover { filter: brightness(1.1); box-shadow: inset 0 1px 0 #FFFFFF66, inset 0 -3px 0 #0000004D, 0 0 0 3px #00000099, 0 0 0 4px #FF6A7199, 0 10px 26px #000C, 0 0 38px #D13A4388; }
.button:active { transform: translateY(1px) scale(.98); }
.button.ghost { background: #000000A6; color: #FFFFFF; border: 1px solid var(--gold); box-shadow: 0 0 0 3px #00000099, 0 8px 22px #000C; text-shadow: none; }
.button.ghost::before { display: none; }

main { max-width: 880px; margin: 0 auto; padding: 0 16px; }
section { padding: 40px 0 8px; }
h2 { margin: 0 0 20px; font-size: 26px; color: var(--gold); text-align: center; }
h3 { margin: 0; font-size: 18px; color: var(--text); }
p { margin: 6px 0 0; color: var(--muted); }
strong { color: var(--text); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.card { padding: 22px; border-radius: 16px; border: 1px solid var(--gold-soft); background: var(--card); text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.card svg { width: 40px; height: 40px; fill: var(--gold); margin-bottom: 10px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 16px; border: 1px solid var(--gold-soft); background: var(--card); }
.num { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gold); color: #FFFFFF; font-size: 20px; font-weight: bold; }

.tips { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); margin: 0; padding: 18px 22px 18px 40px; border-radius: 16px; border: 1px solid var(--gold-soft); background: var(--card); color: var(--muted); }
.tips li { margin: 6px 0; }

.report { text-align: center; }
.report p { max-width: 480px; margin: 0 auto; }

footer { padding: 40px 16px calc(32px + env(safe-area-inset-bottom)); text-align: center; font-size: 14px; }

/* The phone lying down with the game inside: a modern phone, titanium frame, island and side buttons */
.showcase { padding-top: 8px; text-align: center; }
.phone { position: relative; max-width: 780px; margin: 0 auto; padding: 9px; border-radius: 52px;
  background: linear-gradient(135deg, #6E6E73 0%, #2C2C2E 18%, #48484A 50%, #1C1C1E 82%, #5A5A5E 100%);
  box-shadow: inset 0 0 0 1px #9A9AA0, inset 0 0 0 3px #1A1A1A, 0 30px 70px #000E, 0 0 70px #D13A4330; }
.screen { position: relative; overflow: hidden; border-radius: 44px; border: 8px solid #000; background: #000; }
.screen img, .screen video { display: block; width: 100%; height: auto; }
/* Glass reflection over the screen */
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, #FFFFFF14 0%, #FFFFFF05 35%, transparent 36%); }
/* The island, standing at the left because the phone lies down */
.island { position: absolute; z-index: 1; left: 12px; top: 50%; width: 22px; height: 84px; margin-top: -42px; border-radius: 12px; background: #000; box-shadow: 0 0 0 1px #FFFFFF0D; }
.island::after { content: ""; position: absolute; left: 7px; bottom: 12px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3A4A6A, #0A0D14 70%); }
/* Volume buttons on top, power button below */
.side-buttons, .side-buttons::before { position: absolute; border-radius: 2px; background: linear-gradient(#7A7A7F, #3A3A3C); }
.side-buttons { left: 120px; top: -4px; width: 50px; height: 4px; }
.side-buttons::before { content: ""; left: 64px; top: 0; width: 50px; height: 4px; }
.phone::after { content: ""; position: absolute; left: 150px; bottom: -4px; width: 80px; height: 4px; border-radius: 2px; background: linear-gradient(#3A3A3C, #7A7A7F); }
.caption { max-width: 520px; margin: 18px auto 0; font-size: 14px; }
@media (max-width: 520px) {
  .phone { padding: 5px; border-radius: 30px; }
  .screen { border-radius: 25px; border-width: 5px; }
  .island { left: 6px; width: 12px; height: 46px; margin-top: -23px; border-radius: 7px; }
  .island::after { display: none; }
  .side-buttons { left: 60px; width: 28px; height: 3px; top: -3px; }
  .side-buttons::before { left: 36px; width: 28px; height: 3px; }
  .phone::after { left: 80px; width: 44px; height: 3px; bottom: -3px; }
}

/* Short title area for text pages (privacy) */
.hero.hero-small { min-height: 34vh; }
section p + p { margin-top: 12px; }

/* Text pages (privacy): darker background and each section on its own dark card, for reading */
.text-page::before { background: linear-gradient(#000000D9, #000000EB 50%, #000000F5), url(uok/hero.webp) center / cover no-repeat #0D0D0D; }
.text-page main { max-width: 760px; }
.text-page section { margin-top: 18px; padding: 22px 26px; border-radius: 16px; border: 1px solid var(--gold-soft); background: #0A0A0AE6; }
.text-page section h2 { text-align: left; font-size: 22px; margin-bottom: 12px; }
.text-page p, .text-page .tips { color: #E6E7EB; font-size: 16px; line-height: 1.65; }
.text-page .tips { padding: 0 0 0 20px; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }