/* TAECHORA WEB v2 · SHOUT FLY — 밤하늘에 빨강·금빛 목청(고함 = 붉은 불꽃, 빛 = 금빛).
   공통 틀은 ../shell.css. 게임 화면의 HUD·얼굴 창은 녹화되도록 캔버스에 그린다. 여기서는 색 변수와 DOM 화면만 정한다. */
:root{
  --void:#07050d;
  --acc:#ff5a4f;--acc2:#ffd166;--accGlow:rgba(255,90,79,.24);
  --panelA:rgba(46,14,30,.95);--panelB:rgba(10,6,14,.97);--chip:rgba(22,10,22,.68);
  --line:rgba(255,214,200,.14);--line2:rgba(255,214,200,.28);
  --logoA:#ffffff;--logoB:#ffd166;--logoC:#ff5a4f;
  --mute:#c4a8b4;--dim:#83697a;
  --sa-t:env(safe-area-inset-top,0px);--sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px);--sa-r:env(safe-area-inset-right,0px);
}
.cam{position:fixed;left:0;top:0;width:2px;height:2px;opacity:.01;pointer-events:none;z-index:-1}
.screen.title{background:linear-gradient(180deg,rgba(7,5,13,.1) 0%,rgba(7,5,13,.2) 30%,rgba(7,5,13,.66) 48%,rgba(7,5,13,.72) 80%,rgba(7,5,13,.45) 100%)}
.screen.title .ko,.screen.title .tag,.screen.title .keys{text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}
.screen.title .logo{font-size:clamp(46px,13vw,116px)}
.cta2{margin-top:14px;gap:10px}
.tog.on{border-color:var(--acc2);color:var(--acc2)}

/* 스마일 필터 켜기·끄기(기본 켜짐) */
.fxchip[aria-pressed=false]{color:var(--dim)}
.fxchip{pointer-events:auto;position:absolute;height:28px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,214,200,.35);background:rgba(10,6,14,.62);font:600 12px var(--f-ui);color:#fff;white-space:nowrap;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.fxchip:active{transform:scale(.96)}

/* PC: 게임 대신 휴대폰으로 여는 QR */
.pcblock{display:flex;align-items:center;gap:18px;max-width:520px;margin:18px auto 0;padding:16px 18px;border-radius:18px;border:1px solid var(--line2);background:rgba(10,6,14,.72);text-align:left}
.pcblock[hidden]{display:none}
.pcblock .qr{flex:none;width:132px;height:132px;border-radius:10px;background:#fff;padding:6px;box-sizing:border-box;image-rendering:pixelated}
.pcblock b{display:block;font:700 17px/1.35 var(--f-ui);color:#fff}
.pcblock p{margin:6px 0 10px;font-size:13.5px;line-height:1.55;color:var(--mute)}
.is-pc #startBtn,.is-pc .cta2,.is-pc .title .keys,.is-pc .title .season,.is-pc .best{display:none!important}

/* 게임 중 DOM은 일시정지 버튼과(터치 모드) 부스트 버튼뿐. 점수·하트·얼굴 창은 캔버스(녹화에 들어간다) */
.pausebtn{position:absolute;top:calc(12px + var(--sa-t));right:calc(12px + var(--sa-r))}
.tboost{pointer-events:auto;position:absolute;right:calc(16px + var(--sa-r));bottom:calc(18px + var(--sa-b));width:96px;height:96px;border-radius:50%;border:2px solid rgba(255,209,102,.7);background:radial-gradient(circle at 50% 40%,rgba(255,90,79,.9),rgba(90,16,30,.92) 70%);color:#fff;display:grid;place-items:center;align-content:center;box-shadow:0 0 26px rgba(255,90,79,.5)}
.tboost span{font-size:19px;letter-spacing:.06em}
.tboost small{font:700 11px var(--f-ui);color:#ffe6b0}
.tboost:active{transform:scale(.95)}

/* 권한·안내 */
.perm .panel-in{max-width:460px}
.perm .howto li{font-size:13.5px}

/* 결과 */
.grade{margin:2px 0 0;font:700 15px var(--f-ui);color:var(--acc2)}
.grade:empty{display:none}
.clipbox{margin:6px auto 10px;max-width:220px;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#000}
.clipbox video{display:block;width:100%;max-height:34vh;object-fit:contain;background:#000}
.share{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 0 6px}
.share .tog{height:38px}
.share .tog[disabled]{opacity:.38;cursor:default}
@media (max-height:700px){.clipbox{max-width:150px}.clipbox video{max-height:24vh}.over .stats{margin:10px 0 8px}}
@media (max-height:520px){
  .over .panel-in{padding:16px 14px}
  .clipbox{display:none}
  .stats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .st.big{grid-column:auto;padding:10px 6px}
  .st.big b{font-size:24px}
}