.full-game-page { background: #0b0513; }
.full-game-main { min-height: 100vh; padding: 132px 0 92px; color: #fff6df; background: radial-gradient(circle at 16% 8%, rgba(105,35,112,.35), transparent 32rem), #0b0513; }
.full-game-heading { display: grid; grid-template-columns: 1.2fr .55fr; align-items: end; gap: 48px; margin-bottom: 28px; }
.full-game-heading .kicker { color: #f2bd55; }
.full-game-heading h1 { max-width: 850px; margin: 12px 0 0; font: 500 clamp(46px,6vw,78px)/.96 var(--serif); letter-spacing: -.04em; }
.full-game-heading p { margin: 0; color: #b3a8bb; font-size: 15px; }
.full-game-table { overflow: hidden; border: 1px solid rgba(242,189,85,.5); border-radius: 28px; background: #082b20; box-shadow: 0 32px 100px rgba(0,0,0,.5); }
.full-game-bar,.full-game-footer { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: #1c0a30; }
.full-game-bar>div:first-child { display: flex; align-items: center; gap: 8px; }
.full-game-bar strong { font-size: 11px; letter-spacing: .16em; }
.full-game-bar small { padding-left: 8px; border-left: 1px solid rgba(255,255,255,.16); color: #8be0af; font-size: 8px; letter-spacing: .12em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #67e3a1; box-shadow: 0 0 13px #67e3a1; }
.turn-badge { display: flex; align-items: center; gap: 9px; }
.turn-badge span { color: #f4ca66; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.turn-badge b { padding: 7px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #998ca1; font-size: 8px; }
.full-game-felt { position: relative; min-height: 650px; padding: 22px 28px 28px; background: radial-gradient(ellipse at 50% 36%, #19734e, #0b4b37 48%, #052c21 82%); box-shadow: inset 0 0 0 8px rgba(0,0,0,.12), inset 0 0 100px rgba(0,0,0,.38); }
.full-game-felt::after { content: "JUNGLEE RUMMY"; position: absolute; z-index: 0; left: 50%; top: 36%; translate: -50% -50%; color: rgba(255,238,188,.06); font: 700 clamp(28px,5vw,65px)/1 var(--serif); letter-spacing: .18em; white-space: nowrap; }
.game-opponent { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 66px; }
.opponent-avatar { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #e7bd58; border-radius: 50%; color: #efc65f; background: #21102e; font-size: 10px; font-weight: 900; }
.game-opponent strong,.game-opponent small { display: block; }
.game-opponent strong { font-size: 11px; }
.game-opponent small { margin-top: 3px; color: #92ab9b; font-size: 8px; }
.game-opponent>b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #2b1c09; background: #efc65f; font-size: 9px; }
.opponent-hand { display: flex; margin-inline: 8px; }
.opponent-hand i { width: 20px; height: 29px; margin-left: -8px; border: 1px solid #e9c963; border-radius: 3px; background: repeating-linear-gradient(45deg,#321044 0 3px,#21072f 3px 6px); box-shadow: 0 3px 6px rgba(0,0,0,.2); }
.game-piles { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: center; gap: 18px; min-height: 135px; padding-top: 4px; }
.game-pile { display: grid; justify-items: center; gap: 7px; }
.game-pile>small { color: #9eb2a4; font-size: 8px; }
.game-stock,.game-open-card { width: 66px; height: 93px; padding: 0; border: 0; border-radius: 8px; }
.game-stock { display: grid; place-items: center; align-content: center; border: 2px solid #f0c554; color: #fff1c2; background: repeating-linear-gradient(45deg,#35104b,#35104b 5px,#260936 5px,#260936 10px); box-shadow: 6px 5px 0 #d8d0c2,9px 8px 14px rgba(0,0,0,.32); cursor: pointer; }
.game-stock span { font-size: 7px; font-weight: 800; letter-spacing: .1em; }.game-stock strong { margin-top: 3px; font-size: 10px; }.game-stock i { margin-top: 7px; color: #f1bd45; font: normal 20px/1 var(--serif); }
.game-open-card { background: transparent; cursor: pointer; transition: transform .18s,filter .18s; }.game-open-card img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 8px rgba(0,0,0,.28)); }.game-open-card:not(:disabled):hover { transform: translateY(-6px); }
.game-stock:disabled,.game-open-card:disabled { cursor: default; opacity: .7; }
.full-game-main[data-phase="draw"] .game-open-card,.full-game-main[data-phase="draw"] .game-stock { animation: gameChoice 1.2s ease-in-out infinite; }
.wild-indicator { margin: 18px 0 0 10px; padding: 8px 10px; border: 1px solid rgba(241,196,90,.35); border-radius: 12px; text-align: center; background: rgba(6,35,25,.66); }.wild-indicator span { display:block;color:#9eac9f;font-size:6px;font-weight:900;letter-spacing:.1em; }.wild-indicator strong { display:block;margin-top:3px;color:#f3ca66;font:700 18px/1 var(--serif); }
.game-coach { position: relative; z-index: 3; display: flex; align-items: center; gap: 11px; width: fit-content; max-width: 680px; min-height: 50px; margin: 0 auto 14px; padding: 9px 15px 9px 10px; border: 1px solid rgba(255,226,151,.3); border-radius: 999px; background: rgba(2,29,20,.84); box-shadow: 0 10px 28px rgba(0,0,0,.2); }.game-coach span { flex:none;padding:8px 9px;border-radius:999px;color:#271807;background:#f1c65e;font-size:7px;font-weight:900;letter-spacing:.1em; }.game-coach p { margin:0;color:#dce8df;font-size:11px;line-height:1.45; }.game-coach strong { color:#ffe292; }
.player-zone { position: relative; z-index: 2; }.player-meta { display:flex;justify-content:space-between;max-width:1040px;margin:0 auto 8px;color:#a9bbae;font-size:8px;font-weight:900;letter-spacing:.12em; }.player-meta small { letter-spacing:.03em; }
.full-game-hand { display:grid;grid-template-columns:repeat(13,minmax(0,1fr));align-items:end;gap:clamp(3px,.55vw,7px);max-width:1040px;min-height:126px;margin:auto; }
.game-card { min-width:0;padding:0;border:0;border-radius:9px;background:transparent;cursor:default;transition:transform .18s,filter .18s; }.game-card img { display:block;width:100%;aspect-ratio:3/4;object-fit:contain;filter:drop-shadow(0 8px 7px rgba(0,0,0,.3)); }.game-card.is-dealt { opacity:0;transform:translate(-190px,-170px) rotate(-10deg);animation:gameDeal .34s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:calc(var(--i)*55ms); }.full-game-main[data-phase="discard"] .game-card { cursor:pointer; }.full-game-main[data-phase="discard"] .game-card:hover { transform:translateY(-10px); }.game-card.is-suggested { animation:gameCardHint 1.15s ease-in-out infinite; }.game-card.is-ready { transform:translateY(-8px);filter:drop-shadow(0 0 8px rgba(255,214,102,.8)); }
.game-actions { display:flex;justify-content:center;gap:9px;margin-top:15px; }.game-actions button { min-height:42px;padding:0 16px;border:1px solid rgba(255,255,255,.15);border-radius:11px;color:#d7cbd9;background:rgba(255,255,255,.04);cursor:pointer;font-size:10px;font-weight:800; }.game-actions .declare-button { min-width:170px;color:#251503;border-color:#ffe297;background:#f3c557; }.game-actions .declare-button:disabled { color:#817865;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05);cursor:default; }
.game-result { position:absolute;z-index:10;inset:50% auto auto 50%;translate:-50% -50%;width:min(680px,calc(100% - 30px));padding:28px;border:1px solid rgba(104,229,164,.62);border-radius:22px;color:#eafff1;background:linear-gradient(145deg,rgba(7,69,46,.98),rgba(19,8,30,.98));box-shadow:0 30px 100px rgba(0,0,0,.55);text-align:center; }.game-result[hidden]{display:none}.result-confetti{color:#f1c75f;letter-spacing:1em;font-size:18px}.result-check{display:grid;place-items:center;width:52px;height:52px;margin:14px auto;border-radius:50%;color:#07301e;background:#6de0a4;font-size:26px;font-weight:900}.game-result small{color:#7fe0aa;font-size:8px;font-weight:900;letter-spacing:.14em}.game-result h2{margin:8px 0;color:#fff5de;font:600 34px/1.1 var(--serif)}.game-result p{max-width:500px;margin:0 auto;color:#a7cbb5;font-size:12px}.game-result-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:19px}.game-result-actions a,.game-result-actions button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid rgba(255,255,255,.17);border-radius:11px;color:#dbece1;background:transparent;cursor:pointer;font-size:10px;font-weight:850}.game-result-actions .download-game{color:#2b1900;border-color:#ffe39a;background:linear-gradient(#ffdb5b,#f0b82b)}
.full-game-footer { border-top:1px solid rgba(255,255,255,.08);color:#90849a;font-size:9px; }.full-game-footer a{color:#d9b45c}
@keyframes gameDeal{to{opacity:1;transform:none}}@keyframes gameChoice{50%{transform:translateY(-6px);filter:drop-shadow(0 0 8px rgba(255,214,102,.7))}}@keyframes gameCardHint{50%{transform:translateY(-10px);filter:drop-shadow(0 0 9px rgba(255,214,102,.85))}}
@media(max-width:900px){.full-game-heading{grid-template-columns:1fr;gap:16px}.full-game-felt{min-height:720px}.full-game-hand{grid-template-columns:repeat(7,minmax(0,66px));justify-content:center;gap:4px}.game-card:nth-child(n+8){margin-top:-11px}}
@media(max-width:620px){.full-game-main{padding:108px 0 100px}.full-game-heading h1{font-size:43px}.full-game-heading p{font-size:13px}.full-game-table{border-radius:19px}.full-game-bar{padding:12px}.full-game-bar small{display:none}.full-game-felt{min-height:675px;padding:13px 10px 20px}.game-opponent{justify-content:flex-start}.opponent-hand{margin-left:auto}.game-piles{min-height:126px}.game-coach{max-width:100%;border-radius:14px}.game-coach p{font-size:9px}.full-game-hand{grid-template-columns:repeat(7,minmax(0,47px));gap:2px;min-height:205px}.game-card:nth-child(n+8){margin-top:-2px}.game-actions{display:grid;grid-template-columns:.7fr 1.3fr}.game-actions button{padding:0 9px}.game-result{padding:21px 14px}.game-result h2{font-size:28px}.game-result-actions{display:grid}.full-game-footer{padding:11px 13px}}
@media(prefers-reduced-motion:reduce){.game-card.is-dealt{opacity:1;transform:none;animation:none}.full-game-main[data-phase="draw"] .game-open-card,.full-game-main[data-phase="draw"] .game-stock,.game-card.is-suggested{animation:none;outline:3px solid #ffd66a;outline-offset:3px}}
