#playfield-hud{
 position:fixed;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));z-index:12;
 display:grid;grid-template-columns:auto auto;grid-template-areas:'label combo' 'score combo';column-gap:10px;
 padding:7px 10px;border:1px solid rgba(220,156,67,.22);border-radius:4px;
 background:linear-gradient(180deg,rgba(14,10,6,.74),rgba(5,4,3,.58));box-shadow:0 8px 25px rgba(0,0,0,.28);
 backdrop-filter:blur(5px);pointer-events:none;color:#d9bd8c;font-family:ui-monospace,SFMono-Regular,Consolas,monospace
}
#playfield-hud [data-message]{grid-area:label;font-size:8px;letter-spacing:.11em;color:rgba(234,193,126,.55);min-width:118px}
#playfield-hud [data-score]{grid-area:score;font-size:15px;line-height:1.15;letter-spacing:.08em;color:rgba(255,218,160,.88);text-shadow:0 0 12px rgba(255,97,30,.15)}
#playfield-hud [data-combo]{grid-area:combo;align-self:center;font-size:11px;color:rgba(255,113,49,.72)}
#playfield-hud [data-message].is-pop{animation:hudPop .22s ease-out}
@keyframes hudPop{0%{transform:translateY(2px);color:#fff0c9}100%{transform:none}}
.flipper-control{
 position:fixed;z-index:40;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));width:112px;height:72px;
 border:1px solid rgba(205,148,74,.28);border-radius:22px;background:linear-gradient(180deg,rgba(22,16,10,.58),rgba(6,5,4,.82));
 box-shadow:inset 0 1px rgba(255,225,170,.07),0 10px 30px rgba(0,0,0,.35);color:rgba(235,199,139,.52);
 font:700 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;pointer-events:auto;outline:none
}
.flipper-control::before{content:'';display:block;width:34px;height:6px;margin:0 auto 7px;border-radius:99px;background:rgba(185,50,24,.42);box-shadow:0 0 12px rgba(255,61,22,.12)}
.flipper-control.is-active{transform:translateY(2px) scale(.985);border-color:rgba(255,126,58,.58);color:rgba(255,227,180,.88);background:linear-gradient(180deg,rgba(62,27,14,.8),rgba(14,7,4,.92));box-shadow:inset 0 0 18px rgba(255,65,16,.18),0 5px 16px rgba(0,0,0,.4)}
.flipper-control.is-active::before{background:rgba(255,85,31,.95);box-shadow:0 0 18px rgba(255,70,20,.72)}
#flipper-left{left:max(22px,calc(env(safe-area-inset-left) + 8px))}#flipper-right{right:max(22px,calc(env(safe-area-inset-right) + 8px))}
@media (pointer:fine){.flipper-control{width:92px;height:56px;opacity:.68}}
@media (max-width:700px){#status{display:none}#hint{bottom:max(100px,calc(env(safe-area-inset-bottom) + 86px));left:50%;transform:translateX(-50%);max-width:82vw;text-align:center}.flipper-control{bottom:max(16px,calc(env(safe-area-inset-bottom) + 8px))}}
@media (prefers-reduced-motion:reduce){#playfield-hud [data-message].is-pop{animation:none}}