:root {
  --wc-bg: #0f1218;
  --wc-surface: #191f29;
  --wc-surface-2: #222a36;
  --wc-line: #2e3847;
  --wc-face: #eae5d8;
  --wc-ink: #11141a;
  --wc-text: #e7eaf0;
  --wc-muted: #8a96a8;
  --wc-chain: #3dbe8b;
  --wc-pool: #ffc24b;
  --wc-bad: #e2685c;
  box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

html { background: var(--wc-bg); }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--wc-bg);
  color: var(--wc-text);
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button, a { -webkit-tap-highlight-color: transparent; }

.wc-topbar {
  height: 58px;
  padding: max(12px, env(safe-area-inset-top)) 16px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--wc-line);
  background: rgba(15, 18, 24, .92);
}

.wc-brand, .wc-guide { color: var(--wc-text); text-decoration: none; }
.wc-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.wc-brand img { border-radius: 7px; }
.wc-guide { color: var(--wc-muted); font-size: .78rem; }
.wc-guide:hover { color: var(--wc-chain); }

.wc-wrap { max-width: 620px; margin: 0 auto; padding: 18px 14px 270px; }
.wc-hud { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.wc-hud h1 { margin: 0; font-size: 1.1rem; letter-spacing: -.01em; }
.wc-stat { margin-left: auto; display: flex; gap: 16px; color: var(--wc-muted); font-size: .75rem; text-align: right; }
.wc-stat b { display: block; color: var(--wc-text); font-size: 1.05rem; line-height: 1.2; }
.wc-stat .wc-chain b { color: var(--wc-chain); }
.wc-stat b.wc-bump { animation: wc-bump .25s ease; }

.wc-source {
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--wc-line);
  border-radius: 999px;
  color: var(--wc-muted);
  font-size: .72rem;
}
.wc-source::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wc-muted); }
.wc-source.wc-ok::before { background: var(--wc-chain); }
.wc-source.wc-warn { color: var(--wc-bad); border-color: rgba(226, 104, 92, .4); }
.wc-source.wc-warn::before { background: var(--wc-bad); }
.wc-lede { margin: 0 0 18px; color: var(--wc-muted); font-size: .82rem; line-height: 1.55; }

.wc-modes { display: flex; gap: 5px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--wc-line); border-radius: 11px; background: var(--wc-surface); }
.wc-modes button { flex: 1; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--wc-muted); cursor: pointer; font: inherit; font-size: .8rem; }
.wc-modes button[aria-pressed="true"] { background: var(--wc-surface-2); color: var(--wc-text); }

.wc-board { display: flex; flex-direction: column; gap: 10px; }
.wc-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--wc-line); border-radius: 14px; background: var(--wc-surface); transition: transform .38s, opacity .38s, border-color .18s, background .2s; }
.wc-row.wc-hot { border-color: var(--wc-pool); }
.wc-row.wc-solved { border-color: var(--wc-chain); background: rgba(61, 190, 139, .12); }
.wc-row.wc-leaving { transform: translateX(130%); opacity: 0; }
.wc-row.wc-entering { animation: wc-slide-in .34s cubic-bezier(.2, .8, .3, 1); }
.wc-cells { display: flex; flex-wrap: wrap; gap: 6px; }
.wc-cell {
  position: relative;
  width: 44px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--wc-face);
  color: var(--wc-ink);
  cursor: grab;
  font-size: 1.25rem;
  font-weight: 700;
  touch-action: none;
  user-select: none;
  transition: transform .12s, opacity .12s, background .15s, border-color .15s;
}
.wc-cell.wc-drop { box-shadow: inset 0 0 0 3px var(--wc-chain); }
.wc-cell.wc-drop::before { content: "↓"; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); color: var(--wc-chain); font-size: .8rem; }
.wc-cell.wc-blank { border: 2px dashed var(--wc-line); background: transparent; cursor: default; }
.wc-cell.wc-blank.wc-drop { border-color: var(--wc-chain); box-shadow: none; }
.wc-cell.wc-over { transform: scale(1.1); }
.wc-cell.wc-blank.wc-over { border-color: var(--wc-pool); background: rgba(255, 194, 75, .15); }
.wc-cell.wc-popping { animation: wc-pop .32s ease; }
.wc-lifting { opacity: .25; }
.wc-life { margin-left: auto; color: var(--wc-muted); font-size: .74rem; white-space: nowrap; }

