/* Motion and rewards sit above the crafted art; the grid and route stay exact. */
body[data-theme] .player::before { content:none; }
.piece-shell { position:absolute;inset:5%;display:block; }
.piece-motion { position:absolute;inset:0;display:block;transform-origin:center; }
.player-art { position:absolute;inset:0;display:block;background:var(--material-nova) center/contain no-repeat;transform-origin:50% 50%; }
.app[data-skin="pearl"] .player-art { background-image:var(--material-pearl); }
.app[data-skin="prism"] .player-art { background-image:var(--material-prism); }
.player.in-motion .player-art { will-change:transform; }
.player.in-motion .piece-motion { will-change:transform; }
body[data-theme]:not([data-theme="play"]) .player:not(.in-motion) .player-art { transition:transform .12s ease-out; }
body[data-theme="midnight"] .player:not(.in-motion) .piece-shell { animation:fish-bob 3.2s ease-in-out infinite; }
body[data-theme="moon"] .player:not(.in-motion) .piece-shell { animation:capsule-float 4s ease-in-out infinite; }
@keyframes fish-bob { 0%,100%{transform:translateY(1px) rotate(-2deg)}50%{transform:translateY(-1.5px) rotate(2deg)} }
@keyframes capsule-float { 0%,100%{transform:translateY(1px)}50%{transform:translateY(-1.5px)} }

