@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap');

/* PALETTE (3 colors + black/white only):
   --honey #FFD02F · --pink #FF3EA5 · --cyan #22E6FF · --ink #0A0A0A · --paper #FFFDF5 */
:root{
  --honey:#FFD02F; --pink:#FF3EA5; --cyan:#22E6FF;
  --ink:#0A0A0A; --paper:#FFFDF5;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif; font-size:16px; line-height:1.45;
  background-image:
    radial-gradient(var(--ink) 1px, transparent 1.2px),
    linear-gradient(var(--honey) 0 8px, transparent 8px);
  background-size:26px 26px, 100% 8px;
  background-position:0 8px, 0 0;
}
::selection{background:var(--pink); color:#fff}

/* ticker */
.ticker{background:var(--ink); color:var(--honey); overflow:hidden; border-bottom:3px solid var(--ink); white-space:nowrap}
.ticker-inner{display:inline-block; padding:8px 0; font-weight:700; letter-spacing:.06em; font-size:13px; animation:tick 22s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

#app{max-width:1080px; margin:0 auto; padding:22px 16px 40px}

/* hero */
.hero{display:grid; grid-template-columns:1.2fr .9fr; gap:18px; margin:20px 0}
.kicker{display:inline-block; background:var(--ink); color:#fff; font-weight:700; font-size:12px; letter-spacing:.12em; padding:6px 10px; border-radius:8px; transform:rotate(-1.5deg)}
h1{font-family:'Archivo Black',sans-serif; font-size:clamp(52px,8vw,96px); line-height:.92; margin:12px 0 10px; letter-spacing:-.01em}
h1 .buz{font-size:.6em; vertical-align:middle; filter:saturate(2)}
.tagline{font-size:17px; max-width:44ch; background:#fff; border:3px solid var(--ink); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm)}
.tagline strong{background:var(--honey); padding:0 6px; border:2px solid var(--ink); border-radius:6px}
.btnrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.btn{font-family:'Archivo Black',sans-serif; font-size:15px; letter-spacing:.02em; border:3px solid var(--ink); border-radius:12px; padding:12px 18px; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .08s, box-shadow .08s}
.btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.btn-honey{background:var(--honey)}
.btn-pink{background:var(--pink); color:#fff}
.btn-cyan{background:var(--cyan)}
.btn-ghost{background:#fff}

/* cards */
.card{background:#fff; border:3px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px}
.card h3{font-family:'Archivo Black',sans-serif; font-size:16px; margin:0 0 10px; letter-spacing:.04em}
.hud{transform:rotate(1deg); position:sticky}
.hud-top{display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:13px; letter-spacing:.1em; margin-bottom:10px}
.badge{background:var(--ink); color:var(--honey); border-radius:999px; padding:4px 12px; font-size:14px}
.hud-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.stat{border:3px solid var(--ink); border-radius:10px; padding:8px 10px; background:var(--paper)}
.stat:nth-child(1){background:var(--honey)} .stat:nth-child(2){background:var(--pink); color:#fff}
.stat:nth-child(3){background:#fff} .stat:nth-child(4){background:var(--cyan)}
.stat label{display:block; font-size:11px; font-weight:700; letter-spacing:.1em}
.stat b{font-family:'Archivo Black',sans-serif; font-size:24px}
.combo{margin-top:10px; text-align:center; font-family:'Archivo Black',sans-serif; background:var(--ink); color:var(--cyan); border-radius:10px; padding:8px; letter-spacing:.06em}
.combo.hot{color:var(--honey); animation:pulse .4s infinite alternate}
@keyframes pulse{to{transform:scale(1.03)}}
.hud-btns{display:flex; gap:8px; margin-top:10px}
.mini{flex:1; font-weight:700; border:3px solid var(--ink); border-radius:10px; background:#fff; padding:8px; cursor:pointer}
.mini:hover{background:var(--honey)}

/* board */
.board-wrap{display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start}
.board-frame{background:#fff; border:4px solid var(--ink); border-radius:18px; box-shadow:8px 8px 0 var(--ink); overflow:hidden; position:relative}
.board-head{display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--ink); color:#fff; font-size:12px; font-weight:700; letter-spacing:.08em; padding:10px 14px}
.board-head .dots{display:flex; gap:6px}
.board-head .dots i{width:12px; height:12px; border-radius:50%; display:block}
.board-head .dots i:nth-child(1){background:var(--honey)} .board-head .dots i:nth-child(2){background:var(--pink)} .board-head .dots i:nth-child(3){background:var(--cyan)}
#game{display:block; width:100%; height:auto; background:var(--ink); touch-action:none; cursor:crosshair}
.overlay{position:absolute; inset:41px 0 0 0; display:grid; place-items:center; background:rgba(10,10,10,.55); padding:16px}
.overlay[hidden]{display:none}
.overlay-card{background:var(--paper); border:4px solid var(--ink); border-radius:16px; box-shadow:8px 8px 0 var(--pink); padding:24px; max-width:380px; text-align:center; transform:rotate(-1deg)}
.overlay-card h2{font-family:'Archivo Black',sans-serif; font-size:38px; margin:4px 0 8px}
.ov-kicker{font-weight:700; letter-spacing:.14em; font-size:12px; background:var(--cyan); display:inline-block; padding:4px 10px; border:2px solid var(--ink); border-radius:999px}
.touchpad-hint{text-align:center; font-size:12px; font-weight:700; letter-spacing:.05em; padding:8px; background:var(--honey); border-top:3px solid var(--ink)}

/* side */
.side{display:grid; gap:18px}
.log{margin:0; padding-left:22px; max-height:180px; overflow:auto; font-size:13px}
.log li{margin:4px 0}
.muted{font-size:13px; opacity:.75; margin:0 0 10px}
.share-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.share-grid .btn{font-size:12px; padding:10px 8px}
.share-msg{font-size:13px; font-weight:700; min-height:20px; margin:10px 0 0}
.share-card{transform:rotate(-.6deg)}

.howto{margin-top:18px}
.howto ul{margin:0; padding-left:20px}
.howto li{margin:6px 0}
kbd{background:var(--ink); color:#fff; border-radius:6px; padding:1px 7px; font-family:inherit; font-size:13px}
.c-pink{background:var(--pink); color:#fff; padding:0 6px; border-radius:6px}
.c-honey{background:var(--honey); padding:0 6px; border:2px solid var(--ink); border-radius:6px}
.c-cyan{background:var(--cyan); padding:0 6px; border-radius:6px}

.foot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:22px; font-size:13px; font-weight:500}
.linklike{background:none; border:none; text-decoration:underline; cursor:pointer; font:inherit}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .board-wrap{grid-template-columns:1fr}
  .hud{transform:none}
  .share-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  #app{padding:14px 10px 30px}
  .btn{font-size:13px; padding:10px 12px}
  .share-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ticker-inner{animation:none}
  *{transition:none !important}
}