@media(pointer:coarse){html{touch-action:manipulation;-webkit-tap-highlight-color:transparent}}.m-dock,.m-rotate,.m-tab{display:none}@media(orientation:landscape)and (max-height:520px){html:root{--m-side: clamp(92px, 13vw, 118px);--m-mid: 40px;--m-safe-l: max(6px, env(safe-area-inset-left));--m-safe-r: max(6px, env(safe-area-inset-right));--cw: min(calc((100dvh - var(--m-mid) - 46px) / 3.62), calc((100vw - var(--m-side) - var(--m-safe-l) - var(--m-safe-r) - 34px) / 7.5));--ch: calc(var(--cw) * 1.4);--lane-w: auto;scrollbar-gutter:auto}html body{overflow:hidden}html body:has(#intro:not([hidden])){overflow:auto}html .table{display:block;min-height:0;height:100dvh;padding:0;overflow:hidden}html .mat{width:100vw;height:100dvh;display:grid;justify-items:stretch;align-content:start;grid-template-columns:var(--m-side) minmax(0,1fr);grid-template-rows:auto var(--m-mid) auto 1fr;column-gap:6px;row-gap:4px;padding:4px var(--m-safe-r) 0 var(--m-safe-l);border-radius:0;box-shadow:none}html .mat>#hero-1{grid-area:1 / 1}html .mat>#board-1{grid-area:1 / 2}html .mat>.m-dock:not(.panel):not(.rune):not(.callout){grid-area:2 / 1}html .mat>.mid:not(.panel):not(.rune):not(.callout){grid-area:2 / 2}html .mat>#board-0{grid-area:3 / 2}html .mat>#hero-0{grid-area:3 / 1}html .mat>#hand{grid-area:4 / 1 / 5 / 3}html .rune{width:min(70dvh,360px)}html .hero{width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"bars" "grave";align-content:center;gap:4px;padding:4px;border-radius:10px}html .portrait{display:none}html .bars{grid-area:bars;width:100%;gap:3px}html .name{display:grid;gap:1px}html .name b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html .name span{font-size:8.5px;white-space:normal;line-height:1.2}html .hpbar{height:14px;border-radius:4px}html .hpbar .val{font-size:9.5px}html .rage{gap:4px}html .rage .pips{gap:1.5px;height:5px}html .rage em{min-width:0;font-size:7.5px;letter-spacing:.04em}html .grave-pile{grid-area:grave;justify-self:start;display:flex;align-items:center;gap:5px;width:auto;height:24px}html .grave-pile .gp-card{width:17px;height:24px}html .grave-pile .gp-n{position:static;min-width:16px;height:16px;font-size:10px}html .grave-pile em{font-size:8px}html .backs,html .signin{display:none}html .lane{width:100%;justify-content:center;gap:calc(var(--cw) * .1);padding:6px 6px 4px;border-radius:12px}html .lane:before{inset:2px;border-radius:10px}html .zone{gap:3px}html .table.bossmode{--cw: min(calc((100dvh - var(--m-mid) - 46px - 26px) / 3.62), calc((100vw - var(--m-side) - var(--m-safe-l) - var(--m-safe-r) - 34px) / 8.72));--ch: calc(var(--cw) * 1.4);--lane-w: auto}html .table.bossmode .lane{padding-bottom:17px}html .boss-strip{top:calc(100% + 2px);height:11px;gap:3px;font-size:7.5px}html .boss-bar em{font-size:7.5px;line-height:11px}html .boss-bar small{display:none}html .boss-strip .pips i{width:4px;height:4px}html .mid{height:var(--m-mid);gap:5px;padding:0 2px;flex-wrap:nowrap}html .actions{order:0;flex-basis:auto}html .turn{min-width:0;max-width:92px}html .turn b{font-size:15px;white-space:nowrap}html .turn span{font-size:9px}html .act{height:38px;padding:0 9px;font-size:13px}html .tool{height:38px;padding:0 9px;font-size:12px}html #hint,html #auto{min-width:58px}html .end{height:38px;padding:0 12px;font-size:13px}html .tip{font-size:11.5px}html .hints-tag{display:none}html .hand{align-self:start;min-height:0;height:100%;padding:2px 6px 0;align-items:flex-start}html .hand .gc{margin:0 calc(var(--cw) * -.16);transform:translateY(calc(var(--ch) * .04 + var(--y) * .5)) rotate(calc(var(--r) * .6))}html .hand .gc:hover{transform:translateY(calc(var(--ch) * .04 + var(--y) * .5)) rotate(calc(var(--r) * .6));z-index:auto}html .hand .gc.selected{transform:translateY(calc(var(--ch) * -.32)) scale(1.06);z-index:6}html .mat>.panel{min-height:0;grid-row:auto;position:fixed;z-index:44;top:0;right:0;bottom:0;width:min(300px,40vw);margin:0;padding:6px var(--m-safe-r) 6px 0;transform:translate(105%);transition:transform .25s cubic-bezier(.2,.8,.2,1);pointer-events:none}html .mat>.panel.m-open{transform:none;pointer-events:auto}html .panel-inner{border-radius:14px;padding:10px;gap:5px;box-shadow:inset 0 0 0 1px #c9a24d55,0 0 40px #000c;background:radial-gradient(120% 40% at 50% 0%,color-mix(in srgb,var(--cls) 20%,transparent),transparent 60%),linear-gradient(180deg,#160f40fa,#0c0828fa)}html .panel-inner{overflow-y:auto}html .panel-inner>.p-card{min-height:150px}html .panel h3{font-size:18px}html .p-x{width:32px;height:32px;font-size:18px}html .p-stats b{font-size:17px}html .p-sec p{font-size:11.5px}html .m-tab{position:fixed;z-index:43;right:var(--m-safe-r);bottom:calc(6px + env(safe-area-inset-bottom,0px));display:none;align-items:center;gap:4px;height:44px;padding:0 10px;border-radius:12px 0 0 12px;border:1px solid #9d7bff66;border-right:0;background:#1a1350f0;color:#e9e5ff;font:800 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 20px #000a}html .m-tab.on{display:inline-flex}html .m-dock{display:flex;align-items:center;gap:4px;position:relative;z-index:46;min-width:0}html .m-dock .opts{position:relative;top:auto;left:auto;z-index:auto}html .m-dock .opts-btn{height:38px;padding:0 9px;font-size:0;gap:0}html .m-dock .opts-btn svg{width:18px;height:18px}html .m-dock .opts-menu{position:fixed;z-index:48;top:6px;bottom:auto;left:calc(var(--m-safe-l) + 48px);width:min(270px,60vw);max-height:calc(100dvh - 12px);overflow-y:auto}html .m-dock .hist{position:static;width:auto!important;min-width:0;border-radius:10px;backdrop-filter:none}html .m-dock .hist .hist-head{height:38px;padding:0 6px 0 9px;gap:6px;font-size:10.5px;letter-spacing:.08em}html .m-dock .hist .hist-head b{white-space:nowrap}html .m-dock .hist:not(.big) .hist-head b{font-size:0}html .m-dock .hist:not(.big) .hist-head b:before{content:"Log";font-size:11px;letter-spacing:.1em}html .m-dock .hist .hist-size{display:none}html .m-dock .hist:not(.big) .hist-body,html .m-dock .hist:not(.big) .hist-new{display:none}html .m-dock .hist.big{position:fixed;z-index:47;left:var(--m-safe-l);top:6px;bottom:6px;width:min(340px,52vw)!important;background:#0d0a2cfa;backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px #9d7bff55,0 20px 60px #000d}html .m-dock .hist.big .hist-body{max-height:none;flex:1}html .m-dock .hist.big .hist-size{display:inline-block}html .m-dock .hist .hist-head{cursor:pointer}html .crowd{top:auto;bottom:6px;left:auto;right:var(--m-safe-r);height:30px;padding:0 9px;z-index:42}html .watchbar{top:4px;max-width:calc(100vw - 2 * var(--m-side));gap:8px;padding:3px 4px 3px 10px;font-size:12px}html .wb-swap{height:30px}html .netbar{top:4px;padding:6px 12px;font-size:11px}html .callout{font-size:clamp(20px,5dvh,28px);padding:8px 18px}html .over{overflow-y:auto;place-items:start center;padding:12px var(--m-safe-r) 12px var(--m-safe-l)}html .over>div{margin:auto 0}html .over h2{font-size:clamp(40px,14dvh,64px)}html .over p{margin:6px 0 10px}html .grade{margin:2px auto 10px;padding:8px 14px}html .grade-big b{font-size:40px}html .grade-parts{margin:6px 0 4px;gap:3px}html .over .btn{min-height:40px;margin:4px}html .hpop{max-height:calc(100dvh - 16px)}html .lobby{place-items:start center;overflow-y:auto;padding:10px var(--m-safe-r) 10px var(--m-safe-l)}html .lobby-box{margin:auto 0;gap:8px}html .lobby-box{width:min(880px,100%);grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;column-gap:18px;align-items:center}html .lobby-box>.lobby-kicker,html .lobby-box>h2,html .lobby-box>.lobby-code,html .lobby-box>.lobby-link,html .lobby-box>.lobby-watch{grid-column:1}html .lobby-box>:not(.lobby-kicker):not(h2):not(.lobby-code):not(.lobby-link):not(.lobby-watch){grid-column:2}html .lobby-opt{padding-block:6px}html .lobby h2{font-size:clamp(26px,8dvh,40px)}html .lobby-code{font-size:clamp(30px,10dvh,46px);padding:6px 14px 6px 22px}html .gravebox{padding:6px}html .gb-box{width:min(1200px,calc(100vw - 12px));height:calc(100dvh - 12px);padding:12px 14px}html .gb-box h2{font-size:22px;margin:0}html .gb-info .p-card img{height:clamp(120px,42dvh,220px)}html .gb-foot{margin-top:6px}html .dice{padding:10px 16px;gap:12px}html .die b{width:60px;height:60px;font-size:32px}html .coach{left:auto;right:var(--m-safe-r);bottom:6px;width:min(300px,36vw);max-height:calc(100dvh - 12px);overflow-y:auto;padding:9px 11px}html .coach.top{top:6px;bottom:auto}html .coach h3{font-size:15px;margin:2px 0}html .coach-say{font-size:12px;line-height:1.35}html .coach-head img{width:40px;height:auto}html .table.tutorial .hist{top:auto;bottom:auto}}@media(orientation:landscape)and (max-height:520px){html #hub{gap:5px;padding:12px 22px;width:max-content;max-width:calc(100vw - 16px);max-height:calc(100dvh - 12px);overflow-y:auto;border-radius:20px}html #hub .hub-logo{width:104px}html #hub h1{font-size:clamp(30px,10dvh,42px)}html #hub p{margin:0 0 4px;font-size:11.5px}html #hub .hub-buttons{flex-wrap:nowrap;gap:8px}html #hub .big{min-width:0;padding:12px 18px;font-size:17px}html #hub .hub-small{flex-wrap:wrap}html #viewbar{padding:6px max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left));gap:8px}html #grid{inset:50px 0 0;gap:10px;padding:10px max(12px,env(safe-area-inset-right)) 30px max(12px,env(safe-area-inset-left));grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}}@media(orientation:portrait)and (max-width:600px){html .m-rotate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;text-align:center;background:radial-gradient(70% 60% at 50% 45%,#22156a,#07061a 75%);color:var(--ink, #eeeaff)}html .m-rotate>div{display:grid;justify-items:center;gap:14px;max-width:320px}html .m-rotate svg{width:92px;height:92px;fill:none;stroke:#c9b8ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:m-turn 2.4s ease-in-out infinite}html .m-rotate h2{margin:0;font:900 32px/.95 var(--display, sans-serif);text-transform:uppercase;letter-spacing:.02em}html .m-rotate p{margin:0;color:var(--mute, #a19cc9);font-size:14px;line-height:1.45}html .m-rotate .m-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}html .m-rotate button,html .m-rotate a{min-height:44px;padding:0 18px;border-radius:12px;border:1px solid #9d7bff66;background:#120d38;color:#fff;font:800 14px/44px var(--display, sans-serif);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer}html .m-rotate button.go{border-color:transparent;background:linear-gradient(135deg,#6a4bff,#a335ee)}html body.m-play{overflow:hidden}@keyframes m-turn{0%,20%{rotate:0deg}50%,70%{rotate:-90deg}to{rotate:0deg}}}@media(prefers-reduced-motion:reduce){html .m-rotate svg{animation:none}}