/* Only interactive pieces breathe. Walls and direction ramps remain still. */
body[data-theme] .cell.item:not(.collected) .piece-symbol { animation:pickup-breathe 2.8s ease-in-out infinite;animation-delay:calc(var(--delay,0ms) * 2); }
body[data-theme] .cell.item:nth-child(2n) .piece-symbol { animation-delay:-1.3s; }
body[data-theme] .cell.item:nth-child(3n) .piece-symbol { animation-delay:-.7s; }
@keyframes pickup-breathe { 0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,calc(-50% - 1.5px)) scale(1.04)} }
body[data-theme] .cell.portal::before { animation:portal-turn 15s linear infinite; }
@keyframes portal-turn { to{transform:translate(-50%,-50%) rotate(360deg)} }
body[data-theme] .cell.exit.ready::before { animation:home-ready 2s ease-in-out infinite; }
@keyframes home-ready { 0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.055)} }
body[data-theme] .cell.passed:not(.wall):not(.collected) { background:color-mix(in srgb,var(--tile),var(--accent) 20%); }
body[data-theme] .cell.locking::after { animation:pickup-ring .36s ease-out both; }
@keyframes pickup-ring { 0%{transform:translate(-50%,-50%) scale(2.1);opacity:.8}100%{transform:translate(-50%,-50%) scale(1);opacity:.42} }
body[data-theme] .objective i.receiving { animation:socket-snap .3s cubic-bezier(.18,.8,.3,1) both; }
@keyframes socket-snap { 0%{transform:scale(.8)}45%{transform:scale(1.2)}75%{transform:scale(.96)}100%{transform:scale(1)} }
.reaction-layer { position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden; }
.cell-reaction { position:absolute;left:0;top:0;pointer-events:none; }
.cell-reaction>i { position:absolute;inset:4%;border:2px solid var(--accent);border-radius:50%;opacity:0; }
.cell-reaction[data-kind="collect"]>i,.cell-reaction[data-kind="home"]>i { border-color:var(--warm);border-width:3px; }
.cell-reaction[data-kind="turn"]>i { border-radius:22%;border-color:#ffcc69; }
.cell-reaction[data-kind="portal"]>i { border-color:var(--accent-2); }
body[data-theme="prism"] .cell-reaction>i { border-radius:16%; }
body[data-theme] .turn-marker.kick::before { animation:ramp-kick .28s cubic-bezier(.18,.8,.3,1) both; }
@keyframes ramp-kick { 0%,100%{transform:scale(1)}35%{transform:scale(.88)}65%{transform:scale(1.07)} }
body[data-theme] .objective.full { box-shadow:inset 0 0 0 1px var(--ui-accent); }
body[data-theme] .board.win .player::after { opacity:0; }
body[data-theme] .board.win .cell.collected { background:color-mix(in srgb,var(--tile),var(--warm) 22%); }
body[data-theme] .board.win .cell.collected::after { opacity:.75; }

/* A small, legible wake follows each cell, then disappears. */
body[data-theme] .trail-dot::before { left:24%;right:24%;top:44%;height:12%;border:0;border-radius:99px;background:var(--trail-color);box-shadow:none; }
body[data-theme="midnight"] .trail-dot::before { left:35%;right:35%;top:35%;height:30%;border:1.5px solid var(--trail-color);background:none; }
body[data-theme="moon"] .trail-dot::before { left:24%;right:24%;top:45%;height:10%;border-radius:3px; }
body[data-theme="prism"] .trail-dot::before { left:28%;right:28%;top:42%;height:16%;border-radius:2px; }
body[data-theme] .score-float { display:block;padding:3px 7px;background:var(--board);border:1px solid rgba(var(--warm-rgb),.4);border-radius:8px;color:var(--warm);font:750 clamp(.68rem,2.5vw,.86rem)/1.2 var(--display);white-space:nowrap;transform:translate(-50%,-50%); }
.score-float.show { animation:score-rise .55s ease-out both; }
@keyframes score-rise { 0%{opacity:0;transform:translate(-50%,-25%) scale(.85)}20%{opacity:1;transform:translate(-50%,-55%) scale(1.06)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-115%) scale(1)} }
body[data-theme] .flow-meter { height:7px;gap:5px; }
body[data-theme] .flow-meter i { transition:background .18s,transform .18s; }
body[data-theme] .flow-meter i.on { background:var(--ui-accent);transform:scaleY(1.15); }
body[data-theme] .flow-meter i.on:nth-child(3),body[data-theme] .flow-meter i.on:nth-child(4) { background:var(--ui-lilac); }
body[data-theme] .flow-meter i.on:nth-child(5) { background:var(--warm); }
body[data-theme] .score-hud b { font-size:clamp(.78rem,2.9vw,1.05rem);white-space:nowrap; }
body[data-theme] .flow-flash { bottom:12px;padding:9px 13px;font-size:.75rem;border:1px solid var(--warm);border-radius:12px; }
body[data-theme] .flow-flash b { letter-spacing:.035em;color:var(--warm);font-weight:750; }
body[data-theme] .flow-flash span { color:var(--warm);font-weight:700; }
body[data-theme] .fit-callout { top:12px;right:12px;padding:7px 9px;border:1px solid rgba(var(--warm-rgb),.45); }
body[data-theme] .fit-callout b { font-size:.67rem;letter-spacing:.055em; }
body[data-theme] .ambient-canvas { opacity:.24; }
body[data-theme="play"] .ambient-canvas,body[data-theme="midnight"] .ambient-canvas { opacity:.18; }
.board.room-arrive { animation:room-arrive .22s ease-out both; }
@keyframes room-arrive { from{opacity:.6;transform:translateY(6px)}to{opacity:1;transform:translateY(0)} }

