:root{--paper: #f7f0dc;--paper-deep: #ece2c6;--sheet: #fffdf6;--ink: #4a3f35;--ink-soft: rgba(74, 63, 53, .72);--accent: #b5502f;--red: #d08359;--green: #9dbe8c;--yellow: #ebc65c;--blue: #7fa8c9;--font: "Gaegu", "Patrick Hand", "Comic Sans MS", cursive;--hand-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;--hand-radius-2: 18px 7px 16px 8px / 8px 16px 7px 18px;color-scheme:light}*,*:before,*:after{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#app{position:fixed;inset:0;user-select:none;-webkit-user-select:none}.stage{position:absolute;inset:0}.overlay-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.board-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.safe-probe{position:fixed;inset:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);visibility:hidden;pointer-events:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}:focus-visible{outline:2.5px dashed var(--accent);outline-offset:3px}.pencil-loop{position:absolute;left:-9px;top:-7px;width:calc(100% + 18px);height:calc(100% + 14px);overflow:visible;pointer-events:none;opacity:0}.pencil-loop path{stroke-dasharray:var(--len, 4000);stroke-dashoffset:var(--len, 4000)}.on>.pencil-loop,.active>.pencil-loop,.primary>.pencil-loop,.ready>.pencil-loop{opacity:1}.on>.pencil-loop path,.active>.pencil-loop path,.primary>.pencil-loop path,.ready>.pencil-loop path{animation:draw-loop .5s cubic-bezier(.4,.1,.3,1) forwards}.on>.pencil-loop path+path,.active>.pencil-loop path+path,.primary>.pencil-loop path+path,.ready>.pencil-loop path+path{animation-delay:.12s}@keyframes draw-loop{to{stroke-dashoffset:0}}.pencil-underline{display:block;width:min(300px,70%);height:16px;margin:-6px auto 4px;overflow:visible}.pencil-underline path{stroke-dasharray:var(--len, 4000);stroke-dashoffset:var(--len, 4000);animation:draw-loop .7s .2s ease-out forwards}.big-btn{position:relative;min-height:56px;padding:6px 30px 8px;font-size:clamp(24px,4.2vw,30px);font-weight:700;letter-spacing:.04em;background:#fffdf6db;border:2px solid var(--ink);border-radius:var(--hand-radius);box-shadow:2px 3px #4a3f3533;transition:transform .12s ease,box-shadow .12s ease}.big-btn:hover{transform:rotate(-1deg) translateY(-1px)}.big-btn:active{transform:translate(1px,2px);box-shadow:1px 1px #4a3f3533}.big-btn>span{position:relative}.panel{position:absolute;z-index:4;display:flex;flex-direction:column;justify-content:center;gap:10px}.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}.panel[data-orient=portrait]{justify-content:flex-start;gap:8px}.panel[data-orient=portrait] .chips{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.chip{position:relative;display:flex;align-items:center;gap:6px;min-height:52px;padding:3px 6px;opacity:.62;transition:opacity .25s ease,transform .25s ease}.chip.active{opacity:1;transform:rotate(-1.5deg)}.chip img{width:42px;height:42px;flex:none}.chip-text{min-width:0;line-height:1}.chip-text b{display:block;font-size:19px;line-height:.95}.chip-text small{display:block;font-size:15px;color:var(--ink-soft)}.dots{display:flex;gap:3px;margin-top:3px}.dot{width:8px;height:8px;border-radius:50%;border:1.4px solid var(--ink);background:#fffdf699}.dot.on{background:var(--yellow)}.panel[data-orient=portrait] .chip{flex-direction:column;justify-content:center;text-align:center;gap:0;padding:2px 2px 4px;min-height:0}.panel[data-orient=portrait] .chip img{width:34px;height:34px}.panel[data-orient=portrait] .chip-text b{font-size:16px;white-space:nowrap}.panel[data-orient=portrait] .chip-text small{font-size:13px}.panel[data-orient=portrait] .dot{width:7px;height:7px}.panel[data-orient=portrait] .roll-btn{min-height:52px}.panel[data-orient=portrait] .hint{font-size:17px}.panel[data-orient=portrait] .dots{justify-content:center}.roll-btn{position:relative;min-height:58px;padding:4px 12px 6px;font-size:clamp(21px,2.7vw,29px);font-weight:700;letter-spacing:.03em;background:var(--sheet);border:2.2px solid var(--ink);border-radius:var(--hand-radius);box-shadow:2px 4px #4a3f3538;transition:transform .12s ease,opacity .2s ease}.roll-btn:disabled{opacity:.42;box-shadow:none}.roll-btn.ready{animation:nudge 2.6s ease-in-out infinite}.roll-btn:not(:disabled):active{transform:translate(1px,3px);box-shadow:1px 1px #4a3f3538}.roll-label{position:relative;white-space:nowrap}@keyframes nudge{0%,86%,to{transform:rotate(0)}90%{transform:rotate(-2deg) scale(1.03)}95%{transform:rotate(1.6deg) scale(1.03)}}.hint{margin:0;min-height:1.25em;font-size:18px;line-height:1.25;text-align:center;color:var(--ink-soft)}.toolbar{position:absolute;z-index:4;display:flex;align-items:center;justify-content:flex-end;gap:8px}.toolbar[data-orient=portrait]{justify-content:center}.mini-btn{display:inline-flex;align-items:center;gap:4px;min-width:44px;min-height:44px;padding:0 11px 2px 8px;font-size:18px;background:#fffdf6b8;border:1.7px solid var(--ink);border-radius:var(--hand-radius-2)}.mini-btn:active{transform:translateY(1px)}.mini-btn .icon{width:21px;height:21px;flex:none}.toolbar[data-orient=landscape] .mini-btn{flex-direction:column;justify-content:center;gap:0;min-width:54px;padding:3px 8px 2px;font-size:15px;line-height:1}.bubble{position:absolute;z-index:6;width:max-content;padding:9px 15px 11px;pointer-events:none;opacity:0;transform:scale(.8) rotate(-2deg);transform-origin:10% 0%;transition:opacity .18s ease,transform .24s cubic-bezier(.3,1.6,.5,1)}.bubble[data-tail=left]{transform-origin:0% 30%}.bubble.show{opacity:1;transform:none}.bubble-outline{position:absolute;overflow:visible;z-index:0}.bubble-outline path{fill:#fffefa;stroke:var(--ink);stroke-width:1.7;stroke-linejoin:round}.bubble-text{position:relative;z-index:1;margin:0;font-size:clamp(17px,2.1vw,21px);line-height:1.2}.screen{position:fixed;inset:0;z-index:10;overflow-y:auto;-webkit-overflow-scrolling:touch}.start-screen{display:flex;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}.start-card{width:min(540px,100%);margin:auto;padding:6px 2px 10px;text-align:center}.title{margin:0;font-size:clamp(56px,13vw,92px);font-weight:700;line-height:.9;letter-spacing:.01em;transform:rotate(-2.5deg)}.subtitle{margin:0 0 14px;font-size:clamp(19px,4.4vw,23px);color:var(--ink-soft)}.start-section{margin:10px 0 6px}.start-section h2{margin:0 0 4px;font-size:23px;font-weight:700;color:var(--accent)}.picker{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 10px}.pick{position:relative;display:grid;justify-items:center;min-width:82px;padding:2px 6px 6px;background:none;border:none;font-size:19px}.pick img{width:66px;height:66px;transition:transform .22s cubic-bezier(.3,1.6,.5,1)}.pick.on img{transform:translateY(-5px) rotate(-5deg) scale(1.08)}.pick.on span{font-weight:700}.seat-list{display:grid;gap:2px;max-width:440px;margin:0 auto}.seat{display:grid;grid-template-columns:40px minmax(70px,1fr) auto;align-items:center;gap:8px;text-align:left}.seat img{width:40px;height:40px}.seat-name{font-size:20px}.seg{display:flex;gap:2px}.seg-btn{position:relative;min-width:44px;min-height:44px;padding:0 10px 2px;background:none;border:none;font-size:19px;color:var(--ink-soft)}.seg-btn.on{color:var(--ink);font-weight:700}.seg-btn .pencil-loop{left:-3px;top:2px;width:calc(100% + 6px);height:calc(100% - 4px)}.start-error{min-height:1.3em;margin:6px 0 2px;font-size:19px;color:var(--accent)}.start-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 22px;margin:4px 0 10px}.notes{margin:6px 0 0;font-size:17px;color:var(--ink-soft)}.notes:empty{display:none}@media(max-width:380px){.seat{grid-template-columns:34px 1fr}.seat .seg{grid-column:1 / -1;justify-content:flex-end;margin-top:-10px}.seat img{width:34px;height:34px}}.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#f7f0dc8c}.dialog{position:relative;max-height:100%;overflow-y:auto;text-align:center}.dialog h2{margin:0 0 6px;font-size:32px;font-weight:700}.notebook{width:min(440px,100%);padding:22px 22px 22px 70px;text-align:left;background-color:var(--sheet);background-image:linear-gradient(90deg,transparent 50px,rgba(181,80,47,.42) 50px,rgba(181,80,47,.42) 52px,transparent 52px),repeating-linear-gradient(180deg,transparent 0 35px,rgba(127,168,201,.4) 35px 36px);background-position:0 0,0 8px;border-radius:6px 12px 8px 14px;box-shadow:0 1px #4a3f351a,5px 9px 24px #4a3f3533;transform:rotate(-.8deg)}.notebook:before{content:"";position:absolute;left:15px;top:18px;bottom:18px;width:18px;background:radial-gradient(circle at 9px 9px,var(--paper-deep) 6px,rgba(74,63,53,.35) 6.5px,transparent 7.5px) 0 0 / 18px 36px repeat-y}.opts{display:grid;gap:0}.opt{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;min-height:54px;font-size:22px}.opt-label{min-width:108px}.choices{display:flex;gap:8px}.choice{position:relative;min-width:64px;min-height:44px;padding:0 10px 2px;background:none;border:none;font-size:22px;color:var(--ink-soft)}.choice.on{color:var(--ink);font-weight:700}.choice .pencil-loop{left:-4px;top:1px;width:calc(100% + 8px);height:calc(100% - 2px)}.links{display:flex;flex-wrap:wrap;gap:4px 18px;margin:14px 0 8px}.link-btn{min-height:44px;padding:0 2px;background:none;border:none;font-size:21px;color:var(--accent);text-decoration:underline wavy rgba(181,80,47,.55);text-underline-offset:5px}.close-btn{display:block;min-height:44px;margin-left:auto;padding:0 14px 2px;font-size:21px;background:#fffdf6e6;border:1.7px solid var(--ink);border-radius:var(--hand-radius-2)}.pause{width:min(360px,100%);padding:26px 22px 24px;background:var(--sheet);border:2px solid var(--ink);border-radius:var(--hand-radius);box-shadow:4px 6px #4a3f3529}.pause-note{margin:0 0 18px;font-size:20px;color:var(--ink-soft)}.win-modal{background:transparent;pointer-events:none;align-items:flex-end}.win{pointer-events:auto;width:min(330px,100%);padding:14px 20px 18px;background:var(--sheet);border:2px solid var(--ink);border-radius:14px 26px 16px 22px/22px 14px 26px 16px;box-shadow:4px 7px #4a3f3529;animation:card-in .45s cubic-bezier(.3,1.5,.5,1) both}@media(orientation:landscape){.win-modal{align-items:center;justify-content:flex-end;padding-right:max(2vw,env(safe-area-inset-right))}}@keyframes card-in{0%{opacity:0;transform:translateY(30px) rotate(3deg)}}.win-creature{width:104px;height:104px;margin:-4px auto 0;display:block;animation:hop 1.1s ease-in-out infinite}@keyframes hop{0%,to{transform:translateY(0)}45%{transform:translateY(-10px) rotate(-3deg)}}.win-name{margin:0 0 6px;font-size:28px;font-weight:700}.win-stats{display:grid;gap:2px;margin:0 0 14px;font-size:20px}.win-stats div{display:flex;justify-content:space-between;gap:12px;border-bottom:1.5px dashed rgba(74,63,53,.3);padding:2px 4px}.win-stats dt{color:var(--ink-soft)}.win-stats dd{margin:0;font-weight:700}.win-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px}.win-actions .big-btn{font-size:24px;padding:4px 20px 6px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}body.three .start-card{background:#fbf7eaeb;border:2px solid rgba(74,63,53,.8);border-radius:22px 30px 26px 34px/30px 22px 34px 26px;box-shadow:4px 8px #4a3f351f;padding:12px 14px 16px}.modes{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 8px}.mode-note{margin:0;font-size:17px;color:var(--ink-soft)}.turn-toast{position:fixed;left:50%;top:16%;z-index:8;display:flex;align-items:center;gap:10px;padding:6px 20px 8px 10px;font-size:30px;font-weight:700;background:var(--sheet);border:2px solid var(--ink);border-radius:var(--hand-radius);box-shadow:3px 5px #4a3f3529;pointer-events:none;opacity:0;transform:translate(-50%,-20px)}.turn-toast:empty{display:none}.turn-toast.show{animation:toast 1.8s ease forwards}.turn-toast img{width:52px;height:52px}@keyframes toast{0%{opacity:0;transform:translate(-50%,-20px) scale(.9) rotate(-3deg)}14%{opacity:1;transform:translate(-50%) scale(1.05) rotate(-1deg)}24%{transform:translate(-50%) scale(1) rotate(-1.5deg)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-12px) scale(.97)}}body.three .panel{padding:8px 10px 6px;background:#fbf7eae6;border:1.6px solid rgba(74,63,53,.55);border-radius:16px 24px 18px 26px/24px 16px 26px 18px;box-shadow:3px 5px #4a3f351a}body.three .panel[data-orient=portrait]{height:auto!important}body.three .panel .roll-btn{font-size:clamp(19px,2.3vw,27px);padding-left:8px;padding-right:8px}body.three .stage:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:calc(.55 + var(--zoom, 0) * .45);background:radial-gradient(125% 95% at 50% 44%,#fffcf000 56%,#8c693c42),linear-gradient(180deg,#fffdf43d,#fffdf400 30%)}.tap-ripple{position:absolute;width:54px;height:54px;margin:-27px 0 0 -27px;border:2.5px dashed rgba(181,80,47,.85);border-radius:50%;pointer-events:none;animation:ripple .45s ease-out forwards}@keyframes ripple{0%{opacity:.95;transform:scale(.35) rotate(0)}to{opacity:0;transform:scale(1.25) rotate(40deg)}}.start-card>*{animation:rise .55s cubic-bezier(.2,.9,.3,1.15) both}.start-card>:nth-child(2){animation-delay:.05s}.start-card>:nth-child(3){animation-delay:.1s}.start-card>:nth-child(4){animation-delay:.15s}.start-card>:nth-child(5){animation-delay:.2s}.start-card>:nth-child(6){animation-delay:.25s}.start-card>:nth-child(7){animation-delay:.3s}@keyframes rise{0%{opacity:0;transform:translateY(16px)}}.pick.on img{animation:bob 1.8s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(-5px) rotate(-5deg) scale(1.08)}50%{transform:translateY(-10px) rotate(-2deg) scale(1.1)}}.chip.active{animation:chip-pop .5s cubic-bezier(.3,1.6,.5,1)}@keyframes chip-pop{0%{transform:scale(.86) rotate(3deg)}}.notebook,.pause{animation:card-in .42s cubic-bezier(.3,1.5,.5,1) both}.modal:not(.win-modal){animation:fade-in .2s ease both}@keyframes fade-in{0%{opacity:0}}.roll-btn:not(:disabled):active{transform:translate(1px,3px) scale(.98)}