:root{
  --bg:#0a0d12; --panel:#11161e; --frame:#2c3642; --green:#3ee87a; --amber:#f2c05c;
  --red:#ff5a52; --white:#e4e9ee; --muted:#8794a0; --blue:#6cb6ff;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --ui:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;background:#05070a;color:var(--white);font-family:var(--ui);overscroll-behavior:none;touch-action:none;}
body{height:100dvh;overflow:hidden;}
.app{max-width:560px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;background:var(--bg);position:relative;}
.bar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#0e131b;border-bottom:1px solid var(--frame);flex:0 0 auto;}
.dot{width:11px;height:11px;border-radius:50%;}
.dot.r{background:#ff5f56;}.dot.y{background:#ffbd2e;}.dot.g{background:#27c93f;}
.bartitle{color:var(--muted);font-size:12px;font-family:var(--mono);margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.counter{margin-left:auto;color:var(--green);font-size:12px;font-family:var(--mono);}

.game{flex:1;display:flex;flex-direction:column;min-height:0;padding:10px;gap:8px;}
.hud{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:14px;flex:0 0 auto;}
.hud #roundLbl{color:var(--amber);font-weight:700;}
.hud #timer{margin-left:auto;color:var(--white);}
.aisay{flex:1;text-align:center;color:var(--red);font-family:var(--ui);font-size:13px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}

.arena-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;}
.arena{position:relative;width:min(92vw,76vh,520px);aspect-ratio:1;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  background:#070a0e;border:2px solid var(--frame);border-radius:10px;overflow:hidden;}
.zone{border:1px solid rgba(44,54,66,.55);transition:background .08s;position:relative;}
.zone.warn{background:repeating-linear-gradient(45deg,rgba(242,192,92,.18)0 8px,transparent 8px 16px);
  box-shadow:inset 0 0 0 2px rgba(242,192,92,.55);animation:wpulse .4s steps(2) infinite;}
@keyframes wpulse{50%{box-shadow:inset 0 0 0 2px rgba(242,192,92,.2);}}
.zone.lethal{background:rgba(255,90,82,.85);box-shadow:inset 0 0 18px rgba(0,0,0,.4);}
.player{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:var(--green);font-size:22px;font-family:var(--mono);font-weight:700;pointer-events:none;
  text-shadow:0 0 10px rgba(62,232,122,.8);will-change:left,top;z-index:3;}
.player.hit{color:var(--red);text-shadow:0 0 16px rgba(255,90,82,.9);}
.ctl-hint{flex:0 0 auto;text-align:center;color:var(--muted);font-size:12px;min-height:15px;}

/* 오버레이 */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(5,7,10,.86);z-index:10;padding:18px;text-align:center;backdrop-filter:blur(2px);}
.overlay.hidden{display:none;}
.ov-card{max-width:440px;width:100%;}
.ov-title{font-size:30px;font-weight:800;color:var(--white);margin-bottom:10px;}
.ov-sub{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:20px;}
.ov-foot{color:var(--muted);font-size:12px;margin-top:14px;}
.ov-taunt{color:var(--red);font-size:20px;font-weight:800;margin:10px 0;}
.ov-analyzing{color:var(--amber);font-family:var(--mono);font-size:14px;}

.btn{font-family:var(--ui);font-size:15px;cursor:pointer;background:transparent;color:var(--white);
  border:1px solid var(--frame);border-radius:10px;padding:12px 20px;text-decoration:none;display:inline-block;}
.btn.key{border-color:var(--green);color:var(--green);}
.btn.big{font-size:17px;padding:14px 24px;}

/* 게임오버/공유 카드 */
.card{background:var(--panel);border:1px solid var(--frame);border-radius:16px;padding:22px;width:100%;max-width:440px;text-align:left;}
.card .ch{color:var(--green);font-family:var(--mono);font-size:14px;}
.card .ctitle{font-size:26px;font-weight:800;color:var(--amber);margin:6px 0 14px;}
.hb{display:flex;align-items:center;gap:8px;margin:9px 0;font-size:14px;}
.hbt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hbbar{width:90px;height:14px;background:#0a0f16;border:1px solid var(--frame);border-radius:7px;overflow:hidden;flex:0 0 auto;}
.hbfill{display:block;height:100%;background:var(--green);}
.hbpct{font-family:var(--mono);font-size:13px;color:var(--green);width:38px;text-align:right;}
.cverdict{color:var(--muted);font-size:14px;margin-top:14px;}
.cscore{color:var(--white);font-family:var(--mono);font-size:14px;margin-top:12px;}
.ov-card .cta,.cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px;}

/* 공유 페이지 */
.sharepage{align-items:center;justify-content:center;gap:16px;}
.sharecard{background:var(--panel);border:1px solid var(--frame);border-radius:18px;padding:24px;width:100%;max-width:460px;}
.sc-h{color:var(--green);font-family:var(--mono);font-size:14px;}
.sc-title{font-size:28px;font-weight:800;color:var(--amber);margin:6px 0 16px;}
.sc-habits .hb{margin:11px 0;}
.sc-verdict{color:var(--muted);font-size:15px;margin-top:14px;}
.sc-foot{color:var(--white);font-family:var(--mono);font-size:14px;margin-top:14px;}