:root {
  --felt: #1d5a3a;
  --felt2: #0c2c1c;
  --tx: #f6f1e4;
  --mu: #b9cdbf;
  --gold: #fbbf24;
  --red: #dc2626;
  --line: rgba(255, 255, 255, 0.14);
  --cw: min(12.6vw, 58px);
  --hw: min(14.6vw, 66px);
  --brush: 'Nanum Brush Script', 'Black Han Sans', serif;
  --title: 'Black Han Sans', 'Noto Sans KR', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 80% at 50% 40%, var(--felt) 0%, var(--felt2) 100%) fixed, var(--felt2);
  color: var(--tx); font-family: 'Noto Sans KR', system-ui, sans-serif; font-size: 15px;
  overflow: hidden; user-select: none; -webkit-user-select: none;
}
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: 0.25;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 6px); }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; font-family: var(--title); }
.muted { color: var(--mu); }
.center { text-align: center; }
#app { max-width: 520px; margin: 0 auto; height: 100dvh; position: relative; }
#screen { height: 100%; overflow-y: auto; overflow-x: hidden; }

/* 버튼 */
.btn { background: linear-gradient(180deg, #2f6b4b, #1e4a33); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 12px; padding: 10px 14px; font-weight: 700; transition: transform 0.08s; }
.btn:active { transform: scale(0.96); }
.btn-gold { background: linear-gradient(180deg, #fcd34d, #d97706); color: #2a1300; border-color: #fde68a; }
.btn-red { background: linear-gradient(180deg, #ef4444, #991b1b); border-color: #fca5a5; }
.btn-blue { background: linear-gradient(180deg, #38bdf8, #0369a1); border-color: #bae6fd; }
.btn-sm { padding: 6px 10px; font-size: 13px; border-radius: 9px; white-space: nowrap; }

/* ───── 로비 ───── */
.lobby { padding: calc(env(safe-area-inset-top) + 18px) 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.logo { text-align: center; }
.logo-cards { display: flex; justify-content: center; height: 110px; }
.logo-cards img { width: 66px; border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); }
.logo-cards img:nth-child(1) { transform: rotate(-14deg) translate(18px, 10px); }
.logo-cards img:nth-child(2) { z-index: 1; transform: translateY(-4px); }
.logo-cards img:nth-child(3) { transform: rotate(14deg) translate(-18px, 10px); }
.logo h1 { font-family: var(--brush); font-size: 64px; line-height: 1; color: #fff7d6; text-shadow: 3px 3px 0 #7f1d1d, 0 0 20px rgba(251, 191, 36, 0.4); margin-top: 6px; }
.logo p { margin: 2px 0 0; color: var(--mu); letter-spacing: 4px; }
.purse { text-align: center; font-size: 22px; background: rgba(0, 0, 0, 0.25); border-radius: 14px; padding: 10px; border: 1px solid var(--line); }
.purse b { color: var(--gold); }
.purse small { display: block; font-size: 12px; color: var(--mu); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(0, 0, 0, 0.3); padding: 5px; border-radius: 14px; }
.seg button { border: 0; background: none; padding: 10px 6px; border-radius: 10px; font-weight: 900; font-size: 17px; color: var(--mu); }
.seg button small { display: block; font-weight: 400; font-size: 11px; }
.seg button.on { background: linear-gradient(180deg, #b91c1c, #7f1d1d); color: #fff; box-shadow: 0 0 12px rgba(220, 38, 38, 0.5); }
.opp-list { display: flex; flex-direction: column; gap: 9px; }
.opp-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(110deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15)); }
.opp-card:active { transform: scale(0.98); }
.oc-ava { font-size: 40px; width: 54px; text-align: center; }
.oc-ava.two { font-size: 28px; letter-spacing: -6px; }
.opp-card div { flex: 1; min-width: 0; }
.opp-card b { font-size: 17px; }
.opp-card small { display: block; color: var(--mu); font-size: 12px; }
.oc-meta { color: #fde68a !important; }
.opp-card em { font-style: normal; font-weight: 900; background: var(--gold); color: #2a1300; padding: 6px 12px; border-radius: 10px; }
.lobby-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ───── 판 ───── */
.table { height: 100dvh; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 6px) 6px calc(env(safe-area-inset-bottom) + 6px); gap: 4px; position: relative; }
.opps { display: flex; gap: 6px; }
.opp { flex: 1; min-width: 0; position: relative; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); border-radius: 12px; padding: 5px 6px; transition: box-shadow 0.25s, border-color 0.25s; }
.opp.turn { border-color: var(--gold); box-shadow: 0 0 14px rgba(251, 191, 36, 0.45); }
.o-head { display: flex; align-items: center; gap: 6px; }
.ava { font-size: 26px; line-height: 1; }
.o-info { flex: 1; min-width: 0; line-height: 1.1; }
.o-info b { font-size: 13px; white-space: nowrap; }
.o-info small { display: block; font-size: 11px; color: #fde68a; }
.o-hand { display: flex; height: 22px; margin: 3px 0 2px; padding-left: 7px; align-items: center; }
.o-hand img { width: 14px; margin-left: -7px; border-radius: 2px; box-shadow: 0 1px 2px #000; }
.o-hand em { font-style: normal; font-size: 11px; color: var(--gold); margin-left: 4px; }
.sc { background: rgba(0, 0, 0, 0.45); border-radius: 8px; padding: 1px 7px; font-weight: 900; font-size: 13px; }
.sc.hot { background: var(--red); box-shadow: 0 0 10px var(--red); }
.go-b { background: #f97316; border-radius: 8px; padding: 1px 6px; font-weight: 900; font-size: 12px; margin-left: 3px; }
.sh-b { background: #7e22ce; border-radius: 8px; padding: 1px 5px; font-size: 11px; margin-left: 3px; }

.cap { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr 1.5fr; gap: 3px; min-height: calc(var(--mw, 20px) * 1.6 + 2px); }
.opp .cap { --mw: 19px; }
.three .opp .cap { --mw: 14px; grid-template-columns: 1fr 1fr 1fr 1.3fr; }
.me-row .cap { --mw: min(8.4vw, 34px); }
.cg { display: flex; align-items: flex-start; position: relative; padding-left: calc(var(--mw) * 0.55); min-width: 0; }
.cg img { width: var(--mw); margin-left: calc(var(--mw) * -0.55); border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.cg i { position: absolute; right: 0; bottom: -2px; font-style: normal; font-size: 10px; font-weight: 900; background: rgba(0, 0, 0, 0.75); border-radius: 6px; padding: 0 4px; }
.me-row .cg i { font-size: 11px; }

.board { flex: 1; position: relative; min-height: 220px; }
.grp { position: absolute; width: var(--cw); height: calc(var(--cw) * 1.6); transform: translate(-50%, -50%); }
.grp img { position: absolute; width: var(--cw); left: calc(var(--k) * 8px - 4px); top: calc(var(--k) * 5px - 2px); }
.grp.ppeok::after { content: '뻑'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #475569; border: 1px solid #cbd5e1; font-size: 11px; font-weight: 900; padding: 0 6px; border-radius: 8px; z-index: 5; }
.cd { border-radius: 6%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55); display: block; }
.stock { position: absolute; left: 50%; top: 50%; width: var(--cw); height: calc(var(--cw) * 1.6); transform: translate(-50%, -50%); }
.stock img { position: absolute; width: var(--cw); border-radius: 6%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6); }
.stock img:first-child { left: 3px; top: 3px; }
.stock span { position: absolute; right: -10px; bottom: -8px; background: #000; border: 1px solid var(--gold); color: var(--gold); border-radius: 10px; padding: 0 6px; font-size: 12px; font-weight: 900; z-index: 2; }
.stock.empty img { opacity: 0.15; }
.carry { position: absolute; left: 50%; top: calc(50% + var(--cw)); transform: translateX(-50%); color: var(--gold); font-weight: 900; font-size: 13px; text-shadow: 0 1px 2px #000; white-space: nowrap; }
img.pickable { outline: 3px solid var(--gold); outline-offset: 1px; animation: pulse 0.8s infinite; cursor: pointer; z-index: 3; }
img.hint { filter: brightness(1.15); box-shadow: 0 0 10px #4ade80; }
img.glow { filter: brightness(1.25); box-shadow: 0 0 16px var(--gold), 0 0 4px #fff; }
img.slam { animation: slam 0.28s ease-out; }
@keyframes slam { 0% { transform: scale(1.3); } 60% { transform: scale(0.92); } 100% { transform: scale(1); } }
@keyframes pulse { 50% { outline-color: #fff; } }

.me-bar { display: flex; align-items: center; gap: 6px; padding: 2px 4px; }
.m-score { font-weight: 400; }
.m-tags { font-size: 12px; color: #d8b4fe; }
.t-msg { flex: 1; text-align: right; font-size: 13px; color: #fde68a; font-weight: 700; }
.dummy-btn { background: #7e22ce; border: 1px solid #d8b4fe; border-radius: 10px; padding: 4px 8px; font-size: 12px; font-weight: 700; }
.menu-btn { background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); border-radius: 10px; width: 34px; height: 30px; }
.hand { display: flex; justify-content: center; padding: 10px 0 2px calc(var(--hw) * 0.42); min-height: calc(var(--hw) * 1.6 + 14px); }
.hand img { width: var(--hw); margin-left: calc(var(--hw) * -0.42); transition: transform 0.15s, filter 0.15s; filter: brightness(0.82); }
.my-turn .hand img { filter: none; }
.hand img.live { cursor: pointer; }
.hand img.match { transform: translateY(-7px); box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--mc), 0 0 16px var(--mc); }
/* 같은 달 짝: 바닥 묶음도 같은 색 */
.grp.linked img { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--mc), 0 0 16px var(--mc); }
.grp.linked::before { content: ''; position: absolute; left: 50%; bottom: -10px; width: 10px; height: 10px; border-radius: 50%; transform: translateX(-50%); background: var(--mc); box-shadow: 0 0 6px var(--mc); z-index: 6; }
/* 누르거나 마우스를 올린 달만 밝게 */
.table.focusing .hand img:not(.focus), .table.focusing .grp img:not(.focus) { filter: brightness(0.38) saturate(0.5); }
.hand img.focus { transform: translateY(-16px) scale(1.06); box-shadow: 0 0 0 3px var(--mc), 0 0 24px var(--mc); z-index: 4; }
.grp img.focus { box-shadow: 0 0 0 3px var(--mc), 0 0 26px var(--mc), 0 0 6px #fff; z-index: 4; filter: brightness(1.12); }
.hand img.sel { transform: translateY(-16px); box-shadow: 0 0 0 3px var(--gold), 0 0 16px var(--gold); z-index: 2; }
@media (hover: hover) { .hand img.live:hover { transform: translateY(-12px); z-index: 3; } }
.ghost { position: fixed; z-index: 50; pointer-events: none; border-radius: 6%; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55); transform-origin: center; }

.bubble { position: absolute; left: 40px; top: 30px; z-index: 20; background: #fff; color: #222; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 12px; opacity: 0; pointer-events: none; white-space: nowrap; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); }
.bubble::before { content: ''; position: absolute; top: -6px; left: 12px; border: 6px solid transparent; border-top: 0; border-bottom-color: #fff; }
.bubble.show { animation: bub 2.2s ease-out; }
.me-bubble { left: 12px; top: auto; bottom: calc(var(--hw) * 1.6 + 50px); }
.me-bubble::before { top: auto; bottom: -6px; border-bottom: 0; border-top: 6px solid #fff; }
@keyframes bub { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ───── 연출 ───── */
#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 75; }
.cutin { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.6)); animation: fade 0.15s; }
.ci-band { position: absolute; left: -15%; right: -15%; top: 45%; height: 150px; transform: translateY(-50%) rotate(-7deg); background: linear-gradient(90deg, transparent, var(--cc) 12%, var(--cc) 88%, transparent); box-shadow: 0 0 40px var(--cc); animation: band 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15); overflow: hidden; border-top: 3px solid rgba(255, 255, 255, 0.6); border-bottom: 3px solid rgba(255, 255, 255, 0.6); }
.ci-shine { position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: shine 0.9s 0.15s ease-in-out; transform: translateX(-120%) skewX(-20deg); }
.ci-text { position: relative; margin-top: -8vh; font-family: var(--brush); font-size: min(34vw, 170px); line-height: 1; color: #fff; transform: rotate(-7deg); white-space: nowrap;
  text-shadow: 0 0 2px #000, 5px 5px 0 #000, 0 0 40px var(--cc); animation: ciText 0.5s cubic-bezier(0.2, 1.7, 0.4, 1); }
.ci-sub { position: relative; margin-top: 4px; font-size: 18px; font-weight: 900; background: rgba(0, 0, 0, 0.6); padding: 4px 14px; border-radius: 12px; transform: rotate(-7deg); }
.ci-cards { position: relative; display: flex; gap: 6px; margin-top: 14px; animation: ciText 0.5s 0.1s both; }
.ci-cards img { width: 64px; border-radius: 5px; box-shadow: 0 0 16px var(--cc); }
.cutin.small .ci-band { height: 96px; }
.cutin.small .ci-text { font-size: min(22vw, 110px); }
/* 3고 이상: 더 크고 불타는 글자 */
.cutin.lv3 .ci-band { height: 190px; background: linear-gradient(90deg, transparent, #7c1d06 8%, var(--cc) 30%, #fde047 50%, var(--cc) 70%, #7c1d06 92%, transparent); }
.cutin.lv3 .ci-text { font-size: min(42vw, 210px); text-shadow: 0 0 2px #000, 6px 6px 0 #000, 0 0 30px #fde047, 0 0 60px #f97316; animation: ciText 0.5s cubic-bezier(0.2, 1.7, 0.4, 1), burn 0.5s 0.5s ease-in-out infinite alternate; }
@keyframes burn { to { text-shadow: 0 0 2px #000, 6px 6px 0 #000, 0 0 45px #fde047, 0 0 90px #ef4444; } }
/* 뻑: 잿빛 띠 + 금 간 글자 */
.cutin.crack .ci-band { background: linear-gradient(90deg, transparent, #475569 12%, #334155 88%, transparent); box-shadow: none; }
.cutin.crack .ci-text { color: #e2e8f0; position: relative; animation: ciText 0.4s cubic-bezier(0.2, 1.7, 0.4, 1), thud 0.25s 0.4s; }
.cutin.crack .ci-text::after { content: ''; position: absolute; left: 10%; right: 10%; top: 48%; height: 4px; background: #0f172a; transform: rotate(-14deg); box-shadow: 0 0 0 1px #94a3b8; clip-path: polygon(0 0, 30% 0, 34% 100%, 62% 0, 66% 100%, 100% 0, 100% 100%, 0 100%); }
@keyframes thud { 50% { transform: rotate(-7deg) translateY(10px) scale(0.96); } }
#app.drained { filter: saturate(0.25) brightness(0.85); transition: filter 0.15s; }
#app { transition: filter 0.4s; }
/* 움직임 줄이기: 띠·글자 날아오기 없이 페이드만 */
.cutin.calm, .cutin.calm .ci-band, .cutin.calm .ci-text, .cutin.calm .ci-cards { animation: fade 0.15s !important; }
@media (prefers-reduced-motion: reduce) { .shake, .shake-big { animation: none !important; } img.slam { animation: none; } }
.cutin.out { opacity: 0; transition: opacity 0.2s; }
.cutin.out .ci-text { transform: rotate(-7deg) scale(1.4); transition: transform 0.2s; }
@keyframes band { from { transform: translateY(-50%) rotate(-7deg) translateX(-110%); } }
@keyframes shine { to { transform: translateX(420%) skewX(-20deg); } }
@keyframes ciText { from { transform: rotate(-7deg) scale(3); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.stamp { position: fixed; left: 50%; top: 42%; z-index: 72; transform: translate(-50%, -50%) rotate(-14deg); font-family: var(--title); font-size: 64px; color: #dc2626; border: 7px double #dc2626; border-radius: 14px; padding: 4px 22px; background: rgba(255, 250, 235, 0.92); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); animation: stampIn 0.22s cubic-bezier(0.3, 0, 0.6, 1.4); pointer-events: none; }
.stamp.out { opacity: 0; transition: opacity 0.25s; }
@keyframes stampIn { from { transform: translate(-50%, -50%) rotate(-30deg) scale(3); opacity: 0; } }
.toast-big { position: fixed; left: 50%; top: 36%; z-index: 72; transform: translateX(-50%); font-family: var(--title); font-size: 30px; color: #fde68a; text-shadow: 0 3px 0 #7f1d1d, 0 0 14px #000; pointer-events: none; animation: tb 1.3s ease-out forwards; white-space: nowrap; }
@keyframes tb { 0% { opacity: 0; transform: translate(-50%, 20px) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -30px); } }
.flash { position: fixed; inset: 0; z-index: 69; pointer-events: none; mix-blend-mode: screen; }
.shake { animation: shake 0.35s; }
.shake-big { animation: shake 0.55s; }
@keyframes shake { 15% { transform: translate(-6px, 3px); } 30% { transform: translate(6px, -3px); } 45% { transform: translate(-5px, -2px); } 60% { transform: translate(5px, 2px); } 80% { transform: translate(-2px, 1px); } }

/* ───── 모달 ───── */
#modals { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.modal-wrap { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(0, 10, 4, 0.66); pointer-events: auto; animation: fade 0.18s; backdrop-filter: blur(2px); }
.modal-wrap.out { opacity: 0; transition: opacity 0.18s; }
.modal { width: 100%; max-width: 360px; max-height: 90dvh; overflow-y: auto; background: linear-gradient(180deg, #1f4a33, #11291c); border: 2px solid #c9a24a; border-radius: 18px; padding: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); animation: pop 0.22s; }
.modal.wide { max-width: 470px; }
.modal h3 { text-align: center; font-size: 24px; margin-bottom: 8px; color: #fde68a; }
.modal > .btn { width: 100%; margin-top: 12px; }
@keyframes pop { from { transform: scale(0.88); opacity: 0; } }
.ask-body { text-align: center; line-height: 1.55; font-size: 14px; }
.ask-btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.ask-btns .btn { flex: 1; }
.ask-btns.big .btn { font-family: var(--brush); font-size: 40px; padding: 4px 8px; }
.go-info b { color: var(--gold); }
.go-info div { margin: 3px 0; }
.menu-col { display: flex; flex-direction: column; gap: 8px; }
.presets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.preset { text-align: left; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); border-radius: 12px; padding: 9px 12px; }
.preset b { font-size: 16px; }
.preset small { display: block; color: var(--mu); font-size: 12px; margin-top: 2px; }
.preset.on { border-color: var(--gold); background: rgba(251, 191, 36, 0.14); box-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }
.preset.on b::after { content: ' ✓'; color: var(--gold); }
.detail-rules { background: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 4px 10px; margin-bottom: 4px; }
.detail-rules summary { cursor: pointer; padding: 8px 0; font-weight: 700; color: #fde68a; }
.btn:disabled { opacity: 0.4; }
.pick-with { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; }
.pick-with img { width: 64px; border-radius: 6px; box-shadow: 0 0 12px var(--gold); }
.pick-with span { font-size: 26px; font-weight: 900; color: var(--gold); }
.pick-row { display: flex; gap: 14px; justify-content: center; margin-top: 6px; }
.pick-card { background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pick-card img { width: 108px; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); transition: transform 0.12s; }
.pick-card:hover img, .pick-card:active img { transform: translateY(-6px) scale(1.04); box-shadow: 0 0 0 3px var(--gold), 0 0 18px var(--gold); }
.pick-card b { background: rgba(0, 0, 0, 0.45); border-radius: 8px; padding: 2px 10px; font-size: 14px; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.set-row small { display: block; font-size: 12px; color: var(--mu); }
.set-row input { width: 50%; }
.result { text-align: center; }
.res-ava { font-size: 56px; }
.result h2 { font-family: var(--brush); font-size: 64px; line-height: 1; margin: 2px 0 8px; }
.result.win h2 { color: var(--gold); text-shadow: 3px 3px 0 #7f1d1d; }
.result.lose h2 { color: #fca5a5; }
.result.draw h2 { color: #cbd5e1; }
.parts { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 10px; }
.parts span { background: rgba(0, 0, 0, 0.35); border-radius: 8px; padding: 3px 8px; font-size: 13px; }
.parts b { color: var(--gold); }
.parts .go { background: #f97316; }
.result ul { list-style: none; padding: 0; margin: 0; text-align: left; }
.result li { background: rgba(0, 0, 0, 0.3); border-radius: 12px; padding: 8px 12px; margin-bottom: 6px; }
.result li small { display: block; color: var(--mu); font-size: 12px; }
.result li .pts { color: var(--gold); font-weight: 900; }
.result li .money { text-align: right; font-weight: 900; }
.delta { font-size: 22px; margin-top: 8px; }
.delta.plus b { color: #4ade80; }
.delta.minus b { color: #f87171; }
.busted { color: #fde68a; font-size: 13px; }
.rec-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.rec-top div, .rec-ev div { background: rgba(0, 0, 0, 0.3); border-radius: 10px; padding: 8px 4px; }
.rec-top b { display: block; font-size: 15px; color: var(--gold); }
.rec-top small, .rec-ev small { font-size: 11px; color: var(--mu); }
.rec-ev { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 10px 0; text-align: center; }
.rec-ev b { display: block; font-size: 17px; }
.modal h4 { margin: 10px 0 4px; color: #fde68a; }
.help p { font-size: 14px; line-height: 1.6; margin: 8px 0; }
.help b { color: var(--gold); }
.help-cards { display: flex; align-items: center; gap: 4px; }
.help-cards img { width: 42px; border-radius: 4px; }
.help-cards span { font-size: 12px; color: var(--mu); margin-left: 4px; }
.score-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.score-t td { border-bottom: 1px solid var(--line); padding: 5px 4px; }
.score-t td:first-child { color: var(--gold); font-weight: 700; white-space: nowrap; }
#toasts { position: fixed; top: 70px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; z-index: 90; pointer-events: none; }
.toast { background: rgba(0, 0, 0, 0.85); border: 1px solid var(--gold); color: #fde68a; border-radius: 18px; padding: 8px 16px; font-weight: 700; }
.toast.out { opacity: 0; transition: 0.3s; }

@media (max-height: 700px) {
  :root { --cw: min(11vw, 50px); --hw: min(13vw, 58px); }
  .board { min-height: 190px; }
}