@font-face { font-family: "SG"; src: url(/fonts/space-grotesk-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "SG"; src: url(/fonts/space-grotesk-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --field: #e2412b; --field-deep: #b52a18; --ink: #141110; --paper: #f3ebdd;
  --button: #141110; --button-ink: #f3ebdd; --accent: #141110; --glow: #ffd23f;
  --top: 64px; --bottom: 104px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--field); color: var(--ink); font-family: "SG", system-ui, sans-serif; font-weight: 500; overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
h1, h2, h3 { font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; margin: 0; line-height: 0.92; }

/* buttons: flat, square, loud */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px;
  background: var(--button); color: var(--button-ink); border: 3px solid var(--ink); font-weight: 700; font-size: 20px;
  text-transform: uppercase; letter-spacing: 0.01em; transition: transform .08s; white-space: nowrap; }
.btn:active { transform: translate(2px, 2px); }
.btn.ghost { background: var(--paper); color: var(--ink); }
.btn.small { min-height: 44px; font-size: 16px; padding: 0 16px; }
.btn[disabled] { opacity: .4; pointer-events: none; }
[data-look="cutout"] .btn { box-shadow: 5px 6px 0 var(--ink); }
[data-look="cutout"] .btn:active { box-shadow: 2px 3px 0 var(--ink); }
[data-look="ink"] .btn { border-width: 4px; box-shadow: 4px 4px 0 var(--ink); }
[data-look="signal"] .btn { border: 0; }
[data-look="signal"] .btn.ghost { background: #fff; }
.btn:focus-visible, .chip:focus-visible, .card:focus-visible { outline: 4px solid var(--glow); outline-offset: 3px; }
.key { display: none; min-width: 26px; height: 26px; padding: 0 6px; border: 2px solid currentColor; border-bottom-width: 4px; font-size: 14px; line-height: 20px; text-align: center; font-weight: 700; }
@media (pointer: fine) { .key { display: inline-block; } .keyhint { display: inline; } }
.keyhint { display: none; }

/* home */
.home { overflow-x: hidden; overflow-y: auto; display: block; }
.home .plate, .home .shade, .home .sparks { position: fixed; }
.home .shelf { position: relative; padding: 24px calc(20px + var(--safe-l)) calc(28px + var(--safe-b)); background: var(--field); }
.result { overflow-y: auto; }
.result .endpanel { width: min(100%, 720px); }
.home .plate { position: absolute; inset: -6%; background-size: cover; background-position: center; animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04) translate(-1.5%, 0.5%) rotate(-0.6deg); } to { transform: scale(1.12) translate(1.5%, -1%) rotate(0.6deg); } }
.home .shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--field) 70%, transparent) 70%, var(--field) 100%); }
.home .sparks { position: absolute; inset: 0; pointer-events: none; }
.home .sparks i { position: absolute; width: 10px; height: 10px; background: var(--glow); border: 2px solid var(--ink); transform: rotate(45deg); animation: spark 2.4s linear infinite; }
@keyframes spark { 0% { opacity: 0; transform: translate(0,0) rotate(45deg) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(225deg) scale(1.1); } }
.home .door { position: relative; min-height: 100%; justify-content: flex-end; padding: 0 calc(20px + var(--safe-l)) calc(24px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.wordmark { font-size: clamp(54px, 13vw, 150px); color: var(--paper); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 6px 7px 0 var(--ink); }
.wordmark span { display: block; }
[data-look="ink"] .wordmark { color: #fff; }
[data-look="signal"] .wordmark { color: #fff; -webkit-text-stroke: 0; text-shadow: 6px 6px 0 var(--accent); }
.door .row { display: flex; gap: 12px; flex-wrap: wrap; }
.door .row .btn { flex: 1 1 200px; }
.door .tiny { display: flex; gap: 18px; justify-content: flex-end; }
.link { background: none; border: 0; padding: 6px 0; font-weight: 700; text-transform: uppercase; color: var(--paper); text-decoration: underline; text-underline-offset: 4px; font-size: 15px; }
[data-look="ink"] .link { color: var(--ink); }
@media (min-width: 900px) {
  .home .door { width: min(620px, 52vw); padding-left: calc(48px + var(--safe-l)); padding-bottom: 48px; }
  .home .shade { background: linear-gradient(90deg, color-mix(in srgb, var(--field) 92%, transparent) 0%, color-mix(in srgb, var(--field) 55%, transparent) 45%, transparent 70%); }
}

/* plain screens */
.page { padding: calc(18px + var(--safe-t)) calc(20px + var(--safe-r)) calc(20px + var(--safe-b)) calc(20px + var(--safe-l)); gap: 18px; overflow-y: auto; }
.page h1 { font-size: clamp(44px, 10vw, 96px); color: var(--paper); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--ink); }
[data-look="signal"] .page h1 { -webkit-text-stroke: 0; color: #fff; text-shadow: 5px 5px 0 var(--accent); }
[data-look="ink"] .page h1 { color: #fff; }
.page .lede { font-size: 20px; color: var(--paper); font-weight: 700; }
[data-look="ink"] .page .lede { color: var(--ink); }
.back { align-self: flex-start; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.tile { min-height: 120px; background: var(--paper); border: 3px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 22px; text-transform: uppercase; position: relative; overflow: hidden; }
.tile b { font-size: 54px; line-height: 1; }
.tile .figs { display: flex; height: 64px; align-items: flex-end; }
.tile .figs img { height: 64px; margin: 0 -10px; }
[data-look="cutout"] .tile { box-shadow: 6px 7px 0 var(--ink); }
[data-look="signal"] .tile { border: 0; background: #fff; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { min-height: 48px; padding: 0 20px; border: 3px solid var(--ink); background: var(--paper); font-weight: 700; text-transform: uppercase; font-size: 17px; }
.chip.on { background: var(--button); color: var(--button-ink); }
[data-look="signal"] .chip { border: 0; background: #fff; }
[data-look="signal"] .chip.on { background: var(--accent); color: var(--ink); }
.label { font-weight: 700; text-transform: uppercase; color: var(--paper); font-size: 15px; letter-spacing: .04em; }
[data-look="ink"] .label { color: var(--ink); }
.field { min-height: 56px; border: 3px solid var(--ink); background: var(--paper); padding: 0 16px; font: inherit; font-size: 22px; font-weight: 700; text-transform: uppercase; width: 100%; color: var(--ink); }
.joinrow { display: flex; gap: 10px; }
.joinrow .field { flex: 1; min-width: 0; }
.code { font-size: clamp(56px, 16vw, 120px); font-weight: 700; letter-spacing: .06em; color: var(--paper); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
[data-look="signal"] .code { -webkit-text-stroke: 0; color: #fff; }
.seatlist { display: flex; flex-direction: column; gap: 8px; }
.seat { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; background: var(--paper); border: 3px solid var(--ink); font-weight: 700; font-size: 20px; }
.seat .sw { width: 22px; height: 22px; border: 3px solid var(--ink); }
.seat.empty { opacity: .55; border-style: dashed; }
.mytables { display: flex; flex-direction: column; gap: 8px; }

/* draft */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.card { cursor: pointer; display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; text-align: left; background: var(--paper); border: 3px solid var(--ink); padding: 10px 14px 10px 8px; min-height: 150px; position: relative; }
.card img { width: 120px; height: 130px; object-fit: contain; }
.card h3 { font-size: 30px; }
.card p { margin: 4px 0 0; font-size: 15px; line-height: 1.25; }
.card .cap { position: absolute; top: 8px; right: 10px; font-weight: 700; font-size: 14px; text-transform: uppercase; }
.card.taken { opacity: .45; }
.card.taken::after { content: attr(data-owner); position: absolute; right: 10px; bottom: 8px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; background: var(--ink); color: var(--paper); }
.card.picked { outline: 5px solid var(--glow); outline-offset: -2px; }
[data-look="cutout"] .card { box-shadow: 6px 7px 0 var(--ink); }
[data-look="signal"] .card { border: 0; background: #fff; }
.stickybar { position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0 0; background: linear-gradient(transparent, var(--field) 30%); }
.stickybar .smsg { font-weight: 700; font-size: 20px; color: var(--paper); text-transform: uppercase; }
[data-look="ink"] .stickybar .smsg { color: var(--ink); }

/* game */
.game { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--top) + var(--safe-t)) 1fr calc(var(--bottom) + var(--safe-b)); }
.topbar { display: flex; align-items: stretch; gap: 6px; padding: calc(6px + var(--safe-t)) calc(8px + var(--safe-r)) 6px calc(8px + var(--safe-l)); background: var(--ink); z-index: 2; }
.seats { display: flex; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
.schip { cursor: pointer; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 0; background: var(--sc); color: #111; border: 0; position: relative; overflow: hidden; }
.schip img { height: 100%; width: 44px; object-fit: cover; object-position: top; flex: none; }
.schip .nm { font-weight: 700; font-size: 15px; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.schip .st { font-size: 12px; font-weight: 700; text-transform: uppercase; opacity: .8; white-space: nowrap; }
.schip .tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.schip.cur { box-shadow: inset 0 -6px 0 var(--glow); }
.schip.out { opacity: .35; }
.schip .you { position: absolute; top: 2px; right: 4px; font-size: 10px; font-weight: 700; }
.iconbtn { width: 52px; flex: none; background: var(--paper); border: 0; font-weight: 700; font-size: 13px; text-transform: uppercase; position: relative; }
.iconbtn .dot { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--glow); color: #111; font-size: 12px; line-height: 18px; }
.stage { position: relative; min-height: 0; overflow: hidden; }
.stage svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); touch-action: manipulation; }
.stage .hex { cursor: pointer; }
.piece { cursor: pointer; }
.piece.selected .disc { stroke: var(--glow); stroke-width: .16; }
.piece.selected .fig { filter: drop-shadow(0 0 .06px var(--glow)) drop-shadow(0 0 .06px var(--glow)); }
.piece.fresh .fig { opacity: .55; }
.piece .spark { animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; transform: scale(.6); } }
.base-pulse { animation: pulse 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes pulse { 0%, 100% { opacity: .9; } 50% { opacity: .15; } }
.hi { cursor: pointer; animation: hi 1s ease-in-out infinite alternate; }
@keyframes hi { from { opacity: 1; } to { opacity: .55; } }
.stage .fit { position: absolute; right: 10px; bottom: 10px; z-index: 3; }
.stage svg { touch-action: none; }
.banner { position: absolute; left: 0; right: 0; top: 10px; display: flex; justify-content: center; pointer-events: none; z-index: 3; }
.banner > div { background: var(--ink); color: var(--paper); font-weight: 700; text-transform: uppercase; font-size: 18px; padding: 10px 18px; max-width: calc(100% - 24px); text-align: center; }
.banner .skip { pointer-events: auto; margin-left: 12px; background: var(--glow); color: #111; border: 0; font-weight: 700; padding: 4px 10px; text-transform: uppercase; }
.boom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 4; }
.boom div { font-size: clamp(44px, 11vw, 110px); font-weight: 700; text-transform: uppercase; color: var(--paper); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 6px 7px 0 var(--ink); animation: slam .9s cubic-bezier(.2,1.5,.4,1) both; text-align: center; line-height: .9; }
@keyframes slam { from { transform: scale(2.4) rotate(-6deg); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1) rotate(-3deg); } }

.bottombar { display: flex; align-items: center; gap: 12px; padding: 8px calc(12px + var(--safe-r)) calc(8px + var(--safe-b)) calc(12px + var(--safe-l)); background: var(--paper); border-top: 4px solid var(--ink); z-index: 2; }
[data-look="signal"] .bottombar { background: #fff; border-top: 0; }
.pips { display: flex; flex-direction: column; gap: 4px; flex: none; }
.pip { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; height: 22px; }
.pip i { width: 16px; height: 16px; border: 3px solid var(--ink); background: var(--glow); display: inline-block; }
.pip i.off { background: transparent; opacity: .35; }
.ctx { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 100%; overflow: hidden; }
.ctx .who { font-weight: 700; font-size: 18px; text-transform: uppercase; line-height: 1.05; }
.ctx .rule { font-size: 14px; line-height: 1.2; }
.ctx img.mini { height: 72px; width: 60px; object-fit: contain; flex: none; }
.ctx .txt { min-width: 0; }
.armtoggle { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 3px dashed var(--ink); background: transparent; font-weight: 700; text-transform: uppercase; font-size: 15px; }
.armtoggle img { width: 32px; height: 32px; opacity: .35; }
.armtoggle.on { border-style: solid; background: var(--ink); color: var(--paper); }
.armtoggle.on img { opacity: 1; filter: invert(1); }
.endbtn { flex: none; }
.endbtn.hot { animation: hot 0.9s ease-in-out infinite alternate; }
@keyframes hot { to { transform: scale(1.05); } }
@media (max-width: 560px) {
  :root { --bottom: 128px; --top: 58px; }
  .bottombar { flex-wrap: wrap; align-content: center; row-gap: 6px; }
  .pips { flex-direction: row; gap: 10px; order: 0; width: 100%; }
  .ctx { order: 1; flex: 1 1 0; height: 60px; }
  .ctx img.mini { height: 56px; width: 44px; }
  .ctx .rule { font-size: 12px; }
  .endbtn { order: 2; min-height: 56px; padding: 0 16px; font-size: 17px; }
  .schip img { width: 34px; }
  .schip .nm { font-size: 13px; }
  .schip .st { font-size: 10px; white-space: normal; line-height: 1; }
  .schip { padding-right: 4px; gap: 4px; }
  .iconbtn { width: 46px; }
}

/* sheets: chat, menu, result */
.sheet { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; background: color-mix(in srgb, var(--ink) 55%, transparent); }
.sheet .panel { margin-top: auto; background: var(--paper); border-top: 4px solid var(--ink); max-height: 86%; display: flex; flex-direction: column; padding: 16px calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); gap: 12px; }
@media (min-width: 900px) { .sheet .panel { margin: auto 0 auto auto; width: 460px; height: 100%; max-height: none; border-top: 0; border-left: 4px solid var(--ink); } }
.sheet .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sheet .head h2 { font-size: 34px; }
.msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 160px; }
.msg { padding: 8px 12px; background: #fff; border-left: 6px solid var(--sc, var(--ink)); font-size: 16px; }
.msg .from { font-weight: 700; font-size: 13px; text-transform: uppercase; }
.msg.private { background: #111; color: #fff; }
.compose { display: flex; gap: 8px; }
.compose .field { text-transform: none; font-size: 18px; }
.result { justify-content: center; align-items: center; text-align: center; gap: 14px; background: var(--sc); }
.result img { height: min(38vh, 340px); }
.result h1 { font-size: clamp(48px, 12vw, 120px); color: var(--paper); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 6px 7px 0 var(--ink); }
.result p { font-size: 20px; font-weight: 700; text-transform: uppercase; margin: 0; }
.rules h3 { font-size: 26px; margin-top: 8px; }
.rules p { margin: 4px 0; font-size: 17px; line-height: 1.35; }
.rules .champ { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-top: 2px solid var(--ink); }
.rules .champ img { width: 70px; height: 76px; object-fit: contain; }
.rules .champ b { text-transform: uppercase; }
.htp { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.htp .step { background: var(--paper); border: 3px solid var(--ink); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.htp .step img { height: 120px; object-fit: contain; }
.htp .step h3 { font-size: 30px; }
.htp .step p { margin: 0; font-size: 18px; line-height: 1.3; }
[data-look="cutout"] .htp .step { box-shadow: 6px 7px 0 var(--ink); }
[data-look="signal"] .htp .step { border: 0; background: #fff; }

#toast { position: fixed; left: 50%; bottom: calc(var(--bottom) + var(--safe-b) + 14px); transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); font-weight: 700; padding: 12px 18px; font-size: 17px; opacity: 0; transition: .2s; pointer-events: none; z-index: 50; max-width: calc(100% - 32px); text-align: center; border: 3px solid var(--glow); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.tweaks { position: fixed; right: 12px; top: calc(12px + var(--safe-t)); z-index: 60; background: var(--paper); border: 3px solid var(--ink); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tweaks .label { color: var(--ink); }
@media (max-width: 420px) { .bottombar.spawning .endbtn { display: none; } }
@media (max-width: 360px) {
  .schip img { display: none; }
  .schip { padding-left: 6px; }
  .ctx { gap: 6px; }
  .ctx .btn.small { padding: 0 9px; font-size: 14px; min-height: 44px; }
  .armtoggle { padding: 0 7px; font-size: 13px; gap: 4px; }
  .armtoggle img { width: 22px; height: 22px; }
}