:root{--ink:#181a1f;--muted:#666b75;--line:#d7d2c6;--paper:#f7f4ec;--panel:#fffdf7;--field:#ebe6da;--green:#1f7a5f;--red:#c93d35;--blue:#2767c7;--gold:#ad7b23;--shadow:0 18px 42px rgb(24 26 31/8%)}*{box-sizing:border-box}body,html{min-height:100%}body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}.shell{width:min(1080px,calc(100% - 32px));margin:0 auto;padding:28px 0}.topbar{justify-content:space-between;gap:16px;margin-bottom:28px}.brand,.topbar{display:flex;align-items:center}.brand{gap:12px;font-size:22px;font-weight:850;letter-spacing:0}.brand-mark{display:grid;width:44px;height:44px;place-items:center;color:white;background:var(--ink);border-radius:8px}.plain-home-link{color:var(--ink);text-decoration:none}.plain-home-link:hover{text-decoration:underline;text-underline-offset:4px}.stats{display:flex;gap:10px;color:var(--muted);font-size:13px}.hero{display:grid;grid-gap:18px;gap:18px;align-items:stretch;width:min(100%,860px);min-height:calc(100vh - 170px);margin:0 auto;align-content:center}.hero-copy{padding-top:0}.entry-panel,.game-panel,.side-panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.entry-panel{padding:18px}.compact-stats{display:grid;grid-template-columns:repeat(3,minmax(84px,auto));justify-content:flex-end;grid-gap:10px;gap:10px;margin-top:14px}.compact-stats div{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;min-width:84px;padding:8px 10px;background:rgb(24 26 31/4%);border:1px solid rgb(24 26 31/8%);border-radius:6px}.compact-stats span{color:var(--muted);font-size:12px;font-weight:720;padding-top:1px}.compact-stats strong{color:var(--ink);font-size:22px;font-weight:860;line-height:1;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.actions{display:grid;grid-gap:12px;gap:12px}.end-entry-panel .actions{grid-template-columns:1fr 1fr;align-items:stretch}.new-match-group,.rematch-group{display:grid;min-width:0;grid-gap:8px;gap:8px}.end-action-subtext{min-height:17px;color:var(--muted);font-size:12px;font-weight:680}.end-entry-panel .match-cancel,.end-entry-panel .primary-action{height:72px;min-height:72px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 16px;color:white;background:var(--ink);border:1px solid var(--ink);border-radius:7px;font-weight:720;text-decoration:none}.primary-action{position:relative;overflow:hidden;min-height:72px;font-size:22px}.match-control.is-queueing .match-status:before{position:absolute;inset:0;content:"";background:linear-gradient(90deg,transparent,rgb(255 255 255/16%),transparent);animation:queue-sweep 1.25s linear infinite;transform:translateX(-100%)}.match-control{display:grid;grid-template-columns:3fr 1fr;grid-gap:10px;gap:10px}.match-control .primary-action{min-width:0}.match-status:disabled{opacity:1}.match-cancel{min-width:0;min-height:72px;padding:0 10px;background:var(--red);border-color:var(--red);font-size:15px;line-height:1.15;white-space:normal}.primary-action>*{position:relative;z-index:1}.queue-dots{display:inline-flex;gap:4px;align-items:center}.queue-dots span{width:5px;height:5px;background:currentColor;border-radius:50%;animation:queue-dot .9s ease-in-out infinite}.queue-dots span:nth-child(2){animation-delay:.12s}.queue-dots span:nth-child(3){animation-delay:.24s}@keyframes queue-sweep{to{transform:translateX(100%)}}@keyframes queue-dot{0%,80%,to{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}.button.secondary{color:var(--ink);background:transparent}.button.green{background:var(--green);border-color:var(--green)}.button.danger{background:var(--red);border-color:var(--red)}.button.rematch-action{background:var(--green);border-color:var(--green)}.button.full-width{width:100%}.input-row{display:grid;grid-template-columns:1fr auto;grid-gap:10px;gap:10px}.code-field{position:relative;min-width:0}.invite-row{display:grid;grid-template-columns:minmax(190px,.62fr) minmax(280px,1fr);grid-gap:10px;gap:10px}.input{width:100%;min-width:0;height:46px;padding:0 14px;color:var(--ink);background:white;border:1px solid var(--line);border-radius:7px;text-transform:uppercase}.code-field .input{padding-right:46px}.code-visibility-button{position:absolute;top:50%;right:6px;display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;color:var(--muted);background:transparent;border:0;border-radius:7px;transform:translateY(-50%)}.code-visibility-button:focus-visible,.code-visibility-button:hover{color:var(--ink);background:var(--soft)}.button.icon-action{width:46px;min-width:46px;padding:0}.notice{min-height:22px;margin:14px 0 0;color:var(--muted);font-size:14px}.strong-notice{color:var(--ink);font-weight:740}.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px;gap:12px}.metric-card{display:grid;min-height:142px;align-content:space-between;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.metric-card span{color:var(--muted);font-size:18px;font-weight:760}.metric-card strong{color:var(--ink);font-size:clamp(44px,7vw,76px);line-height:.9;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.game-shell{display:grid;grid-template-columns:minmax(320px,1fr) 260px;grid-gap:16px;gap:16px;align-items:start}.game-panel{padding:clamp(14px,3vw,24px)}.board-wrap{width:min(100%,680px);margin:0 auto}.board{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,minmax(0,1fr));width:100%;aspect-ratio:1;background:var(--field);border:2px solid var(--ink);border-radius:8px}.board,.cell{position:relative;display:grid;overflow:hidden}.cell{min-width:0;min-height:0;place-items:center;padding:0;border-right:1px solid rgb(24 26 31/11%);border-bottom:1px solid rgb(24 26 31/11%);border-top:0;border-left:0;color:var(--ink);font-weight:820;font-size:clamp(13px,2vw,18px)}.cell.light{background:#f4efe3}.cell.dark{background:#d9d0bd}.cell:not(:disabled):not(.move-target):hover{outline:3px solid rgb(31 122 95/38%);outline-offset:-3px}.cell.move-target{z-index:1;color:var(--ink);background:#c7d8cb}.cell.move-target:before{position:absolute;inset:5px;content:"";border:3px solid rgb(31 122 95/46%);border-radius:6px;pointer-events:none}.cell.move-target:hover:before{border-color:rgb(31 122 95/68%)}.move-arrow{display:grid;width:30px;height:30px;place-items:center;color:var(--green);filter:drop-shadow(0 1px 0 rgb(255 253 247/86%))}.cell.selected{background:#c7d8cb}.cell.selected:after{position:absolute;inset:20%;content:"";border:2px solid var(--green);border-radius:6px}.cell:disabled{cursor:default;opacity:1}.goal,.piece,.wall-flash{position:absolute;pointer-events:none}.goal{z-index:2;display:grid;width:13%;height:13%;min-width:44px;min-height:44px;place-items:center;color:var(--red);background:transparent;border:0;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 0 rgb(255 253 247/92%)) drop-shadow(0 5px 7px rgb(24 26 31/20%))}.pawn-mark{display:block;color:currentColor;fill:color-mix(in srgb,currentColor 16%,transparent)}.piece{z-index:4;display:grid;width:15%;height:15%;min-width:48px;min-height:48px;place-items:center;background:transparent;border:0;transform:translate(calc(-50% + var(--piece-offset-x, 0%)),-50%);filter:drop-shadow(0 1px 0 rgb(255 253 247/92%)) drop-shadow(0 6px 8px rgb(24 26 31/24%));transition:left .16s ease,top .16s ease,transform .16s ease}.goal.a,.piece,.piece.a{color:var(--red)}.goal.b,.piece.b{color:var(--blue)}.me-label{position:absolute;top:-4px;left:50%;padding:2px 7px 3px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:820;line-height:1;transform:translateX(-50%);box-shadow:0 4px 8px rgb(24 26 31/12%)}.coin-overlay{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:18px;background:rgb(24 26 31/22%);pointer-events:none}.coin-card{display:grid;width:min(82%,300px);justify-items:center;grid-gap:8px;gap:8px;padding:20px 20px 18px;color:var(--ink);background:rgb(255 253 247/96%);border:1px solid rgb(215 210 198/92%);border-radius:8px;box-shadow:0 22px 50px rgb(24 26 31/22%)}.coin-card strong{font-size:clamp(17px,2.6vw,22px);line-height:1}.coin-kicker{color:var(--muted);font-size:12px;font-weight:760;line-height:1;text-transform:uppercase}.coin-subtext,.opponent-label{color:var(--muted);font-size:14px;font-weight:720;line-height:1.2}.viewer-team{color:var(--ink);margin-top:4px;font-size:clamp(26px,5vw,40px);font-weight:900;line-height:1}.viewer-team.a{color:var(--red)}.viewer-team.b{color:var(--blue)}.coin-token{display:grid;width:clamp(74px,14vw,112px);aspect-ratio:1;place-items:center;color:white;background:radial-gradient(circle at 34% 26%,rgb(255 255 255/88%),transparent 20%),linear-gradient(135deg,#fff1a8,#f0bd3f 52%,#c58a24);border:4px solid rgb(255 253 247/94%);border-radius:50%;box-shadow:inset 0 0 0 3px rgb(255 255 255/24%),0 14px 26px rgb(24 26 31/20%);font-size:clamp(42px,8vw,68px);font-weight:900;line-height:1}.coin-token.flipping{animation:coin-flip 1.2s ease-in-out infinite}.coin-token.a{color:white;background:radial-gradient(circle at 34% 26%,rgb(255 255 255/56%),transparent 20%),linear-gradient(135deg,#ff9088,#e64f46 58%,#b62c25)}.coin-token.b{color:white;background:radial-gradient(circle at 34% 26%,rgb(255 255 255/56%),transparent 20%),linear-gradient(135deg,#8db9ff,#3c7ee2 58%,#2059ad)}.coin-progress{width:100%;height:6px;overflow:hidden;background:rgb(24 26 31/10%);border-radius:999px}.coin-progress span{display:block;width:var(--coin-progress,0);height:100%;background:var(--ink);border-radius:inherit;transition:width .22s linear}.wall-flash{z-index:3;background:var(--red);border-radius:999px;animation:fade-wall 10s linear forwards;box-shadow:0 0 0 1px rgb(255 253 247/62%)}@keyframes coin-flip{0%{transform:rotateY(0deg) translateY(0) scale(1)}50%{transform:rotateY(180deg) translateY(-5px) scale(1.03)}to{transform:rotateY(1turn) translateY(0) scale(1)}}@keyframes fade-wall{0%{opacity:.95}to{opacity:0}}.side-panel{display:grid;align-content:start;grid-gap:14px;gap:14px;padding:16px}.opponent-profile{position:relative;display:flex;min-width:0;align-items:center;justify-content:space-between;gap:12px;overflow:hidden;padding:14px;color:var(--muted);background:white;border:1px solid var(--line);border-radius:8px}.opponent-icon{flex:0 0 auto;color:var(--muted)}.opponent-emote-burst{position:absolute;inset:0 auto 0 0;z-index:2;width:96px;pointer-events:none}.opponent-emote-icon{position:absolute;top:50%;left:29px;font-size:30px;line-height:1;opacity:0;transform:translate(-50%,-50%) scale(.88);animation:opponent-emote-float 2.4s ease-out forwards}.opponent-emote-icon.item-1{--emote-x:-14px;--emote-y:-24px}.opponent-emote-icon.item-2{--emote-x:14px;--emote-y:-20px;animation-delay:.16s}.opponent-emote-icon.item-3{--emote-x:0px;--emote-y:18px;animation-delay:.32s}.opponent-emote-label{position:absolute;top:50%;left:50px;padding:4px 8px;color:var(--ink);background:rgb(255 253 247/96%);border:1px solid var(--line);border-radius:999px;box-shadow:0 8px 20px rgb(24 26 31/12%);font-size:12px;font-weight:820;line-height:1;opacity:0;transform:translateY(-50%) scale(.96);animation:opponent-emote-label 2.4s ease-out forwards;white-space:nowrap}@keyframes opponent-emote-float{0%{opacity:0;transform:translate(-50%,-50%) scale(.88)}20%{opacity:1;transform:translate(calc(-50% + var(--emote-x) * .28),calc(-50% + var(--emote-y) * .28)) scale(1)}72%{opacity:1;transform:translate(calc(-50% + var(--emote-x) * .72),calc(-50% + var(--emote-y) * .72)) scale(1.03)}to{opacity:0;transform:translate(calc(-50% + var(--emote-x)),calc(-50% + var(--emote-y))) scale(1.06)}}@keyframes opponent-emote-label{0%,to{opacity:0;transform:translateY(-50%) scale(.96)}18%,76%{opacity:1;transform:translateY(-50%) scale(1)}}.opponent-profile strong{min-width:0;overflow:hidden;color:var(--ink);font-size:22px;line-height:1;text-align:right;text-overflow:ellipsis;white-space:nowrap}.opponent-meta{display:flex;justify-content:space-between;gap:10px}.turn-card{display:grid;grid-gap:6px;gap:6px;padding:15px;color:white;background:var(--ink);border-radius:8px}.turn-card.red{background:var(--red)}.turn-card.blue{background:var(--blue)}.turn-card.coin{background:var(--gold)}.turn-card.win{background:var(--green)}.turn-card.loss{background:var(--ink)}.turn-card span{font-size:13px;opacity:.82}.turn-card strong{font-size:30px;line-height:1}.round-stats{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}.round-stats div{display:flex;min-height:46px;align-items:flex-start;justify-content:space-between;gap:8px;padding:8px 10px;background:white;border:1px solid var(--line);border-radius:6px;color:var(--muted)}.round-stats span{padding-top:1px;font-size:12px;font-weight:720}.round-stats strong{color:var(--ink);font-size:22px;font-weight:860;line-height:1;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.emote-panel{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px}.emote-header{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}.emote-header strong{color:var(--ink);font-size:12px}.emote-button{display:inline-flex;min-width:0;min-height:42px;align-items:center;justify-content:center;gap:7px;padding:0 8px;color:var(--ink);background:white;border:1px solid var(--line);border-radius:7px;font-size:13px;font-weight:740}.emote-button:hover:not(:disabled){border-color:rgb(24 26 31/32%)}.log{display:grid;grid-gap:6px;gap:6px;max-height:180px;overflow:auto;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.45}.log strong{color:var(--ink);font-size:12px}.end-entry-panel{width:min(100%,680px);margin:18px auto 0;padding-top:18px;border-top:1px solid var(--line)}@media (max-width:860px){.game-shell,.hero{grid-template-columns:1fr}.hero-copy{padding-top:0}.stats{flex-wrap:wrap;justify-content:flex-end}.metric-grid{grid-template-columns:1fr}.metric-card{min-height:96px}.end-entry-panel .actions,.invite-row{grid-template-columns:1fr}}@media (max-width:520px){.shell{width:min(100% - 20px,1120px);padding:18px 0}.metric-card{min-height:112px}.input-row{grid-template-columns:1fr}.primary-action{min-height:62px}}