/* Crossword by Umami — Premium UI Program / Phase 1 design system */
:root{
  --cw-bg:#eef3ff;
  --cw-surface:#ffffff;
  --cw-surface-soft:#f7f9ff;
  --cw-ink:#11182b;
  --cw-muted:#6f7b92;
  --cw-line:#dce3f1;
  --cw-primary:#4f63ff;
  --cw-primary-2:#7d5cff;
  --cw-accent:#ffb23f;
  --cw-success:#29a879;
  --cw-danger:#ef5b6f;
  --cw-board-dark:#18243b;
  --cw-clue-cell:#dce9f7;
  --cw-answer-cell:#ffffff;
  --cw-selected:#e7ebff;
  --cw-selected-line:#5367ff;
  --cw-tile:#fffaf0;
  --cw-tile-edge:#dfcda8;
  --cw-shadow-sm:0 8px 24px rgba(27,43,85,.10);
  --cw-shadow-md:0 18px 48px rgba(27,43,85,.16);
  --cw-shadow-lg:0 30px 80px rgba(22,35,74,.24);
  --cw-radius-sm:12px;
  --cw-radius-md:20px;
  --cw-radius-lg:30px;
  --cw-touch:44px;
  --cw-board-gap:1px;
  --cw-motion-fast:140ms;
  --cw-motion-med:240ms;
  --cw-ease:cubic-bezier(.2,.8,.2,1);
}

.cw-clue-visual[data-clue-type="emoji"]{font-size:1.8em;line-height:1;letter-spacing:0}
.cw-clue-visual[data-clue-type="emoji_text"]{display:inline-flex;align-items:center;gap:.35em}

/* Phase-1 preview components: interaction architecture, not final Phase-2 art. */
.ui1-preview{min-height:100vh;background:radial-gradient(circle at 10% 0,#fff 0,transparent 28%),linear-gradient(145deg,#edf2ff,#f7f2ff);color:var(--cw-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:24px}
.ui1-shell{width:min(1180px,100%);margin:0 auto}
.ui1-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.ui1-brand{display:flex;align-items:center;gap:12px}.ui1-brandmark{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,var(--cw-primary),var(--cw-primary-2));color:white;font-weight:900;font-size:23px;box-shadow:var(--cw-shadow-sm)}.ui1-brand b{display:block;font-size:20px}.ui1-brand small{display:block;color:var(--cw-muted);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:9px}.ui1-phase{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--cw-line);color:#43506a;font-weight:800;font-size:11px}
.ui1-phone{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.8);box-shadow:var(--cw-shadow-lg);border-radius:34px;padding:14px;backdrop-filter:blur(16px)}
.ui1-hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:linear-gradient(135deg,#17223b,#30466f);color:#fff;border-radius:24px;padding:12px 16px;margin-bottom:12px}.ui1-player{display:flex;align-items:center;gap:10px}.ui1-player.right{justify-content:flex-end;text-align:right}.ui1-avatar{width:45px;height:45px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#5b6cff,#845eff);font-size:11px;font-weight:950}.ui1-avatar.ai{background:linear-gradient(145deg,#26aab8,#4874c9)}.ui1-score{font-size:26px;font-weight:950}.ui1-player small{display:block;opacity:.66;font-size:9px;text-transform:uppercase;letter-spacing:.12em}.ui1-vs{font-size:10px;font-weight:900;opacity:.6}
.ui1-game{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(270px,.7fr);gap:12px}.ui1-boardcard,.ui1-rail{background:rgba(255,255,255,.92);border-radius:25px;box-shadow:var(--cw-shadow-sm);padding:12px}.ui1-board{display:grid;grid-template-columns:repeat(7,1fr);aspect-ratio:7/8;background:#b8c5d8;gap:1px;border-radius:16px;overflow:hidden}.ui1-cell{position:relative;border:0;background:var(--cw-answer-cell);min-width:0;display:flex;align-items:center;justify-content:center;font-weight:950;font-size:clamp(16px,3.2vw,28px);color:#17223b}.ui1-cell.block{background:var(--cw-board-dark)}.ui1-cell.clue{background:linear-gradient(145deg,#dbe8f6,#cddff1);padding:5px;align-items:flex-start;justify-content:flex-start;text-align:left;font-size:clamp(7px,1vw,11px);font-weight:850;line-height:1.05;color:#152039;cursor:pointer}.ui1-cell.clue .arrow{position:absolute;right:4px;bottom:2px;font-size:14px;color:#657792}.ui1-cell.clue.emoji{font-size:clamp(20px,3vw,34px);align-items:center;justify-content:center}.ui1-cell.lane{background:#edf0ff;box-shadow:inset 0 0 0 2px rgba(79,99,255,.35)}.ui1-cell.focus{background:#dce3ff;box-shadow:inset 0 0 0 3px var(--cw-primary)}
.ui1-rail{display:flex;flex-direction:column;gap:10px}.ui1-turn{padding:13px;border-radius:18px;background:linear-gradient(145deg,#f6f8ff,#fff);border:1px solid #e7ebf5}.ui1-turn small{display:block;color:var(--cw-primary);font-weight:950;letter-spacing:.14em;text-transform:uppercase;font-size:9px}.ui1-turn h2{font-size:18px;margin:5px 0 4px}.ui1-turn p{font-size:11px;color:var(--cw-muted);margin:0}.ui1-rack{display:flex;gap:8px;justify-content:center;padding:8px 0}.ui1-tile{width:52px;height:59px;border:0;border-radius:13px;background:linear-gradient(#fffdf7,#f7edd9);box-shadow:0 5px 0 var(--cw-tile-edge),0 11px 20px rgba(42,49,69,.14);font-size:22px;font-weight:950;color:#1a2437;transition:transform var(--cw-motion-fast) var(--cw-ease)}.ui1-tile.selected{transform:translateY(-6px);outline:3px solid rgba(79,99,255,.28);color:var(--cw-primary)}.ui1-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.ui1-action{min-height:48px;border:0;border-radius:13px;background:#f0f3f9;color:#25334d;font-weight:850;font-size:10px}.ui1-action.primary{background:linear-gradient(145deg,var(--cw-primary),var(--cw-primary-2));color:#fff}.ui1-contract{margin-top:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.ui1-contract div{padding:11px;border-radius:16px;background:rgba(255,255,255,.75);border:1px solid rgba(214,222,241,.9)}.ui1-contract b{display:block;font-size:11px}.ui1-contract span{font-size:9px;color:var(--cw-muted)}
@media(max-width:760px){.ui1-preview{padding:8px}.ui1-top{padding:6px 4px}.ui1-phase{display:none}.ui1-phone{padding:7px;border-radius:24px}.ui1-game{grid-template-columns:1fr}.ui1-rail{padding:10px}.ui1-boardcard{padding:6px}.ui1-board{border-radius:12px}.ui1-turn{display:none}.ui1-rack{order:2}.ui1-actions{order:3}.ui1-contract{grid-template-columns:1fr 1fr}.ui1-hud{border-radius:17px;padding:8px 10px}.ui1-avatar{width:38px;height:38px;border-radius:12px}.ui1-score{font-size:21px}.ui1-tile{width:min(17vw,56px);height:min(19vw,62px)}}
@media(prefers-reduced-motion:reduce){.ui1-tile{transition:none}}