:root{color-scheme:light;font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;--ink:#27372b;--cream:#fff8df;--yellow:#ffda73;--forest:#325842}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:#1c3027;display:flex;justify-content:center;align-items:center;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #fff;outline-offset:4px}.hidden{display:none!important}.game-shell{position:relative;width:min(100%,460px);height:100vh;height:100dvh;max-height:920px;overflow:hidden;isolation:isolate;background:#79ad7e;box-shadow:0 0 0 1px #ffffff17,0 25px 100px #0c201c88}#game{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}.ambient{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 65px #18342024;z-index:1}.hud{position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;right:14px;display:flex;justify-content:space-between;gap:12px;z-index:3;pointer-events:none}.readout{display:flex;flex-direction:column;min-width:116px;border:2px solid #f9f2d6ab;border-radius:15px;padding:8px 13px 9px;background:#1b372fbf;color:#fffdf1;box-shadow:0 3px 12px #1d382033;backdrop-filter:blur(5px);font-variant-numeric:tabular-nums}.readout-right{text-align:right}.readout-label{font-size:10px;letter-spacing:.17em;font-weight:900;color:#f7dfa0}.readout strong{font-size:clamp(22px,6vw,30px);line-height:1.1;font-weight:950;letter-spacing:-.035em}.readout small{font-size:13px;letter-spacing:0}.sound-button{position:absolute;right:15px;top:calc(91px + env(safe-area-inset-top));z-index:4;width:34px;height:34px;border:1px solid #fff9;border-radius:50%;background:#2c473ebd;color:#fff;font-size:20px;display:grid;place-items:center;line-height:1;box-shadow:0 2px 8px #0002}.sound-button.muted{color:#d2d4c5;background:#47534ec9;text-decoration:line-through}.roll-wrap{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:5;filter:drop-shadow(0 6px 1px #20362655)}.roll-button{--charge:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;width:112px;height:112px;border-radius:50%;border:0;background:conic-gradient(#fbe386 calc(var(--charge)*1turn),#33493e calc(var(--charge)*1turn));color:#233c2d;box-shadow:0 5px 0 #25372e,0 0 0 3px #fef8d3b5;transition:filter .15s,transform .12s;touch-action:manipulation}.roll-button:before{content:"";position:absolute;inset:7px;border-radius:50%;background:linear-gradient(145deg,#ffefac,#e5a84d);box-shadow:inset 0 3px 3px #fff9,inset 0 -3px 3px #9c762777}.roll-button:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #25372e,0 0 0 3px #fef8d3b5}.roll-button:disabled{cursor:default;filter:saturate(.5)}.roll-button:disabled:before{background:linear-gradient(145deg,#aeb5a3,#879988)}.roll-symbol,.roll-name,.roll-status{position:relative;z-index:1}.roll-symbol{font-size:28px;height:27px;line-height:1}.roll-name{font-weight:950;font-size:21px;white-space:nowrap;letter-spacing:.02em}.roll-status{font-size:9px;font-weight:900;letter-spacing:.14em;min-height:13px}.roll-button.rolling:before{background:linear-gradient(135deg,#e6ffb0,#9bdb8a)}.roll-button.rolling{box-shadow:0 5px 0 #25372e,0 0 0 6px #cafa9d88,0 0 25px #e4ff89b0}.slide-hint{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:95%;z-index:4;padding:11px 17px;border-radius:40px;background:#1c382dd8;color:#fffde9;border:1px solid #fff8;font-weight:900;font-size:clamp(15px,5vw,20px);box-shadow:0 5px 24px #0004;animation:hintFade 3s forwards;pointer-events:none}.roll-hint{position:absolute;bottom:calc(145px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;color:#fffdf2;background:#234736e0;border:1px solid #ffffd777;border-radius:12px;padding:9px 12px;z-index:4;font-size:14px;font-weight:900;animation:hintFade 3s forwards;pointer-events:none}.new-best{position:absolute;top:calc(102px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:4;white-space:nowrap;background:#fff4b9;color:#5a491d;font-size:17px;font-weight:1000;letter-spacing:.06em;border-radius:999px;padding:8px 19px;border:2px solid #e6a74f;box-shadow:0 3px 15px #0002;animation:bestPop 1.9s both;pointer-events:none}.screen{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:18px 15px;background:linear-gradient(180deg,#0f28248f,#193b31bd 65%,#193027da);overflow-y:auto}.title-card,.over-card{position:relative;width:100%;max-width:388px;text-align:center;padding:clamp(18px,4.5vh,34px) 18px 24px;border:3px solid #ffebbb;border-radius:28px;background:linear-gradient(170deg,#fffaf0 0%,#f5f2db 100%);box-shadow:0 9px 0 #4f6445,0 18px 34px #0005;color:var(--ink)}.title-card:before{content:"";position:absolute;left:20px;right:20px;top:10px;border-radius:25px;height:1px;background:#ffffff}.series-label{display:inline-block;background:#355b43;color:#fff7d9;font-weight:900;font-size:11px;letter-spacing:.14em;border-radius:999px;padding:8px 15px}.series-label span{color:#ffdb78}.title-mark{font-size:14px;color:#d19b39;letter-spacing:.95em;margin:16px 0 4px;padding-left:.95em}h1{display:flex;flex-direction:column;gap:1px;margin:0;line-height:1.14;letter-spacing:-.06em;font-weight:1000;text-shadow:2px 3px 0 #d2dcaf}h1 span:first-child{color:#dd8434;font-size:clamp(37px,10.7vw,53px)}h1 span:last-child{color:#305b45;font-size:clamp(27px,8.3vw,39px);white-space:nowrap}.roman-title{font-size:12px;letter-spacing:.13em;font-weight:800;color:#8d9178;margin:11px 0 0}.mini-divider{height:1px;background:linear-gradient(90deg,transparent,#b9b79d,transparent);margin:18px auto;width:75%}.how-to{font-size:clamp(15px,4.4vw,18px);line-height:1.8;margin:0 0 20px;font-weight:750}.how-to b{color:#b9681c}.primary-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:310px;margin:0 auto;padding:15px 20px;border-radius:18px;border:2px solid #ffffffbb;background:linear-gradient(180deg,#e59a49,#cf7235);box-shadow:0 5px 0 #93522b,0 11px 22px #93522b33;color:#fff;font-size:22px;font-weight:1000;text-shadow:0 2px 0 #93472744;touch-action:manipulation}.primary-button:active{transform:translateY(4px);box-shadow:0 1px 0 #93522b}.primary-button span{font-size:26px}.title-foot{font-size:12px;font-weight:750;color:#7b7e64;margin:19px 0 0}.over-card{max-width:340px}.over-eyebrow{color:#758264;font-size:14px;font-weight:850}.over-card h2{font-size:clamp(30px,9vw,42px);line-height:1.2;margin:12px 0;color:#385b43;letter-spacing:.02em}.over-distance{color:#c16b31;font-variant-numeric:tabular-nums;line-height:1;font-size:clamp(48px,14vw,68px);font-weight:1000;letter-spacing:-.04em;margin:15px auto 17px}.over-distance small{font-size:23px}.over-best{display:inline-block;color:#365642;background:#e3e8cf;border-radius:12px;font-size:18px;font-weight:750;padding:10px 20px;font-variant-numeric:tabular-nums}.over-message{margin:18px 0 21px;color:#6d775f;font-size:14px;font-weight:750}@keyframes bestPop{0%{opacity:0;transform:translate(-50%,-17px) scale(.77)}17%{opacity:1;transform:translate(-50%,0) scale(1.09)}30%,75%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-9px) scale(.99)}}@keyframes hintFade{0%,65%{opacity:1}100%{opacity:0}}@media(max-width:340px){.hud{left:8px;right:8px;top:calc(9px + env(safe-area-inset-top))}.readout{min-width:100px;padding:7px 10px}.readout strong{font-size:23px}.sound-button{top:calc(78px + env(safe-area-inset-top))}.roll-wrap{bottom:calc(10px + env(safe-area-inset-bottom))}.roll-button{width:100px;height:100px}.roll-name{font-size:19px}.roll-hint{bottom:calc(123px + env(safe-area-inset-bottom))}.title-card{padding:20px 12px 19px}.title-mark{margin-top:9px}.mini-divider{margin:13px auto}.how-to{margin-bottom:15px}.title-foot{margin-top:13px}}@media(max-height:590px){.title-card{padding-top:13px;padding-bottom:15px}.title-mark{margin:5px 0 1px}.mini-divider{margin:9px auto}.how-to{line-height:1.45;margin-bottom:10px}.primary-button{padding:10px 16px}.title-foot{margin-top:10px}.roll-button{width:94px;height:94px}.roll-name{font-size:18px}}