:root{--bg:#22252b;--strip-bg:#2e323a;--control-bg:#3d434e;--control-on:#dc2626;--primary:#f5c518;--good:#22c55e;--text:#f1efe7;--text-dim:#a8a69e;--readout:#ff5a4f}*{box-sizing:border-box}html,body{overscroll-behavior:none;background:var(--bg);height:100%;color:var(--text);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;margin:0;font-family:system-ui,sans-serif;overflow:hidden}[hidden]{display:none!important}button,select{background:var(--control-bg);min-height:44px;color:var(--text);font:inherit;border:0;border-radius:10px;padding:0 14px;font-size:15px;font-weight:600}button.quiet{color:var(--text-dim);background:0 0;padding:0 10px}button.primary{background:var(--primary);color:#1b1d21}#app{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;display:flex}#stats,#controls{background:var(--strip-bg);flex:none}.strip,#actions{align-items:center;gap:8px;display:flex}.strip,#controls{padding:8px 12px}#actions button{white-space:nowrap;flex:1;padding:0 6px;font-size:14px}#actions button:disabled{opacity:.45}#actions button[aria-pressed=true]{background:var(--control-on)}#app[data-mode=classic] #ability,#app[data-mode=classic] #treat,#app[data-mode=classic] #call-in{display:none}.strip{justify-content:space-between;display:none}#app[data-mode=campaign] #stats-campaign,#app[data-mode=classic] #stats-classic{display:flex}#app[data-mode=menu] #controls{visibility:hidden}#enemies{color:var(--text-dim);padding:0 12px 8px;font-size:13px;display:none}#app[data-mode=campaign] #enemies:not(:empty){display:block}#preset{flex:1;min-width:0}.readout{min-width:3.4ch;color:var(--readout);font-variant-numeric:tabular-nums;text-align:center;background:#15171b;border-radius:8px;padding:6px 8px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:22px;font-weight:700}#place{flex-direction:column;flex:1;min-width:0;line-height:1.2;display:flex}#world-label{font-size:17px}#world-label,#roll-label{white-space:nowrap}#tally{flex-direction:column;align-items:flex-end;gap:4px;display:flex}#boss-label{color:var(--primary);letter-spacing:.04em;text-transform:uppercase;font-size:12px;font-weight:700}#roll-label{color:var(--good);font-size:12px;font-weight:700}#stars{color:var(--primary);white-space:nowrap;font-size:16px;font-weight:700}#tries{gap:5px;display:flex}#tries i{border:2px solid var(--readout);border-radius:50%;width:14px;height:14px}#tries i.left{background:var(--readout)}#dog{background:0 0;flex:none;width:44px;height:44px;min-height:0;padding:0;position:relative}#dog span{background:#a9744f;border-radius:50% 50% 46% 46%;position:absolute;inset:6px 4px 2px;box-shadow:inset -7px 9px 0 -4px #f1efe7,inset 7px 9px 0 -4px #f1efe7}#dog:before,#dog:after{content:"";background:#6e452c;border-radius:60% 60% 40% 40%;width:14px;height:20px;position:absolute;top:2px}#dog:before{left:0;transform:rotate(-24deg)}#dog:after{right:0;transform:rotate(24deg)}#dog[data-mood=idle]{animation:2.4s ease-in-out infinite dog-idle}#dog[data-mood=startled]{animation:.12s linear infinite dog-startled}#dog[data-mood=happy]{animation:.5s ease-in-out infinite dog-happy}@keyframes dog-idle{50%{transform:translateY(2px)}}@keyframes dog-startled{25%{transform:translate(-3px)}75%{transform:translate(3px)}}@keyframes dog-happy{50%{transform:translateY(-6px)}}#board{touch-action:none;flex:1;min-height:0;position:relative;overflow:hidden}#board canvas{position:absolute;top:0;left:0}#banner,#toast{background:#15171beb;border-radius:14px;width:max-content;max-width:calc(100% - 24px);font-size:16px;font-weight:700;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 6px 24px #00000073}#banner{align-items:center;gap:12px;padding:8px 8px 8px 16px;display:flex;bottom:16px}#banner button{white-space:nowrap}#banner[data-tone=won]{outline:2px solid var(--good)}#banner[data-tone=lost]{outline:2px solid var(--control-on)}#toast{outline:2px solid var(--control-on);pointer-events:none;padding:10px 16px;top:12px}#menu{background:var(--bg);flex-direction:column;justify-content:center;gap:12px;padding:24px;display:none;position:absolute;inset:0}#app[data-mode=menu] #menu{display:flex}#menu h1{margin:0;font-size:30px}#menu p{color:var(--text-dim);margin:0 0 16px;font-size:16px;line-height:1.4}#menu button{min-height:54px;font-size:17px}#menu-pages{justify-content:center;gap:8px;display:flex}#menu-pages button{min-height:44px;font-size:15px}#menu-account{color:var(--text-dim);justify-content:center;align-items:center;gap:4px;font-size:14px;display:flex}#menu-account button{min-height:44px;font-size:14px;text-decoration:underline}#account{background:var(--bg);touch-action:pan-y;flex-direction:column;gap:12px;padding:32px 24px 24px;display:none;position:absolute;inset:0;overflow-y:auto}#app[data-mode=account] #account{display:flex}#app[data-mode=account] #controls{visibility:hidden}#account h1{margin:0;font-size:30px}#account p{color:var(--text-dim);margin:0;font-size:16px;line-height:1.4}#account-fields{flex-direction:column;gap:12px;display:flex}#account[data-state=waiting] #account-fields,#account[data-state=form] #account-wait{display:none}#account label{color:var(--text-dim);flex-direction:column;gap:6px;font-size:14px;display:flex}#account input{background:var(--strip-bg);min-height:48px;color:var(--text);font:inherit;-webkit-user-select:text;user-select:text;border:0;border-radius:10px;padding:0 12px;font-size:17px}#account button{min-height:54px;font-size:17px}#account button.quiet{min-height:44px;font-size:15px}#account button:disabled{opacity:.6}#account #account-error{min-height:1.4em;color:var(--readout);font-size:15px}#hint{min-height:1.3em;color:var(--text-dim);margin-top:6px;font-size:13px;display:block}#panel{background:var(--bg);touch-action:pan-y;flex-direction:column;gap:10px;padding:20px 16px;display:flex;position:absolute;inset:0;overflow-y:auto}#panel h2{margin:0;font-size:24px}#panel-intro{color:var(--text-dim);margin:0 0 6px;font-size:15px;line-height:1.4}#panel-rows{flex-direction:column;gap:8px;display:flex}.panel-row{background:var(--strip-bg);border-radius:12px;align-items:center;gap:12px;padding:10px 10px 10px 14px;display:flex}.panel-row div{flex:1;min-width:0}.panel-row strong{font-size:16px;display:block}.panel-row span{color:var(--text-dim);font-size:13px;line-height:1.35}.panel-row button{background:var(--primary);color:#1b1d21;flex:none;min-width:72px}.panel-row button:disabled{background:var(--control-bg);color:var(--text-dim)}#panel-close{min-height:50px;margin-top:6px}