/* Layout shared by the game and the local/offline classroom edition. */
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
button,input,select{font:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
[hidden]{display:none!important}
.game-screen{position:relative;isolation:isolate;width:100%;height:100dvh;overflow:hidden}
.scene{position:absolute;inset:0;overflow:hidden;background:#548448 url('assets/scene-v3/arena-hybrid-v3.png') center/cover no-repeat}
.scene canvas{position:absolute;inset:0;z-index:4;pointer-events:none;image-rendering:pixelated}
.scene .team-art,.scene>.rope{display:none}
.scene .team-art.has-image{position:absolute;display:block;width:40%;height:30%;bottom:37%;z-index:5}
.team-art.left{left:4%}.team-art.right{right:4%;transform:scaleX(-1)}
.team-art img{width:100%;height:100%;object-fit:contain}
.screen-shade{position:absolute;inset:0;pointer-events:none;z-index:5}
.hud{position:absolute;z-index:8;display:flex;align-items:center;justify-content:space-between}
.hud h1{margin:0;white-space:nowrap}
.tools{display:flex;align-items:center}
.icon-button{display:grid;place-items:center;padding:0;flex:none}
.scoreboard{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center}
.question-hud{position:absolute;z-index:7;left:50%;transform:translateX(-50%)}
.question-meta{display:flex;justify-content:space-between}
.question-row{display:flex;align-items:center}
.question-row h2{flex:1;min-width:0;margin:0;overflow-wrap:anywhere}
.timer{display:grid;place-items:center;flex:none;font-variant-numeric:tabular-nums}
.time-track{position:absolute;left:22px;right:22px;bottom:8px;overflow:hidden}
.time-track i{display:block;width:100%;height:100%;transform-origin:left;transition:transform .08s linear}
.battle-announcement{position:absolute;z-index:8;left:50%;top:32%;transform:translateX(-50%);pointer-events:none;white-space:nowrap}
.battle-announcement:empty{display:none}
.pull-gauge{position:absolute;z-index:6;left:50%;top:65%;transform:translateX(-50%);display:flex;align-items:center}
.pull-gauge>div{position:relative;flex:1}
.pull-gauge i{position:absolute;left:50%;transform:translateX(-50%);transition:left .4s cubic-bezier(.18,.85,.32,1)}
.answer-dock{position:absolute;z-index:7;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.control-deck{position:absolute;z-index:7;display:flex;flex-direction:column;pointer-events:none}
.control-deck>.answer-dock{position:relative;left:auto;right:auto;bottom:auto;order:2;pointer-events:auto}
.control-deck>.game-footer{position:relative;left:auto;right:auto;bottom:auto;order:1;flex:none}
.team-panel{position:relative;display:grid;min-width:0;align-items:stretch}
.team-panel>header{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-width:0}
.team-panel h2{margin:0;white-space:nowrap}
.cooldown{position:relative;display:grid;place-items:center;flex:none}
.cooldown svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.cooldown circle{fill:none}
.cooldown span{font-variant-numeric:tabular-nums;position:relative}
.options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr 1fr;min-width:0}
.option{display:flex;position:relative;align-items:center;text-align:left;min-width:0}
.option .letter{display:grid;place-items:center;flex:none}
.option .option-text{display:block;min-width:0;overflow-wrap:anywhere;word-break:normal}
.game-footer{position:absolute;z-index:8;display:flex;align-items:center;justify-content:center}
.answer-note{position:absolute;right:0;bottom:0}
.answer-note summary{list-style:none;cursor:pointer}
.answer-note summary::-webkit-details-marker{display:none}
.answer-note .feedback{position:absolute;right:0;bottom:48px;width:min(600px,88vw)}
.overlay{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:20px}
.overlay.open{display:flex}
.dialog{width:min(540px,100%);max-height:92dvh;overflow:auto}
.dialog>header{display:flex;justify-content:space-between;align-items:center}
.dialog h2{margin:0}
.setting{display:flex;align-items:center;justify-content:space-between}
.audio-setting-row{display:grid}
.audio-setting-row input{width:100%}
.audio-setting-row output{text-align:right}
.key-guide{display:flex;justify-content:space-between;flex-wrap:wrap}
.key-guide p{flex-basis:100%}
.custom-art summary{cursor:pointer}
.custom-art input{max-width:65%}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}