/* Translucent surfaces keep the scenery visible without fading text or icons. */
:root{
 --color-hud:rgba(7,12,24,.6);
 --glass-hover:rgba(18,27,44,.72);
 --glass-line:rgba(224,234,255,.24);
 --cat-panel:rgba(12,19,34,.58);
 --cat-selected-panel:rgba(37,40,60,.66);
 --color-veil:rgba(1,3,11,.3);
}
.score-block,.run-status,.power-pill,.tutorial-hint,.toast,.icon-button,body.running .brand{
 background:var(--color-hud);
 border-color:var(--glass-line);
 box-shadow:0 4px 18px rgba(0,0,0,.14);
 color:var(--color-ink);
 text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.score-block .eyebrow,.score-block>span:last-child{color:#f0f3fa}
.icon-button:hover,.dialog-close:hover{background:var(--glass-hover)}
.btn{background:rgba(246,245,241,.76);border:1px solid rgba(255,255,255,.34)}
.btn:hover:not(:disabled){background:rgba(251,251,254,.86)}
.btn:active:not(:disabled){background:rgba(246,245,241,.68)}
.cat-option{border-color:var(--glass-line)}
.cat-copy small{color:#dce2ee}
.result-panel,dialog{
 background:rgba(8,14,26,.78);
 border-color:var(--glass-line);
 --color-ink-2:#d3daea;
 box-shadow:0 18px 65px rgba(0,0,0,.32);
}
dialog::backdrop{background:var(--color-veil)}
kbd,.setting select,.dialog-close{background:rgba(27,39,59,.62);border-color:var(--glass-line)}
.setting select:hover{background:var(--glass-hover)}
.setting select option{background:#111b2d}
.setting input{background:rgba(131,145,172,.32)}
.setting input:checked{background:rgba(239,179,107,.72)}
.tutorial-hint{
 top:auto;
 bottom:calc(24px + env(safe-area-inset-bottom));
 pointer-events:none;
}
@media(max-width:700px){
 .tutorial-hint{bottom:calc(22px + env(safe-area-inset-bottom));max-width:calc(100% - 40px)}
}