:root { color-scheme: dark; --ink:#eaf7f5; --muted:#88a9aa; --deep:#071c2a; --panel:#0b2735; --panel-2:#103748; --line:#244b56; --aqua:#5ee3d1; --sun:#ffd079; --coral:#ff8b76; --water:#1f8d9b; --water-hi:#53d3cc; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--deep); overscroll-behavior-y:contain; }
body { font-family:'Trebuchet MS','Segoe UI',sans-serif; color:var(--ink); background-color:var(--deep); background-image:linear-gradient(#082b38a8,#082b38a8),url('assets/backgrounds/bg_tide_garden_day_portrait.webp'); background-size:cover; background-position:center; background-attachment:fixed; }
button { font:inherit; color:inherit; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:2px solid var(--aqua); outline-offset:3px; }
.app-shell { width:min(100%, 940px); margin:0 auto; padding:24px clamp(16px,4vw,42px) 20px; }
.topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.brand-lockup,.level-meta,.top-actions,.status-row,.goal-card,.water-readout,.combo-readout,.dock-heading,.dock-actions,.result-actions { display:flex; align-items:center; }
.brand-lockup { gap:12px; }.brand-mark { position:relative; width:40px; height:34px; border:2px solid var(--aqua); border-radius:50% 50% 42% 42%; transform:rotate(-8deg); overflow:hidden; }.brand-mark span { position:absolute; width:54px; height:2px; left:-7px; background:var(--aqua); opacity:.7; }.brand-mark span:nth-child(1){top:11px;transform:rotate(9deg)}.brand-mark span:nth-child(2){top:19px;transform:rotate(-4deg)}.brand-mark span:nth-child(3){top:27px;transform:rotate(7deg)}
.eyebrow { margin:0 0 4px; font:500 10px/1 'DM Mono',monospace; letter-spacing:.16em; color:var(--aqua); }.brand-lockup h1 { margin:0; font-size:23px; letter-spacing:-.04em; }.level-meta { flex-direction:column; gap:5px; text-align:center; font:500 11px 'DM Mono',monospace; letter-spacing:.14em; color:var(--muted); }.level-meta strong { color:var(--ink); font-size:13px; }.top-actions { justify-content:flex-end; gap:8px; }.icon-button { width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#0e3040;color:var(--aqua);font-size:17px; }.icon-button:hover { background:var(--panel-2); }
.status-row { justify-content:space-between; margin:24px 0 14px; gap:12px; }.goal-card,.water-readout,.combo-readout,.score-readout { gap:10px; }.goal-card b,.water-readout b,.combo-readout b,.score-readout b { display:block; font-size:14px; }.goal-card small,.water-readout small,.combo-readout small,.score-readout small { display:block; margin-top:3px; color:var(--muted); font:500 9px 'DM Mono',monospace; letter-spacing:.08em; }.goal-icon { display:grid; place-items:center; width:30px;height:30px;border-radius:10px;background:#193c49;color:var(--sun); }.pulse-dot { width:8px;height:8px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 5px #174450; }.combo-readout { opacity:.42;transition:.18s }.combo-readout.active { opacity:1 }.combo-wave { display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#3c3150;color:#dcbcff;font-size:21px }.combo-readout.active .combo-wave { box-shadow:0 0 0 5px #a66de51c;color:#efd5ff }.text-button { margin-left:auto; padding:8px 0; color:var(--muted); background:none; font-size:13px; }.text-button:hover { color:var(--ink); }
.board-wrap { position:relative; width:100%; border:1px solid var(--line); border-radius:24px; background:#082634; box-shadow:0 18px 60px #03131c99, inset 0 1px #ffffff0b; overflow:hidden; }.board-wrap:before { content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#ffffff08,transparent 35%);z-index:1; }.board-wrap canvas { display:block;width:100%;height:auto;touch-action:none; }.board-toast { position:absolute; top:14px;left:50%;transform:translate(-50%,-10px);opacity:0;padding:8px 13px;border:1px solid #ffffff22;border-radius:999px;background:#082633d9;color:var(--ink);font:500 11px 'DM Mono',monospace;letter-spacing:.06em;pointer-events:none;transition:.2s;z-index:3;white-space:nowrap; }.board-toast.show { opacity:1;transform:translate(-50%,0); }.pause-panel { position:absolute;inset:0;z-index:5;display:grid;place-content:center;text-align:center;background:#061d2be8;backdrop-filter:blur(5px); }.pause-panel h2 { margin:12px 0 24px;font-size:34px;line-height:.95;letter-spacing:-.06em; }.pause-panel[hidden],.result-modal[hidden] { display:none; }
.dock { margin-top:14px;padding:14px 16px 16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#0c2b3a,#092432); }.dock-heading { justify-content:space-between;color:var(--muted);font:500 10px 'DM Mono',monospace;letter-spacing:.12em; }.piece-tray { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0; }.piece-card { position:relative;min-height:88px;display:grid;place-items:center;border:1px solid #295363;border-radius:14px;background:#0d3242;transition:.18s; }.piece-card:hover,.piece-card.selected { border-color:var(--aqua);background:#113d4a;transform:translateY(-2px); }.piece-card.used { opacity:.27;pointer-events:none; }.piece-card small { position:absolute;right:9px;bottom:7px;color:var(--muted);font:10px 'DM Mono',monospace; }.piece-grid { display:grid;gap:3px; }.piece-cell { width:15px;height:15px;border-radius:4px;background:linear-gradient(135deg,#d68f63,#915536);box-shadow:inset 2px 2px #ffc18a44, 0 2px #06172188; }.piece-card.selected .piece-cell { background:linear-gradient(135deg,#f3b372,#af6139); }.dock-actions { justify-content:space-between;gap:8px; }.secondary-button,.primary-button { padding:10px 14px;border-radius:10px;font-size:12px;font-weight:600; }.secondary-button { border:1px solid var(--line);background:#0d3040;color:var(--muted); }.secondary-button:hover:not(:disabled) { border-color:var(--aqua);color:var(--ink); }.secondary-button:disabled { opacity:.35;cursor:not-allowed; }.primary-button { background:var(--aqua);color:#06242a;box-shadow:0 5px 15px #5ee3d133; }.primary-button:hover { background:#89f2e1;transform:translateY(-1px); }.level-strip { display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 8px; }.level-dot { width:29px;height:29px;border-radius:50%;border:1px solid var(--line);background:#0a2b3a;color:var(--muted);font:11px 'DM Mono',monospace; }.level-dot.current { border-color:var(--aqua);color:var(--aqua);box-shadow:0 0 0 3px #5ee3d11c; }.level-dot.done { background:#174b50;color:var(--sun);border-color:#39746d; }.level-dot:disabled { opacity:.4;cursor:not-allowed; }.level-dot:hover:not(:disabled) { border-color:var(--aqua); }.app-shell footer { display:flex;justify-content:space-between;margin-top:26px;color:#52767b;font:10px 'DM Mono',monospace;letter-spacing:.06em; }
.result-modal { position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#041821bb;backdrop-filter:blur(8px); }.result-card { width:min(100%,380px);padding:38px 30px 30px;border:1px solid #35646c;border-radius:24px;background:linear-gradient(145deg,#103746,#092632);box-shadow:0 24px 80px #020e14aa;text-align:center; }.result-sparkle { margin:0 auto 12px;font-size:27px;color:var(--sun); }.result-card h2 { margin:10px 0 8px;font-size:40px;letter-spacing:-.07em; }.result-card p:not(.eyebrow) { margin:0 auto 17px;color:var(--muted);font-size:14px;line-height:1.5; }.star-row { margin:17px 0 24px;color:var(--sun);font-size:28px;letter-spacing:8px; }.result-actions { justify-content:center;gap:9px; }
@media (max-width:560px) { .app-shell{padding-top:14px}.topbar{gap:10px}.brand-mark{width:34px;height:29px}.brand-lockup h1{font-size:20px}.level-meta{font-size:9px}.status-row{margin-top:18px;display:grid;grid-template-columns:1fr 1fr}.status-row small{font-size:8px}.combo-readout{display:none}.text-button{position:absolute;right:18px;top:75px}.board-wrap{border-radius:18px}.dock{padding:12px}.piece-card{min-height:78px}.piece-cell{width:13px;height:13px}.app-shell footer{font-size:8px} }
.score-readout small { margin-left:8px; }
.piece-card { touch-action:none; user-select:none; -webkit-user-select:none; }
@media (max-width:760px) {
  .app-shell { width:100%; padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
  .topbar { grid-template-columns:1fr auto auto; gap:8px; min-height:44px; }
  .brand-lockup { gap:8px; }
  .brand-mark { width:31px; height:27px; }
  .brand-lockup .eyebrow { display:none; }
  .brand-lockup h1 { font-size:18px; }
  .level-meta { align-items:flex-end; font-size:8px; letter-spacing:.08em; }
  .level-meta strong { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
  .top-actions { gap:5px; }
  .icon-button { width:44px; height:44px; }
  .status-row { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; margin:8px 0; padding-right:42px; }
  .goal-card,.water-readout,.score-readout { gap:6px; min-width:0; }
  .goal-icon { width:26px; height:26px; }
  .goal-card b,.water-readout b,.score-readout b { font-size:11px; white-space:nowrap; }
  .goal-card small,.water-readout small,.score-readout small { font-size:7px; line-height:1.15; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pulse-dot { width:6px; height:6px; box-shadow:0 0 0 3px #174450; }
  .score-readout small { margin-left:0; }
  .text-button { position:absolute; right:0; top:50%; width:38px; min-height:44px; margin:0; padding:0; transform:translateY(-50%); overflow:hidden; color:transparent; }
  .text-button:after { content:'↻'; display:grid; place-items:center; color:var(--muted); font-size:22px; }
  .board-wrap { border-radius:16px; box-shadow:0 10px 35px #03131c88; }
  .board-toast { top:8px; max-width:calc(100% - 20px); padding:7px 10px; overflow:hidden; text-overflow:ellipsis; font-size:9px; }
  .dock { margin-top:8px; padding:8px; border-radius:14px; }
  .dock-heading { font-size:8px; letter-spacing:.07em; }
  .piece-tray { gap:6px; margin:7px 0 0; }
  .piece-card { min-height:64px; border-radius:11px; }
  .piece-card:hover { transform:none; }
  .piece-card.selected { transform:translateY(-2px); box-shadow:0 0 0 2px #5ee3d126; }
  .piece-card small { right:6px; bottom:5px; font-size:8px; }
  .piece-cell { width:12px; height:12px; border-radius:3px; }
  .level-strip { margin:8px 0 2px; }
  .level-dot { width:36px; height:36px; }
  .app-shell footer { display:none; }
  .result-modal { padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
  .result-card { padding:28px 20px 20px; border-radius:20px; }
  .result-card h2 { font-size:34px; }
  .primary-button,.secondary-button { min-height:44px; }
}
@media (max-height:500px) and (orientation:landscape) {
  body { background-image:linear-gradient(#082b38a8,#082b38a8),url('assets/backgrounds/bg_tide_garden_day_landscape.webp'); }
  .app-shell { max-width:none; display:grid; grid-template-columns:minmax(0,1fr) 250px; grid-template-areas:'top top' 'status status' 'board dock' 'levels dock'; gap:6px 8px; }
  .topbar { grid-area:top; }
  .status-row { grid-area:status; margin:0; }
  .board-wrap { grid-area:board; align-self:start; }
  .dock { grid-area:dock; margin:0; align-self:start; }
  .piece-tray { grid-template-columns:1fr; }
  .piece-card { min-height:54px; }
  .level-strip { grid-area:levels; margin:0; }
}
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { transition-duration:.01ms!important;animation-duration:.01ms!important; } }