:root{
  --sky:#55b9f6;
  --sky-deep:#147bc7;
  --ocean:#1d8bd1;
  --leaf:#237c5b;
  --wood:#ad7044;
  --wood-dark:#74462e;
  --panel:#0d2948;
  --panel2:#143b66;
  --panel3:#0b203a;
  --text:#f7fbff;
  --muted:#bfd2e8;
  --gold:#ffd44d;
  --teal:#32dfba;
  --green:#5ad483;
  --blue:#4da8ee;
  --yellow:#f4bf43;
  --red:#ff5e63;
  --shadow:0 8px 22px rgba(3,18,36,.27);
  --op-card:clamp(104px,30vw,150px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#07192c;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{display:flex;justify-content:center;overflow-x:hidden}
button,input,select{font:inherit}
button{color:inherit}
.hidden{display:none!important}
.app-shell{width:min(100vw,520px);min-height:100vh;position:relative;overflow:hidden;background:linear-gradient(180deg,#45aef3 0%,#1c86d0 25%,#2d8b6b 25%,#1d684f 35%,#a76c43 35%,#7a492f 60%,#0d4c87 60%,#072b54 100%);padding-bottom:max(12px,env(safe-area-inset-bottom));box-shadow:0 0 44px rgba(0,0,0,.45)}
.app-shell::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.23;background:radial-gradient(circle at 2% 31%,#0a5237 0 32px,transparent 33px),radial-gradient(circle at 96% 29%,#0b5e3d 0 40px,transparent 41px),radial-gradient(circle at 3% 71%,#1d6e4b 0 38px,transparent 39px),radial-gradient(circle at 97% 72%,#1b6b48 0 44px,transparent 45px),linear-gradient(180deg,rgba(255,255,255,.22),transparent 23%)}
.screen{position:relative;z-index:2;min-height:100vh}
.icon-btn,.players-pill,.room-code,.seat-count{border:1px solid rgba(255,255,255,.16);background:rgba(7,30,55,.88);box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.icon-btn{width:46px;height:46px;border-radius:14px;font-size:25px;display:grid;place-items:center;cursor:pointer}
.glass{background:rgba(7,31,56,.82)}
.primary-btn,.secondary-btn{border:0;border-radius:15px;min-height:50px;font-weight:900;cursor:pointer;transition:transform .12s ease,filter .12s ease}
.primary-btn{background:linear-gradient(180deg,#35dfba,#1dba98);color:#06372f;box-shadow:0 8px 18px rgba(9,91,74,.28)}
.secondary-btn{background:#1e4c78;color:#fff;border:1px solid rgba(255,255,255,.14);padding:0 22px}
.primary-btn:active,.secondary-btn:active,.icon-btn:active,.pile:active,.carousel-arrow:active{transform:scale(.97)}
.primary-btn:disabled,.secondary-btn:disabled{opacity:.48;cursor:not-allowed;filter:saturate(.55)}

/* Home */
.auth-screen{padding:calc(max(28px,env(safe-area-inset-top)) + 36px) 20px 32px;text-align:center;background:linear-gradient(180deg,rgba(23,137,209,.2),rgba(8,40,73,.52))}
.brand-mark{width:78px;height:78px;border-radius:28px;margin:0 auto 14px;display:grid;place-items:center;font-size:43px;background:linear-gradient(145deg,#3aa8ef,#1d5eab);border:2px solid rgba(255,255,255,.45);box-shadow:var(--shadow)}
.auth-screen h1{font-size:40px;margin:0 0 6px;letter-spacing:-1.4px}
.tagline{margin:0 auto 28px;max-width:360px;color:#e2effb;font-weight:650;line-height:1.4}
.auth-card{background:linear-gradient(180deg,rgba(12,45,77,.94),rgba(7,28,52,.96));padding:18px;border-radius:24px;border:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow);text-align:left}
.field-label{display:block;font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:900;color:#bcd1e6;margin:2px 0 7px}
.text-input,select{width:100%;background:#0a223d;color:white;border:1px solid rgba(255,255,255,.18);border-radius:13px;min-height:48px;padding:0 14px;font-size:16px;outline:none}
.text-input:focus,select:focus{border-color:#5adcc4;box-shadow:0 0 0 3px rgba(90,220,196,.14)}
.avatar-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-bottom:18px}
.avatar-choice{aspect-ratio:1;border-radius:11px;border:2px solid transparent;background:#15395e;font-size:23px;cursor:pointer;padding:0}
.avatar-choice.selected{border-color:var(--gold);background:#204b75;box-shadow:0 0 0 2px rgba(255,212,77,.2)}
.auth-card>.primary-btn{width:100%;margin-top:2px}
.or-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:18px 0;color:#8eabc7;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.or-row span{height:1px;background:rgba(255,255,255,.15)}
.join-row{display:grid;grid-template-columns:1fr auto;gap:9px}.code-input{text-transform:uppercase;font-weight:950;letter-spacing:.22em;text-align:center}.tiny-note{font-size:11px;color:#c2d6e9;opacity:.78;line-height:1.4;max-width:360px;margin:18px auto 0}

/* Lobby */
.lobby-screen{padding:calc(max(12px,env(safe-area-inset-top)) + 8px) 14px 30px;background:linear-gradient(180deg,rgba(30,140,210,.16),rgba(7,33,61,.58))}
.lobby-header{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;margin-bottom:18px}.lobby-header>div:nth-child(2){text-align:center}.eyebrow{font-size:10px;font-weight:900;letter-spacing:.18em;color:#d7e8f6}.room-code{border-radius:13px;padding:6px 16px;font-size:24px;font-weight:950;letter-spacing:.16em;cursor:pointer}.seat-count{border-radius:13px;padding:11px 12px;font-weight:900}
.lobby-panel{background:linear-gradient(180deg,rgba(14,47,80,.94),rgba(8,29,52,.96));border:1px solid rgba(255,255,255,.14);border-radius:21px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.section-title{font-size:14px;font-weight:950;color:#d9e8f7;margin-bottom:11px}
.lobby-players{display:grid;gap:8px}.lobby-player{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;background:#0b2848;border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:8px 10px}.lobby-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#183f69;border:2px solid rgba(255,255,255,.5);font-size:24px}.lobby-name{font-weight:900}.host-tag{font-size:11px;color:var(--gold);font-weight:900}.online-label{font-size:12px;color:#7ce3a5;font-weight:800}.online-label.offline{color:#e5a0a0}
.settings-panel{display:grid;gap:7px}.setting-row{display:grid;grid-template-columns:1fr 116px;gap:12px;align-items:center}.setting-row label{font-weight:800;color:#e4eef8}.setting-row select{min-height:42px}.lobby-start{width:100%;margin-top:6px}.lobby-hint{text-align:center;color:#c1d5e8;font-size:13px;margin-top:10px;min-height:18px}

/* Game */
.game-screen{padding-top:max(8px,env(safe-area-inset-top))}
.game-topbar{position:relative;z-index:9;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px;padding:6px 12px 0}.players-pill{height:46px;border-radius:14px;padding:0 13px;display:flex;align-items:center;justify-content:center;font-weight:950;font-size:17px}.players-pill::before{content:"●";font-size:11px;color:#3de3bc;margin-right:7px}
.opponent-stage{position:relative;z-index:5;height:266px;margin-top:2px}.opponent-viewport{height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-top:28px;touch-action:pan-x}.opponent-viewport::-webkit-scrollbar{display:none}.opponent-track{display:flex;align-items:flex-start;gap:6px;width:max-content;padding:0 calc(50% - (var(--op-card) / 2))}
.opponent-card{width:var(--op-card);flex:0 0 var(--op-card);position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel3));border:2px solid rgba(255,255,255,.18);border-radius:19px 19px 11px 11px;padding:9px 7px 8px;box-shadow:var(--shadow);scroll-snap-align:center;transform-origin:50% 118%;transition:transform .18s ease,opacity .18s ease,border-color .18s ease;min-height:213px}.opponent-card.active-turn{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,212,77,.28),0 0 17px rgba(255,212,77,.4),var(--shadow)}.opponent-card.active-turn::before{content:"▼";position:absolute;top:-27px;left:50%;transform:translateX(-50%);color:var(--gold);font-size:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}.opponent-card[data-curve="-2"]{transform:translateY(33px) rotate(-8deg) scale(.92)}.opponent-card[data-curve="-1"]{transform:translateY(14px) rotate(-4deg) scale(.97)}.opponent-card[data-curve="0"]{transform:translateY(0) rotate(0) scale(1)}.opponent-card[data-curve="1"]{transform:translateY(14px) rotate(4deg) scale(.97)}.opponent-card[data-curve="2"]{transform:translateY(33px) rotate(8deg) scale(.92)}
.op-meta{display:grid;grid-template-columns:35px 1fr;gap:7px;align-items:center;margin-bottom:7px}.avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#173f69;border:2px solid rgba(255,255,255,.82);box-shadow:0 3px 8px rgba(0,0,0,.24);font-size:21px}.op-name{font-size:13px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.connection-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#26dc79;margin-left:4px}.connection-dot.offline{background:#a4abb5}.op-stats{font-size:12px;font-weight:900;display:flex;gap:7px;align-items:center}.op-stats .hand-total{color:var(--gold)}.divider{opacity:.42}.mini-grid,.local-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.mini-card,.local-card,.pile-card{border-radius:7px;display:grid;place-items:center;font-weight:950;line-height:1;border:2px solid rgba(255,255,255,.76);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 2px 5px rgba(0,0,0,.15);user-select:none}.mini-card{aspect-ratio:.73;font-size:12px}.local-card{aspect-ratio:.78;font-size:25px;cursor:pointer;transition:transform .1s ease,filter .1s ease;padding:0}.local-card:active{transform:scale(.96)}.local-card:disabled{cursor:default}.card-back{background:linear-gradient(145deg,#2f8ee2,#155bb0);position:relative;color:#d6edff}.card-back::after{content:"✦";font-size:17px;opacity:.92}.value-card.green{background:#59d58a;color:#073b29}.value-card.blue{background:#55adf0;color:#083e65}.value-card.yellow{background:#f5c04b;color:#764800}.value-card.red{background:#ff6468;color:#78191c}.removed-slot{background:rgba(4,23,42,.35)!important;border:1px dashed rgba(255,255,255,.16)!important;box-shadow:none!important;color:transparent!important}.removed-slot::after{content:""!important}.selectable{outline:2px solid rgba(255,212,77,.9);outline-offset:1px}.active-choice{transform:translateY(-7px);filter:drop-shadow(0 7px 8px rgba(0,0,0,.22))}
.action-hint{position:relative;z-index:8;width:max-content;max-width:86%;min-height:27px;margin:-5px auto 2px;padding:5px 12px;border-radius:15px;background:rgba(7,30,54,.88);border:1px solid rgba(255,255,255,.15);font-size:12px;font-weight:900;text-align:center;box-shadow:0 5px 14px rgba(0,0,0,.17);transition:opacity .15s ease}.action-hint:empty{opacity:0}
.table-zone{position:relative;z-index:3;margin-top:-9px;padding:0 13px}.table-ring{height:280px;border-radius:48% 48% 43% 43%;display:flex;justify-content:center;align-items:center;gap:34px;background:radial-gradient(circle at 50% 45%,#dca064 0 8%,#ba7547 43%,#8b5232 74%,#613a27 100%);border:4px solid rgba(92,52,33,.9);box-shadow:inset 0 0 0 3px rgba(255,216,161,.20),inset 0 -17px 35px rgba(63,33,20,.28),var(--shadow);position:relative;overflow:hidden}.table-ring::after{content:"✦";position:absolute;font-size:116px;color:rgba(255,231,194,.09);transform:rotate(45deg)}.pile{position:relative;z-index:2;background:transparent;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center}.pile:disabled{cursor:default}.stack{position:absolute;width:89px;height:118px;border-radius:9px;top:7px;left:50%;transform:translateX(-50%);background:#1b3151;box-shadow:0 6px 0 #15243c,0 11px 0 #0f1a2c}.stack-discard{background:#e6e8ed;box-shadow:0 6px 0 #bec3ca,0 11px 0 #9499a0}.pile-card{width:89px;height:118px;font-size:46px;position:relative;z-index:3}.pile-count{margin-top:10px;min-width:42px;padding:4px 9px;border-radius:11px;background:rgba(45,23,13,.72);font-weight:950;font-size:16px}.small-badge{font-size:14px}.pile.playable .pile-card{outline:3px solid rgba(255,212,77,.95);outline-offset:3px;animation:pulseChoice 1.15s ease-in-out infinite}@keyframes pulseChoice{50%{transform:translateY(-3px)}}
.carousel-arrow{position:absolute;z-index:8;top:54%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(28,23,23,.70);font-size:35px;line-height:1;display:grid;place-items:center;cursor:pointer}.carousel-arrow.left{left:3px}.carousel-arrow.right{right:3px}
.local-player{position:relative;z-index:6;margin:-24px 10px 0;padding:14px 13px 17px;border-radius:34px 34px 17px 17px;background:linear-gradient(180deg,#104b84,#0b315d 45%,#09223f);border:3px solid rgba(121,200,255,.23);box-shadow:0 -8px 21px rgba(7,30,63,.28),var(--shadow)}.local-player.active-turn{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,212,77,.22),0 -8px 25px rgba(255,212,77,.18),var(--shadow)}.local-meta{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:11px}.local-avatar{width:55px;height:55px;font-size:31px}.local-name-row{display:flex;align-items:center}.local-name{font-weight:950;font-size:20px}.local-stats{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:950;background:rgba(7,29,54,.52);border-radius:14px;padding:4px 11px}.local-stats .hand-total{color:var(--gold)}

/* Modal */
.modal-backdrop{position:absolute;z-index:30;inset:0;background:rgba(3,13,25,.72);display:flex;align-items:flex-end;justify-content:center;padding:18px 12px max(18px,env(safe-area-inset-bottom));backdrop-filter:blur(5px)}.modal{width:100%;max-height:82vh;overflow:auto;background:linear-gradient(180deg,#123b65,#081f3a);border:1px solid rgba(255,255,255,.18);border-radius:25px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.45);position:relative}.modal h2{margin:0 42px 14px 0;font-size:24px}.modal-close{position:absolute;right:12px;top:10px;width:40px;height:40px;border-radius:13px;border:0;background:#0a2848;color:white;font-size:29px;cursor:pointer}.modal-actions{display:grid;gap:9px;margin-top:15px}.modal-actions .primary-btn,.modal-actions .secondary-btn{width:100%}.score-list{display:grid;gap:7px}.score-row{display:grid;grid-template-columns:38px 1fr auto auto;gap:9px;align-items:center;background:#092744;border-radius:13px;padding:8px 10px}.score-avatar{font-size:24px}.score-name{font-weight:900}.score-round{color:var(--gold);font-weight:900}.score-total{font-weight:950;min-width:42px;text-align:right}.winner-row{outline:2px solid var(--gold)}.modal-copy{color:#d5e5f3;line-height:1.45;font-size:14px}.info-grid{display:grid;grid-template-columns:1fr auto;gap:8px 12px;background:#092744;border-radius:14px;padding:12px}.info-grid b{text-align:right}.rule-list{padding-left:20px;color:#d6e5f3;line-height:1.45;font-size:14px}
.toast{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%) translateY(18px);background:rgba(4,23,43,.95);padding:9px 14px;border-radius:14px;font-weight:850;font-size:13px;opacity:0;pointer-events:none;transition:.18s;z-index:50;max-width:86%;text-align:center}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:390px){:root{--op-card:31vw}.game-topbar{padding-inline:8px}.opponent-stage{height:248px}.opponent-card{min-height:199px}.table-ring{height:258px;gap:25px}.pile-card,.stack{width:80px;height:106px}.local-card{font-size:22px}.local-player{margin-inline:8px}.avatar-picker{grid-template-columns:repeat(8,1fr);gap:5px}.avatar-choice{font-size:20px}}
@media(max-width:340px){:root{--op-card:32vw}.opponent-stage{height:230px}.mini-card{font-size:10px}.table-ring{height:240px}.local-card{font-size:20px}.avatar-picker{grid-template-columns:repeat(4,1fr)}}
@media(min-width:521px){body{background:#061421}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}