/* ─────────────────────────────────────────────
   사과게임 · Navy
   사과는 이미지 없이 CSS 도형으로만 그린다.
   라이트 기본 · html[data-theme="dark"] 로 덮어쓰기
   ───────────────────────────────────────────── */

:root{
  --bg:#f3f1f7;
  --card:#ffffff;
  --card-2:#f6f5fa;
  --line:rgba(20,20,35,.10);
  --tx:#16161e;
  --tx-2:#5a5a6c;
  --tx-3:#9494a4;
  --accent:#5b6da6;
  --accent-soft:rgba(91,109,166,.13);
  --ok:#2ea44f;

  --apple-hi:#ee5a5f;
  --apple-lo:#c8353a;
  --leaf:#3dae62;
  --stem:#8a5a3c;

  --shadow:0 16px 40px -20px rgba(20,20,45,.3);
  --cell:38px;
}

html[data-theme="dark"]{
  --bg:#111116;
  --card:#1b1b23;
  --card-2:#22222c;
  --line:rgba(255,255,255,.12);
  --tx:#ececf2;
  --tx-2:#a4a4b6;
  --tx-3:#75758a;
  --accent:#a6b4de;
  --accent-soft:rgba(166,180,222,.2);
  --ok:#3dc98a;

  --apple-hi:#e5545a;
  --apple-lo:#ad2f34;
  --leaf:#42c06f;
  --stem:#7a4e33;

  --shadow:none;
}

*{ box-sizing:border-box }

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
              system-ui,"Segoe UI","Apple SD Gothic Neo",sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

.app{
  max-width:1080px;
  margin:0 auto;
  padding:16px 16px 26px;
}

/* ── 판 + 옆 패널 ─────────────────────────── */
.play{
  display:grid;
  grid-template-columns:1fr 172px;
  gap:14px;
  align-items:start;
}

.stage{ display:grid; place-items:center; min-width:0 }