.wc-dock { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; padding: 18px 14px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(15, 18, 24, 0), var(--wc-bg) 18%); pointer-events: none; }
.wc-dock-inner { max-width: 620px; margin: 0 auto; pointer-events: auto; }
.wc-pool-head { margin: 0 4px 7px; display: flex; align-items: center; justify-content: space-between; color: var(--wc-muted); font-size: .76rem; }
.wc-pool-head strong { color: var(--wc-text); font-size: .82rem; }
.wc-pool-head strong.wc-danger { color: var(--wc-bad); }
.wc-hand { min-height: 72px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; overflow-x: auto; border: 1px solid var(--wc-line); border-radius: 14px; background: var(--wc-surface); }
.wc-tile { position: relative; min-width: 46px; width: 46px; height: 54px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--wc-pool); color: #3a2600; cursor: grab; font: inherit; font-size: 1.3rem; font-weight: 700; touch-action: none; user-select: none; }
.wc-tile.wc-fresh::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border: 2px solid var(--wc-surface); border-radius: 50%; background: var(--wc-chain); }
.wc-tile.wc-arriving { animation: wc-drop-in .3s ease; }
.wc-tile.wc-back { animation: wc-back .35s ease; }
.wc-tile.wc-joker-target { box-shadow: inset 0 0 0 3px var(--wc-pool); animation: wc-bump .7s ease infinite; }
.wc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.wc-draw, .wc-joker, .wc-undo { padding: 9px 13px; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 700; white-space: nowrap; }
.wc-draw { border: 1px solid rgba(255, 194, 75, .55); background: var(--wc-pool); color: #3a2600; }
.wc-joker, .wc-undo { border: 1px solid var(--wc-line); background: var(--wc-surface-2); color: var(--wc-text); }
.wc-joker.wc-active { box-shadow: inset 0 0 0 2px var(--wc-pool); color: var(--wc-pool); }
.wc-draw:disabled, .wc-joker:disabled, .wc-undo:disabled { opacity: .4; cursor: not-allowed; }
.wc-help { color: var(--wc-muted); font-size: .7rem; line-height: 1.35; }
.wc-joker-picker { display: none; flex-wrap: wrap; gap: 5px; margin-top: 8px; padding: 9px; border: 1px solid var(--wc-line); border-radius: 12px; background: var(--wc-surface); }
.wc-joker-picker.wc-show { display: flex; }
.wc-joker-letter { width: 34px; height: 34px; border: 0; border-radius: 7px; background: var(--wc-face); color: var(--wc-ink); cursor: pointer; font: inherit; font-weight: 700; }
.wc-message { min-height: 1.3em; margin: 9px 4px 0; color: var(--wc-muted); font-size: .8rem; }
.wc-message.wc-good { color: var(--wc-chain); }
.wc-message.wc-warn { color: var(--wc-bad); }
.wc-meaning { color: var(--wc-muted); font-style: italic; }
.wc-gameover { padding: 18px; border: 1px solid var(--wc-line); border-radius: 14px; background: var(--wc-surface); text-align: center; }
.wc-gameover h2 { margin: 0 0 6px; font-size: 1.2rem; }
.wc-gameover p { margin: 0; color: var(--wc-muted); font-size: .82rem; }
.wc-ghost, .wc-flier { position: fixed; z-index: 80; width: 46px; height: 54px; display: grid; place-items: center; border-radius: 8px; pointer-events: none; font: 700 1.3rem "Space Grotesk", sans-serif; }
.wc-ghost { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.wc-flier { z-index: 70; width: 44px; height: 52px; background: var(--wc-face); color: var(--wc-ink); box-shadow: inset 0 0 0 3px var(--wc-chain); transition: transform .44s cubic-bezier(.3, .72, .33, 1), background .44s, color .44s; }

@keyframes wc-bump { 50% { transform: scale(1.35); } }
@keyframes wc-slide-in { from { transform: translateX(-40px); opacity: 0; } }
@keyframes wc-pop { 55% { transform: scale(1.2) translateY(-6px); } }
@keyframes wc-drop-in { from { transform: translateY(-16px) scale(.85); opacity: 0; } }
@keyframes wc-back { 0% { transform: translateY(-26px); } 60% { transform: translateY(4px); } }

@media (max-width: 430px) {
  .wc-wrap { padding-bottom: 250px; }
  .wc-cell { width: 37px; height: 45px; font-size: 1.05rem; }
  .wc-tile { min-width: 41px; width: 41px; height: 49px; font-size: 1.15rem; }
  .wc-life { display: none; }
  .wc-help { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}