/* UI colors are independent of the preserved wooden Canvas scene. */
:root{--sky:#d9f3fc;--sky-light:#effbff;--sky-active:#9dddf2;--blue:#214f68;--border:#9acfe2;--ivory:#fffdf3;--yellow:#fff0ba}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--sky-light);color:var(--blue);font-family:system-ui,-apple-system,sans-serif;touch-action:none}
button,select{font:inherit}button{cursor:pointer;color:var(--blue);border:1px solid var(--border);border-radius:10px;background:var(--ivory);font-weight:700;min-height:36px}
button:focus-visible,select:focus-visible{outline:3px solid #238ab3;outline-offset:2px}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}
#game{width:100vw;height:100dvh;display:block;position:absolute;top:0;left:0;touch-action:none}
#bar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(7px + env(safe-area-inset-top)) 8px 7px;background:linear-gradient(#edfbff,#ccecf8);border-bottom:1px solid var(--border);z-index:5;gap:5px;min-height:54px}
#brand{font-size:11px;font-weight:800;letter-spacing:.3px;color:var(--blue)}#brand small{font-size:10px;color:#486c7e;font-weight:400;display:block;margin-top:3px}
#tools{display:flex;gap:4px}#tools button{width:34px;height:36px;font-size:17px;background:#fffef5;box-shadow:0 2px 3px #4b96b412}
#trayArea{position:fixed;bottom:0;left:0;right:0;z-index:6;background:var(--sky);padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--border)}
#trayTabs,#sortTrayTabs{display:flex;gap:4px;padding:4px 6px;background:var(--sky)}
#trayTabs button,#sortTrayTabs button{flex:1;min-width:0;min-height:36px;font-size:11px;padding:3px 0;background:#f9feff;color:#43687a}
#trayTabs button[aria-selected=true],#sortTrayTabs button[aria-selected=true]{background:var(--sky-active);color:#123f58;border-color:#4fabc9;box-shadow:inset 0 -3px #4fabc9}
/* One compact row with 15% larger pieces; spacing and touch targets scale too. */
#tray{display:block;width:100vw;height:108px;touch-action:none;background-image:linear-gradient(#ffffffc7,#ffffffc7),url('assets/wood.png');background-size:cover;border-top:1px solid #fffdf3;border-bottom:1px solid var(--border)}
#trayTitle{height:38px;display:flex;align-items:center;justify-content:center;padding:3px 8px;gap:8px}
#trayTitle button{font-size:12px;min-height:34px;flex:1;max-width:250px;background:var(--ivory)}#sonarCheck{border-color:#62bcd8!important;background:#f1fcff!important}
#toast{height:18px;text-align:center;font-size:clamp(9px,2.5vw,11px);padding:2px;background:#edfaff;color:#436b80;white-space:nowrap;pointer-events:none}
#storageWarning{position:fixed;top:65px;left:8px;right:8px;padding:9px;background:#fff7df;color:#633f17;border:2px solid #d9b768;z-index:40;font-size:12px;text-align:center}
#overlay{position:fixed;inset:0;background:#183f5673;display:none;align-items:center;justify-content:center;z-index:30;padding:16px}#overlay.show{display:flex}
.panel{background:linear-gradient(150deg,#f8fdff,#d9f2fc);border:2px solid var(--border);border-radius:18px;padding:20px;width:min(560px,96vw);max-height:88dvh;overflow:auto;touch-action:pan-y;text-align:center;box-shadow:0 14px 60px #234c6638}
.panel h2{margin:0 0 12px;color:var(--blue);font-size:22px}.panel p{font-size:13px;line-height:1.7}.panel img{max-width:100%;max-height:50dvh;object-fit:contain;border:4px solid var(--ivory)}
.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:14px}.actions button{padding:11px 16px;background:var(--ivory)}.panel input{touch-action:auto;accent-color:#368faf}.panel input[type=range]{width:170px}
select{background:var(--ivory);color:var(--blue);border:1px solid var(--border);border-radius:7px;height:36px;padding:0 5px}
/* Sorting is a separate screen. Visibility leaves the play viewport measurable
   and unchanged, so entering/leaving never fits or pans the workbench. */
#sortingScreen{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;background:var(--sky-light);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
body.sorting-open #game,body.sorting-open #bar,body.sorting-open #trayArea{visibility:hidden}
.sortHeader{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;background:linear-gradient(#f8feff,var(--sky));border-bottom:1px solid var(--border)}
.sortHeader h1{font-size:19px;margin:0;color:#214f68}.sortHeader p{font-size:10px;margin:5px 0 0;color:#52798c}.sortHeader button{font-size:12px;padding:8px;background:var(--ivory);flex-shrink:0}
.sortSelectionBar{display:flex;align-items:center;gap:6px;padding:7px 10px;background:#f9fdff;border-bottom:1px solid #d0e9f2;min-height:49px;font-size:12px}
.sortSelectionBar strong{margin-right:auto}.sortSelectionBar button{padding:0 9px;font-size:12px}
#sortGridScroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-gutter:stable;padding:12px 10px}
#sortGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;max-width:850px;margin:0 auto;align-content:start}
.sortPiece{position:relative;display:flex;justify-content:center;align-items:center;height:96px;min-width:0;overflow:hidden;border:2px solid #c9e4ef;background:#fffef9;border-radius:12px;touch-action:pan-y;box-shadow:0 2px 5px #2c719a09}
.sortPiece canvas{display:block;width:80px;height:80px;max-width:100%;object-fit:contain;pointer-events:none}
.sortPiece[aria-pressed=true]{border:3px solid #42afd1;background:#d5f2fc;box-shadow:0 0 0 2px #b8e7f5}
.sortCheck{display:none;position:absolute;right:3px;top:3px;border-radius:50%;background:#2389ac;color:white;width:22px;height:22px;font-size:15px;line-height:22px;text-align:center;pointer-events:none}
.sortPiece[aria-pressed=true] .sortCheck{display:block}#sortEmpty{text-align:center;color:#5b7e8d;font-size:14px;padding:32px 5px}
#sortActions{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 7px;min-height:58px;background:var(--sky);border-top:1px solid var(--border);font-size:11px}
#sortActions label{white-space:nowrap}#sortActions select{width:78px;font-size:12px}#sortActions button{font-size:11px;min-height:36px;padding:5px 8px}#moveSelection{background:var(--yellow);border-color:#d5c893}
#frontScreen{display:none;position:fixed;inset:0;z-index:20;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;background:radial-gradient(ellipse at 10% 5%,#fff9d7a8,transparent 50%),radial-gradient(ellipse at 90% 45%,#e6cdffb0,transparent 60%),linear-gradient(145deg,#fff,#e7f4ff 55%,#fce2ee);padding:env(safe-area-inset-top) 16px calc(20px + env(safe-area-inset-bottom));color:#244e65}body.front-mode #frontScreen{display:block}body.front-mode #game,body.front-mode #bar,body.front-mode #trayArea{visibility:hidden}.frontInner{max-width:650px;margin:0 auto;padding:20px 4px;text-align:center}.home{min-height:100dvh;position:relative;isolation:isolate;overflow:hidden;margin:calc(-1 * env(safe-area-inset-top)) -16px -20px;padding:0 20px;background:#f8f8fe url('assets/home_visual_reference.jpg') center bottom / auto 100% no-repeat}.home .frontInner{padding:clamp(65px,13dvh,130px) 0 40dvh}.frontLogo{font-size:clamp(44px,12vw,76px);font-weight:900;letter-spacing:.16em;line-height:1.1;color:#366f89;text-shadow:0 2px #fff}.frontSub{font-size:clamp(18px,5vw,30px);font-weight:750;letter-spacing:.13em;margin:8px 0 28px}.frontButton{display:block;width:100%;max-width:300px;margin:12px auto;padding:13px 12px;border-radius:18px;border:1px solid #a2d5e7;background:#fffffff0;font-size:clamp(16px,4.5vw,21px);font-weight:800;color:#245b76;letter-spacing:.08em;box-shadow:0 4px 14px #9c8aa323}.frontButton.secondary{background:#e5f7fbe8}.frontDesc{font-size:12px;line-height:1.7;color:#4e7183;margin:12px 0}.frontBack{display:block;text-align:left;background:none;border:0;font-size:14px;padding:10px 0;color:#245b76}.frontHead{font-size:25px;margin:15px 0 8px}.photoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}.photoCard{padding:8px;border:1px solid #b2ddea;background:#fffc;color:#244e65;display:flex;flex-direction:column;gap:7px}.photoCard img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}.photoName{font-size:14px}.photoState{font-size:11px;color:#527789}.collectionImage{max-width:100%;max-height:65dvh;object-fit:contain}.storageNote{font-size:11px;line-height:1.7;opacity:.85}.loading{padding:30px}

#frontScreen:has(.home){padding:0}#frontScreen>.frontInner:has(.home){max-width:none;padding:0}.home{margin:0;background-image:none;background-color:#f7f9fc}.home .frontInner{max-width:600px;padding-left:20px;padding-right:20px;padding-top:calc(clamp(65px,13dvh,130px) + env(safe-area-inset-top))}
.home::before{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,600px);aspect-ratio:1036/1536;background:url('assets/home_visual_reference.jpg') center bottom / contain no-repeat;mask-image:linear-gradient(to bottom,transparent,#000 22%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%);z-index:-1;pointer-events:none}
@media(max-height:700px){.home .frontInner{padding-top:calc(50px + env(safe-area-inset-top))}.frontSub{margin-bottom:16px}.frontButton{padding:9px;margin:9px auto}.home .frontDesc{margin:8px 0}}
@media(min-width:700px){.photoGrid{gap:20px}}
@media(max-width:350px){#sortGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sortHeader h1{font-size:17px}#sortActions{gap:4px;padding-left:4px;padding-right:4px}#sortActions button{padding:5px}.sortHeader p{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Compact pause menu and settings backup controls use the existing sky palette. */
.panel.pausePanel{width:min(390px,94vw);padding:16px}.pauseActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 0}.pauseActions button{min-height:46px;padding:10px 6px;font-size:13px;line-height:1.4}
.soundSettings{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;font-size:13px;margin:8px 0 18px}.soundSettings label{display:flex;align-items:center;gap:5px}
.backupTools{display:grid;gap:8px;text-align:left;border:1px solid var(--border);border-radius:12px;padding:12px;background:#f6fcff}.backupTools h3{font-size:15px;margin:0 0 3px}.backupTools label{font-size:12px}.backupTools select{width:100%;max-width:none}.backupTools button{padding:10px;font-size:13px}.backupTools .storageNote{margin:2px 0 0;font-size:11px;line-height:1.6}.controlsHelp{margin-top:12px;text-align:left;font-size:12px}.controlsHelp summary{cursor:pointer;padding:8px 0}.controlsHelp p{font-size:12px}
#importFileName{overflow-wrap:anywhere}
@media(max-width:350px){.pauseActions button{font-size:12px;padding:8px 4px}}