*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f4f3ef;color:#171717}
a{color:inherit}
.nav{height:78px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #deddd8;background:#f4f3ef}
.brand{font-weight:850;text-decoration:none;letter-spacing:-.045em;font-size:17px}
.nav nav{display:flex;gap:10px;align-items:center}
.button{display:inline-block;border:0;border-radius:999px;background:#151515;color:#fff;padding:12px 21px;text-decoration:none;font-weight:750;cursor:pointer}
.button.secondary{background:#e5e3dc;color:#171717}
.button.large{padding:15px 25px}
.hero{max-width:1180px;margin:0 auto;padding:108px 6vw 92px;display:grid;grid-template-columns:1.15fr .85fr;gap:90px;align-items:center}
.hero-copy{max-width:680px}
.eyebrow{font-size:11px;font-weight:850;letter-spacing:.17em;color:#85837e;margin:0 0 20px}
.hero h1{font-size:clamp(56px,7.2vw,96px);line-height:.91;letter-spacing:-.075em;margin:0 0 30px;font-weight:850}
.hero h1 span{color:#77756f}
.lead{font-size:19px;line-height:1.62;color:#686762;max-width:600px}
.actions{display:flex;align-items:center;gap:27px;margin-top:34px}
.text-link{font-weight:750;text-decoration:none}
.text-link span{display:inline-block;margin-left:4px}
.connection-card{background:#e6e3db;border:1px solid #dad7ce;border-radius:30px;min-height:390px;padding:48px 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:19px;box-shadow:0 25px 70px rgba(0,0,0,.05)}
.location{font-size:21px;font-weight:800;letter-spacing:-.02em}
.pin{font-size:12px;margin-right:6px}
.route{height:105px;display:flex;flex-direction:column;align-items:center}
.route-line{height:39px;width:1px;background:#a8a59c}
.route-dot{width:9px;height:9px;border-radius:50%;background:#171717;margin:3px 0}
.connection{font-size:10px;font-weight:850;letter-spacing:.18em;color:#55534d}
.games,.how{max-width:1180px;margin:0 auto;padding:65px 6vw}
.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.game-card{background:#fff;border:1px solid #e2e0da;border-radius:24px;padding:32px;box-shadow:0 15px 40px rgba(0,0,0,.035)}
.game-top{display:flex;justify-content:space-between;align-items:center}
.game-icon{width:58px;height:58px;border-radius:16px;background:#eeeae1;display:grid;place-items:center;font-size:30px}
.game-icon.dog{font-size:25px}
.card-mark{font-size:10px;font-weight:850;letter-spacing:.15em;color:#99968e}
.game-card h2{font-size:30px;letter-spacing:-.04em;margin:27px 0 9px}
.game-card p{color:#686762;line-height:1.6;min-height:52px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step{border-top:1px solid #aaa79e;padding-top:19px}
.number{font-size:11px;font-weight:850;color:#89867f;letter-spacing:.12em}
.step h3{font-size:25px;letter-spacing:-.03em;margin:22px 0 8px}
.step p{color:#686762;line-height:1.55}
footer{max-width:1180px;margin:35px auto 0;padding:45px 6vw 55px;border-top:1px solid #deddd8;color:#85827b;display:flex;justify-content:space-between;font-size:13px}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:30px;background:#f4f3ef}
.auth-card{width:min(460px,100%);background:#fff;border:1px solid #e1dfd8;border-radius:25px;padding:42px;box-shadow:0 25px 70px rgba(0,0,0,.07)}
.auth-card h1{font-size:40px;letter-spacing:-.055em;margin:48px 0 8px}
.auth-card>p{color:#686762;margin-bottom:28px}
.auth-card form{display:grid;gap:16px}
.auth-card label{font-size:13px;font-weight:750;display:grid;gap:7px}
.auth-card input{width:100%;padding:13px 14px;border:1px solid #cbc8bf;border-radius:11px;font-size:16px;background:#fbfaf7}
.auth-card .button{width:100%;margin-top:7px}
.small{font-size:14px}.error{background:#f9e8e5;color:#8a3028;padding:12px 14px;border-radius:11px;margin-bottom:17px;font-size:14px}
.dashboard{max-width:1180px;margin:0 auto;padding:78px 6vw}
.dashboard h1{font-size:65px;letter-spacing:-.065em;margin:0}
.status{margin-top:30px;background:#fff;border:1px solid #e1dfd8;border-radius:18px;padding:20px;display:flex;gap:15px;align-items:center}
.status p{margin:5px 0 0;color:#777}.dot{width:10px;height:10px;border-radius:50%;background:#45a35b}.user{font-size:14px;color:#686762}
@media(max-width:820px){.hero{grid-template-columns:1fr;gap:55px;padding-top:70px}.game-grid,.steps{grid-template-columns:1fr}.connection-card{min-height:300px}.hero h1{font-size:60px}.dashboard h1{font-size:48px}footer{flex-direction:column;gap:8px}}
@media(max-width:560px){.nav{padding:0 5vw}.nav .secondary{display:none}.hero{padding-left:5vw;padding-right:5vw}.actions{align-items:flex-start;flex-direction:column;gap:18px}.auth-card{padding:30px}.hero h1{font-size:51px}}
.auth-card.wide { max-width: 620px; }
.back-link { display:inline-block; margin-bottom: 24px; color: inherit; text-decoration:none; opacity:.75; }
.auth-card select, .auth-card input { width:100%; box-sizing:border-box; }
.auth-card hr { border:0; border-top:1px solid rgba(0,0,0,.1); margin:32px 0; }
.join-form { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; }
.game-header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:32px; }
.code-box { min-width:180px; padding:22px; border-radius:18px; background:#111; color:#fff; text-align:center; }
.code-box span,.code-box small { display:block; font-size:11px; letter-spacing:.12em; opacity:.65; }
.code-box strong { display:block; font-size:34px; letter-spacing:.15em; margin:8px 0; }
.lobby-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.panel { background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:20px; padding:24px; }
.player-list { list-style:none; padding:0; margin:0; }
.player-list li { padding:13px 0; border-bottom:1px solid rgba(0,0,0,.07); display:flex; align-items:center; gap:10px; }
.player-dot { width:9px; height:9px; border-radius:50%; background:#1d9b68; display:inline-block; }
.host-label { margin-left:auto; font-size:12px; opacity:.55; }
.join-cta { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 24px; margin:24px 0; border:1px solid rgba(0,0,0,.08); border-radius:18px; background:rgba(255,255,255,.7); }
.join-cta p { margin:4px 0 0; opacity:.65; }
@media (max-width: 700px) { .game-header,.join-cta { flex-direction:column; } .lobby-grid { grid-template-columns:1fr; } .join-form { grid-template-columns:1fr; } .code-box { width:100%; box-sizing:border-box; } }

/* Game code presentation */
.code-box { min-width: 230px; padding: 22px 24px; }
.code-row { display:flex; align-items:center; justify-content:center; gap:12px; margin:10px 0 12px; }
.code-box strong { margin:0; padding:8px 14px; background:rgba(255,255,255,.08); border-radius:10px; font-size:34px; letter-spacing:.16em; line-height:1; }
.copy-code { border:1px solid rgba(255,255,255,.22); background:transparent; color:#fff; border-radius:9px; padding:9px 11px; font:inherit; cursor:pointer; }
.copy-code:hover { background:rgba(255,255,255,.10); }
@media (max-width: 700px) { .code-row { flex-wrap:wrap; } }

/* Jass table · V25 compact viewport */
.table-page{min-height:100vh;background:#e9e7e0}
.table-wrap{max-width:1280px;margin:0 auto;padding:20px 5vw 30px}
.table-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:14px}
.table-top h1{font-size:42px;line-height:1;letter-spacing:-.055em;margin:0}
.table-top .eyebrow{margin-bottom:9px}
.jass-table{position:relative;height:540px;min-height:0;border-radius:42px;background:radial-gradient(circle at 50% 48%,#2f7b5b 0,#1e6749 52%,#145039 100%);border:12px solid #cdb184;box-shadow:0 24px 65px rgba(0,0,0,.18),inset 0 0 0 2px rgba(255,255,255,.12);overflow:hidden;color:#fff}
.jass-table:before{content:"";position:absolute;inset:24px;border:1px solid rgba(255,255,255,.18);border-radius:30px;pointer-events:none}
.table-player{position:absolute;z-index:20;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:132px;padding:11px 14px;border-radius:14px;background:rgba(17,30,25,.72);backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.16);text-align:center}
.table-player strong{font-size:15px;line-height:1.15;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat-badge{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.65;font-weight:800}
.hand-count{font-size:12px;opacity:.78;white-space:nowrap}
.table-player.active-player{background:#f4e6c9;color:#1a251f;box-shadow:0 0 0 3px rgba(255,255,255,.28),0 10px 28px rgba(0,0,0,.2)}
.table-player.active-player .seat-badge,.table-player.active-player .hand-count{opacity:.7}
.table-player.inactive-seat{display:none}
.p-top{top:42px;left:42px}.p-right{top:42px;right:42px}.p-bottom{bottom:42px;right:42px}.p-left{bottom:42px;left:42px}
.table-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:620px;height:360px;display:flex;flex-direction:column;align-items:center;z-index:4}
.table-status{position:relative;z-index:30;padding:10px 18px;border-radius:999px;background:rgba(0,0,0,.26);font-weight:750;font-size:14px;letter-spacing:.01em;box-shadow:0 5px 14px rgba(0,0,0,.1)}
.table-status.your-turn{background:#f5ead1;color:#1a1a1a}
.trick-grid{width:560px;height:312px;margin-top:10px;display:grid;grid-template-columns:1fr 1.15fr 1fr;grid-template-rows:130px 26px 26px 130px;grid-template-areas:"p1card center p2card" "p1name center p2name" "p4name center p3name" "p4card center p3card";align-items:center;justify-items:center}
.trick-cell{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
#card-1{grid-area:p1card} #card-2{grid-area:p2card} #name-cell-1{grid-area:p1name} #name-cell-2{grid-area:p2name} .trump-cell{grid-area:center} #name-cell-4{grid-area:p4name} #name-cell-3{grid-area:p3name} #card-4{grid-area:p4card} #card-3{grid-area:p3card}
.empty-cell{pointer-events:none}
.played-card{position:relative;width:96px;height:130px;flex:0 0 auto;border-radius:10px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.25);border:1px solid rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;z-index:8;color:#171717}
.played-card.hearts,.played-card.diamonds{color:#c53030}.played-card.clubs,.played-card.spades{color:#171717}
.played-card-inner{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.played-rank{font-size:29px;font-weight:850;line-height:1}.played-suit{font-size:34px;line-height:1;margin-top:6px}
.card-enter-prep{opacity:0;pointer-events:none}.card-enter.seat-1{animation:cardFromTopLeft .48s cubic-bezier(.2,.8,.2,1) both}.card-enter.seat-2{animation:cardFromTopRight .48s cubic-bezier(.2,.8,.2,1) both}.card-enter.seat-3{animation:cardFromBottomRight .48s cubic-bezier(.2,.8,.2,1) both}.card-enter.seat-4{animation:cardFromBottomLeft .48s cubic-bezier(.2,.8,.2,1) both}
@keyframes cardFromTopLeft{from{opacity:0;transform:translate(-230px,-180px) scale(.78)}to{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes cardFromTopRight{from{opacity:0;transform:translate(230px,-180px) scale(.78)}to{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes cardFromBottomRight{from{opacity:0;transform:translate(230px,180px) scale(.78)}to{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes cardFromBottomLeft{from{opacity:0;transform:translate(-230px,180px) scale(.78)}to{opacity:1;transform:translate(0,0) scale(1)}}
.name-cell{font-size:14px;font-weight:750;color:#fff;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.trump-cell,.trump-icon{pointer-events:none}
.hand-panel{margin-top:16px;background:#fff;border:1px solid #dedbd3;border-radius:24px;padding:24px 26px;box-shadow:0 12px 35px rgba(0,0,0,.05)}
.hand-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px}.hand-heading h2{font-size:25px;letter-spacing:-.035em;margin:0}.hand-heading span{font-size:13px;color:#777}
.hand{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:10px;min-height:150px;padding:25px 0 4px;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
.playing-card{position:relative;width:78px;height:112px;border:1px solid #c9c6bf;border-radius:9px;background:#fff;box-shadow:0 7px 16px rgba(0,0,0,.12);cursor:pointer;transition:transform .14s ease,box-shadow .14s ease;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 20px/1 system-ui,sans-serif}
.playing-card:hover:not(:disabled),.playing-card.selected{transform:translateY(-14px);box-shadow:0 15px 25px rgba(0,0,0,.18)}
.playing-card:disabled{cursor:not-allowed;opacity:.72}.playing-card.hearts,.playing-card.diamonds{color:#c53030}.playing-card.clubs,.playing-card.spades{color:#171717}.card-rank{font-size:25px;font-weight:850;line-height:1}.card-suit{font-size:29px;line-height:1;margin-top:5px}
.prototype-note{text-align:center;color:#777;margin:18px 0 0;font-size:13px}
@media(max-width:1000px){.jass-table{height:520px;min-height:0}.table-center{width:560px;height:350px}.trick-grid{width:510px;height:288px;grid-template-rows:118px 26px 26px 118px}.p-top{top:30px;left:30px}.p-right{top:30px;right:30px}.p-bottom{bottom:30px;right:30px}.p-left{bottom:30px;left:30px}}
@media(max-width:760px){.table-wrap{padding:24px 4vw 40px}.table-top h1{font-size:30px}.jass-table{min-height:700px;border-width:7px;border-radius:28px}.jass-table:before{inset:16px;border-radius:20px}.table-player{min-width:110px;padding:8px 9px}.table-player strong{font-size:12px}.seat-badge{font-size:8px}.hand-count{font-size:10px}.p-top{top:24px;left:24px}.p-right{top:24px;right:24px}.p-bottom{bottom:24px;right:24px}.p-left{bottom:24px;left:24px}.table-center{width:100%;height:340px}.trick-grid{width:440px;height:280px;grid-template-rows:108px 32px 32px 108px}.name-cell{font-size:12px}.played-card{width:84px;height:114px}.played-rank{font-size:24px}.played-suit{font-size:29px}.hand{justify-content:flex-start}.playing-card{width:62px;height:92px;font-size:16px}}
@media(max-width:520px){.jass-table{min-height:680px}.table-player{min-width:94px;max-width:105px}.table-player strong{font-size:11px}.hand-count{font-size:9px}.p-top{top:18px;left:18px}.p-right{top:18px;right:18px}.p-bottom{bottom:18px;right:18px}.p-left{bottom:18px;left:18px}.table-center{height:320px}.trick-grid{width:340px;height:260px;grid-template-rows:100px 30px 30px 100px}.name-cell{font-size:10px}.played-card{width:72px;height:98px}.played-rank{font-size:21px}.played-suit{font-size:26px}}

/* V26: legal-card feedback */
.playing-card.illegal{opacity:.32;filter:grayscale(.45);cursor:not-allowed;transform:none!important;box-shadow:0 4px 10px rgba(0,0,0,.08)}
.playing-card.illegal:hover{transform:none!important;box-shadow:0 4px 10px rgba(0,0,0,.08)}