/* 폭탄 오목 화면. 흰색·파스텔 + 따뜻한 나무 바둑판. 계정 키트(kit.css)와 같은 색을 씀 */
:root { --pink: #ff8fb8; --violet: #8b7cf6; --wood: #f6d9a8; --ink: #2f3550; --muted: #7a809c; --line: #ece8f4; --bs: var(--kit-btn-scale, 1); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: var(--ink); word-break: keep-all;
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, #ffe0ea 0%, transparent 70%),
    radial-gradient(ellipse 55% 40% at 100% 15%, #dcefff 0%, transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 100%, #fff0d6 0%, transparent 70%),
    #fffaf3;
  background-attachment: fixed;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* ---------- 첫 화면 ---------- */
#home { max-width: 480px; margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); min-height: 100%; display: flex; flex-direction: column; gap: 12px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.logo { display: flex; align-items: center; gap: 6px; }
.logo h1 { margin: 0; font-size: 25px; white-space: nowrap; font-weight: 900; letter-spacing: -1px; background: linear-gradient(90deg, #ff7aa2, var(--violet) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero { position: relative; display: flex; align-items: stretch; gap: 8px; height: min(32vh, 270px); min-height: 180px; border-radius: 26px; overflow: hidden; padding: 8px 8px 8px 16px;
  background: linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,244,228,.85)); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(170, 120, 80, .14); }
.hero-text { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hero-title { margin: 0 0 10px; font-size: 22px; font-weight: 900; line-height: 1.25; letter-spacing: -0.5px; }
.hero-title b { font-size: 36px; background: linear-gradient(90deg, #ff7aa2, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: #5b5f78; }
.hero canvas { height: 100%; aspect-ratio: 1; flex: none; max-width: 58%; }
.menu { display: grid; gap: 10px; }
.card { display: block; width: 100%; text-align: left; border-radius: 22px; padding: 14px; background: rgba(255,255,255,.93); border: 1.5px solid var(--line); box-shadow: 0 8px 24px rgba(150, 110, 170, .1); }
.card-head, .tile { display: flex; align-items: center; gap: 12px; }
.card .ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 25px; border-radius: 15px; background: #fff1dc; }
.card.friend .ico { background: #ffe3ef; }
.card b { display: block; font-size: 17px; font-weight: 900; }
.card small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; font-weight: 600; }
.tile { transition: transform .1s; }
.tile:active, .btn:active { transform: scale(.97); }
.tile > div { flex: 1; }
.tile .go { font-size: 28px; font-weight: 900; color: #e0c9a8; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.row2.small { margin-top: 0; }
.btn { border: 1.5px solid var(--line); background: #fff; border-radius: 16px; padding: calc(13px * var(--bs)) 10px; font-weight: 900; font-size: calc(15.5px * min(var(--bs), 1.2)); color: var(--violet); transition: transform .1s; }
.btn.primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--pink), var(--violet)); box-shadow: 0 6px 16px rgba(139, 124, 246, .3); }
.btn.gold { border: 0; color: #6b4400; background: linear-gradient(135deg, #ffe08a, #ffc24b); }
.foot { text-align: center; margin: 0; }
.link { border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 13px; padding: 6px; }

/* 고르기 창 (컴퓨터 난이도 등) */
.pick { display: grid; gap: 8px; margin: 10px 0; }
.pick button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; text-align: left; color: var(--ink); }
.pick button.on { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,124,246,.18); background: #faf8ff; }
.pick .lv { font-size: 24px; }
.pick b { display: block; font-size: 16px; }
.pick small { color: var(--muted); font-size: 12.5px; }
.pick .gold { margin-left: auto; color: #c98200; font-weight: 900; font-size: 13px; white-space: nowrap; }
.set-label { font-size: 13px; font-weight: 800; color: var(--muted); margin: 12px 0 6px; }
.howto { display: grid; gap: 10px; margin: 8px 0; padding: 0; list-style: none; }
.howto li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: start; font-size: 14.5px; line-height: 1.55; }
.howto .n { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: #fff1dc; font-size: 18px; }
.howto b { color: #e2558a; }
.result-big { text-align: center; font-size: 46px; margin: 0; }
.ranks { display: grid; gap: 6px; margin: 10px 0; }
.rk { display: grid; grid-template-columns: 34px 14px 1fr auto auto; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; background: #faf9fd; border: 1px solid var(--line); }
.rk.me { border-color: var(--violet); background: #f6f3ff; }
.rk .m { font-size: 20px; text-align: center; }
.rk .d { width: 12px; height: 12px; border-radius: 50%; background: var(--pc); }
.rk b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk small { color: var(--muted); font-weight: 700; font-size: 12px; white-space: nowrap; }
.rk .g { color: #c98200; font-weight: 900; font-size: 13px; white-space: nowrap; }
.result-gold { text-align: center; font-weight: 900; color: #c98200; font-size: 18px; margin: 4px 0; }

/* ---------- 게임 화면 ---------- */
#play { position: fixed; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#side { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
#hud { display: flex; align-items: flex-start; gap: 6px; }
#hud > * { pointer-events: auto; }
.pbtn { flex: none; width: calc(36px * var(--bs)); height: calc(36px * var(--bs)); border-radius: 50%; border: 1.5px solid var(--line); background: rgba(255,255,255,.94); font-size: calc(15px * var(--bs)); font-weight: 900; color: var(--muted); box-shadow: 0 4px 12px rgba(60,50,110,.12); padding: 0; }
#chips { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(82px * var(--bs)), 1fr)); gap: 5px; min-width: 0; }
.pc { position: relative; overflow: hidden; display: flex; align-items: center; gap: 5px; padding: calc(5px * var(--bs)) calc(8px * var(--bs)); border-radius: calc(13px * var(--bs)); background: rgba(255,255,255,.92); border: 1.5px solid var(--line); border-left: calc(4px * var(--bs)) solid var(--pc); box-shadow: 0 3px 10px rgba(60,50,110,.08); min-width: 0; font-size: calc(12.5px * var(--bs)); }
.pc b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; font-weight: 800; }
.pc .dot { width: calc(12px * var(--bs)); height: calc(12px * var(--bs)); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 18%, var(--pc) 45%); flex: none; }
.pc .cc { flex: none; font-size: .85em; font-weight: 900; color: var(--muted); letter-spacing: -1px; }
.pc .frz { flex: none; }
.pc.out { opacity: .45; text-decoration: line-through; }
.pc.turn { border-color: var(--pc); box-shadow: 0 0 0 calc(2px * var(--bs)) color-mix(in srgb, var(--pc) 35%, transparent), 0 3px 10px rgba(60,50,110,.12); }
.pc.dead { opacity: .45; }
.pc .tb { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--pc); transition: width .2s linear; }
.pc em { font-style: normal; font-size: .8em; font-weight: 900; padding: 0 5px; border-radius: 99px; background: var(--pc); color: #fff; flex: none; }
#foot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#foot > * { pointer-events: auto; }
#msg { align-self: center; max-width: 100%; text-align: center; padding: calc(7px * var(--bs)) calc(14px * var(--bs)); border-radius: 99px; background: rgba(255,255,255,.92); border: 1.5px solid var(--line); box-shadow: 0 4px 14px rgba(60,50,110,.1); font-weight: 800; font-size: calc(13.5px * var(--bs)); color: #4b4f6b; }
#msg:empty { visibility: hidden; }
#msg .tm { display: inline-block; min-width: 1.6em; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: #f3f0ff; color: var(--violet); font-weight: 900; }
#msg .tm.hurry { background: #ffe0ea; color: #e0567a; }
#msg .rd { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 99px; background: #fff1dc; color: #b8894f; font-size: .85em; }
#msg .key { display: block; font-size: .78em; color: var(--muted); font-weight: 700; margin-top: 1px; }
#bar { display: flex; align-items: stretch; gap: 6px; max-width: 100%; }
#cards { display: flex; gap: 6px; }
.card-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: calc(58px * var(--bs)); min-height: calc(56px * var(--bs)); padding: 3px; border-radius: calc(14px * var(--bs)); border: 2px solid var(--line); background: rgba(255,255,255,.96); box-shadow: 0 4px 12px rgba(60,50,110,.12); color: var(--ink); }
.card-btn .e { font-size: calc(22px * var(--bs)); line-height: 1.1; }
.card-btn small { font-size: calc(10.5px * var(--bs)); font-weight: 800; white-space: nowrap; }
.card-btn.on { border-color: var(--violet); background: #f3f0ff; box-shadow: 0 0 0 3px rgba(139,124,246,.25); transform: translateY(-3px); }
.card-btn.empty { opacity: .45; border-style: dashed; box-shadow: none; }
.card-btn:disabled { opacity: .45; }
.card-btn .new { position: absolute; top: -6px; right: -6px; font-size: 10px; font-weight: 900; background: #ff7aa2; color: #fff; border-radius: 99px; padding: 1px 5px; }
.okbtn { min-width: calc(100px * var(--bs)); min-height: calc(56px * var(--bs)); padding: 0 calc(14px * var(--bs)); border: 0; border-radius: calc(16px * var(--bs)); font-weight: 900; font-size: calc(16px * var(--bs)); color: #fff; background: linear-gradient(135deg, var(--pink), var(--violet)); box-shadow: 0 6px 16px rgba(139,124,246,.3); }
.okbtn:disabled { background: #e6e3ef; color: #a5a3b8; box-shadow: none; }
.okbtn.hide { visibility: hidden; }
#banner { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); pointer-events: none; padding: 12px 26px; border-radius: 22px; background: rgba(255,255,255,.95); box-shadow: 0 14px 40px rgba(60,50,110,.22); font-size: calc(26px * min(var(--bs), 1.25)); font-weight: 900; white-space: nowrap; color: var(--violet); animation: pop .35s ease-out; }
#banner small { display: block; font-size: .5em; color: var(--muted); text-align: center; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
body.playing { background: radial-gradient(ellipse 80% 50% at 50% 0%, #ffe8f0 0%, transparent 70%), radial-gradient(ellipse 80% 50% at 50% 100%, #fff1dc 0%, transparent 70%), #fffaf3; }
body.dark-play { background: radial-gradient(ellipse 80% 50% at 50% 50%, #2a2470 0%, transparent 80%), #14113a; }
body.dark-play .pc, body.dark-play #msg, body.dark-play .pbtn { background: rgba(255,255,255,.9); }
.pic { display: block; margin: 4px auto; max-width: 100%; }
.items-help { display: grid; gap: 6px; margin: 6px 0; }
.items-help div { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; font-size: 13.5px; line-height: 1.45; padding: 7px 10px; border-radius: 12px; background: #faf9fd; border: 1px solid var(--line); }
.items-help .e { font-size: 22px; text-align: center; }
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-pick button { text-align: left; padding: 10px 12px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); }
.mode-pick button.on { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,124,246,.18); background: #faf8ff; }
.mode-pick b { display: block; font-size: 15px; }
.mode-pick small { color: var(--muted); font-size: 12px; }

/* 가로 화면: 왼쪽에 점수판·안내, 오른쪽에 바둑판 */
body.land #side { right: auto; width: calc(min(250px, 34vw) * min(var(--bs), 1.2)); justify-content: flex-start; gap: 8px; }
body.land #hud { flex-direction: column; align-items: stretch; }
body.land #chips { grid-template-columns: 1fr; }
body.land #msg { align-self: stretch; border-radius: 16px; }

@media (min-width: 700px) {
  #home { padding-top: 24px; }
  .hero { height: 290px; }
}
/* 휴대폰 가로: 첫 화면을 한눈에 */
@media (orientation: landscape) and (max-height: 520px) {
  #home { max-width: 860px; padding-top: max(8px, env(safe-area-inset-top)); gap: 8px; }
  .hero { height: 140px; min-height: 0; }
  .hero-title { font-size: 17px; margin-bottom: 6px; } .hero-title b { font-size: 26px; }
  .hero ul { gap: 3px; font-size: 12px; }
  .menu { grid-template-columns: 1fr 1fr; align-items: start; }
  .menu .card.friend { grid-row: span 2; }
  .card { padding: 10px 12px; }
}

/* 가로 화면: 왼쪽에 점수판·안내·카드, 오른쪽에 바둑판 */
body.land #side { right: auto; width: calc(min(260px, 36vw) * min(var(--bs), 1.25)); justify-content: space-between; gap: 8px; }
body.land #foot { align-items: stretch; }
body.land #bar { flex-wrap: nowrap; }
body.land .okbtn { flex: 1; min-width: 0; padding: 0 6px; }
body.land #banner { left: calc(50% + min(130px, 18vw)); }
/* 낮은 가로 화면: 점수판을 두 줄로 */
@media (orientation: landscape) and (max-height: 450px) {
  body.land #chips { grid-template-columns: 1fr 1fr; }
  body.land #side { width: calc(min(280px, 38vw) * min(var(--bs), 1.25)); }
  body.land .pc em { display: none; }
}