/* 우노 체스 화면. 흰색·파스텔. 계정 키트(kit.css)와 같은 색을 씀 */
:root { --pink: #ff8fb8; --violet: #8b7cf6; --ink: #2f3550; --muted: #7a809c; --line: #ece8f4; --bs: var(--kit-btn-scale, 1); --cs: var(--bs); }
/* 세로로 긴 휴대폰은 손패 카드를 조금 크게 (판은 가로 폭에 맞춰지므로 남는 높이를 씀) */
@media (orientation: portrait) and (min-height: 760px) { #hand { --cs: calc(var(--bs) * 1.2); } }
/* 낮은 화면: 내 이름표는 숨김 (시간은 안내 칸에 숫자로 보임, 부적 수는 버튼에) */
@media (orientation: portrait) and (max-height: 700px) { #hand { --cs: calc(var(--bs) * .85); } #pile .card.back.deck, #mine { display: none; } }
@media (orientation: landscape) and (max-height: 520px) { #hand { --cs: calc(var(--bs) * .8); } #msg .key, #pile .card.back.deck, #mine, #acts .abtn .t { display: none; } #acts .abtn { font-size: calc(12px * var(--bs)); padding: calc(7px * var(--bs)) calc(9px * var(--bs)); } body.land #play { grid-template-columns: minmax(0, 1fr) minmax(250px, 46vw); } }
* { 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%, #e6e0ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 100%, #dcf7ec 0%, transparent 70%),
    #fffaf6;
  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: center; gap: 8px; height: min(32vh, 260px); min-height: 170px; border-radius: 26px; overflow: hidden; padding: 8px 8px 8px 16px;
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(246,240,255,.88)); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(140, 110, 200, .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; }
#demo { flex: none; pointer-events: none; }
.menu { display: grid; gap: 10px; }
.mcard { 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; }
.mcard .ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 25px; border-radius: 15px; background: #efeaff; }
.mcard.friend .ico { background: #ffe3ef; }
.mcard b { display: block; font-size: 17px; font-weight: 900; }
.mcard 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: #cfc4f0; }
.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: 11px 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: 12.5px; white-space: nowrap; }
.set-label { font-size: 13px; font-weight: 800; color: var(--muted); margin: 12px 0 6px; }
.result-big { text-align: center; font-size: 46px; margin: 0; }
.ranks { display: grid; gap: 6px; margin: 10px 0; }
.rk { display: grid; grid-template-columns: 30px 14px 1fr 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; }
.result-gold { text-align: center; font-weight: 900; color: #c98200; font-size: 18px; margin: 4px 0; }

/* 하는 법 */
.help h3 { margin: 14px 0 6px; font-size: 16px; color: #e2558a; }
.help h3 small { color: var(--muted); font-weight: 700; font-size: 12px; }
.help p { margin: 4px 0; font-size: 14px; line-height: 1.55; }
.help b { color: #e2558a; }
.hcards { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.howto { display: grid; gap: 8px; margin: 8px 0; padding: 0; list-style: none; }
.howto li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; font-size: 14px; line-height: 1.5; }
.howto .n { display: grid; place-items: center; }
.hps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.hp { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 14px; background: #fbf9ff; border: 1px solid var(--line); }
.hp b { display: block; font-size: 14px; color: var(--ink); }
.hp small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; font-weight: 600; }
.mini { flex: none; display: grid; grid-template-columns: repeat(5, 21px); grid-auto-rows: 21px; border-radius: 5px; overflow: hidden; border: 2px solid #f3c6d6; }
.mini i { position: relative; display: grid; place-items: center; font-style: normal; background: #fff6ea; }
.mini i.dk { background: #ffdce8; }
.mini i svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.mini i.go::after { content: ''; width: 36%; height: 36%; border-radius: 50%; background: #7c6cf6; }
.mini i.hit { background: #ffc9d6; box-shadow: inset 0 0 0 2px #ff3d74; }
.mini i.from { box-shadow: inset 0 0 0 2px #ffb400; }
.mini i.was { background: color-mix(in srgb, #ffd166 35%, #fff6ea); }
.mini i.mv { background: color-mix(in srgb, #ffd166 55%, #fff6ea); box-shadow: inset 0 0 0 2px #ffaa28; }
.hmulti { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 2px; }
.hmulti .arr { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--violet); font-size: 18px; }
#msg .pips { color: var(--violet); letter-spacing: 1px; margin-right: 2px; }
.pico { display: inline-block; width: 1.6em; height: 1.6em; vertical-align: middle; }
.pico svg { width: 100%; height: 100%; display: block; }
.hrev2 { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 2px; }
.hrev2 .arr { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--violet); font-size: 18px; }
.mini.big { grid-template-columns: repeat(5, 24px); grid-auto-rows: 24px; }
.hrev { display: flex; gap: 10px; align-items: flex-start; }
.hrev > span { font-size: 28px; }

/* ---------- 카드 ---------- */
.card { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: calc(62px * var(--cs)); height: calc(88px * var(--cs)); border-radius: calc(12px * var(--cs)); color: #fff; font-weight: 900;
  border: calc(3px * var(--cs)) solid #fff; box-shadow: 0 4px 12px rgba(60, 50, 110, .18); flex: none; overflow: hidden; vertical-align: middle; }
.card .cb { font-size: calc(30px * var(--cs)); line-height: 1; text-shadow: 0 2px 0 rgba(0,0,0,.12); }
.card .cl { font-size: calc(11px * var(--cs)); margin-top: calc(6px * var(--cs)); background: rgba(255,255,255,.28); padding: 1px 6px; border-radius: 99px; white-space: nowrap; }
.card::before { content: ''; position: absolute; inset: 10% 14%; border-radius: 50%; background: rgba(255,255,255,.18); transform: rotate(-25deg); }
.c-n1 { background: linear-gradient(160deg, #7fe0c4, #3fc79e); }
.c-n2 { background: linear-gradient(160deg, #8fd0ff, #4ba8f0); }
.c-n3 { background: linear-gradient(160deg, #ffa8c8, #ff6f9f); }
.c-wild { background: conic-gradient(from 200deg, #ff8fb8, #ffd166, #7fe0c4, #7cc4ff, #b18cff, #ff8fb8); }
.c-plus2 { background: linear-gradient(160deg, #ffc56b, #ff9a3d); }
.c-skip { background: linear-gradient(160deg, #ff9a9a, #f05a6a); }
.c-rev { background: linear-gradient(160deg, #c4a8ff, #8b6cf0); }
.card.small { width: 40px; height: 56px; border-radius: 9px; border-width: 2px; }
.card.small .cb { font-size: 18px; } .card.small .cl { font-size: 8.5px; margin-top: 3px; padding: 0 4px; }
.card.tiny { width: 28px; height: 38px; border-radius: 7px; border-width: 2px; }
.card.tiny .cb { font-size: 13px; } .card.tiny .cl { display: none; }
.card.empty { background: #f1eef8; border-style: dashed; border-color: #ddd6ee; box-shadow: none; }
.card.back .bm { font-size: calc(26px * var(--bs)); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.12); z-index: 1; }
.card.back::after { content: ''; position: absolute; inset: 6px; border: 2px solid rgba(255,255,255,.55); border-radius: 8px; }
.card.back.shine { box-shadow: 0 0 0 2px #ffe58a, 0 4px 12px rgba(200,140,0,.35); }
.card.back.mini { width: calc(16px * var(--bs)); height: calc(23px * var(--bs)); border-radius: 4px; border-width: 1.5px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.card.back.mini .bm { font-size: calc(9px * var(--bs)); } .card.back.mini::after { inset: 2px; border-width: 1px; border-radius: 2px; }
.card.back.deck { width: 34px; height: 48px; border-radius: 8px; border-width: 2px; }
.card.back.deck .bm { font-size: 15px; } .card.back.deck::after { inset: 3px; border-radius: 5px; }

/* ---------- 판 ---------- */
.board { position: relative; --cell: 40px; border-radius: 14px; box-shadow: 0 0 0 6px var(--edge), 0 14px 36px rgba(120, 90, 160, .22); background: var(--sqa); touch-action: manipulation; }
.board .spin { position: absolute; inset: 0; transition: transform 1s; }
.board .cells { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(6, var(--cell)); grid-auto-rows: var(--cell); border-radius: 14px; overflow: hidden; }
.board .sq { position: relative; border: 0; padding: 0; margin: 0; background: var(--sqa); cursor: default; }
.board .sq.dk { background: var(--sqb); }
.board.dots .sq.dk { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.75) 0 2px, transparent 2.5px), radial-gradient(circle at 70% 70%, rgba(255,255,255,.75) 0 2px, transparent 2.5px), var(--sqb); }
.board.night .sq { background: radial-gradient(circle at 25% 30%, rgba(255,255,255,.7) 0 1px, transparent 1.5px), var(--sqa); }
.board.night .sq.dk { background: radial-gradient(circle at 70% 60%, rgba(255,230,140,.8) 0 1px, transparent 1.5px), var(--sqb); }
.board.cloud .sq:nth-child(7n+3)::before { content: ''; position: absolute; left: 20%; top: 30%; width: 60%; height: 28%; border-radius: 99px; background: rgba(255,255,255,.75); }
.board .sq.last { box-shadow: inset 0 0 0 calc(var(--cell) * .07) rgba(255, 196, 70, .75); }
.board .sq.path { background: color-mix(in srgb, #ffd166 45%, var(--sqa)); box-shadow: inset 0 0 0 calc(var(--cell) * .05) rgba(255, 170, 40, .7); }
.board .sq.selsq { background: color-mix(in srgb, #ffe066 70%, var(--sqa)); box-shadow: inset 0 0 0 calc(var(--cell) * .08) #ffb400; }
.board .sq.pick { cursor: pointer; }
.board .sq.pick::before { content: ''; position: absolute; inset: 6%; border-radius: 22%; border: calc(var(--cell) * .045) dashed rgba(139,124,246,.55); }
.board .sq.dot, .board .sq.cap, .board .sq.spawn, .board .sq.chosen { cursor: pointer; }
.board .sq.dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%; background: #7c6cf6; border: calc(var(--cell) * .04) solid #fff; box-shadow: 0 0 0 calc(var(--cell) * .05) rgba(124,108,246,.35), 0 2px 5px rgba(60,40,140,.35); animation: dot 1s ease-in-out infinite alternate; }
.board .sq.cap { background: #ffc9d6; }
.board .sq.cap::after { content: ''; position: absolute; inset: 3%; border-radius: 16%;
  background: linear-gradient(#ff3d74, #ff3d74) top left / 30% 12% no-repeat, linear-gradient(#ff3d74, #ff3d74) top left / 12% 30% no-repeat,
    linear-gradient(#ff3d74, #ff3d74) top right / 30% 12% no-repeat, linear-gradient(#ff3d74, #ff3d74) top right / 12% 30% no-repeat,
    linear-gradient(#ff3d74, #ff3d74) bottom left / 30% 12% no-repeat, linear-gradient(#ff3d74, #ff3d74) bottom left / 12% 30% no-repeat,
    linear-gradient(#ff3d74, #ff3d74) bottom right / 30% 12% no-repeat, linear-gradient(#ff3d74, #ff3d74) bottom right / 12% 30% no-repeat; animation: capb .7s ease-in-out infinite alternate; }
@keyframes capb { to { inset: 9%; } }
.board .sq.spawn::after { content: '+'; position: absolute; inset: 14%; display: grid; place-items: center; border-radius: 50%; border: 3px dashed #ff9a3d; color: #ff9a3d; font-weight: 900; font-size: calc(var(--cell) * .4); animation: dot2 1s ease-in-out infinite alternate; }
.board .sq.chosen::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: #ffe1bf; border: 3px solid #ff9a3d; }
.board .sq.cursor { outline: 3px solid #5fb8ff; outline-offset: -3px; z-index: 2; }
@keyframes dot { to { transform: translate(-50%, -50%) scale(1.15); } }
@keyframes dot2 { to { transform: scale(1.06); } }
.board .pcs { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pc { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); display: grid; place-items: center; transition: transform .45s cubic-bezier(.3,1.3,.5,1), opacity .4s; will-change: transform; }
.pc .pv { position: relative; width: 92%; height: 92%; display: block; transition: transform .2s; filter: drop-shadow(0 calc(var(--cell) * .03) calc(var(--cell) * .03) rgba(50,40,90,.28)); }
.pc .pv svg { display: block; width: 100%; height: 100%; }
.pc::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 26%; border-radius: 50%; opacity: 0; transition: opacity .2s; }
.pc.born { opacity: 0; }
.pc.born .pv { transform: scale(.2); }
.pc.gone { opacity: 0; transition: opacity .4s, transform .4s; }
.pc.gone .pv { transform: scale(1.5) rotate(25deg); }
.pc.can .pv { animation: can .8s ease-in-out infinite alternate; }
.pc.can::before { opacity: 1; background: radial-gradient(closest-side, rgba(139,124,246,.55), transparent); }
@keyframes can { to { transform: translateY(calc(var(--cell) * -.05)); } }
.pc.sel .pv { transform: translateY(calc(var(--cell) * -.1)) scale(1.1); filter: drop-shadow(0 0 calc(var(--cell) * .06) #fff) drop-shadow(0 calc(var(--cell) * .08) calc(var(--cell) * .05) rgba(50,40,90,.35)); }
.pc.sel::before { opacity: 1; background: radial-gradient(closest-side, rgba(255,180,0,.75), transparent); }
.board.night .pc .pv { filter: drop-shadow(0 0 calc(var(--cell) * .03) rgba(255,255,255,.75)) drop-shadow(0 calc(var(--cell) * .03) calc(var(--cell) * .03) rgba(0,0,0,.4)); }
.pc.done .pv { filter: grayscale(.55) opacity(.72); }
.pc.done::after { content: '✓'; position: absolute; right: 2%; top: 2%; width: calc(var(--cell) * .3); height: calc(var(--cell) * .3); display: grid; place-items: center; border-radius: 50%; background: #9aa0b8; color: #fff; font-size: calc(var(--cell) * .2); font-weight: 900; border: 1.5px solid #fff; }
.pc.target .pv { animation: shake .5s ease-in-out infinite alternate; }
@keyframes shake { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.pc.danger::before { opacity: 1; background: radial-gradient(closest-side, rgba(255,77,109,.85), transparent); animation: danger .6s ease-in-out infinite alternate; height: 40%; }
@keyframes danger { to { opacity: .45; } }
.pc.promo .pv { animation: promo .8s ease-out; }
@keyframes promo { 40% { transform: scale(1.6) rotate(-15deg); } }
.board.spinning .pc { transition: none; }
.board.noanim .pc, .board.noanim .spin { transition: none !important; }
.fx { position: absolute; left: 0; top: 0; pointer-events: none; font-size: calc(var(--cell) * .6); margin: calc(var(--cell) * -.3) 0 0 calc(var(--cell) * -.3); animation: fx .9s ease-out forwards; z-index: 5; }
@keyframes fx { from { opacity: 1; scale: .5; } 50% { opacity: 1; scale: 1.4; } to { opacity: 0; scale: 1.1; translate: 0 calc(var(--cell) * -.5); } }

/* ---------- 게임 화면 ---------- */
#play { position: fixed; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "top" "mid" "board" "bottom"; gap: 6px; user-select: none; -webkit-user-select: none;
  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)); }
#topBar { grid-area: top; display: flex; gap: 6px; align-items: stretch; min-width: 0; }
#mid { grid-area: mid; display: flex; gap: 8px; align-items: center; min-width: 0; }
#boardWrap { grid-area: board; position: relative; min-height: 0; min-width: 0; }
#board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#bottom { grid-area: bottom; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pbtn { flex: none; width: calc(38px * var(--bs)); height: calc(38px * 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; align-self: center; }
.who { flex: 1; min-width: 0; }
.wc { position: relative; overflow: hidden; display: flex; align-items: center; gap: 6px; padding: calc(6px * var(--bs)) calc(10px * var(--bs)); border-radius: calc(14px * var(--bs)); background: rgba(255,255,255,.93); border: 1.5px solid var(--line); border-left: calc(5px * var(--bs)) solid var(--pc); box-shadow: 0 3px 10px rgba(60,50,110,.08); font-size: calc(13px * var(--bs)); min-height: calc(38px * var(--bs)); }
.wc .dot { width: calc(10px * var(--bs)); height: calc(10px * var(--bs)); border-radius: 50%; background: var(--pc); flex: none; }
.wc b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 800; }
.wc em { font-style: normal; font-size: .8em; font-weight: 900; padding: 0 6px; border-radius: 99px; background: var(--pc); color: #fff; flex: none; }
.wc .tag { flex: none; font-size: .85em; font-weight: 800; }
.wc .info { margin-left: auto; color: var(--muted); font-weight: 700; font-size: .88em; white-space: nowrap; flex: none; }
.wc .backs { display: flex; gap: 2px; flex: none; }
.wc.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); }
.wc .tb { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--pc); transition: width .2s linear; }
#pile { flex: none; display: flex; align-items: center; gap: 6px; }
#pile .pl { display: flex; flex-direction: column; align-items: center; gap: 1px; }
#pile .pl small { font-size: 10px; color: var(--muted); font-weight: 800; white-space: nowrap; }
#msg { flex: 1; min-width: 0; text-align: center; padding: calc(7px * var(--bs)) calc(12px * var(--bs)); border-radius: 16px; background: rgba(255,255,255,.93); border: 1.5px solid var(--line); box-shadow: 0 4px 14px rgba(60,50,110,.08); font-weight: 800; font-size: calc(13.5px * var(--bs)); color: #4b4f6b; line-height: 1.35; }
#msg.warn { background: #fff0f3; border-color: #ffb3c4; color: #d6345c; }
#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: .76em; color: var(--muted); font-weight: 700; margin-top: 1px; }
#handRow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
#hand { padding-top: calc(10px * var(--cs)); display: flex; gap: calc(8px * var(--cs)); justify-content: center; min-height: calc(98px * var(--cs)); align-items: flex-end; }
.hc { position: relative; border: 0; background: none; padding: 0; transition: transform .18s; border-radius: calc(12px * var(--bs)); }
.hc.on { transform: translateY(calc(-10px * var(--bs))) scale(1.05); }
.hc.on .card { box-shadow: 0 0 0 3px var(--violet), 0 10px 20px rgba(139,124,246,.35); }
.hc.wait { opacity: .78; }
.hc.wait .card { filter: saturate(.8); }
.hc.dead .card { filter: grayscale(.7); opacity: .7; }
.hc.new { animation: deal .45s ease-out; }
@keyframes deal { from { transform: translateY(40px) rotate(8deg); opacity: 0; } }
.hc kbd { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--violet); font: 900 11px/20px Pretendard, sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.15); z-index: 2; }
#acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
#acts:not(:has(.abtn:not(.hidden))) { display: none; }
.abtn { border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: calc(9px * var(--bs)) calc(12px * var(--bs)); font-weight: 900; font-size: calc(13.5px * var(--bs)); color: var(--violet); box-shadow: 0 3px 10px rgba(60,50,110,.08); white-space: nowrap; }
.abtn.primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--pink), var(--violet)); box-shadow: 0 6px 16px rgba(139, 124, 246, .3); }
.abtn.charm { color: #2f9b62; border-color: #bfeccf; background: #f3fff7; }
#banner { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none; padding: 12px 26px; border-radius: 22px; background: rgba(255,255,255,.96); 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; z-index: 20; text-align: center; }
#banner small { display: block; font-size: .5em; color: var(--muted); }
@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%, #e3f8ef 0%, transparent 70%), #fffaf6; }
body.dark-play { background: radial-gradient(ellipse 80% 50% at 50% 50%, #2a2470 0%, transparent 80%), #14113a; }
body.dark-play #pile .pl small { color: #cfcaf5; }

/* 가로 화면: 왼쪽 판, 오른쪽에 이름표·안내·손패 */
body.land #play { grid-template-columns: minmax(0, 1fr) minmax(250px, min(40vw, calc(380px * min(var(--bs), 1.25)))); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "board top" "board mid" "board space" "board bottom"; column-gap: 12px; }
body.land #handRow { justify-content: flex-start; }
body.land #acts { justify-content: flex-start; }

@media (min-width: 700px) {
  #home { padding-top: 24px; }
  .hero { height: 280px; }
}
/* 휴대폰 가로: 첫 화면을 한눈에 */
@media (orientation: landscape) and (max-height: 520px) {
  #home { max-width: 860px; padding-top: max(8px, env(safe-area-inset-top)); gap: 8px; }
  .hero { height: 136px; min-height: 0; }
  .foot { display: none; }
  .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 .mcard.friend { grid-row: span 2; }
  .mcard { padding: 10px 12px; }
}