:root{--bg: #d9ecff;--panel: #ecf6ff;--panel2: #d8eaff;--card: #f2f5f9;--ink: #102033;--muted: #4e6480;--accent: #1ea8ff;--asc: #84dcc6;--desc: #f28482;--good: #8ac926;--danger: #e76f51}*{box-sizing:border-box}body{margin:0;font-family:Avenir Next,Segoe UI,sans-serif;background:radial-gradient(circle at 12% 10%,#ffffff 0%,rgba(255,255,255,.45) 22%,transparent 45%),radial-gradient(circle at 90% 8%,#d9f4ff 0%,rgba(217,244,255,.35) 28%,transparent 52%),linear-gradient(180deg,#bfe1ff,#a2d0fb 45%,#95c6f6);color:#102033}.app{max-width:1120px;margin:0 auto;padding:10px 14px;display:grid;gap:8px;min-height:100dvh;align-content:start}.app.board-mode{padding:8px 10px;gap:6px;height:100dvh;overflow:hidden}.app-header{display:flex;justify-content:space-between;align-items:center;gap:8px}.app-header h1{margin:0;font-size:clamp(32px,6vw,48px);line-height:1}.header-actions{display:flex;align-items:center;gap:6px}.header-actions button{flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.gameboard{min-height:0;display:grid;gap:8px;position:relative}.app.board-mode .gameboard{height:100%;min-height:0}.gameboard-solo{grid-template-rows:minmax(0,1fr) auto}.gameboard-multi{grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"foundation players" "hand hand";column-gap:8px;row-gap:8px}.mode-switch{display:flex;gap:8px}.mode-switch.compact{align-items:center;padding:7px 9px}.mode-switch.landing{min-height:180px;justify-content:center;align-content:center;flex-wrap:wrap}.mode-current{padding:12px 18px;font-size:22px}.connection-banner{display:flex;justify-content:space-between;align-items:center;gap:10px;border-color:#e76f5173}.pill{display:inline-flex;align-items:center;background:var(--panel2);border:1px solid #87a6c8;border-radius:999px;padding:5px 9px;font-size:12px;color:#173252}.pill.mini{padding:4px 8px;font-size:12px}.panel{background:#ecf6ffeb;border:1px solid rgba(93,132,176,.35);border-radius:12px;padding:9px 10px;min-height:0;overflow:hidden}.foundation-panel,.hand-panel{display:grid;grid-template-rows:auto auto}.foundation-panel{overflow:visible;padding-bottom:14px}.foundation-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.players-panel{display:grid;grid-template-rows:auto minmax(0,1fr);max-height:none;min-height:132px;align-self:start;padding:8px}.players-panel h2{margin:0;font-size:14px}.players-panel-header{display:flex;align-items:center;justify-content:space-between;gap:6px}.gameboard-multi>.foundation-panel{grid-area:foundation}.gameboard-multi>.players-panel{grid-area:players}.gameboard-multi>.hand-panel{grid-area:hand}.pile-grid{margin-top:10px;display:grid;grid-template-columns:repeat(4,minmax(120px,220px));grid-auto-rows:minmax(clamp(128px,22vh,180px),1fr);gap:10px;justify-content:center;min-height:0}.pile{min-height:clamp(128px,22vh,180px);border-radius:12px;border:2px solid transparent;padding:8px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch;gap:8px;overflow:hidden}.pile.asc{background:color-mix(in srgb,var(--asc) 24%,#0d1b2a);border-color:#5bc7ae}.pile.desc{background:color-mix(in srgb,var(--desc) 22%,#0d1b2a);border-color:#ee6f6d}.pile.highlight{box-shadow:0 0 0 3px #00b4d873 inset}.pile-tag,.pile-hint{color:#173252;text-align:center;font-weight:700;font-size:12px;text-shadow:0 1px 2px rgba(0,0,0,.45)}.top-card{width:clamp(54px,8.4vh,96px);aspect-ratio:7 / 10;border-radius:10px;background:#f4f7fb;border:2px solid #c3cfdd;display:grid;place-items:center;color:#112338;font-size:clamp(19px,3.6vh,34px);font-weight:800;justify-self:center;align-self:center}.hand-header{display:flex;justify-content:space-between;align-items:center;gap:10px}.phase-splash{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:25;min-width:min(560px,calc(100% - 40px));border-radius:16px;border:2px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:14px 18px;text-align:center;box-shadow:0 14px 36px #00000073;animation:splash-in .24s ease-out}.phase-splash.won{background:linear-gradient(135deg,#8ac926d1,#18602ad6)}.phase-splash.lost{background:linear-gradient(135deg,#e76f51d9,#701e23d6)}.phase-splash-label{letter-spacing:.16em;text-transform:uppercase;font-weight:800;font-size:11px;opacity:.92}.phase-splash-title{margin-top:3px;font-size:clamp(26px,4.4vw,42px);font-weight:900;line-height:1.05}.phase-splash-subtitle{margin-top:4px;font-size:14px;font-weight:600;opacity:.96}.phase-banner{margin-top:8px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid #3b5677;padding:4px 10px;font-size:12px;font-weight:700;width:fit-content}.phase-banner.won{background:color-mix(in srgb,var(--good) 28%,#122235);border-color:color-mix(in srgb,var(--good) 45%,#3b5677)}.phase-banner.lost{background:color-mix(in srgb,var(--danger) 24%,#122235);border-color:color-mix(in srgb,var(--danger) 45%,#3b5677)}.button-row{display:flex;flex-wrap:wrap;gap:6px}button{border:0;border-radius:8px;padding:10px 12px;font-weight:700;cursor:pointer}button.primary{background:var(--good);color:#132b00}button.secondary{background:#cde4ff;color:#173252;border:1px solid #8cb4df}button.danger{background:#7d2f33;color:#ffe5e6}button:disabled{opacity:.55;cursor:not-allowed}.link-button{display:inline-flex;align-items:center;text-decoration:none}.landing-hint{width:100%;margin:2px 0 0;text-align:center;color:#375877;font-size:14px}.landing-support{margin-top:auto;display:grid;justify-items:center;gap:4px;text-align:center}.landing-support p{margin:0;color:#375877;font-size:13px}.cards-fan{margin-top:10px;display:flex;align-items:flex-end;overflow-x:auto;min-height:142px;overflow-y:visible;padding:6px 4px 2px}.card{width:clamp(58px,10vh,88px);aspect-ratio:7 / 10;margin-left:-22px;border-radius:10px;border:2px solid #bcc8d6;background:var(--card);color:var(--ink);font-size:30px;font-weight:800;display:grid;place-items:center;box-shadow:0 4px 10px #0000002e}.card:first-child{margin-left:0}.card.selected{border-color:var(--accent);transform:translateY(-6px)}.card.new-dealt{background:#cfe8ff;border-color:#8cb9f0;box-shadow:0 0 0 2px #78b0ff52}.error{color:#ffd6d6;background:#e76f5133;border:1px solid rgba(231,111,81,.45);border-radius:8px;padding:8px 10px;font-size:13px}.lobby{display:grid;gap:4px;align-content:start}.flow-choice{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:6px}.choice-card{min-height:44px;font-size:15px}.joinable-list{display:grid;gap:8px}.joinable-list h3{margin:0}.joinable-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(169,180,194,.22);border-radius:8px;padding:6px 8px;background:#deedff;border-color:#a8c4e3}.private-join{display:grid;grid-template-columns:minmax(180px,1fr) auto;align-items:end;gap:10px}.lobby-grid{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:4px;align-items:end}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:10px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#050a12c7;display:grid;place-items:center;padding:16px;z-index:40}.settings-modal{width:min(760px,100%);max-height:calc(100vh - 32px);overflow:auto;display:grid;gap:12px;background:#f7fbff;color:#0f2741;border:2px solid #4f87bf;box-shadow:0 22px 48px #040c1873}.settings-modal .pill{background:#e9f3ff;border-color:#9dc1e5;color:#143150}.settings-modal .error{color:#7d1f1f;background:#fde8e8;border-color:#f3b8b8}.settings-modal label{color:#113458}.settings-modal input{background:#fff;color:#102741;border-color:#7aa2cb}.settings-modal h2{color:#0f2741}.settings-header{display:flex;justify-content:space-between;align-items:center;gap:8px}.checkbox-label{display:flex;align-items:center;gap:8px}.field-disabled{opacity:.6}.info-dot{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:999px;background:#1a7de8;color:#eef5ff;font-size:11px;font-weight:800;line-height:1;cursor:help}label{display:grid;gap:6px;font-size:13px;color:#d7e0ea}input{border:1px solid #89accc;border-radius:8px;padding:7px 9px;background:#f7fbff;color:#112741}input::placeholder{color:#95a6bb}.players-list{display:grid;gap:6px;overflow:auto;min-height:0}.player-line{display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(169,180,194,.22);border-radius:8px;padding:6px 8px;background:#e6f1ff;border-color:#a7c0dc;font-size:12px}section[aria-label=welcome]{max-width:600px}section[aria-label=welcome] h2{margin:0}.socket-indicator{position:fixed;left:12px;bottom:12px;width:12px;height:12px;border-radius:999px;border:2px solid #f7fbff;box-shadow:0 0 0 1px #2b486999;z-index:50}.socket-indicator.connected{background:#26be67}.socket-indicator.connecting{background:#f3b82f}.socket-indicator.disconnected{background:#e75b63}.player-line.active{border-color:var(--good)}@media(max-width:900px){.app{padding:10px;gap:8px}.app.board-mode{padding:8px;gap:6px}.gameboard-solo{grid-template-rows:minmax(0,1fr) auto}.gameboard-multi{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"foundation" "players" "hand"}.players-panel{max-height:96px;padding:6px}.players-panel h2{font-size:12px}.player-line{padding:5px 6px;font-size:11px}.pile-grid{grid-template-columns:repeat(4,minmax(72px,140px));grid-auto-rows:minmax(clamp(104px,18vh,124px),1fr);gap:5px;margin-top:6px;justify-content:center}.pile{min-height:clamp(104px,18vh,124px);padding:5px;gap:4px}.pile-tag,.pile-hint{font-size:9px}.top-card{width:clamp(42px,6.4vh,58px);font-size:clamp(15px,2.5vh,19px)}.card{width:clamp(50px,8.5vh,74px);font-size:clamp(22px,3.8vh,27px);margin-left:-14px}.cards-fan.compact .card{width:clamp(38px,6.8vh,52px);font-size:clamp(14px,2.4vh,18px);margin-left:-4px}.cards-fan{min-height:106px}.phase-splash{min-width:calc(100% - 20px);top:6px;padding:10px 12px}.phase-splash-subtitle{font-size:12px}.lobby-grid,.flow-choice,.private-join,.settings-grid{grid-template-columns:1fr}.connection-banner{flex-direction:column;align-items:flex-start}}@media(max-height:760px){.app.board-mode,.gameboard{gap:4px}.players-panel{max-height:72px}.players-list{gap:4px}.pile-grid{grid-auto-rows:minmax(clamp(108px,17vh,148px),1fr);gap:6px}.pile{min-height:clamp(108px,17vh,148px)}.cards-fan{min-height:92px}.card{width:clamp(46px,7.2vh,70px);font-size:clamp(18px,2.8vh,24px);margin-left:-12px}.phase-splash{top:4px;padding:8px 12px}.phase-splash-title{font-size:clamp(22px,4vh,32px)}}@keyframes splash-in{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}