.board{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:8px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.grid{
  display:grid;
  grid-template-columns:repeat(17, var(--cell));
  grid-auto-rows:var(--cell);
}

/* ── 사과 ─────────────────────────────────── */
.c{
  position:relative;
  display:grid;
  place-items:center;
}

.c .ap{
  position:relative;
  width:calc(var(--cell) * .82);
  height:calc(var(--cell) * .82);
  display:grid;
  place-items:center;
  background:linear-gradient(var(--apple-hi), var(--apple-lo));
  /* 위는 살짝 눌리고 아래는 통통하게 — 사과 윤곽 */
  border-radius:48% 48% 46% 46% / 42% 42% 56% 56%;
  color:#fff;
  font-size:calc(var(--cell) * .42);
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 1px rgba(0,0,0,.18);
  transition:transform .12s ease;
}

/* 꼭지 */
.c .ap::after{
  content:"";
  position:absolute;
  top:calc(var(--cell) * -.07);
  left:50%;
  width:calc(var(--cell) * .062);
  height:calc(var(--cell) * .17);
  background:var(--stem);
  border-radius:2px;
  transform:translateX(-50%) rotate(9deg);
}

/* 잎 */
.c .ap::before{
  content:"";
  position:absolute;
  top:calc(var(--cell) * -.055);
  left:56%;
  width:calc(var(--cell) * .28);
  height:calc(var(--cell) * .17);
  background:var(--leaf);
  border-radius:50% 12% 50% 12%;
  transform:rotate(-10deg);
}

/* 고른 칸 */
.c.on .ap{ transform:scale(1.08) }
.c.on .ap::after,
.c.on .ap::before{ opacity:.9 }

/* 지워짐 */
.c.gone .ap{ display:none }

/* 사라지는 순간 */
@keyframes pop{
  from{ transform:scale(1); opacity:1 }
  to  { transform:scale(1.5); opacity:0 }
}
.c.pop .ap{ animation:pop .26s ease-out forwards; pointer-events:none }

/* ── 드래그 상자 ──────────────────────────── */
.sel{
  position:absolute;
  border:2px solid var(--accent);
  background:var(--accent-soft);
  border-radius:7px;
  pointer-events:none;
  display:grid;
  place-items:center;
  z-index:3;
}
.sel[hidden]{ display:none }
.sel.ok{ border-color:var(--ok); background:color-mix(in srgb, var(--ok) 18%, transparent) }
.sel span{
  font-size:13px; font-weight:800; color:#fff;
  background:var(--accent); padding:1px 9px; border-radius:99px;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  font-variant-numeric:tabular-nums;
}
.sel.ok span{ background:var(--ok) }

/* 상대가 집고 있는 자리 */
.osel{
  position:absolute;
  border:2px dashed var(--tx-3);
  border-radius:7px;
  opacity:.5;
  pointer-events:none;
  z-index:2;
}

/* ── 옆 패널 ──────────────────────────────── */
.side{ display:flex; flex-direction:column; gap:10px }

.box{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
}
.box[hidden]{ display:none }
.box .k{
  margin:0 0 5px;
  font-size:10.5px; font-weight:700; letter-spacing:.11em; color:var(--tx-3);
}
.box .v{
  margin:0;
  font-size:27px; font-weight:800; line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.box .v.sm{ font-size:19px }

.box-time{ display:grid; place-items:center; padding:14px }
.ring{ position:relative; width:80px; height:80px }
.ring svg{ width:80px; height:80px; transform:rotate(-90deg) }
.ring .r-bg{ fill:none; stroke:var(--card-2); stroke-width:7 }
.ring .r-fg{
  fill:none; stroke:var(--accent); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:207.3; stroke-dashoffset:0;
  transition:stroke-dashoffset .25s linear, stroke .3s ease;
}
.ring .r-fg.warn{ stroke:var(--apple-hi) }
.ring span{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:15px; font-weight:800;
  font-variant-numeric:tabular-nums;
}

.live{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px }
.live li{
  display:flex; align-items:baseline; gap:7px;
  padding:5px 9px; border-radius:8px;
  background:var(--card-2); font-size:12.5px;
}
.live li b{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.live li span{ margin-left:auto; font-weight:800; font-variant-numeric:tabular-nums }
.live li.you{ outline:1px solid var(--accent) }
.live li.lead span{ color:var(--accent) }

.sidebtns{ display:flex; flex-direction:column; gap:6px }
.sidebtns .btn[aria-pressed="true"]{ color:var(--tx-3) }

.hint{
  margin:14px 0 0; text-align:center;
  font-size:13px; color:var(--tx-3);
}
.hint b{ color:var(--tx-2) }

/* ── 버튼 ─────────────────────────────────── */
.btn{
  font:inherit; font-size:13.5px; font-weight:700;
  color:var(--tx-2); background:var(--card);
  border:1px solid var(--line); border-radius:9px;
  padding:8px 16px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.btn:hover{ border-color:var(--accent); color:var(--accent) }
.btn-fill{
  background:var(--accent); border-color:var(--accent); color:#fff;
  padding:11px 26px; font-size:15px;
}
.btn-fill:hover{ color:#fff; filter:brightness(1.08) }
.btn-sm{ padding:6px 12px; font-size:12.5px }
a.btn{ display:inline-block; text-decoration:none; text-align:center }

/* ── 덮개 화면 ────────────────────────────── */
.over{
  position:fixed; inset:0; z-index:20;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.over[hidden]{ display:none }

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:32px 42px 26px;
  text-align:center;
  min-width:276px;
  max-width:min(92vw, 380px);
}
.ov-k{
  margin:0 0 12px;
  font-size:11.5px; font-weight:700; letter-spacing:.18em; color:var(--tx-3);
}
.gate-rule{ margin:0 0 20px; font-size:15px; color:var(--tx-2); line-height:1.7 }
.gate-rule b{ color:var(--apple-hi); font-size:17px }
.gate-msg{ margin:0 0 16px; font-size:13.5px; color:var(--tx-3) }
.gate-msg b{ color:var(--tx); font-weight:700 }
.gate-err{ margin:12px 0 0; font-size:12.5px; color:var(--apple-hi); min-height:1.2em }

.modes{ display:flex; gap:8px; justify-content:center; margin-bottom:14px }
.roomrow{ display:flex; gap:6px; justify-content:center; align-items:center }
.codein{
  width:96px; padding:7px 10px;
  font:inherit; font-size:13px; font-weight:700;
  text-align:center; letter-spacing:.14em; text-transform:uppercase;
  background:var(--bg); color:var(--tx);
  border:1px solid var(--line); border-radius:8px; outline:0;
}
.codein:focus{ border-color:var(--accent) }

.code{
  font-size:22px; font-weight:800; letter-spacing:.2em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.roster{ list-style:none; margin:14px 0 16px; padding:0; display:flex; flex-direction:column; gap:5px }
.roster li{
  display:flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:8px; background:var(--card-2); font-size:13.5px;
}
.roster li.you b{ color:var(--accent) }
.roster li span{ margin-left:auto; color:var(--tx-3) }

.rankbox{
  margin-top:20px; padding-top:16px;
  border-top:1px solid var(--line);
  text-align:left;
}
.rank-k{
  margin:0 0 8px; font-size:10.5px; font-weight:700;
  letter-spacing:.11em; color:var(--tx-3);
  display:flex; align-items:baseline; gap:7px;
}
.rank-k em{ font-style:normal; font-size:10px; font-weight:600; color:var(--tx-3); opacity:.75 }
.ranklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px }
.ranklist li{
  display:flex; align-items:baseline; gap:8px;
  padding:4px 9px; border-radius:7px;
  background:var(--card-2); font-size:12.5px;
}
.ranklist li i{ font-style:normal; font-weight:800; color:var(--tx-3); width:14px; flex:none }
.ranklist li b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ranklist li span{ margin-left:auto; font-weight:800; font-variant-numeric:tabular-nums }
.ranklist li.empty{
  justify-content:center; color:var(--tx-3); background:transparent; font-size:12px;
}
.rank-mine{
  margin:9px 0 0; font-size:11.5px; color:var(--accent);
  font-weight:600; text-align:center;
}
.rank-mine[hidden]{ display:none }

.ov-score{ margin:0 0 6px; display:flex; align-items:baseline; justify-content:center; gap:4px }
.ov-score strong{
  font-size:56px; font-weight:800; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.ov-score span{ font-size:16px; color:var(--tx-3); font-weight:600 }
.ov-msg{ margin:0 0 20px; font-size:13.5px; color:var(--tx-2); min-height:1.3em }

.rank{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:5px }
.rank[hidden]{ display:none }
.rank li{
  display:flex; align-items:baseline; gap:9px;
  padding:6px 12px; border-radius:8px; background:var(--card-2); font-size:13px;
}
.rank li i{ font-style:normal; font-weight:800; color:var(--tx-3); width:14px }
.rank li b{ font-weight:700 }
.rank li span{ margin-left:auto; font-weight:800; font-variant-numeric:tabular-nums }
.rank li.you{ outline:1px solid var(--accent) }
.rank li.you i{ color:var(--accent) }

.ov-link{ display:block; margin-top:14px; font-size:12.5px; color:var(--tx-3); text-decoration:none }
.ov-link:hover{ color:var(--accent) }

/* ── 좁은 화면 ────────────────────────────── */
@media (max-width:780px){
  .app{ padding:12px 10px 20px }
  .play{ grid-template-columns:1fr; gap:10px }
  .side{
    flex-direction:row; flex-wrap:wrap; align-items:stretch;
    justify-content:center;
  }
  .box-score,.box-best{ flex:1; min-width:96px }
  .box-time{ order:-1; padding:10px }
  .ring,.ring svg{ width:62px; height:62px }
  .ring span{ font-size:13px }
  .box-live{ flex-basis:100% }
  .live{ flex-direction:row; flex-wrap:wrap }
  .sidebtns{ flex-basis:100%; flex-direction:row; justify-content:center }
  .panel{ padding:26px 30px 22px }
  .ov-score strong{ font-size:46px }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
}