/* A win is a quick reward, with the room still visible behind it. */
body[data-theme] .complete { background:rgba(6,10,20,.18);padding:14px 14px max(14px,env(safe-area-inset-bottom)); }
body[data-theme] .complete-card { display:grid;grid-template-columns:54px minmax(0,1fr) 82px;grid-template-areas:"art eyebrow stars" "art title title" "copy copy copy" "score stats stats" "trail trail trail" "next next next" "again again again" "cue cue cue";align-items:center;column-gap:10px;row-gap:7px;padding:18px;border:1px solid var(--line);border-radius:22px;max-height:85%;overflow-y:auto;box-shadow:0 9px 28px rgba(0,0,0,.16); }
body[data-theme] .complete .celebration { grid-area:art;width:54px;height:54px;margin:0;background:var(--material-nova) center/contain no-repeat; }
.complete .celebration i,.complete .celebration b { display:none; }
body[data-theme] .complete .eyebrow { grid-area:eyebrow;text-align:left;font-size:.59rem;letter-spacing:.08em;margin:0; }
body[data-theme] .complete h2 { grid-area:title;font-size:1.42rem;line-height:1.08;text-align:left;margin:0; }
body[data-theme] .complete h2+p { grid-area:copy;text-align:left;font-size:.78rem;line-height:1.4;margin:3px 0 0; }
body[data-theme] .complete .stars { grid-area:stars;gap:4px;height:26px;margin:0; }
body[data-theme] .complete .stars i { width:23px;height:23px; }
body[data-theme] .complete .reward-score { grid-area:score;grid-column:1/2;align-items:flex-start;margin:3px 0;width:90px; }
body[data-theme] .complete .reward-score b { font:750 1.55rem/1.1 var(--display); }
body[data-theme] .complete .reward-score small { font-size:.53rem;letter-spacing:.03em;white-space:nowrap; }
body[data-theme] .complete .reward-score em { font-size:.52rem;white-space:nowrap;color:var(--muted); }
body[data-theme] .complete .stats { grid-area:stats;justify-content:flex-end;gap:12px;margin:4px 0; }
body[data-theme] .complete .stats span { min-width:46px; }
body[data-theme] .complete .stats b { font:700 1rem var(--display); }
body[data-theme] .complete .stats small { font-size:.57rem; }
body[data-theme] .complete .next { grid-area:next;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 28px;grid-template-rows:auto auto;align-content:center;column-gap:10px;row-gap:3px;height:60px;min-height:60px;max-width:none;margin:2px 0 0;padding:9px 14px 9px 18px;text-align:left;font-size:.92rem; }
body[data-theme] .complete .next>span { grid-column:1;grid-row:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:750; }
body[data-theme] .complete .next>small { grid-column:1;grid-row:2;font:450 .67rem/1.2 var(--ui);color:inherit;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
body[data-theme] .complete .next>.button-arrow { position:static;grid-column:2;grid-row:1/3;width:28px;height:28px;transform:none; }
.session-trail { grid-area:trail;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;background:var(--surface-2);border-radius:12px; }
.session-trail>span { font:600 .65rem/1.2 var(--ui);color:var(--muted); }
#session-stamps { display:flex;align-items:center;gap:6px;flex:none; }
.session-stamp { display:block;width:21px;height:21px;border-radius:50%;border:1px solid var(--line);background:none;opacity:.5; }
.session-stamp.done { border-color:transparent;background:var(--material-spark) center/contain no-repeat;opacity:1; }
.session-stamp.latest { animation:stamp-arrive .32s cubic-bezier(.18,.8,.3,1) both; }
@keyframes stamp-arrive { from{transform:scale(.4)}65%{transform:scale(1.18)}to{transform:scale(1)} }
.session-trail.milestone { box-shadow:inset 0 0 0 1px var(--ui-accent); }
body[data-theme] .complete #again-button { grid-area:again;min-height:44px;height:auto;padding:6px;font-size:.76rem; }
body[data-theme] .complete .continue-cue { grid-area:cue;margin:0;color:var(--muted);font-size:.68rem;line-height:1.4; }
@media(max-width:340px) { body[data-theme] .complete-card{padding:14px;column-gap:7px;grid-template-columns:45px minmax(0,1fr) 72px}body[data-theme] .complete h2{font-size:1.25rem}body[data-theme] .complete .stats{gap:5px}body[data-theme] .complete .stars i{width:20px;height:20px} }
@media(orientation:landscape) and (max-height:600px) { body[data-theme] .complete{justify-content:center;padding:10px}body[data-theme] .complete-card{max-width:440px;max-height:95%;padding:12px 18px;row-gap:4px}.complete .continue-cue{display:none} }
@media(prefers-reduced-motion:reduce) {
  .piece-shell,.player-art,.cell.item .piece-symbol,.cell.portal::before,.cell.exit.ready::before,.board.room-arrive { animation:none!important; }
  body[data-theme] .player-art { transform:none!important; }
  body[data-theme] .piece-motion { transform:none!important; }
  .score-float.show { animation:still-score .55s linear both!important; }
  @keyframes still-score { 0%,85%{opacity:1}100%{opacity:0} }
}

/* Give the restored room the screen; keep its materials and pieces intact. */
.app { max-width:720px;--board-size:min(calc(100vw - 16px),640px); }
.topbar { height:calc(56px + env(safe-area-inset-top));padding:calc(6px + env(safe-area-inset-top)) 14px 6px; }
.game { height:calc(100% - 56px - env(safe-area-inset-top));padding:4px 8px var(--safe); }
.chapter-line { flex:none;height:22px;font-size:.67rem; }
.chapter-sigil { width:20px;height:20px; }
.chapter-sigil .chapter-icon { width:18px;height:18px; }
.heading { flex:none;width:100%;max-width:640px;margin-top:5px;padding:0 8px; }
body[data-theme] .heading h1,body[data-theme] .app[data-difficulty="hard"] .heading h1 { font-size:clamp(1.3rem,4.8vw,1.65rem);line-height:1.1; }
body[data-theme] .heading p { font-size:.76rem;line-height:1.35;margin:4px auto 0;max-width:520px; }
.objective-row { height:38px;margin:4px 0 6px; }
.under-board { margin-top:9px; }
.flow-row { margin-top:5px; }
.assist-space { width:var(--board-size);height:64px;margin-top:3px; }
.assist { max-width:none;padding:6px 9px;gap:8px; }
.assist b { font-size:.79rem; }
.assist small { font-size:.71rem;line-height:1.35;max-height:2.7em; }
.assist-orb { width:24px;height:28px; }
.quiet-tip { font-size:.7rem; }
.controls { width:var(--board-size);max-width:none;padding-top:4px; }
.controls button { height:50px; }

@media(max-height:700px) and (orientation:portrait) {
  .chapter-line { height:20px; }
  .heading { margin-top:3px; }
  body[data-theme] .heading h1,body[data-theme] .app[data-difficulty="hard"] .heading h1 { font-size:1.25rem; }
  body[data-theme] .heading p { font-size:.71rem; }
  .objective-row { height:34px;margin:3px 0 5px; }
  .under-board { margin-top:7px; }
  .controls button { height:46px; }
}
@media(orientation:landscape) and (max-height:600px) {
  .app { max-width:920px; }
  .game { grid-template-columns:minmax(180px,2fr) minmax(0,3fr);gap:5px 16px;padding:4px 12px var(--safe); }
  .heading { padding:0; }
  .objective-row { margin:0; }
  .assist-space { width:100%;height:auto;margin:0; }
  .controls { width:100%;padding:0; }
  .controls button { height:45px; }
  .under-board { margin:0; }
}

.music-credit { display:inline-block;margin-top:4px;padding:2px 0;color:var(--muted);font:.62rem/1.4 var(--ui);text-underline-offset:3px;touch-action:manipulation; }
.music-credit:focus-visible { outline:2px solid var(--ui-accent);outline-offset:3px; }

.music-room-link{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 19px;margin-top:17px;border:1px solid var(--ui-accent);border-radius:17px;color:var(--ink);background:var(--surface);text-decoration:none;touch-action:manipulation}
.music-room-link b{display:block;font:700 .9rem/1.4 var(--ui)}
.music-room-link small{display:block;font:.7rem/1.5 var(--ui);color:var(--muted);margin-top:4px}
.music-room-link .ui-icon{width:24px;height:24px;color:var(--ui-accent);flex:none}
.music-room-link:focus-visible{outline:2px solid var(--ui-accent);outline-offset:4px}
.music-room-link:hover{filter:brightness(1.06)}