/* OUT interaction polish, decorative UI, and result sharing */
.game-shell{position:relative}
.game-shell:before,.game-shell:after{content:"";position:fixed;top:11vh;bottom:11vh;width:1px;pointer-events:none;z-index:-2;background:linear-gradient(transparent,rgba(105,221,255,.2),rgba(255,212,111,.15),transparent)}
.game-shell:before{left:max(1.4vw,8px)}.game-shell:after{right:max(1.4vw,8px)}
.game-header{position:relative}
.game-header:after{content:"QOL // 03:03";position:absolute;left:50%;top:4px;transform:translateX(-50%);font-size:7px;font-weight:900;letter-spacing:.28em;color:rgba(157,184,214,.36);white-space:nowrap}
.score-stack>strong{text-shadow:0 0 26px rgba(105,221,255,.18)}
.music-deck{position:relative;overflow:hidden}
.music-deck:after{content:"";position:absolute;left:-40%;top:0;width:35%;height:1px;background:linear-gradient(90deg,transparent,#69ddff,transparent);opacity:.65;animation:out-scan 5.4s linear infinite;pointer-events:none}
@keyframes out-scan{to{left:115%}}
.board-wrap{isolation:isolate;box-shadow:0 30px 80px rgba(0,0,0,.38),0 0 0 1px rgba(105,221,255,.035),inset 0 0 34px rgba(105,221,255,.025)}
.board-wrap:before,.board-wrap:after{content:"";position:absolute;width:28px;height:28px;z-index:30;pointer-events:none;opacity:.58}
.board-wrap:before{left:3px;top:3px;border-left:2px solid rgba(105,221,255,.72);border-top:2px solid rgba(105,221,255,.72);border-radius:14px 0 0 0}
.board-wrap:after{right:3px;bottom:3px;border-right:2px solid rgba(255,212,111,.66);border-bottom:2px solid rgba(255,212,111,.66);border-radius:0 0 14px 0}
.board:after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 48%,rgba(0,0,0,.16) 100%),linear-gradient(115deg,transparent 35%,rgba(255,255,255,.018) 50%,transparent 65%)}
.piece{filter:drop-shadow(0 5px 7px rgba(0,0,0,.32))}
.stage-pip.current{animation:stage-current-pulse 1.3s ease-in-out infinite alternate}
@keyframes stage-current-pulse{from{box-shadow:0 0 10px rgba(255,212,111,.2)}to{box-shadow:0 0 23px rgba(255,212,111,.52)}}
.live-stats{position:relative}
.stat-card{position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(transparent,rgba(105,221,255,.4),transparent)}
.message-row{position:relative;overflow:hidden}.message-row:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(105,221,255,.35),rgba(255,212,111,.25),transparent)}
body.qol-flash .board-wrap{animation:qol-ui-flash .34s ease-out}
@keyframes qol-ui-flash{0%{box-shadow:0 30px 80px rgba(0,0,0,.38)}35%{box-shadow:0 20px 90px rgba(105,221,255,.22),0 0 40px rgba(255,212,111,.14)}100%{box-shadow:0 30px 80px rgba(0,0,0,.38)}}

.overlay.result-mode{background:radial-gradient(circle at 50% 28%,rgba(35,85,132,.35),rgba(3,8,16,.94) 60%);}
.overlay.result-mode .overlay-card{width:min(100%,610px);position:relative;padding:8px}
.overlay.result-mode .overlay-card:before,.overlay.result-mode .overlay-card:after{content:"";position:absolute;width:48px;height:48px;pointer-events:none}
.overlay.result-mode .overlay-card:before{left:-8px;top:-6px;border-left:1px solid rgba(105,221,255,.65);border-top:1px solid rgba(105,221,255,.65)}
.overlay.result-mode .overlay-card:after{right:-8px;bottom:-6px;border-right:1px solid rgba(255,212,111,.6);border-bottom:1px solid rgba(255,212,111,.6)}
.overlay.result-mode h2{text-shadow:0 0 34px rgba(105,221,255,.28)}
.overlay.result-mode .result-grid{gap:8px}
.overlay.result-mode .result-item{background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:inset 0 0 20px rgba(105,221,255,.025)}
.share-result{background:linear-gradient(135deg,#8ce7ff,#fff0ae)!important;color:#07101d!important;border-color:rgba(255,255,255,.9)!important;box-shadow:0 0 22px rgba(105,221,255,.18)}
.share-result[hidden]{display:none}

@media(max-width:720px){.game-header:after{display:none}}
@media(max-height:700px) and (orientation:landscape){
  .board-wrap:before,.board-wrap:after{width:18px;height:18px}
  .overlay.result-mode .overlay-card{transform:scale(.88)}
}