:root{--ink: #3a2f24;--muted: #7a7168;--page: #f4f8f9;--board: #ffffff;--board-line: #e8ecee;--board-edge: #d7dce0;--tile-size: clamp(24px, 3.9vw, 37px);--board-cols: 30;--spotify: #1db954;--tile-radius: 5px;--tile-ink: #2c241c;--accent: #5c4632;--accent-ink: #f7f4ef;--shadow-soft: rgba(40, 48, 52, .12);--shadow-tile: rgba(48, 40, 28, .22);font-family:Outfit,system-ui,sans-serif;color:var(--ink);background:var(--page)}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:radial-gradient(ellipse 90% 55% at 50% 0%,#ffffff 0%,var(--page) 62%,#e8eef0 100%);color:var(--ink)}.spotify-dock{position:fixed;left:.85rem;bottom:.85rem;z-index:60;display:flex;align-items:flex-end;gap:.65rem;width:max-content;max-width:calc(100vw - 1.5rem);pointer-events:none}.spotify-dock:not([hidden]){animation:dock-in .35s cubic-bezier(.22,1,.36,1) both}.share-dock{position:fixed;right:.85rem;bottom:.85rem;z-index:60;width:max-content;max-width:calc(100vw - 1.5rem);pointer-events:none}.share-dock:not([hidden]){animation:dock-in .35s cubic-bezier(.22,1,.36,1) both}.spotify-controls{display:flex;flex-direction:column;align-items:stretch;gap:.45rem;flex:0 0 auto;pointer-events:auto}body.is-dragging-tiles .spotify-controls,body.is-dragging-tiles .spotify-panel,body.is-dragging-tiles .share-row{pointer-events:none!important}.spotify-play{appearance:none;border:none;display:flex;align-items:center;gap:.65rem;padding:.35rem .75rem .35rem .35rem;border-radius:999px;background:#ffffffeb;color:var(--ink);cursor:pointer;text-align:left;box-shadow:0 10px 28px #28303429;backdrop-filter:blur(8px);transition:transform .18s ease,box-shadow .18s ease;flex:0 0 auto}.spotify-play:hover{transform:translateY(-1px);box-shadow:0 14px 32px #2830342e}.spotify-play-art-wrap{position:relative;width:3rem;height:3rem;border-radius:999px;overflow:hidden;flex:0 0 auto;background:var(--spotify)}.spotify-play-art{width:100%;height:100%;object-fit:cover;display:block}.spotify-play-icon{position:absolute;inset:0;display:grid;place-items:center;background:#04140a47;color:#fff;font-size:.78rem}.spotify-play-copy{display:grid;gap:.08rem;min-width:0;max-width:9.5rem}.spotify-play-label{font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7}.spotify-play-title{font-size:.88rem;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spotify-panel{background:#fffffff5;border:1px solid #dce2e4;border-radius:14px;padding:.55rem;box-shadow:0 16px 36px var(--shadow-soft);backdrop-filter:blur(10px);width:min(420px,calc(100vw - 11rem));max-height:min(420px,calc(100dvh - 5.5rem));overflow:auto;opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;visibility:hidden;transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility .28s}.spotify-dock:hover .spotify-panel,.spotify-dock:focus-within .spotify-panel,.spotify-dock.is-expanded .spotify-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;visibility:visible}.spotify-embed-host{display:block;width:100%;height:228px;border-radius:10px;overflow:hidden;background:#f3f6f7}.spotify-embed-host iframe{width:100%!important;height:228px!important;border:0;border-radius:10px}.queue-status{margin:.45rem .15rem 0;font-size:.82rem;color:var(--muted);line-height:1.35}.share-row{position:relative;flex:0 0 auto;width:auto;min-width:7.5rem;pointer-events:auto}.btn-share{appearance:none;border:1px solid rgba(205,214,217,.95);background:#ffffffeb;color:var(--ink);border-radius:999px;padding:.55rem .95rem;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;box-shadow:0 10px 28px #2830341f;backdrop-filter:blur(8px);width:100%}.btn-share:hover{border-color:#b7a48c}.share-menu{position:absolute;right:0;left:auto;top:auto;bottom:calc(100% + .4rem);display:grid;gap:.25rem;min-width:100%;padding:.4rem;border-radius:12px;background:#fff;border:1px solid #dce2e4;box-shadow:0 12px 28px var(--shadow-soft);z-index:26;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}.share-row:hover .share-menu,.share-row:focus-within .share-menu,.share-row.is-open .share-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.share-menu button{appearance:none;border:0;background:transparent;text-align:left;padding:.45rem .55rem;border-radius:8px;font:inherit;font-size:.88rem;cursor:pointer;color:var(--ink)}.share-menu button:hover{background:#f3f6f7}.share-scope{display:grid;gap:.2rem;padding:.15rem .2rem .35rem}.share-scope-option{display:flex;align-items:center;gap:.45rem;padding:.35rem .4rem;border-radius:8px;font-size:.84rem;font-weight:600;color:var(--ink);cursor:pointer}.share-scope-option:hover{background:#f3f6f7}.share-scope-option input{accent-color:var(--accent);margin:0}.share-scope-option:has(input:disabled){opacity:.45;cursor:not-allowed}.share-menu-divider{height:1px;margin:.15rem .2rem .35rem;background:#e4e9eb}.spotify-open{display:inline-block;margin-top:.45rem;margin-left:.2rem;color:var(--spotify);font-weight:600;font-size:.85rem;text-decoration:none}.spotify-open:hover{text-decoration:underline}@keyframes dock-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.game{width:min(1280px,calc(100% - 2.5rem));margin:0 auto;padding:1.35rem 0 7.5rem;display:grid;gap:.95rem;min-height:100dvh;align-content:start}.board-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(168px,220px);gap:.85rem;align-items:stretch;margin-left:clamp(0px,4vw,2.5rem)}.top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem}.back{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500}.back:hover{color:var(--ink)}.brand{display:flex;align-items:center;gap:.75rem;min-width:0}.cover-thumb{width:64px;height:64px;border-radius:10px;object-fit:cover;box-shadow:0 6px 16px var(--shadow-soft);flex:0 0 auto;background:#e8eef0;transition:opacity .25s ease}.brand-copy{min-width:0}.brand .eyebrow{margin:0;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.brand h1{margin:.1rem 0 0;font-weight:700;font-size:clamp(1.45rem,4vw,1.95rem);line-height:1.05;letter-spacing:-.03em}.stats{display:flex;gap:.75rem}.stat{text-align:right;min-width:3.5rem}.stat-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.stat strong{font-size:1.35rem;font-weight:700}.hint{margin:0;color:var(--muted);font-size:.95rem;line-height:1.4}.target-hint{margin:-.35rem 0 0;font-size:.92rem;letter-spacing:.18em;padding-left:.18em;box-sizing:border-box;color:var(--ink);font-weight:600;min-height:1.2em;text-align:center;width:100%}.target-hint.is-solved{letter-spacing:.04em;padding-left:.04em;color:var(--spotify);text-align:center}.board-wrap{background:var(--board);border:1px solid #dce2e4;border-radius:18px;padding:clamp(.7rem,1.4vw,1.15rem);box-shadow:0 1px #fffffff2 inset,0 18px 42px var(--shadow-soft);animation:board-in .55s ease both;min-height:min(72vh,920px);min-width:0;display:grid;align-items:center}.trophy-rail{display:flex;flex-direction:column;gap:.55rem;min-height:0;padding:.7rem .65rem;border-radius:16px;background:#ffffffb8;border:1px solid #dce2e4;box-shadow:0 12px 28px var(--shadow-soft);backdrop-filter:blur(8px);animation:board-in .65s ease .08s both}.trophy-head{display:flex;align-items:center;gap:.4rem;padding:0 .15rem}.trophy-icon{color:#a8844f;font-size:.95rem;line-height:1}.trophy-title{margin:0;flex:1;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.trophy-count{font-size:.78rem;font-weight:700;color:var(--ink);min-width:1.25rem;text-align:right}.trophy-empty{margin:0;padding:.35rem .2rem .15rem;font-size:.82rem;line-height:1.35;color:var(--muted)}.trophy-empty[hidden]{display:none}.trophy-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem;overflow:auto;max-height:min(68vh,860px);scrollbar-width:thin}.trophy-item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:.55rem;align-items:center;width:100%;padding:.35rem;border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .15s ease}.trophy-item:hover,.trophy-item:focus-visible{background:#f3f6f7f2;outline:none}.trophy-item.is-playing{background:#1db9541a}.trophy-art{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#e8eef0;box-shadow:0 4px 12px #2830341f}.trophy-art-stack{position:relative;width:44px;height:44px;border-radius:8px;overflow:hidden;flex:0 0 auto;background:#1a1a1a;box-shadow:0 4px 12px #2830341f}.trophy-art-stack .trophy-art-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.trophy-art-stack .trophy-art-sticker{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}.trophy-item.is-cat-egg{border-color:#b8943c73}.trophy-meta{min-width:0;display:grid;gap:.12rem}.trophy-track{margin:0;font-size:.86rem;font-weight:650;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trophy-album{margin:0;font-size:.72rem;color:var(--muted);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trophy-lightbox{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1.25rem}.trophy-lightbox[hidden]{display:none}.trophy-lightbox-backdrop{position:absolute;inset:0;border:0;padding:0;margin:0;cursor:pointer;background:#1c18147a;backdrop-filter:blur(6px)}.trophy-lightbox-panel{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.35rem;width:min(100%,34rem);animation:trophy-lightbox-in .28s ease both}@keyframes trophy-lightbox-in{0%{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}.trophy-lightbox-figure{margin:0;display:grid;justify-items:center;gap:.85rem;min-width:0}.trophy-lightbox-art-host{width:min(72vw,28rem);display:grid;justify-items:center}.trophy-lightbox-art{width:min(72vw,28rem);height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px;background:#fff;box-shadow:0 24px 64px #14100c47}.trophy-lightbox-art-stack{position:relative;width:min(72vw,28rem);aspect-ratio:1;border-radius:14px;overflow:hidden;background:#111;box-shadow:0 24px 64px #14100c47}.trophy-lightbox-art-stack .trophy-lightbox-art-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.trophy-lightbox-art-stack .trophy-lightbox-art-sticker{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}.trophy-lightbox-caption{text-align:center;max-width:min(72vw,28rem)}.trophy-lightbox-track{margin:0;font-size:clamp(1.15rem,2.8vw,1.55rem);font-weight:700;color:#f7f4ef;line-height:1.2;text-wrap:balance}.trophy-lightbox-album{margin:.35rem 0 0;font-size:.95rem;font-weight:500;color:#f7f4efb8;line-height:1.3}.trophy-lightbox-album[hidden]{display:none}.trophy-lightbox-close{position:absolute;top:-.35rem;right:2.4rem;z-index:2;width:2.4rem;height:2.4rem;border:0;border-radius:999px;background:#ffffff29;color:#f7f4ef;font-size:1.55rem;line-height:1;cursor:pointer;transition:background .15s ease}.trophy-lightbox-close:hover,.trophy-lightbox-close:focus-visible{background:#ffffff47;outline:none}.trophy-lightbox-nav{width:2.5rem;height:2.5rem;border:0;border-radius:999px;background:#ffffff24;color:#f7f4ef;font-size:1.7rem;line-height:1;cursor:pointer;transition:background .15s ease,opacity .15s ease}.trophy-lightbox-nav:hover,.trophy-lightbox-nav:focus-visible{background:#ffffff47;outline:none}.trophy-lightbox-nav:disabled{opacity:.28;cursor:default}.board{display:grid;grid-template-columns:repeat(var(--board-cols),minmax(0,1fr));gap:1px;width:100%;max-width:min(100%,980px);margin:0 auto;background:#e4e9eb;border-radius:8px;overflow:hidden}.cell{position:relative;aspect-ratio:1 / 1;width:100%;background:#f7fafb;border:0;border-radius:0;touch-action:none}.cell.drop-target{outline:2px solid #8b7355;outline-offset:-2px;background:#f3eee6}.cell .tile{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:1 / 1;border-radius:2px}.controls{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.btn{appearance:none;border:1px solid #cfd6d9;background:#fff;color:var(--ink);border-radius:999px;padding:.55rem 1rem;font:inherit;font-weight:600;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}.btn:hover{transform:translateY(-1px);border-color:#b7a48c}.btn:active{transform:translateY(0)}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn-primary:hover{background:#4a3828;border-color:#4a3828}.btn-wipe{border-color:#d4b4a8;color:#7a4538;background:#fff}.btn-wipe:hover{border-color:#b88474;background:#faf6f4}.rack-stage{position:relative;margin-top:.5rem;padding:0 .15rem .75rem;animation:rack-in .7s cubic-bezier(.22,1,.36,1) both;display:grid;gap:.65rem}.rack-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .55rem}.rack-order{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .55rem;flex:1 1 220px;min-width:0}.rack-order-label{font-size:.78rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.rack-order-input{flex:1 1 160px;min-width:0;appearance:none;border:1px solid #cfd6d9;background:#ffffffeb;color:var(--ink);border-radius:999px;padding:.55rem .95rem;font:inherit;font-weight:500;box-shadow:0 8px 20px #2830340f}.rack-order-input:focus{outline:2px solid rgba(92,70,50,.28);outline-offset:1px;border-color:#b7a48c}.rack-order-input.is-invalid{border-color:#d4b4a8}.group-drag-handle{cursor:grab;touch-action:none;border-color:#b7a48c;background:#f7f1e8}.group-drag-handle:hover:not(:disabled){border-color:#9a8264;background:#f3e8d8}.group-drag-handle:disabled{opacity:.45;cursor:not-allowed;transform:none}.group-drag-handle.is-dragging{cursor:grabbing;opacity:.55}.rack-order-status{flex:1 1 100%;margin:0;min-height:1.15em;font-size:.82rem;color:var(--muted)}.rack-order-status.is-ok{color:#3f6b45}.rack-order-status.is-bad{color:#7a4538}.word-ghost{position:fixed;pointer-events:none;z-index:45;display:flex;gap:2px;padding:.2rem;border-radius:10px;background:#ffffffb8;box-shadow:0 14px 32px #2830342e;backdrop-filter:blur(6px)}.word-ghost .tile{cursor:grabbing;margin:0}.cell.drop-target-run{outline:2px solid #8b7355;outline-offset:-2px;background:#f3eee6}.cell.drop-target-overlap{outline:2px solid #b8943c;outline-offset:-2px;background:#f6ecd0}.word-ghost.is-vertical{flex-direction:column}.word-ghost.is-diagonal{display:grid;grid-auto-rows:auto;grid-auto-columns:auto;gap:0;background:transparent;box-shadow:none;padding:0}.word-ghost.is-diagonal .tile{grid-row:1;grid-column:1}.rack{position:relative;isolation:isolate}.rack-shell{position:relative;border-radius:22px;padding:.7rem .85rem .95rem;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 38%),linear-gradient(165deg,#f0dfc0,#e2c79a 48%,#d4b286);box-shadow:inset 0 1px #ffffffa6,inset 0 -1px #82643c1f,0 1px #fff6,0 18px 40px #2830341f,0 4px 10px #30281c14;transform:perspective(900px) rotateX(8deg);transform-origin:center bottom}.rack-shell:before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(108deg,transparent 0 9px,rgba(120,90,50,.035) 9px 10px);pointer-events:none;opacity:.9}.rack-channel{position:relative;z-index:1;border-radius:16px;padding:.55rem .45rem .65rem;background:linear-gradient(180deg,rgba(90,70,45,.08),transparent 55%),linear-gradient(180deg,#c9ae84,#b9976a);box-shadow:inset 0 2px 6px #46321e38,inset 0 -1px #fff0d240}.rack-lip{position:absolute;left:1.1rem;right:1.1rem;bottom:.55rem;height:7px;border-radius:999px;background:linear-gradient(180deg,#ffffff59,#a0784b59);box-shadow:0 1px #ffffff40;pointer-events:none;z-index:0}.rack-slots{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:clamp(.3rem,1.4vw,.55rem);min-height:var(--tile-size)}.rack-slot{flex:0 0 var(--tile-size);width:var(--tile-size);height:var(--tile-size);aspect-ratio:1 / 1;display:grid;place-items:center;transform-origin:bottom center}.rack-slot .tile{width:var(--tile-size);height:var(--tile-size);aspect-ratio:1 / 1}.rack-slot.drop-target{outline:2px dashed rgba(92,70,50,.35);outline-offset:2px;border-radius:8px;background:#fff8eb59}.tile{appearance:none;border:none;padding:0;aspect-ratio:1 / 1;width:var(--tile-size);height:var(--tile-size);border-radius:var(--tile-radius);cursor:grab;position:relative;color:var(--tile-ink);background:linear-gradient(145deg,rgba(255,255,255,.42),transparent 45%),repeating-linear-gradient(112deg,transparent 0 6px,rgba(120,90,50,.06) 6px 7px),linear-gradient(165deg,#f3e2c0,#e4c996 46%,#d2b07a);box-shadow:inset 0 1px #ffffff8c,inset 0 -1px 2px #6e502829,0 1px #a0784659,0 6px 14px var(--shadow-tile);transition:transform .18s ease,box-shadow .18s ease;user-select:none;-webkit-user-select:none;touch-action:none;flex-shrink:0}.tile:active,.tile.dragging{cursor:grabbing;transform:scale(1.05);box-shadow:inset 0 1px #ffffff8c,0 10px 22px #30281c47;z-index:5}.tile-letter{position:absolute;inset:0 0 16%;display:grid;place-items:center;font-family:Outfit,system-ui,sans-serif;font-weight:700;font-size:clamp(.55rem,1.8vw,.95rem);line-height:1;letter-spacing:-.02em;color:var(--tile-ink)}.tile-points{position:absolute;right:8%;bottom:5%;font-size:clamp(.35rem,1.05vw,.5rem);font-weight:600;opacity:.85}.tile.is-blank .tile-letter{opacity:.35}@keyframes board-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes rack-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes deal-pop{0%{transform:translateY(16px) scale(.7);opacity:0}70%{transform:translateY(-4px) scale(1.04);opacity:1}to{transform:none;opacity:1}}.tile.deal-in{animation:deal-pop .45s cubic-bezier(.22,1,.36,1) both}.tile.ghost{position:fixed;pointer-events:none;z-index:40;opacity:.95;margin:0;aspect-ratio:1 / 1}.tile.source-hidden{opacity:.28}.tile.is-locked{cursor:default;pointer-events:none;filter:saturate(.88) brightness(.97);box-shadow:0 1px #fff8eb8c inset,0 4px 8px #30281c29}.tile.is-locked:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #8b735547;pointer-events:none}@media(max-width:820px){.game{width:min(100% - 1.25rem,1120px);padding-bottom:8.5rem}.board-stage{grid-template-columns:1fr;margin-left:0}.trophy-rail{order:2;max-height:none}.trophy-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none;padding-bottom:.15rem;gap:.55rem}.trophy-item{flex:0 0 min(220px,72vw);grid-template-columns:48px minmax(0,1fr)}.trophy-lightbox-panel{grid-template-columns:2rem minmax(0,1fr) 2rem;gap:.15rem;width:min(100%,96vw)}.trophy-lightbox-close{right:1.85rem;top:-.15rem}.trophy-lightbox-nav{width:2rem;height:2rem;font-size:1.4rem}.spotify-dock{left:.55rem;bottom:.55rem;flex-direction:column-reverse;align-items:flex-start}.share-dock{right:.55rem;bottom:.55rem}.spotify-panel{width:min(420px,calc(100vw - 1.25rem));max-height:min(360px,calc(100dvh - 9rem))}.board-wrap{min-height:min(62vh,720px)}}@media(max-width:520px){.top{grid-template-columns:1fr auto;grid-template-areas:"back stats" "brand brand"}.back{grid-area:back}.brand{grid-area:brand}.stats{grid-area:stats}.hint{font-size:.88rem}.cover-thumb{width:48px;height:48px}}
