:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color:#f7f4e9; background:#10241d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; background:radial-gradient(circle at 50% 35%,#27624c,#10241d 65%); }
button { font:inherit; cursor:pointer; }
.app-shell { width:min(100%,520px); min-height:100dvh; margin:auto; padding:env(safe-area-inset-top,20px) 16px max(18px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px; }
.topbar,.round-info,.scoreboard,.stats { display:flex; justify-content:space-between; align-items:center; }
.topbar { display:grid; grid-template-columns:1fr auto 1fr; }
.eyebrow { margin:0; color:#a7d4b3; font-size:.68rem; font-weight:800; letter-spacing:.13em; }
.topbar h1 { font-size:2rem; line-height:1; margin:.2rem 0; }
.icon-button { border:1px solid #8ac39b; border-radius:21px; min-width:42px; height:42px; padding:0 9px; background:transparent; color:#fff; font-size:1rem; font-weight:900; }
.icon-button:disabled { opacity:.38; cursor:not-allowed; }
.rules-button { border:1px solid #8ac39b; border-radius:18px; padding:8px 12px; background:#18352a; color:#f7f4e9; font-size:.78rem; font-weight:900; }
.topbar .icon-button { justify-self:end; }
.scoreboard { gap:8px; }
.scoreboard div { flex:1; text-align:center; background:#18352a; border-radius:12px; padding:8px; }
.scoreboard span,.stats span { display:block; font-size:.66rem; color:#b7cfc0; font-weight:800; letter-spacing:.06em; }
.scoreboard strong { font-size:1.45rem; }
.scoreboard div:nth-child(2) { background:#e7c15c; color:#1b261e; }
.scoreboard div:nth-child(2) span { color:#485a45; }
.round-info { font-size:.84rem; font-weight:700; color:#d8ebdd; }
.lead-indicator { margin:-6px 0 0; min-height:20px; text-align:center; color:#f7dc80; font-size:.8rem; font-weight:900; }
.table { position:relative; min-height:310px; border:2px solid rgba(223,242,224,.3); border-radius:26px; background:rgba(4,27,18,.28); display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; padding:22px; }
.seat { text-align:center; display:flex; align-items:center; flex-direction:column; gap:7px; font-size:.72rem; font-weight:800; color:#c8dfcf; }
.cpu-seat:nth-child(2) { align-items:center; }
.human-seat { grid-column:1/3; align-self:end; }
.played-card { width:64px; height:90px; background:#f8f4e9; color:#1c2420; border-radius:8px; box-shadow:0 3px 8px #0006; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; }
.played-card.lead-card { position:relative; outline:3px solid #edc85f; box-shadow:0 0 0 5px #edc85f55,0 3px 8px #0006; }
.played-card.lead-card::after { content:'LED'; position:absolute; top:-13px; padding:2px 6px; border-radius:8px; background:#edc85f; color:#1b261e; font-size:.6rem; font-weight:950; letter-spacing:.08em; }
.card-back { background:#0b3b31 url('assets/turtle-card-back.png') center/cover no-repeat; color:transparent; }
.empty { opacity:.35; background:#143429; color:#d9eee0; border:1px dashed #bad7c3; }
.status { position:absolute; left:16px; right:16px; top:44%; text-align:center; font-weight:800; margin:0; color:#fff; text-shadow:0 1px 3px #000; }
.panel { text-align:center; }
.panel h2 { margin:.2rem 0; font-size:1.15rem; }
.panel p { margin:.25rem 0 .65rem; color:#c4dacb; }
.primary,.secondary { border:0; border-radius:12px; padding:11px 18px; font-weight:900; }
.primary { background:#edc85f; color:#19251c; }
.primary:disabled { opacity:.45; cursor:not-allowed; }
.secondary { background:#376e56; color:#fff; }

.hand-rail { min-height:120px; display:grid; grid-template-columns:34px minmax(0,1fr) 34px; align-items:center; gap:4px; }
.hand { min-width:0; min-height:112px; display:flex; justify-content:flex-start; align-items:flex-end; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; padding:14px 3px 6px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.hand::-webkit-scrollbar { display:none; }
.hand-nav { width:34px; height:64px; border:1px solid #8ac39b; border-radius:12px; background:#18352a; color:#f7f4e9; font-size:2rem; line-height:1; }
.hand-nav:active { background:#376e56; }
.card { width:clamp(54px,16vw,68px); height:94px; flex:0 0 auto; scroll-snap-align:center; background:#f9f6ed; border:2px solid transparent; border-radius:8px; padding:7px; color:#17201a; box-shadow:0 4px 10px #0005; text-align:left; font-weight:900; transition:transform .15s,border-color .15s; }
.card.red { color:#bd3935; }
.card:disabled { opacity:.38; }
.card.selected { transform:translateY(-13px); border-color:#edc85f; }
.card.legal:not(:disabled):hover,.card.legal:not(:disabled):focus { transform:translateY(-8px); border-color:#63bb86; }
.rank { display:block; font-size:1.25rem; line-height:1; }
.suit { font-size:1.35rem; }
.stats { margin-top:auto; background:#0b1c15aa; border-radius:14px; padding:10px; }
.stats div { text-align:center; flex:1; }
.stats strong { font-size:1rem; }
.result { position:fixed; inset:0; background:#06120dcc; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px; z-index:3; }
.result h2 { font-size:2rem; margin:0; }
.result p { color:#d5e4d9; max-width:330px; }
.result-recap { width:min(100%,360px); max-height:210px; overflow:auto; margin:4px 0 16px; padding:0; list-style:none; text-align:left; }
.result-recap li { margin:5px 0; padding:8px 10px; border-radius:8px; background:#17362a; color:#e8f2ea; font-size:.86rem; }
.rules { position:fixed; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; padding:22px; background:#06120dcc; }
.rules-card { width:min(100%,420px); max-height:min(78dvh,620px); overflow:auto; border:1px solid #8ac39b; border-radius:20px; padding:18px; background:#143429; color:#f7f4e9; box-shadow:0 16px 38px #0008; }
.rules-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rules-heading h2 { margin:0; font-size:1.5rem; }
.close-button { width:34px; height:34px; border:0; border-radius:50%; background:#376e56; color:#fff; font-size:1.5rem; line-height:1; }
.rules-card p { line-height:1.4; }
.rules-card ol { margin:12px 0; padding-left:22px; line-height:1.45; }
.rules-card li { margin:10px 0; }
.rules-tip { border-radius:10px; padding:10px; background:#0b1c15; color:#d8ebdd; font-size:.9rem; }
.hidden { display:none!important; }
@media (max-width:350px) { .card { width:54px; height:88px; } .hand-rail { grid-template-columns:30px minmax(0,1fr) 30px; } .hand-nav { width:30px; } }
@media (min-width:520px) { .app-shell { padding-top:28px; } .table { min-height:340px; } }