:root{--color-ink: #101725;--color-lacquer: #172335;--color-raised: #223249;--color-hover: #2c4056;--color-ivory: #f2ead7;--color-muted: #c2c9c8;--color-boundary: #465369;--color-gold: #e3c780;--color-teal: #88d2bd;--color-danger: #f49a80;--color-jade: #25443e;--color-jade-hover: #30584d;--color-bronze: #483c2c;--color-bronze-hover: #5c4b32;--font-body: "Yu Gothic UI", "Meiryo", system-ui, sans-serif;--font-display: "Yu Mincho", "Hiragino Mincho ProN", serif;--corner-step: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px) , calc(100% - 2px) calc(100% - 4px) , calc(100% - 2px) calc(100% - 2px) , calc(100% - 4px) calc(100% - 2px) , calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px) , 2px calc(100% - 2px) , 2px calc(100% - 4px) , 0 calc(100% - 4px) , 0 4px, 2px 4px, 2px 2px, 4px 2px);font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--color-ivory);background:var(--color-ink);font-synthesis:none;color-scheme:dark;accent-color:var(--color-teal);scrollbar-color:var(--color-boundary) var(--color-ink)}*{box-sizing:border-box}html,body{margin:0;min-width:0}button,a{-webkit-tap-highlight-color:transparent}a{color:var(--color-ivory);text-underline-offset:4px;text-decoration-thickness:1px}button{--face: var(--color-raised);--face-hover: var(--color-hover);--frame: var(--color-boundary);position:relative;isolation:isolate;border:0;border-radius:0;min-height:44px;padding:8px 16px;background:transparent;color:var(--color-ivory);font:inherit;line-height:1.2;cursor:pointer}button:before,button:after{content:"";position:absolute;pointer-events:none;clip-path:var(--corner-step)}button:before{inset:0;z-index:-2;background:var(--frame)}button:after{inset:1px;z-index:-1;background:var(--face)}@media(hover:hover){button:not(:disabled):hover{--frame: var(--color-gold)}button:not(:disabled):hover:before{background:var(--color-gold)}button:not(:disabled):hover:after{background:var(--face-hover)}nav a:hover{color:var(--color-ivory)}}button:active:not(:disabled),button.held:not(:disabled){--frame: var(--color-ivory);transform:translateY(1px)}button:active:not(:disabled):before,button.held:not(:disabled):before{background:var(--color-ivory)}button:active:not(:disabled):after,button.held:not(:disabled):after{background:var(--face-hover);box-shadow:inset 0 3px 0 var(--color-ink)}button[aria-pressed=true]{--face: var(--color-jade);--face-hover: var(--color-jade-hover);--frame: var(--color-teal);color:var(--color-teal);outline:1px solid var(--color-teal);outline-offset:-4px}button.queued{outline:2px dashed var(--color-gold);outline-offset:-5px}button.unavailable{--frame: var(--color-muted)}button.unavailable:before{background:var(--color-muted)}button.unavailable small{color:var(--color-danger);text-decoration:underline dotted;text-underline-offset:3px}button:disabled{--face: var(--color-lacquer);--frame: var(--color-boundary);color:var(--color-muted);cursor:default}button:focus-visible,a:focus-visible{outline:2px solid var(--color-ivory);outline-offset:2px}canvas:focus-visible{outline:none}::selection{background:var(--color-gold);color:var(--color-ink)}#app{height:100vh;height:100dvh;max-width:1920px;min-width:0;margin:auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:grid;grid-template-rows:56px 80px minmax(0,1fr) 116px 28px;background:var(--color-lacquer)}header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:0 24px;border-bottom:1px solid var(--color-boundary);background:var(--color-ink)}.brand{color:var(--color-ivory);font-size:14px;font-weight:800;letter-spacing:.06em;white-space:nowrap}.brand span{color:var(--color-ivory);font-family:var(--font-display);font-size:14px;font-weight:700;margin-left:12px}nav{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}nav button{font-size:12px;padding:6px 12px}nav a{min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 8px}.hud{display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0;padding:8px 24px}.hud>div:first-child{min-width:0}.hud strong{color:var(--color-gold);font-family:var(--font-display);font-size:20px;font-weight:700}.hud p{color:var(--color-ivory);margin:4px 0 0;font-size:14px;line-height:1.4;overflow-wrap:anywhere}.vitals{display:flex;gap:20px;flex-shrink:0}.vitals label{display:grid;grid-template-columns:28px 110px 28px;gap:6px;align-items:center;font-size:12px}.vitals span{font-variant-numeric:tabular-nums;text-align:right}.vitals label:last-child{color:var(--color-teal)}meter{width:100%;height:10px;border:1px solid var(--color-boundary);border-radius:0;background:var(--color-ink);appearance:none}meter::-webkit-meter-bar{height:8px;border:0;border-radius:0;background:var(--color-ink)}meter::-webkit-meter-optimum-value,meter::-webkit-meter-suboptimum-value,meter::-webkit-meter-even-less-good-value{border-radius:0;background:var(--color-ivory)}#hp::-webkit-meter-suboptimum-value,#hp::-webkit-meter-even-less-good-value{background:var(--color-danger)}#mana::-webkit-meter-optimum-value,#mana::-webkit-meter-suboptimum-value,#mana::-webkit-meter-even-less-good-value{background:var(--color-teal)}meter::-moz-meter-bar{background:var(--color-ivory)}#hp:-moz-meter-sub-optimal::-moz-meter-bar,#hp:-moz-meter-sub-sub-optimal::-moz-meter-bar{background:var(--color-danger)}#mana::-moz-meter-bar{background:var(--color-teal)}#field{min-width:0;min-height:0;position:relative;overflow:hidden;border:1px solid var(--color-boundary);background:var(--color-ink)}#field:has(canvas:focus-visible){border-color:var(--color-muted)}canvas{display:block;width:100%;height:100%;touch-action:none}#panel{--panel-frame: var(--color-boundary);position:absolute;isolation:isolate;inset:16px 16px auto auto;width:min(440px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;display:flex;flex-direction:column;align-items:stretch;padding:24px;border:0;background:transparent;text-align:left}#panel:before,#panel:after{content:"";position:absolute;pointer-events:none;clip-path:var(--corner-step)}#panel:before{inset:0;z-index:-2;background:var(--panel-frame)}#panel:after{inset:1px;z-index:-1;background:var(--color-lacquer)}#panel[hidden]{display:none}h1{font-family:var(--font-display);font-size:clamp(24px,2.8vw,36px);font-weight:700;line-height:1.35;margin:0 0 12px;text-wrap:balance}#message{line-height:1.65;margin:0 0 16px;color:var(--color-ivory);font-size:14px;overflow-wrap:anywhere}#start{--face: var(--color-bronze);--face-hover: var(--color-bronze-hover);--frame: var(--color-boundary);color:var(--color-ivory);min-width:0;align-self:stretch;font-weight:700}#start:disabled{--face: var(--color-ink);--frame: var(--color-boundary);color:var(--color-muted)}#panel:has(#start:disabled){outline:1px dashed var(--color-boundary);outline-offset:-5px}#panel[data-result=true]{width:min(380px,calc(100% - 32px));padding:16px}#panel[data-result=true] h1{font-size:24px;margin-bottom:8px}#panel[data-result=true] #message{font-size:13px;line-height:1.5;margin-bottom:12px}.controls{display:grid;grid-template-columns:88px minmax(0,1fr) auto;align-items:center;gap:24px;padding:12px 24px;background:var(--color-lacquer);touch-action:none;-webkit-user-select:none;user-select:none}#stick{position:relative;width:88px;height:88px;border:1px solid var(--color-boundary);border-radius:50%;background:var(--color-ink);touch-action:none}#stick:before{content:"";position:absolute;inset:8px;border:1px dashed var(--color-boundary);border-radius:50%;pointer-events:none}#knob{width:36px;height:36px;background:var(--color-teal);border:2px solid var(--color-lacquer);border-radius:50%;position:absolute;left:calc(50% - 18px);top:calc(50% - 18px);pointer-events:none}#stick span{position:absolute;bottom:4px;width:100%;text-align:center;font-size:10px;color:var(--color-muted);pointer-events:none}.instructions{min-width:0;align-self:center;font-size:14px;line-height:1.6;color:var(--color-ivory);overflow-wrap:anywhere}kbd{font:inherit;color:var(--color-ivory)}#feedback{color:var(--color-ivory)}.actions{display:grid;grid-template-columns:repeat(4,88px);align-items:center;gap:8px}.actions button{width:100%;height:76px;padding:6px;font-size:18px;font-weight:700}.actions small{display:block;font-size:11px;line-height:1.3;font-weight:400;margin-top:6px;color:var(--color-muted);font-variant-numeric:tabular-nums}#attack{--face: var(--color-jade);--face-hover: var(--color-jade-hover);--frame: var(--color-teal)}#heavy{--face: var(--color-bronze);--face-hover: var(--color-bronze-hover);--frame: var(--color-boundary)}#magic{color:var(--color-teal)}footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 24px;border-top:1px solid var(--color-boundary);font-size:11px;color:var(--color-muted);background:var(--color-ink)}footer #progress{min-width:0}footer #rewards{flex-shrink:0;white-space:nowrap;color:var(--color-gold);font-variant-numeric:tabular-nums}@media(min-width:701px)and (max-width:1000px){.hud strong{font-size:18px}.hud p{font-size:11px}.instructions{font-size:10px;line-height:1.5}.actions{grid-template-columns:repeat(4,76px)}}@media(max-width:700px){#app{grid-template-rows:54px 88px minmax(0,1fr) 178px 28px}header{padding:0 8px;gap:6px}.brand{font-size:11px;letter-spacing:.02em}.brand span{display:none}nav{display:grid;grid-template-columns:44px 78px 64px 58px;gap:3px;font-size:11px}nav button{font-size:11px;padding:4px 2px}nav a{font-size:11px;padding:0}.hud{padding:8px 12px;gap:6px;align-items:stretch;flex-direction:column}.hud strong{font-size:16px;line-height:1.2}.hud p{margin:3px 0 0;font-size:11px;line-height:1.35}.vitals{gap:14px;width:100%}.vitals label{grid-template-columns:24px minmax(24px,1fr) 24px;flex:1;font-size:10px;gap:4px}.controls{grid-template-columns:88px minmax(0,1fr);grid-template-rows:46px 104px;gap:4px 16px;padding:8px 12px 12px}.instructions{grid-column:1 / -1;grid-row:1;font-size:10px;line-height:1.5}#stick{grid-column:1;grid-row:2}.actions{grid-column:2;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.actions button{height:49px;font-size:15px;padding:4px 2px}.actions small{font-size:10px;margin-top:3px}footer{padding:0 12px;font-size:10px}footer #progress{font-size:9px;line-height:1.3}#panel{inset:10px 10px auto auto;width:calc(100% - 20px);max-height:calc(100% - 20px);padding:16px}h1{font-size:24px}#message{font-size:13px}#panel[data-result=true]{width:min(300px,calc(100% - 20px));padding:12px}#panel[data-result=true] h1{font-size:20px}#panel[data-result=true] #message{font-size:12px;margin-bottom:8px}}@media(max-height:500px)and (min-width:701px){#app{grid-template-rows:48px 58px minmax(0,1fr) 82px 24px}header{padding:0 12px}.brand span{display:none}.hud{padding:4px 12px;gap:12px}.hud strong{font-size:16px}.hud p{font-size:11px;margin-top:2px}.vitals{gap:12px}.vitals label{grid-template-columns:24px 76px 24px;font-size:10px;gap:4px}.controls{grid-template-columns:66px minmax(0,1fr) auto;gap:16px;padding:6px 12px}#stick{width:66px;height:66px}#stick:before{inset:5px}#stick span{bottom:1px;font-size:9px}.instructions{font-size:10px;line-height:1.5}.actions{grid-template-columns:repeat(4,76px);gap:6px}.actions button{height:60px;font-size:15px}.actions small{font-size:10px;margin-top:4px}footer{padding:0 12px;font-size:10px}#panel,#panel[data-result=true]{inset:8px 8px auto auto;width:330px;max-height:calc(100% - 16px);padding:10px 12px}h1,#panel[data-result=true] h1{font-size:20px;margin-bottom:6px}#message,#panel[data-result=true] #message{font-size:11px;line-height:1.4;margin-bottom:6px}}html[data-reduced-motion=true] button:active,html[data-reduced-motion=true] button.held{transform:none}@media(prefers-reduced-motion:reduce){button:active,button.held{transform:none}}