:root{--ink: #3c3327;--ink-soft: #7a6c58;--paper: #f6f0e4;--paper-2: #ece2cf;--line: rgba(90, 74, 52, .18);--accent: #b4634a;--accent-2: #6f8b74;--amber: #c08a3e;--shadow: 0 10px 24px rgba(72, 58, 38, .16), 0 2px 6px rgba(72, 58, 38, .1);--panel: rgba(246, 240, 228, .92)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#e9e1d2;color:var(--ink);font:14px/1.4 ui-rounded,SF Pro Rounded,Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}#app{position:fixed;inset:0}#view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#view[hidden]{display:none}button{font:inherit;color:inherit;cursor:pointer}.tool{padding:8px 13px;border-radius:10px;border:1px solid var(--line);background:var(--paper);font-size:13px;font-weight:600;white-space:nowrap}.tool:disabled{opacity:.4;cursor:default}.tool:active:not(:disabled){transform:translateY(1px)}.tool.ghost{font-weight:500}.tool.primary{background:var(--accent-2);color:#fff;border-color:transparent}.tool.danger{background:var(--accent);color:#fff;border-color:transparent}.icon{width:30px;height:30px;padding:0;border-radius:9px;border:1px solid var(--line);background:var(--paper);font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.icon[data-off="1"]{opacity:.42;text-decoration:line-through}.mark{width:20px;height:20px;border-radius:6px;flex:none;background:radial-gradient(circle at 50% 118%,var(--paper) 0 34%,transparent 35%),linear-gradient(135deg,var(--accent) 0 55%,var(--accent-2) 55% 100%);box-shadow:inset 0 0 0 1px #0000001f}#menu{position:absolute;inset:0;overflow-y:auto;padding:max(24px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:18px;background:radial-gradient(120% 80% at 50% 0%,#f6f1e6,#e9e1d2 60%,#ddd3c0)}#menu[hidden]{display:none}.menuHead{text-align:center;max-width:460px}.menuHead .mark{display:inline-block;vertical-align:-3px;margin-right:8px}.menuHead h1{display:inline;font-size:22px;letter-spacing:.2px;margin:0}.menuHead p{margin:8px 0 0;font-size:13px;color:var(--ink-soft)}#cards{display:grid;gap:14px;width:100%;max-width:720px;grid-template-columns:1fr}@media(min-width:620px){#cards{grid-template-columns:1fr 1fr}}.pcard{display:flex;flex-direction:column;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);text-align:left}.pcard .shot{height:168px;border-radius:11px;background:linear-gradient(180deg,#f7f2e7,#e6ddca);display:grid;place-items:center;overflow:hidden;margin-bottom:10px}.pcard .shot img{width:100%;height:100%;object-fit:contain}.pcard h2{margin:0;font-size:16px}.pcard .blurb{margin:3px 0 10px;font-size:12.5px;color:var(--ink-soft)}.pcard .meter{height:6px;border-radius:3px;background:#5a4a3429;overflow:hidden;margin-bottom:8px}.pcard .meter span{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),#8fae93)}.pcard .foot{display:flex;align-items:center;gap:10px}.pcard .state{font-size:12px;color:var(--ink-soft);flex:1}.pcard.done .state{color:var(--accent-2);font-weight:600}.menuFoot{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-soft)}#play[hidden]{display:none}#brand,#status{position:absolute;top:max(10px,env(safe-area-inset-top));display:flex;align-items:center;gap:8px;padding:6px 10px;background:#f6f0e4db;backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}#brand{left:10px;padding-left:6px}#status{right:10px}#brand .words{display:flex;flex-direction:column;line-height:1.15}#brand b{font-size:13.5px;letter-spacing:.2px}#brand i{font-style:normal;font-size:10px;color:var(--ink-soft)}#progress{width:64px;height:6px;border-radius:3px;background:#5a4a3429;overflow:hidden}#bar{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent-2),#8fae93);transition:width .28s cubic-bezier(.2,.8,.2,1)}#count{font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink-soft);min-width:42px;text-align:right}#toast{position:absolute;left:50%;transform:translate(-50%);bottom:calc(var(--tray-h, 140px) + 16px);max-width:min(86vw,380px);text-align:center;padding:8px 14px;font-size:12.5px;font-weight:600;background:var(--panel);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);pointer-events:none;animation:rise .22s cubic-bezier(.2,1,.3,1) both}#toast[hidden]{display:none}#toast[data-kind=turned]{color:#8a5c14;border-color:#c08a3e80}#toast[data-kind=far]{color:var(--ink-soft)}#toast[data-kind=good]{color:#3f6b4a;border-color:#6f8b7480}#toast[data-kind=notice]{color:#4a5a72;border-color:#5f83ad80}@keyframes rise{0%{opacity:0;transform:translate(-50%) translateY(6px)}}#tray{position:absolute;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));margin:0 auto;max-width:min(96vw,960px);padding:8px 10px 10px;background:var(--panel);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);transition:opacity .4s,transform .4s}#tray[data-hidden="1"]{opacity:0;transform:translateY(18px);pointer-events:none}#coach{margin:2px 2px 8px;padding:8px 11px;font-size:12.5px;line-height:1.35;color:#4a5b4d;background:#6f8b7421;border:1px solid rgba(111,139,116,.32);border-radius:10px}#coach[hidden]{display:none}#coach b{color:#3f6b4a}#trayTools{display:flex;align-items:center;gap:8px;margin-bottom:8px}#selName{font-size:11.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:right}@keyframes nudge{0%,to{transform:translate(0)}20%{transform:translate(-3px)}45%{transform:translate(3px)}70%{transform:translate(-2px)}}.tool[data-nudge="1"]{animation:nudge .45s ease 2;border-color:var(--amber);box-shadow:0 0 0 2px #c08a3e47}#thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:5px}@media(min-width:560px){#thumbs{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}}.thumb{position:relative;aspect-ratio:1;padding:2px;border-radius:10px;border:1px solid var(--line);background:linear-gradient(180deg,#fffaf0,var(--paper-2));touch-action:none;display:flex;align-items:center;justify-content:center;transition:transform .12s,box-shadow .12s,border-color .12s,opacity .3s}.thumb img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(70,55,35,.28))}.thumb[data-sel="1"]{border-color:var(--accent-2);box-shadow:0 0 0 2px #6f8b7459;transform:translateY(-2px)}.thumb[data-gone="1"]{opacity:.3;background:#78695014;box-shadow:inset 0 1px 3px #4637232e;pointer-events:none}.thumb[data-gone="1"] img{filter:grayscale(1) opacity(.65)}.thumb[data-dragging="1"]{opacity:.3}.thumb[data-coach="1"]:after{content:"";position:absolute;inset:-4px;border-radius:13px;border:2px solid var(--accent-2);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.25}50%{opacity:.9}}#done{position:absolute;left:50%;transform:translate(-50%);bottom:max(14px,env(safe-area-inset-bottom));width:min(94vw,460px)}#done[hidden]{display:none}#done .card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:16px 18px 15px;background:var(--panel);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);animation:pop .42s cubic-bezier(.2,1.3,.3,1) both}#done b{font-size:17px}#done span{font-size:12.5px;color:var(--ink-soft)}#done .row{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;justify-content:center}@keyframes pop{0%{transform:scale(.94) translateY(10px);opacity:0}}#confirm{position:absolute;inset:0;display:grid;place-items:center;background:#e9e1d299;backdrop-filter:blur(3px);z-index:5}#confirm[hidden]{display:none}#confirm .card{width:min(90vw,340px);padding:20px 22px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);animation:pop .3s cubic-bezier(.2,1.3,.3,1) both}#confirm b{font-size:16px}#confirm p{margin:6px 0 15px;font-size:13px;color:var(--ink-soft)}#confirm .row{display:flex;gap:8px;justify-content:center}@media(max-width:560px){#brand{max-width:calc(100vw - 196px);gap:6px}#brand b{font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#brand i{display:none}#status{gap:6px;padding:6px 8px}#progress{width:40px}#count{font-size:11px;min-width:34px}.icon{width:26px;height:26px;font-size:13px}}#tableHelp{display:none;font-size:12px;color:var(--ink-soft);max-width:600px}#play[data-mode=tabletop] #tableHelp{display:block}#play[data-mode=tabletop] #thumbs,#play[data-mode=tabletop] #rotate{display:none}#play[data-mode=tabletop] #tray{max-width:660px}#play[data-mode=tabletop] #trayTools{margin-bottom:4px}#play[data-mode=tabletop] .tool{min-height:44px}#tableOverview{display:none}#play[data-mode=tabletop] #tableOverview{display:inline-block}@media(max-width:450px){#play[data-mode=tabletop] #selName{display:none}}#gestureTutorial{position:absolute;top:max(66px,calc(env(safe-area-inset-top) + 56px));left:50%;transform:translate(-50%);width:min(94vw,460px);padding:12px 16px;border-radius:16px;background:#f6f0e4f7;border:1px solid var(--line);box-shadow:var(--shadow);z-index:3}#gestureTutorial[hidden]{display:none}#gestureTutorial strong{font-size:16px}#gestureTutorial p{margin:5px 0 10px;font-size:13px;color:var(--ink-soft)}.tutorialActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tutorialActions span{flex:1;font-size:11px;color:var(--ink-soft)}.tutorialActions button{min-height:40px}.tutorialActions button[hidden],#tutorialHelp{display:none}#play[data-mode=tabletop] #tutorialHelp{display:inline-block}#play[data-mode=tabletop] #trayTools{flex-wrap:wrap}@media(max-width:450px){#play[data-mode=tabletop] #trayTools{gap:4px}#play[data-mode=tabletop] #trayTools .tool{padding:8px;font-size:12px}}#wsKit{position:absolute;left:50%;bottom:32px;transform:translate(-50%);width:min(540px,calc(100% - 28px));padding:22px 24px;text-align:center;border:1px solid #fff9;border-radius:18px;background:#f7f2e6f5;box-shadow:0 12px 55px #39372b20;color:#3e4d3d;z-index:15}#wsKit small,.ws-dialog small{font:10px Arial,sans-serif;letter-spacing:2px}#wsKit h2,.ws-dialog h2{font: 29px Georgia,serif;margin:9px 0 12px}#wsKit p{font-size:13px;line-height:1.5;margin:8px 0 17px}#wsKit>span{display:block;font-size:10px;color:#777b67;margin-top:12px}#wsKit>div{display:flex;gap:8px;justify-content:center}#wsKit[hidden],.ws-reference[hidden],#wsDisplay[hidden]{display:none}#play[data-workshop-state=sealed] #tray,#play[data-workshop-state=opened] #tray,#play[data-workshop-state=pouring] #tray{visibility:hidden}.ws-reference{position:absolute;top:82px;right:24px;z-index:12;background:#f6f0e5}.ws-feedback{position:absolute;left:50%;top:96px;transform:translate(-50%);max-width:calc(100% - 34px);padding:9px 16px;background:#f9f4e9f2;border:1px solid #7f8e753d;border-radius:22px;font-size:12px;color:#354536;pointer-events:none;z-index:12;text-align:center}.ws-feedback[hidden]{display:none}.ws-dialog{width:min(780px,calc(100vw - 28px));max-height:calc(100dvh - 30px);padding:24px;border:1px solid #fff8;border-radius:20px;background:#f5f0e4;color:#3e4b39;box-shadow:0 25px 90px #17231855;overflow:auto}.ws-dialog::backdrop{background:#25332866;backdrop-filter:blur(3px)}.ws-dialog header{display:flex;align-items:start;justify-content:space-between;gap:12px}.ws-dialog h2{margin:9px 0 15px}.ws-model{height:min(48vh,420px);min-height:210px;border-radius:12px;overflow:hidden;background:#e7e5d8;touch-action:none}.ws-model canvas{display:block;width:100%;height:100%}.ws-angles{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:14px}.ws-dialog p{font-size:12px;line-height:1.7;text-align:center}.ws-gallery-actions{display:flex;gap:8px;justify-content:center}.ws-replay{width:min(480px,calc(100vw - 28px));text-align:center}.ws-replay>div{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}#wsShelf{max-width:1120px;margin:18px auto 0;padding:15px 20px;background:#dce2d2;border:1px solid #c1cbb7;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#42523c}#wsShelf p{font-size:11px;margin:5px 0}#wsShelf b{font:20px Georgia,serif}@media(max-width:600px){#wsKit{bottom:20px;padding:18px 15px}#wsKit h2{font-size:25px}#wsKit .tool{padding:11px 13px}.ws-reference{top:74px;right:12px;font-size:11px;padding:9px 12px}.ws-feedback{top:116px;font-size:11px;width:max-content}.ws-dialog{padding:17px}.ws-dialog h2{font-size:24px}.ws-dialog .tool{font-size:11px;padding:10px 12px}.ws-model{height:40vh}#wsShelf{margin:15px 12px}#wsShelf b{font-size:17px}}@media(prefers-reduced-motion:reduce){#play[data-workshop-state] *,.ws-dialog *{animation:none!important;transition:none!important}}#arrangeMenu{position:relative}#arrangeMenu summary{list-style:none;cursor:pointer;min-height:40px;display:flex;align-items:center}#arrangeMenu summary::-webkit-details-marker{display:none}#arrangeMenu[open] summary{background:#e1e5d7}.arrange-panel{position:absolute;bottom:calc(100% + 10px);left:0;width:245px;padding:10px;border:1px solid #c9cbb9;border-radius:13px;background:#faf7ee;box-shadow:0 10px 30px #343d3028;z-index:30;display:grid;gap:6px}.arrange-panel .tool{text-align:left;min-height:44px}.arrange-panel small{display:block;font-size:10px;font-weight:400;opacity:.7;margin-top:4px}.arrange-panel p{font-size:11px;line-height:1.5;margin:4px 6px;color:#626856}#setDownPiece{background:#e2e7d7;min-height:40px}#arrangeMenu[hidden],#setDownPiece[hidden]{display:none}.sort-label{position:absolute;transform:translate(-50%,-100%);font:11px Georgia,serif;letter-spacing:.05em;padding:3px 8px;border-radius:8px;background:#f4efdfbb;color:#525e47;pointer-events:none}.sort-label[hidden]{display:none}@media(max-width:600px){.arrange-panel{position:fixed;left:12px;bottom:165px;width:min(270px,calc(100vw - 24px))}.ws-feedback{max-width:calc(100% - 24px);padding:6px 11px;font-size:10px}#play[data-mode=tabletop] #trayTools{gap:4px}#play[data-mode=tabletop] #trayTools .tool{min-height:40px}}