#tablet-ui #tablet-item[hidden]{display:none!important}
#tablet-ui[hidden]{display:none!important}
#tablet-ui{position:absolute;inset:0;z-index:2;pointer-events:none;font-family:system-ui,-apple-system,sans-serif;color:#18343b;-webkit-user-select:none;user-select:none}
#tablet-ui button,#tablet-ui summary,#tablet-wheel{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}
#tablet-ui button{font:700 17px/1.35 system-ui;border-radius:18px;min-height:56px;padding:12px 18px;border:2px solid transparent;box-shadow:0 4px 0 #18343b24}
#tablet-ui button:focus-visible,#tablet-wheel:focus-visible{outline:4px solid #1573ff;outline-offset:3px}
#tablet-ui button:disabled{opacity:.65;box-shadow:none}
.tablet-top{position:absolute;top:16px;left:20px;right:20px;display:flex;align-items:start;justify-content:space-between;gap:14px}
.tablet-stop{background:#fffef3ed;border-radius:18px;padding:14px 20px;box-shadow:0 4px 18px #19333912;min-width:230px}
.tablet-stop small{font-size:12px;color:#6a5470;letter-spacing:.08em}.tablet-stop strong{display:block;font-size:24px}.tablet-stop span{font-size:16px}
#tablet-pause{background:#fffef3;color:#18343b;width:100px}
.tablet-meter{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);text-align:center;background:#fffef3ed;border-radius:22px;padding:12px 18px;min-width:116px}
.tablet-meter strong{font-size:40px;line-height:1.1}.tablet-meter small{display:block;letter-spacing:0;color:#36525a;font-size:12px}
.tablet-left{position:absolute;left:24px;bottom:24px;text-align:center}
#tablet-wheel{width:clamp(190px,23vw,260px);height:clamp(190px,23vw,260px);border-radius:50%;position:relative;cursor:grab;filter:drop-shadow(0 7px 12px #163d4d38)}
#tablet-wheel.held{cursor:grabbing}#tablet-wheel[aria-disabled=true]{pointer-events:none}
.wheel-art{width:100%;height:100%;display:block;pointer-events:none;transform:rotate(var(--wheel-angle,0deg));transition:transform .16s ease-out}
.held .wheel-art{transition:none}.wheel-direction{position:absolute;bottom:20%;left:0;right:0;color:white;font-size:13px;pointer-events:none}
.wheel-help{display:block;background:#173b48ee;color:white;border-radius:20px;padding:7px 12px;font-size:12px;letter-spacing:0}
.keyboard-help{display:block;font-size:11px;line-height:1.4;margin-top:5px;color:#24434e;background:#fffef3dd;border-radius:10px;padding:4px 8px}html[data-tablet=true] .keyboard-help{display:none}
.tablet-right{position:absolute;bottom:24px;right:24px;display:flex;gap:12px}
#tablet-ui .tablet-pedal{width:clamp(120px,15vw,174px);height:144px;font-size:29px;border-radius:28px}
.tablet-pedal small{display:block;margin-top:10px;font-size:12px;letter-spacing:0;color:inherit;font-weight:500}
#tablet-go{background:#b61180;color:white}#tablet-go[aria-pressed=true]{background:#197a68;border-color:white}
#tablet-stop-button{background:#fffef3;color:#a21665;border-color:#a21665}
#tablet-hint{position:absolute;bottom:350px;left:50%;transform:translateX(-50%);max-width:82%;background:#fffef3ee;border-radius:16px;padding:10px 18px;font-weight:700;text-align:center;font-size:16px}
#tablet-boarding{width:100%;height:8px;accent-color:#b61180;margin-top:8px}
#tablet-menu{position:absolute;right:24px;top:94px;pointer-events:auto;background:#fffef3f5;border-radius:16px;padding:6px 10px;width:182px;font-size:14px;z-index:4}
#tablet-menu summary{padding:10px;font-weight:700;cursor:pointer;min-height:44px}#tablet-menu button{display:block;width:100%;background:#e8eff0;color:#18343b;margin-top:10px}
#tablet-ui #tablet-item{position:absolute;bottom:186px;right:24px;width:clamp(252px,31vw,360px);min-height:98px;display:flex;align-items:center;gap:12px;text-align:left;background:#fffef3ee;color:#18343b;border:2px solid #b8c9cf;padding:12px;transition:border-color .2s}
#tablet-ui #tablet-item[data-ready=true]{background:#ddfa87;border:3px solid white;box-shadow:0 0 0 3px #8cb432,0 6px 16px #18343b30}
#item-icon{display:grid;place-items:center;flex:0 0 46px;height:46px;background:#183b49;color:#ddfa87;border-radius:14px;font-size:27px;font-weight:900}
#tablet-item span:nth-child(2){flex:1;min-width:0}#tablet-item small{display:block;color:inherit;letter-spacing:0;font-size:11px;font-weight:500}
#tablet-item strong{font-size:21px;display:block;line-height:1.3}#item-action{background:#183b49;color:white;padding:10px 8px;border-radius:12px;font-size:16px}
#tablet-item:disabled #item-action{display:none}
#item-effect{position:absolute;right:24px;bottom:300px;background:#183b49;color:#ddfa87;padding:8px 16px;border-radius:20px;font-weight:bold;font-size:14px}
.tablet-modal{position:absolute;inset:0;display:grid;place-items:center;background:#16333e65;pointer-events:auto;touch-action:pan-y;padding:24px;z-index:5;overflow:auto}
.tablet-modal[hidden]{display:none}
.tablet-card{width:min(530px,100%);max-height:100%;overflow:auto;padding:24px 32px;background:#fffef8;border-radius:28px;box-shadow:0 20px 80px #13303e30}
.tablet-card h2{font-size:30px;line-height:1.35;margin:12px 0 18px}.tablet-card p{font-size:15px;line-height:1.7;margin:12px 0}.tablet-card ol{padding-left:24px;font-size:17px;line-height:1.9}.tablet-card button{width:100%;margin-top:14px}
.tablet-card small{color:#a21665;font-size:12px;letter-spacing:.1em}
@media(max-height:650px),(max-width:850px){
 .tablet-left{left:16px;bottom:16px}#tablet-wheel{width:180px;height:180px}.tablet-right{right:16px;bottom:16px;gap:10px}#tablet-ui .tablet-pedal{width:120px;height:116px;font-size:25px}
 #tablet-ui #tablet-item{right:16px;bottom:150px;min-height:82px;width:250px;padding:8px;gap:8px}#tablet-item strong{font-size:18px}#item-icon{flex-basis:36px;height:40px;font-size:24px}#item-effect{right:16px;bottom:245px}#tablet-hint{bottom:285px;font-size:14px;padding:7px 12px}
 .tablet-meter{bottom:18px;padding:8px;min-width:90px}.tablet-meter strong{font-size:34px}.tablet-card{padding:18px 24px}.tablet-card h2{font-size:24px}.tablet-card ol{font-size:15px}.tablet-top{top:10px;left:16px;right:16px}
 .tablet-stop{padding:10px 14px;min-width:210px}.tablet-stop strong{font-size:20px}.tablet-stop span{font-size:13px}#tablet-menu{top:78px;right:16px}#tablet-menu[open]{max-height:calc(100% - 96px);overflow:auto}
}
@media(max-height:480px){
 #tablet-wheel{width:152px;height:152px}.wheel-help{font-size:10px;padding:4px 6px}.keyboard-help{display:none}.tablet-left{bottom:12px;left:12px}
 #tablet-ui .tablet-pedal{height:96px;width:110px;font-size:23px}.tablet-pedal small{font-size:10px;margin-top:6px}
 #tablet-ui #tablet-item{bottom:127px;width:230px;min-height:70px}#item-description{display:none!important}#tablet-hint{top:10px;bottom:auto;max-width:calc(100% - 460px);left:57%;font-size:12px}#item-effect{bottom:210px;font-size:12px}
 #tablet-menu{top:72px;width:160px;font-size:12px}#tablet-menu summary{min-height:36px;padding:4px}.tablet-meter{min-width:80px;bottom:12px}
 .tablet-stop{min-width:185px}.tablet-stop strong{font-size:18px}.tablet-stop small{font-size:10px}.tablet-top{gap:8px}
}
@media(max-width:680px){#tablet-hint{display:none}#tablet-ui .tablet-pedal{width:96px}#tablet-ui #tablet-item{width:204px}#item-action{font-size:13px;padding:8px 5px}.tablet-meter{left:47%}}
#rotate{display:none!important}
@media(orientation:portrait) and (max-width:600px){
 .tablet-top{top:10px;left:12px;right:12px;gap:8px}
 .tablet-stop{min-width:0;max-width:calc(100% - 84px);padding:10px 12px;border-radius:14px}
 .tablet-stop strong{font-size:18px}.tablet-stop span{font-size:12px}
 #tablet-ui #tablet-pause{width:76px;min-height:56px;padding:8px;font-size:13px;border-radius:14px}
 #tablet-menu{top:100px;right:12px;width:148px;font-size:12px}
 #tablet-menu summary{padding:6px;min-height:44px}
 .tablet-meter{top:104px;bottom:auto;left:12px;transform:none;min-width:0;padding:8px 12px;border-radius:14px}
 .tablet-meter strong{font-size:26px}.tablet-meter small{font-size:10px}
 .tablet-left{left:8px;bottom:24px;width:clamp(128px,42vw,190px)}
 #tablet-wheel{width:100%;height:auto;aspect-ratio:1}
 .wheel-help{font-size:10px;line-height:1.4;padding:5px 6px;white-space:normal}
 .keyboard-help{display:none}
 .tablet-right{right:12px;bottom:24px;flex-direction:column;gap:10px}
 #tablet-ui .tablet-pedal{width:clamp(112px,30vw,150px);height:76px;font-size:22px;border-radius:20px;padding:8px}
 .tablet-pedal small{font-size:10px;margin-top:4px}
 #tablet-ui #tablet-item{right:12px;bottom:206px;width:clamp(180px,55vw,250px);min-height:70px}
 #item-effect{right:12px;bottom:288px;font-size:12px}
 #tablet-hint{display:none}
 .tablet-modal{padding:16px}.tablet-card{padding:20px;border-radius:22px}
 .tablet-card h2{font-size:23px}.tablet-card p,.tablet-card ol{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.wheel-art{transition:none}}
