/* DevCan Games portal: one dark "night arcade" look built from the logo (ink, violet tile, life coral, coin gold). */
@font-face { font-family: 'Display'; src: url('lilita-one-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'UI'; font-weight: 600 900; src: url('nunito-latin-800-normal.woff2') format('woff2'); font-display: swap; }
:root {
  --ink: #160b33; --night: #1d0f45; --panel: #281660; --panel-2: #321c78; --line: rgba(190, 160, 255, .18);
  --violet: #8247ff; --coral: #ff4f6e; --coral-dark: #c92648; --gold: #ffd23f; --text: #f3eeff; --dim: #b9addf;
  --display: 'Display', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif; --ui: 'UI', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; min-height: 100vh; background: radial-gradient(1200px 600px at 80% -10%, #3a1d8f 0%, transparent 60%), var(--ink); color: var(--text); font: 700 16px/1.55 var(--ui); }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 760px; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; line-height: 1.05; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 6vw, 64px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
.lead { color: var(--dim); font-size: clamp(16px, 1.6vw, 19px); max-width: 60ch; margin: 0; }

/* header */
.top { position: sticky; top: 0; z-index: 10; background: rgba(22, 11, 51, .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.brand img { height: 46px; width: auto; }
nav { display: flex; gap: 18px; }
nav a { text-decoration: none; color: var(--dim); }
nav a:hover { color: var(--text); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: .45em; border: 0; cursor: pointer; text-decoration: none; font: 400 18px/1 var(--display); letter-spacing: .03em;
  color: var(--text); background: var(--panel-2); padding: .7em 1.2em; border-radius: 14px; box-shadow: 0 4px 0 #120734; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #120734; }
.btn.play { background: linear-gradient(180deg, #ff7a91, var(--coral)); box-shadow: 0 5px 0 var(--coral-dark); text-shadow: 0 2px 0 rgba(120, 10, 40, .35); }
.btn.big { font-size: clamp(20px, 2.4vw, 26px); padding: .7em 1.5em; }

/* hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 11, 51, .94) 0%, rgba(22, 11, 51, .72) 42%, rgba(22, 11, 51, .05) 75%), linear-gradient(0deg, rgba(22, 11, 51, .8), transparent 40%); }
.hero-in { position: relative; z-index: 1; display: grid; gap: 16px; padding-block: clamp(48px, 9vw, 120px); max-width: 1200px; }
.hero-in > * { max-width: 560px; }
.eyebrow { justify-self: start; font: 900 13px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: .5em .8em; border-radius: 999px; }
.hero h1 { -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 6px; }
.note { color: var(--dim); font-size: 14px; }

/* sections + grid */
main { padding-block: 34px 56px; }
.sec { display: grid; gap: 6px; margin: 0 0 18px; }
.sec p { margin: 0; color: var(--dim); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 18px; }
.grid.small { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.card { position: relative; display: grid; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  box-shadow: 0 6px 0 #0f0629; transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 #0f0629, 0 0 0 2px var(--violet); }
.thumb { position: relative; display: block; aspect-ratio: 1; background: var(--night); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.pill { position: absolute; top: 10px; left: 10px; font: 900 12px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; padding: .45em .7em; border-radius: 999px; }
.pill.online { background: #3ee08f; color: #06341c; }
.info { display: grid; gap: 2px; padding: 12px 52px 14px 14px; min-width: 0; }
.info b { font: 400 20px/1.1 var(--display); letter-spacing: .02em; overflow-wrap: anywhere; }
.info small { color: var(--dim); font-size: 13px; }
.go { position: absolute; right: 12px; bottom: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--coral); font-size: 13px; box-shadow: 0 3px 0 var(--coral-dark); }

/* game page */
.game { display: grid; gap: 16px; padding-top: 22px; }
.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 170px); margin-inline: auto; background: #000; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 8px 0 #0f0629; }
.stage:fullscreen { max-height: none; border-radius: 0; border: 0; }
.stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.stage-bar h1 { font-size: clamp(28px, 4vw, 44px); }
.rotate { display: none; margin: 0; color: var(--gold); }
.about { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; margin-bottom: 18px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tags span { font-size: 13px; color: var(--dim); background: var(--night); border: 1px solid var(--line); padding: .3em .75em; border-radius: 999px; }
.controls { margin: 0; display: grid; gap: 6px; align-content: start; }
.controls dt { font: 900 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }
.controls dd { margin: 0; color: var(--text); }
kbd { font: 800 13px/1 var(--ui); background: #fff; color: var(--ink); border-radius: 6px; padding: .2em .45em; box-shadow: 0 2px 0 #9a8bd0; }

/* prose */
.prose h2 { margin-top: 28px; font-size: 24px; }
.prose p { color: var(--dim); max-width: 65ch; }

/* footer */
.foot { border-top: 1px solid var(--line); padding-block: 26px 40px; color: var(--dim); font-size: 14px; }
.foot .wrap { display: flex; gap: 14px; align-items: flex-start; }
.foot p { margin: 4px 0 0; max-width: 70ch; }
.foot b { color: var(--text); }
.links a { color: var(--text); }

@media (max-width: 520px) { .grid, .grid.small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .info b { font-size: 17px; } .info { padding: 10px 44px 12px 12px; } .go { width: 28px; height: 28px; right: 10px; bottom: 12px; } }
@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; }
  .hero::after { background: linear-gradient(0deg, rgba(22, 11, 51, .96) 30%, rgba(22, 11, 51, .55) 70%, rgba(22, 11, 51, .3)); }
  .brand img { height: 38px; }
}
@media (max-width: 760px) and (orientation: portrait) { .rotate { display: block; } }
@media (prefers-reduced-motion: reduce) { .card, .btn { transition: none; } .card:hover { transform: none; } }

/* accounts */
nav { align-items: center; }
.btn.small { font-size: 15px; padding: .55em 1em; }
.me { display: inline-flex; align-items: center; gap: .45em; text-decoration: none; color: var(--text) !important; background: var(--panel); border: 1px solid var(--line); padding: .35em .8em; border-radius: 999px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitch { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; }
.pitch b { font: 400 22px/1.1 var(--display); letter-spacing: .02em; }
.pitch span { color: var(--dim); flex: 1 1 240px; }
.savenote { margin: -6px 0 0; color: var(--dim); font-size: 15px; }
.savenote a, .small a, .prose a, .check a { color: var(--gold); }
.form-page { padding-top: 36px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 4vw, 36px); display: grid; gap: 14px; box-shadow: 0 8px 0 #0f0629; }
.panel h1 { font-size: clamp(30px, 5vw, 44px); }
.panel h2 { font-size: 22px; margin-top: 14px; }
.panel p { margin: 0; }
.panel form { display: grid; gap: 12px; }
.panel label { display: grid; gap: 6px; font-size: 15px; }
.panel label small { color: var(--dim); font-weight: 600; }
.panel input:not([type=checkbox]), .panel select { font: 700 16px/1.2 var(--ui); color: var(--text); background: var(--night); border: 1px solid var(--line); border-radius: 12px; padding: .75em .9em; width: 100%; min-width: 0; }
.panel input:focus, .panel select:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.panel label.check { display: flex; align-items: flex-start; gap: 10px; color: var(--text); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--coral); flex: none; }
.panel .btn.play, .panel .btn.google { justify-content: center; width: 100%; }
.btn.google { background: #fff; color: #24104f; box-shadow: 0 4px 0 #9a8bd0; font: 800 17px/1 var(--ui); text-shadow: none; }
.btn.google .g { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); color: #fff; font: 900 14px/1 var(--ui); }
.or { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 14px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.msg { margin: 0; font-size: 15px; }
.msg:empty { display: none; }
.msg.bad { color: #ffb3c2; background: rgba(255, 79, 110, .14); border: 1px solid rgba(255, 79, 110, .4); padding: .6em .8em; border-radius: 10px; }
.msg.good { color: #b8ffd8; background: rgba(62, 224, 143, .12); border: 1px solid rgba(62, 224, 143, .4); padding: .6em .8em; border-radius: 10px; }
.small { color: var(--dim); font-size: 14px; margin: 0; }
.namepick { grid-template-columns: 1fr 1fr 5.5em auto; align-items: center; }
.namepick .msg { grid-column: 1 / -1; }
.danger { color: #ffb3c2; }
.btn.danger { background: #5a1630; box-shadow: 0 4px 0 #2e0a19; }
.btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 560px) { .namepick { grid-template-columns: 1fr 1fr; } .namepick .btn { grid-column: 1 / -1; } }