*{box-sizing:border-box}html,body{margin:0;background:#07181e;color:#f4eddb;font-family:Arial,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif}body{min-height:100dvh;display:grid;place-items:center;background:radial-gradient(ellipse at 80% 30%,#193537,transparent 65%),#07181e}button,select{font:inherit}button{cursor:pointer;color:inherit;border:1px solid #ffffff30;background:#112b32;border-radius:5px;padding:10px 17px}button:hover,button:focus-visible{border-color:#eabe68;color:#fcd88e}#shell{width:min(1440px,100%);padding:0 38px}header{height:86px;display:flex;align-items:center;gap:25px}#brand{font-weight:950;font-size:28px;letter-spacing:-3px;color:#edbd69;text-decoration:none;display:flex;align-items:center;gap:13px}#brand span{font-size:13px;letter-spacing:3px;color:#f5ebd3}.edition{font-size:10px;letter-spacing:2px;color:#8eaaa9}nav{margin-left:auto;display:flex;gap:8px}nav button{font-size:12px;border:0;background:transparent}#stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#12272e;border:1px solid #64766a55;box-shadow:0 28px 100px #0007}canvas{width:100%;height:100%;display:block}#overlay{position:absolute;inset:0;background:linear-gradient(90deg,#071a20f5 0%,#071a20e8 36%,#071a2044 73%,#071a2010);display:flex;align-items:center;padding:4% 5%}#home{width:68%}.eyebrow{font-size:clamp(8px,1vw,12px);letter-spacing:4px;color:#edbd69}h1{font-size:clamp(35px,6.8vw,94px);line-height:.95;margin:18px 0 0;letter-spacing:-4px;font-weight:950;color:#f6d299;text-shadow:0 3px #6f563d}h1>span:first-child{display:block;font-size:22%;letter-spacing:6px;line-height:2;color:#f6edda;text-shadow:none}h1 .jp{display:block;font-size:18%;letter-spacing:12px;margin-top:12px;text-shadow:none}.lead{font-size:clamp(10px,1.2vw,16px);color:#c9d0c1;margin:22px 0}.line{width:45px;height:3px;background:#deb36c;margin-bottom:24px}.selection{display:flex;gap:22px;align-items:end}.selection>div:first-child{flex:1}label{display:block;font-size:10px;letter-spacing:2px;color:#edbd69;margin-bottom:9px}label small{color:#97a8a1;font-size:9px}#cards{display:flex;gap:4px;max-width:420px;flex-wrap:wrap}#cards button{padding:0;width:42px;height:42px;border-radius:2px;overflow:hidden;border:1px solid #547274}#cards img{width:100%;height:100%;object-fit:cover}#cards .selected{border:2px solid #f3ca7e;box-shadow:0 0 0 2px #f3ca7e33}select{background:#102b33;color:#efeadc;border:1px solid #486367;padding:10px;width:130px;border-radius:3px}.startrow{display:flex;gap:10px;margin-top:22px}.primary{background:#efbd6a;color:#18272b;border:none;min-width:215px;text-align:left;font-weight:bold;border-radius:2px}.primary b{float:right;margin-left:25px}.primary:hover{background:#ffd990;color:#18272b}.secondary{border-radius:2px}.bottomline{display:flex;gap:24px;font-size:8px;color:#8eaaa9;letter-spacing:1px;margin-top:22px}#loadstatus{font-size:12px;color:#efbd6a}footer{display:flex;justify-content:space-between;padding:21px 0;color:#779294;font-size:11px;letter-spacing:1px}#hud{position:absolute;inset:17px 23px auto;pointer-events:none;display:flex;justify-content:space-between;gap:15px}#hud[hidden],#pause[hidden]{display:none}.playerhud{width:30%;display:grid;grid-template-columns:40px 1fr;gap:9px;text-shadow:0 1px 4px #000}.playerhud img{width:40px;height:46px;object-fit:cover;border:1px solid #e4bc6b}.playerhud b{font-size:13px}.playerhud small{font-size:10px;margin-left:8px}.bar{height:8px;background:#081a22cc;border:1px solid #c1c3a960;margin-top:5px}.bar i{display:block;height:100%;background:#edbf6e}.bar.mp{height:4px;margin-top:4px}.bar.mp i{background:#4acbbb}.stagehud{text-align:center;font-size:10px;letter-spacing:2px;white-space:nowrap}.stagehud b{font-size:20px;display:block;color:#efca84;margin:5px}#pause{position:absolute;right:18px;top:85px;padding:6px 12px;background:#081a22aa}#touch{display:none;position:absolute;inset:auto 18px 16px;justify-content:space-between;align-items:end;pointer-events:none}#stick{position:relative;width:106px;height:106px;background:#12343d66;border:1px solid #e8ce8588;border-radius:50%;pointer-events:auto;touch-action:none}#stick i{position:absolute;left:33px;top:33px;width:40px;height:40px;background:#efcb8aa0;border-radius:50%;pointer-events:none}.actions{display:grid;grid-template-columns:repeat(2,56px);gap:8px;pointer-events:auto}.actions button{height:49px;border-radius:50%;padding:0;background:#12343daa;border-color:#e8ce8588;touch-action:none;font-size:12px}.actions button:last-child{background:#b77d32bb}dialog{background:#0c252e;color:#f5ead4;max-width:580px;border:1px solid #b2935a;padding:26px;border-radius:8px;line-height:1.8}dialog::backdrop{background:#000a}dialog h2{color:#efc57f}dialog table{font-size:12px;border-collapse:collapse;width:100%;margin:15px 0}dialog td,dialog th{text-align:left;padding:5px;border-bottom:1px solid #ffffff22}.panel{text-align:center;width:100%}.panel h2{font-size:48px;color:#efc57f;margin:12px}.panel p{line-height:1.8;color:#b9c7bd}.panel button{margin:7px}body.playing #overlay{background:#071a20d9}body.playing #overlay[hidden]{display:none}#shell:fullscreen{background:#07181e;padding:0;display:grid;place-items:center;width:100vw}#shell:fullscreen header,#shell:fullscreen footer{display:none}#shell:fullscreen #stage{width:min(100vw,177.77dvh);max-height:100dvh}
@media(max-width:900px){#shell{padding:0 10px}header{height:58px;gap:12px}.edition{display:none}nav{gap:0}nav button{padding:8px}footer{font-size:9px;padding:13px 0}#overlay{padding:3% 4%}#home{width:80%}.selection{gap:10px}#cards button{width:30px;height:30px}.lead{margin:12px 0}.line{margin-bottom:12px}.startrow{margin-top:12px}button{padding:8px 12px}.bottomline{margin-top:12px;font-size:7px}h1{margin-top:8px}.primary{min-width:175px}#hud{inset:10px}.playerhud{grid-template-columns:28px 1fr;gap:5px}.playerhud img{width:28px;height:34px}.playerhud b{font-size:10px}.stagehud b{font-size:14px}.stagehud{font-size:8px}#pause{top:58px}#touch{display:flex}body:not(.playing) #touch{display:none}}@media(pointer:coarse){body.playing #touch{display:flex}}@media(max-width:600px) and (orientation:portrait){#shell{padding:0}#stage{aspect-ratio:4/5}canvas{object-fit:cover;object-position:center}#overlay{background:#071a20c9;padding:8%}#home{width:100%}h1{font-size:58px}.selection{display:block}.selection>div+div{margin-top:14px}#cards button{width:35px;height:35px}.bottomline{display:block;line-height:2}.lead{margin:20px 0}header{padding:0 12px}footer{padding:15px 12px;font-size:9px;display:block}#touch{bottom:15px}.stagehud{display:none}.playerhud{width:43%}.panel h2{font-size:30px}}

@media(max-width:600px) and (orientation:portrait){body.playing #stage{aspect-ratio:16/12}body.playing canvas{width:100%;height:auto;object-fit:contain}body.playing #touch{bottom:9px}body.playing #stick{width:78px;height:78px}body.playing #stick i{left:23px;top:23px;width:30px;height:30px}body.playing .actions{grid-template-columns:repeat(4,44px);gap:6px}body.playing .actions button{height:44px;font-size:11px}body.playing #pause{top:55px;right:9px}}

.throwname{display:block;margin:3px 0!important;color:#f4cf89;font-size:9px!important}.actions button[data-action=cycle]{font-size:9px}

.skillname{display:block;color:#8ce4ee;font-size:11px;max-width:235px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.actions{flex-wrap:wrap}.skill-switch{font-size:14px!important}

body.playing .skillname{font-size:9px!important;margin:2px 0}.skill-switch{font-size:10px!important}