.pill-match-hud { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:22px 0 12px; padding:11px 13px; border:3px solid #123d38; border-radius:9px; background:#123d38; color:#fff8e4; font:10px 'Press Start 2P',monospace; }
.pill-match-hud strong { color:#ffd36c; font-size:13px; }.pill-match-hud span:last-child { color:#b9ded1; font-family:'DM Sans',sans-serif; font-size:13px; }
.pill-board-wrap { position:relative; max-width:510px; margin:0 auto; padding:15px; border:4px solid #123d38; border-radius:14px; background:linear-gradient(135deg,#eaf8ef,#c9e9d7); box-shadow:7px 7px #123d38; }
.pill-board { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; touch-action:none; user-select:none; }
.match-pill { aspect-ratio:1; border:3px solid #123d38; box-shadow:2px 3px #123d38; cursor:crosshair; transition:transform .12s,filter .12s; }.match-pill.sun { border-radius:50%; background:radial-gradient(circle at 32% 28%,#fff8b8 0 12%,#ffd64a 14% 68%,#e39322 70%); }.match-pill.rose { border-radius:50% 50% 12px 12px; background:linear-gradient(135deg,#ffbdc1,#e54f68 60%,#b52e47); }.match-pill.violet { border-radius:9px; transform:rotate(45deg) scale(.78); background:linear-gradient(135deg,#ded0ff,#9073dd 58%,#6443ad); }.match-pill.mint { border-radius:18px; background:linear-gradient(90deg,#f4fff9 0 45%,#48b997 46% 100%); }.match-pill.in-chain { filter:brightness(1.25); outline:4px solid #fff; transform:translateY(-5px) scale(1.08); box-shadow:0 0 0 4px #f5a33b, 2px 6px #123d38; position:relative; z-index:2; }.match-pill.violet.in-chain { transform:rotate(45deg) translate(-4px,-4px) scale(.9); }
.board-hint { min-height:24px; text-align:center; padding-top:12px; font-weight:700; color:#0f7168; }.next-level:disabled { cursor:not-allowed; opacity:.45; filter:grayscale(.8); box-shadow:0 4px 0 #6f7773; }
.pill-board-wrap.round-complete { opacity:.28; filter:grayscale(.7); pointer-events:none; }.round-one-summary { margin:24px auto 0; max-width:430px; padding:24px; text-align:center; border:4px solid #123d38; border-radius:14px; background:#fff5c9; box-shadow:7px 7px #123d38; animation:score-pop .35s ease-out; }.round-score { display:grid; gap:5px; margin:14px 0; }.round-score span,.round-score small { color:#55716c; }.round-score b { font:700 68px/1 'Press Start 2P',monospace; color:#e55d44; text-shadow:4px 4px #f5cf69; }.round-one-summary .next-level { margin-top:8px; }.round-one-summary[hidden] { display:none; }@keyframes score-pop { from { opacity:0; transform:scale(.85) rotate(-2deg); } to { opacity:1; transform:scale(1) rotate(0); } }
@media(max-width:650px){.pill-match-hud{font-size:8px}.pill-match-hud span:last-child{display:none}.pill-board-wrap{padding:10px}.pill-board{gap:5px}}