.mode-options{display:flex;gap:10px;margin-top:20px}.mode-button{display:flex;flex-direction:column;gap:4px;min-height:66px;flex:1;padding:12px;border:1px solid var(--edge);border-radius:11px;background:#fff8e8aa;text-align:left}.mode-button b{font-size:13px;font-weight:600}.mode-button span{font-size:10px;color:var(--muted);line-height:1.6}.mode-button[aria-checked=true]{background:#e5ecda;border-color:#8ba68d;box-shadow:inset 0 0 0 1px #8ba68d}.mode-note{font-size:10px;margin-top:8px}.trail-board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;padding:5px;border-radius:14px;background:#b7c4a5;aspect-ratio:1}.trail-cell{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:3px;background:#f3edda;aspect-ratio:1}.trail-cell:nth-child(odd){background:#f7f1e1}.trail-cell.trail-foot{background:#d8e4bd}.trail-cell.trail-head{background:#d5e2ba;box-shadow:inset 0 0 0 1px #9bb07c}.trail-cell .cat{position:absolute;width:205%;height:205%;top:-78%;left:-52%;filter:drop-shadow(0 2px 1px #64734c20)}.paw-dot{width:55%;height:55%;border-radius:48% 48% 42% 42%;background:radial-gradient(circle at 25% 25%,#88a77c 0 14%,transparent 16%),radial-gradient(circle at 75% 25%,#88a77c 0 14%,transparent 16%),radial-gradient(ellipse at 50% 65%,#88a77c 0 30%,transparent 32%);transform:rotate(-15deg)}.trail-food{background:#f3dfab!important;box-shadow:inset 0 0 0 1px #d0af69}.trail-food svg{width:85%;height:85%;filter:drop-shadow(0 1px 0 #fff8)}.blocks-area{display:flex;align-items:flex-start;justify-content:center;gap:14px}.blocks-board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(18,minmax(0,1fr));height:540px;aspect-ratio:10/18;width:auto;max-width:calc(100% - 92px);gap:2px;padding:4px;border-radius:10px;background:#c3c5ab}.block-cell{min-width:0;min-height:0;background:#f2ebd9;border-radius:3px;box-shadow:inset 0 1px 0 #fff4}.block-cell[data-kind="1"]{background:#6faca7}.block-cell[data-kind="2"]{background:#dfbb69}.block-cell[data-kind="3"]{background:#ac98bd}.block-cell[data-kind="4"]{background:#d19c6d}.block-cell[data-kind="5"]{background:#7c94b1}.block-cell[data-kind="6"]{background:#95ad77}.block-cell[data-kind="7"]{background:#c78d8e}.block-cell.fixed{box-shadow:inset 0 0 0 2px #fff5,0 1px 0 #4c6e4422}.block-cell.falling{box-shadow:inset 0 0 0 2px #fff9,0 0 0 1px #5b6d4c55}.block-cell.ghost{background:transparent;border:1px dashed #8a946d;box-shadow:none}.piece-sidebar{width:78px;flex-shrink:0;text-align:center}.piece-sidebar>p{font-size:12px;color:var(--teal);margin:0 0 10px}.next-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;width:74px;height:74px;background:#e4dcc6;padding:4px;border-radius:7px;margin-bottom:20px}.piece-sidebar .tiny-note{font-size:10px;line-height:1.9;white-space:pre-line;color:var(--muted)}.arcade-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:100%;max-width:190px;margin:12px auto 0}.arcade-controls button{min-width:44px;min-height:48px;border:1px solid #b7c6a9;border-radius:10px;background:#fbf7e9;color:var(--teal);font-size:22px;box-shadow:0 2px 0 #6a7f4722}.arcade-controls button.wide{grid-column:span 2;font-size:14px}.arcade-controls button:active{background:#e5edda;transform:translateY(1px)}
@media(max-width:767px){.mode-options{text-align:left;margin-top:14px}.mode-button{padding:10px;min-height:64px}.hero .actions{margin-top:16px}.hero-art{min-height:200px;width:215px}.hero-art .cat{width:165px;height:165px}.trail-board{gap:2px}.blocks-area{gap:10px}.blocks-board{height:clamp(250px,calc(100svh - 440px - var(--safe-top) - var(--safe-bottom)),390px);max-width:calc(100% - 72px);padding:3px}.piece-sidebar{width:62px}.next-grid{width:62px;height:62px;padding:3px;margin-bottom:14px}.piece-sidebar>p{font-size:11px}.piece-sidebar .tiny-note{font-size:9px}.block-cell{border-radius:2px}.block-cell.fixed,.block-cell.falling{box-shadow:inset 0 0 0 1px #fff8}.companion .arcade-controls{grid-column:1/3;grid-template-columns:repeat(5,minmax(0,1fr));max-width:none;margin-top:0;gap:7px}.companion .arcade-controls button{min-height:48px}.companion .arcade-controls button.wide{grid-column:auto;font-size:13px}}
@media(max-width:767px) and (max-height:680px) and (orientation:portrait){.blocks-board{height:clamp(180px,calc(100svh - 280px - var(--safe-top) - var(--safe-bottom)),340px)}.arcade-panel .stats{margin-bottom:9px}.companion .arcade-controls{grid-column:1/3;grid-row:2;gap:5px}.companion:has(.arcade-controls)>.cat{display:none}.trail-board{max-width:calc(100svh - 210px - var(--safe-top) - var(--safe-bottom));margin:auto}.piece-sidebar .tiny-note{font-size:9px}}
@media(orientation:landscape) and (max-height:600px){.blocks-board{height:clamp(160px,calc(100svh - 150px - var(--safe-top) - var(--safe-bottom)),380px)}.piece-sidebar{width:60px}.next-grid{width:60px;height:60px}.arcade-controls{grid-template-columns:repeat(3,1fr);max-width:170px}.arcade-controls button.wide{grid-column:span 2}.trail-board{max-width:calc(100svh - 150px);margin:auto}}
@media(max-width:767px) and (min-height:681px) and (orientation:portrait){.trail-board{max-width:clamp(220px,calc(100svh - 478px - var(--safe-top) - var(--safe-bottom)),340px);margin:auto}.blocks-board{height:clamp(250px,calc(100svh - 448px - var(--safe-top) - var(--safe-bottom)),390px)}}