:root {
  --pink: #ff2e88; --cyan: #33e9ff; --sun: #ffcf3a; --violet: #8c1eff;
  --night: #0a0118;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); }
body {
  color: #f4e9ff; font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  user-select: none; -webkit-user-select: none; overscroll-behavior: none;
}

/* ---------- synthwave backdrop ---------- */
.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(#07000f 0%, #1b0438 38%, #4a0b63 60%, #12021f 60.2%, #0a0118 100%); }
.sky::after { /* scanlines */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
.sun { position: absolute; left: 50%; top: 60%; width: min(78vw, 52vh); aspect-ratio: 1;
  transform: translate(-50%, -100%); translate: 0 18%; border-radius: 50%; opacity: .5;
  background: linear-gradient(var(--sun) 10%, #ff7a3d 45%, var(--pink) 75%, var(--violet));
  -webkit-mask: linear-gradient(#000 0 50%, transparent 0) top / 100% 100% no-repeat,
    repeating-linear-gradient(#000 0 9px, transparent 9px 14px);
  mask: linear-gradient(#000 0 50%, transparent 0) top / 100% 100% no-repeat,
    repeating-linear-gradient(#000 0 9px, transparent 9px 14px);
  filter: drop-shadow(0 0 30px rgba(255,46,136,.6)); }
.floor { position: absolute; left: -50%; right: -50%; top: 60%; height: 80%;
  transform-origin: top; transform: perspective(260px) rotateX(62deg); opacity: .55;
  background:
    linear-gradient(90deg, rgba(255,46,136,.8) 1.5px, transparent 1.5px) 0 0 / 44px 44px,
    linear-gradient(0deg, rgba(255,46,136,.8) 1.5px, transparent 1.5px) 0 0 / 44px 44px;
  animation: drive 3s linear infinite; }
@keyframes drive { to { background-position: 0 44px, 0 44px; } }
@media (prefers-reduced-motion: reduce) { .floor { animation: none; } }

/* ---------- table ---------- */
#board { position: fixed; touch-action: none;
  top: env(safe-area-inset-top); bottom: env(safe-area-inset-bottom);
  left: env(safe-area-inset-left); right: env(safe-area-inset-right); }
.slot, .card { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch);
  border-radius: calc(var(--cw) * .13); }
.slot { border: 1.5px dashed rgba(51,233,255,.35); display: grid; place-items: center;
  color: rgba(51,233,255,.45); font: 700 calc(var(--cw) * .42)/1 system-ui, sans-serif;
  background: rgba(10,1,24,.35); }
.slot.found { border-color: rgba(255,207,58,.4); color: rgba(255,207,58,.45); }
.slot.stock { border-color: rgba(255,46,136,.45); color: rgba(255,46,136,.6); }

.card { transition: transform .2s cubic-bezier(.2,.8,.3,1); will-change: transform; }
.instant .card, .card.drag { transition: none; }
.card .face, .card .back { position: absolute; inset: 0; border-radius: inherit; }
.card .back { display: none;
  border: 1.5px solid var(--pink);
  background:
    radial-gradient(circle at 50% 46%, var(--sun) 0 14%, #ff7a3d 22%, var(--pink) 30%, transparent 31%),
    linear-gradient(transparent 62%, rgba(255,46,136,.0) 62%),
    repeating-linear-gradient(90deg, rgba(51,233,255,.28) 0 1px, transparent 1px 7px),
    linear-gradient(#2a0a52, #12002b 60%, #3a0756);
  box-shadow: 0 0 6px rgba(255,46,136,.55), 0 2px 6px rgba(0,0,0,.6); }
.card.down .back { display: block; }
.card.down .face { display: none; }
.card .face { --c: var(--cyan);
  background: linear-gradient(160deg, #2a1350 0%, #150832 55%, #0d0420 100%);
  border: 1.5px solid var(--c);
  box-shadow: 0 0 7px color-mix(in srgb, var(--c) 55%, transparent),
              inset 0 0 9px color-mix(in srgb, var(--c) 18%, transparent),
              0 2px 6px rgba(0,0,0,.65);
  color: var(--c); overflow: hidden; }
.card.red .face { --c: var(--pink); }
.rk, .st, .big { position: absolute; line-height: 1; text-shadow: 0 0 6px var(--c); }
.rk { top: 5%; left: 8%; font: 800 calc(var(--cw) * .38)/1 system-ui, sans-serif; letter-spacing: -.04em; }
.st { top: 6%; right: 8%; font-size: calc(var(--cw) * .32); }
.big { left: 0; right: 0; bottom: 9%; text-align: center; font-size: calc(var(--cw) * .66); opacity: .92; }
.card.court .big { font: 900 italic calc(var(--cw) * .58)/1 system-ui, sans-serif;
  background: linear-gradient(#fff, var(--c) 55%, #fff 56%, var(--c)); -webkit-background-clip: text;
  background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 4px var(--c)); }
.card.hint .face { animation: nope .32s; }
@keyframes nope { 25% { translate: -4px 0 } 75% { translate: 4px 0 } }
.card.drag .face, .card.drag .back { box-shadow: 0 0 14px var(--c, var(--pink)), 0 10px 22px rgba(0,0,0,.6); }

#score { position: fixed; z-index: 2000; right: calc(env(safe-area-inset-right) + 8px);
  top: calc(env(safe-area-inset-top) + 2px); background: none; border: 0; padding: 4px 6px;
  font: 700 15px/1 "Courier New", ui-monospace, monospace; letter-spacing: .12em;
  color: var(--sun); text-shadow: 0 0 6px #ff7a3d, 0 0 12px var(--pink); cursor: pointer; }

/* ---------- title / menu panel ---------- */
#panel { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; overflow: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 35%, rgba(42,10,82,.72), rgba(7,0,15,.92)); backdrop-filter: blur(3px); }
#panel[hidden] { display: none; }
.panel-inner { width: min(360px, 100%); text-align: center; }
#logo { margin: 0; font: 900 italic clamp(44px, 15vw, 70px)/1 "Arial Black", system-ui, sans-serif;
  letter-spacing: -.02em; transform: skew(-6deg);
  background: linear-gradient(#ffffff 0%, #a8f3ff 38%, #3a2a8a 49%, #ff2e88 51%, #ffb3d9 75%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 14px var(--pink)); }
.tag { margin: 6px 0 22px; font: italic 600 13px/1 system-ui, sans-serif; letter-spacing: .35em;
  text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }
#result { font: 800 22px/1.2 "Courier New", monospace; color: var(--sun); letter-spacing: .1em;
  text-shadow: 0 0 10px #ff7a3d; margin: -8px 0 18px; }
#panel button, dialog button {
  font: 800 14px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: #f4e9ff; background: rgba(10,1,24,.6); border: 1.5px solid var(--cyan); border-radius: 10px;
  min-height: 46px; padding: 0 18px; cursor: pointer; box-shadow: 0 0 10px rgba(51,233,255,.35); }
#panel button.hot { border-color: var(--pink); background: linear-gradient(90deg, #ff2e88, #8c1eff);
  box-shadow: 0 0 16px rgba(255,46,136,.6); }
.draw { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.draw button[aria-pressed="false"] { opacity: .45; box-shadow: none !important; }
.actions { display: flex; gap: 10px; justify-content: center; }
.actions button { flex: 1; }
.how { list-style: none; padding: 0; margin: 22px 0; font-size: 14px; color: #cdb8ee; }
.how li { padding: 3px 0; }
.how b { color: var(--cyan); font-weight: 700; }
#lab-install-open { border-color: var(--sun) !important; color: var(--sun) !important;
  box-shadow: 0 0 10px rgba(255,207,58,.3) !important; }
#lab-offline-status { font-size: 13px; color: #cdb8ee; min-height: 1em; }
dialog { max-width: min(26rem, 90vw); border: 1.5px solid var(--pink); border-radius: 14px;
  background: #160631; color: #f4e9ff; box-shadow: 0 0 24px rgba(255,46,136,.5); }
dialog::backdrop { background: rgba(7,0,15,.7); }
dialog h2 { margin-top: 0; color: var(--cyan); }
dialog button { margin: 4px 4px 0 0; }