:root {
  --letter2: #9fd3ff;
  --letter3: #2b6cb0;
  --word2: #f5c2ff;
  --word3: #ff8ecb;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background: linear-gradient(180deg, #020617 0%, #111827 55%, #172033 100%); color: #eff6ff; min-height: 100%; }
body { padding: 18px; }

.back-button {
  position: fixed;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  color: #60a5fa;
  font-weight: 800;
  font-size: 1.1em;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 100;
  backdrop-filter: blur(5px);
}

.back-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.app { max-width: 1440px; margin: 56px auto 0; display: grid; gap: 18px; }
header { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
header h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); }
header p { margin: 4px 0 0; color: #cbd5e1; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(56, 189, 248, .18); border: 1px solid rgba(56, 189, 248, .35); color: #dbeafe; font-size: .95rem; }
.panel { background: rgba(17, 24, 39, .92); border: 1px solid rgba(148, 163, 184, .18); border-radius: 24px; box-shadow: 0 18px 32px rgba(15, 23, 42, .35); padding: 16px; }
.topbar { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: stretch; }
@media (max-width: 1100px) { .topbar { grid-template-columns: 1fr; } }
.legend-grid { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 10px; }
.legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(15, 23, 42, .7); border: 1px solid rgba(148, 163, 184, .16); }
.legend-swatch { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: .85rem; border: 1px solid rgba(255,255,255,.17); }
.legend-swatch.dl { background: var(--letter2); color: #111827; }
.legend-swatch.tl { background: var(--letter3); color: #eff6ff; }
.legend-swatch.dw { background: var(--word2); color: #111827; }
.legend-swatch.tw { background: var(--word3); color: #111827; }
.legend-swatch.star { background: radial-gradient(circle, #fff7b6 0%, #fbbf24 45%, #f59e0b 100%); color: #111827; }
.controls-grid { display: grid; gap: 14px; }
.controls-row { display: flex; gap: 10px; flex-wrap: wrap; }
button { border: none; border-radius: 12px; padding: 10px 14px; font-size: .98rem; font-weight: 700; cursor: pointer; transition: transform .08s ease, opacity .2s ease; }
button:hover { transform: translateY(-1px); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, #38bdf8, #2563eb); color: #eff6ff; }
.btn-secondary { background: rgba(148, 163, 184, .16); color: #eff6ff; border: 1px solid rgba(148, 163, 184, .25); }
.btn-good { background: linear-gradient(135deg, #4ade80, #16a34a); color: #052e16; }
.btn-warning { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #111827; }
.status-box { padding: 12px 14px; border-radius: 14px; background: rgba(15, 23, 42, .75); border: 1px solid rgba(148, 163, 184, .18); color: #cbd5e1; min-height: 46px; }
.status-box strong { color: #eff6ff; }
.main-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: start; }
@media (max-width: 1200px) { .main-grid { grid-template-columns: 1fr; } }
.board-shell { overflow: auto; padding-bottom: 8px; }
.board { display: grid; grid-template-columns: repeat(15, minmax(28px, 1fr)); gap: 4px; width: min(92vw, 780px); }
.board-cell { position: relative; aspect-ratio: 1; border: 1px solid rgba(148, 163, 184, .25); border-radius: 8px; background: #172033; display: grid; place-items: center; text-align: center; font-size: .74rem; font-weight: 800; color: #eff6ff; user-select: none; transition: transform .08s ease, box-shadow .2s ease; }
.board-cell:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15, 23, 42, .32); }
.board-cell.drop-target { outline: 2px dashed #38bdf8; }
.board-cell.tile-cell { background: #1f2937; }
.board-cell.dl { background: linear-gradient(145deg, var(--letter2), #7cc4ff); color: #111827; }
.board-cell.tl { background: linear-gradient(145deg, var(--letter3), #1f4d86); color: #eff6ff; }
.board-cell.dw { background: linear-gradient(145deg, var(--word2), #e9a8f2); color: #111827; }
.board-cell.tw { background: linear-gradient(145deg, var(--word3), #ff6bac); color: #111827; }
.board-cell.star { background: radial-gradient(circle at 30% 30%, #fff7b6 0%, #fbbf24 45%, #f59e0b 100%); color: #111827; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.board-tile { width: 100%; height: 100%; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(145deg, #fef3c7, #fdba74); color: #111827; font-weight: 900; font-size: 1rem; border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 -4px 8px rgba(0,0,0,.12); }
.board-tile small { position: absolute; right: 4px; bottom: 2px; font-size: .62rem; font-weight: 800; color: #1f2937; }
.board-tile.placed { box-shadow: 0 0 0 2px #4ade80; }
.board-tile.joker { background: linear-gradient(145deg, #fde68a, #c084fc); }
.joker-mark { position: absolute; left: 4px; top: 2px; font-size: .62rem; font-weight: 900; color: #4c1d95; }
.score-card { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(15,23,42,.85); border: 1px solid rgba(56,189,248,.18); }
.score-value { font-size: 2rem; font-weight: 900; color: #f8fafc; }
.mini-label { color: #cbd5e1; font-size: .92rem; }
.info-card { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(15,23,42,.85); border: 1px solid rgba(148,163,184,.18); }
.info-card ul { margin: 0; padding-left: 18px; color: #cbd5e1; line-height: 1.35; }
.info-card li + li { margin-top: 6px; }
.rack-panel { display: grid; gap: 8px; }
.rack { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-height: 88px; padding: 12px; border-radius: 18px; background: rgba(15,23,42,.85); border: 1px solid rgba(148,163,184,.18); }
.rack.empty { opacity: .8; }
.rack-tile { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg, #fef3c7, #fdba74); color: #111827; font-size: 1.05rem; font-weight: 900; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 12px 18px rgba(15,23,42,.25); cursor: grab; position: relative; }
.rack-tile small { position: absolute; right: 4px; bottom: 2px; font-size: .62rem; font-weight: 800; color: #1f2937; }
.rack-tile.selected { outline: 3px solid #38bdf8; box-shadow: 0 0 0 5px rgba(56,189,248,.18); }
.rack-tile.joker { background: linear-gradient(145deg, #fde68a, #c084fc); }
.help-line { color: #cbd5e1; font-size: .95rem; }
@media (max-width: 640px) {
  body { padding: 10px; }
  .back-button {
    top: 10px;
    left: 10px;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 0.92em;
  }
  .app { margin-top: 64px; }
  .board { width: 100%; gap: 2px; }
  .board-cell { border-radius: 6px; font-size: .62rem; }
  .rack-tile { width: 48px; height: 48px; font-size: .94rem; }
}