/* 윷놀이 대작전 화면. 흰색·파스텔 + 한지·색동 느낌. 계정 키트(kit.css)와 같은 색을 씀 */
:root { --pink: #ff8fb8; --violet: #8b7cf6; --wood: #f3c88f; --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%, #dcf5ea 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; min-width: 0; }
.logo h1 { margin: 0; font-size: 23px; white-space: nowrap; font-weight: 900; letter-spacing: -1px; background: linear-gradient(90deg, #ff6f91, #f59f3a 55%, var(--violet)); -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 12px 16px;
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,244,228,.88)); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(170, 120, 80, .14); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #ff5c7a 0 20%, #ffd23f 20% 40%, #4cc38a 40% 60%, #4aa3ff 60% 80%, #b18cff 80%); opacity: .75; }
.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, #ff6f91, #f59f3a); -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: 56%; }
.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: 7px; margin: 8px 0; }
.pick button { display: flex; align-items: center; gap: 12px; padding: 10px 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: 22px; }
.pick b { display: block; font-size: 15.5px; }
.pick small { color: var(--muted); font-size: 12.5px; }
.pick .gold { margin-left: auto; color: #c98200; font-weight: 900; font-size: 12.5px; white-space: nowrap; }
.set-label { font-size: 13px; font-weight: 800; color: var(--muted); margin: 10px 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; }
.yut-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 6px; margin: 8px 0 12px; }
.yut-table div { border-radius: 14px; background: #fffaf2; border: 1.5px solid #f3e2c6; padding: 6px 4px; text-align: center; }
.yut-table b { display: block; font-size: 16px; }
.yut-table small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.mini-board { display: block; margin: 6px auto; max-width: 100%; }
.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; gap: 8px;
  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 > *, #ctrl > * { pointer-events: auto; }
#msg, #rolls { pointer-events: none !important; }
.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(78px * var(--bs)), 1fr)); gap: 5px; min-width: 0; }
.pc { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px 5px; padding: calc(4px * var(--bs)) calc(8px * var(--bs)); border-radius: calc(13px * var(--bs)); background: rgba(255,255,255,.93); 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(12px * var(--bs)); }
.pc b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 800; }
.pc em { font-style: normal; font-size: .8em; font-weight: 900; padding: 0 5px; border-radius: 99px; background: var(--pc); color: #fff; }
.pc .st { grid-column: 1 / -1; display: flex; align-items: center; gap: 2px; min-width: 0; }
.pc .st i { width: calc(8px * var(--bs)); height: calc(8px * var(--bs)); border-radius: 50%; border: 1.5px solid var(--pc); flex: none; }
.pc .st i.on { background: color-mix(in srgb, var(--pc) 40%, #fff); }
.pc .st i.done { background: var(--pc); }
.pc .st .it { margin-left: auto; font-size: 1em; letter-spacing: -2px; white-space: nowrap; }
.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 .tb { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--pc); transition: width .2s linear; }

#ctrl { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
#msg { align-self: center; max-width: 100%; text-align: center; padding: calc(6px * var(--bs)) calc(14px * var(--bs)); border-radius: 99px; background: rgba(255,255,255,.93); border: 1.5px solid var(--line); box-shadow: 0 4px 14px rgba(60,50,110,.1); font-weight: 800; font-size: calc(13px * 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 .key { display: block; font-size: .78em; color: var(--muted); font-weight: 700; margin-top: 1px; }
#rolls { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; min-height: calc(28px * var(--bs)); }
.roll { border-radius: 99px; padding: calc(4px * var(--bs)) calc(12px * var(--bs)); font-weight: 900; font-size: calc(14px * var(--bs)); color: #fff; background: var(--rc); box-shadow: 0 3px 8px rgba(60,50,110,.15); }
.roll small { font-size: .72em; opacity: .9; margin-left: 3px; }
#acts { display: flex; gap: 6px; align-items: stretch; justify-content: center; }
.abtn { border: 1.5px solid var(--line); border-radius: calc(18px * var(--bs)); background: #fff; font-weight: 900; color: var(--violet); padding: calc(10px * var(--bs)) calc(14px * var(--bs)); font-size: calc(14.5px * var(--bs)); box-shadow: 0 4px 12px rgba(60,50,110,.1); min-height: calc(46px * var(--bs)); transition: transform .1s; white-space: nowrap; }
.abtn:active { transform: scale(.96); }
.abtn:disabled { opacity: .4; }
.abtn.throw { flex: 1; max-width: calc(320px * var(--bs)); border: 0; color: #fff; background: linear-gradient(135deg, #ff8fb8, #f59f3a); font-size: calc(17px * var(--bs)); box-shadow: 0 6px 16px rgba(245,159,58,.35); position: relative; overflow: hidden; }
.abtn.throw.hold { animation: shake .12s infinite; }
.abtn.throw .pw { position: absolute; left: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.8); }
@keyframes shake { 50% { transform: translateX(1.5px) rotate(.6deg); } }
.abtn.sel { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,124,246,.25); }
#items { display: flex; gap: 6px; }
#items:empty { display: none; }
.ibtn { width: calc(46px * var(--bs)); min-height: calc(46px * var(--bs)); border-radius: calc(16px * var(--bs)); border: 1.5px solid #ffe08a; background: #fffbea; font-size: calc(20px * var(--bs)); padding: 0 0 calc(8px * var(--bs)); box-shadow: 0 4px 12px rgba(60,50,110,.1); position: relative; }
.ibtn.on { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,124,246,.3); }
.ibtn:disabled { opacity: .55; }
.ibtn small { position: absolute; bottom: 2px; left: 0; right: 0; font-size: calc(9px * var(--bs)); font-weight: 900; color: #a07400; }
#banner { position: absolute; left: 50%; top: 40%; 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(24px * min(var(--bs), 1.25)); font-weight: 900; white-space: nowrap; color: var(--violet); animation: pop .35s ease-out; z-index: 5; }
#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.land #side { left: auto; width: calc(min(300px, 40vw) * min(var(--bs), 1.15)); max-width: 52vw; }
body.land #hud { flex-direction: column; align-items: stretch; }
body.land #hud .pbtn { align-self: flex-end; }
body.land #chips { grid-template-columns: 1fr 1fr; }
body.land #msg { align-self: stretch; border-radius: 16px; }
body.land #acts { flex-wrap: nowrap; }
body.land .abtn.throw { max-width: none; min-width: 0; padding-left: 6px; padding-right: 6px; }
body.land #rolls:empty { min-height: 0; }
body.land #banner { left: calc((100% - min(300px, 40vw)) / 2); }

@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 #chips { gap: 3px; }
  body.land .pc { padding-top: 2px; padding-bottom: 2px; }
}