:root{--deep:#0e2329;--deep2:#142f36;--deep3:#1a3c43;--pine:#255a55;--green:#2d866c;--gold:#e7b871;--gold2:#ffd99c;--cream:#faf1dd;--muted:#a9bdb8;--stroke:rgba(255,255,255,.10);--panel:rgba(21,46,51,.90);--shadow:0 24px 70px rgba(0,0,0,.26);--radius:20px}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{color:var(--cream);background:radial-gradient(circle at 72% 14%,#23514c 0%,transparent 34%),radial-gradient(circle at 8% 80%,#193e45 0%,transparent 30%),var(--deep);font-family:'DM Sans',Inter,system-ui,sans-serif;font-size:14px;line-height:1.5;overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.43;cursor:not-allowed}a{color:inherit;text-decoration:none}.background-grain{position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.27'/%3E%3C/svg%3E");z-index:-1}
h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,h4,.brand,.stat strong,.number{font-family:Outfit,Inter,system-ui,sans-serif}h1{font-size:clamp(42px,6.5vw,86px);line-height:.99;letter-spacing:-.055em;font-weight:800}h2{font-size:26px;letter-spacing:-.03em}h3{font-size:18px;letter-spacing:-.02em}p{color:var(--muted)}.muted{color:var(--muted)}.gold{color:var(--gold)}.small{font-size:12px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.23em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}.app-shell{max-width:1550px;margin:auto;padding:0 34px}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--stroke);gap:20px}.brand{font-size:21px;font-weight:800;letter-spacing:.14em;display:flex;align-items:center;gap:12px}.brand-icon{width:40px;height:40px;background:linear-gradient(150deg,#eec58b,#b88647);border-radius:12px;display:grid;place-items:center;color:#203c38;font-size:23px;box-shadow:0 6px 26px #0003}.header-right{display:flex;align-items:center;gap:12px}.online-status{border:1px solid var(--stroke);padding:9px 13px;border-radius:100px;color:var(--muted);font-size:12px;white-space:nowrap}.online-status b{color:var(--cream)}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#64d7a1;margin-right:6px;box-shadow:0 0 10px #64d7a1}.user-chip{display:flex;align-items:center;gap:10px;border:1px solid var(--stroke);padding:5px 14px 5px 6px;border-radius:100px;font-weight:700}.avatar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#3c746e;color:#fff;font-weight:800;flex-shrink:0}.avatar.guest{background:#bd8d5d}.header-link{background:none;border:0;color:var(--muted);font-weight:700;font-size:12px}.header-link:hover{color:var(--cream)}
.btn{background:linear-gradient(130deg,#efc485,#d7a363);border:1px solid #efc382;color:#183330;border-radius:12px;min-height:43px;padding:11px 19px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;box-shadow:0 5px 22px rgba(234,180,104,.12);transition:.16s transform,.16s filter}.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.065)}.btn.secondary{background:#28514e;color:#f7f0d9;border-color:#3e6c64;box-shadow:none}.btn.ghost{background:rgba(255,255,255,.04);color:#e9ece5;border:1px solid rgba(255,255,255,.17);box-shadow:none}.btn.text{background:transparent;color:var(--gold);border-color:transparent;box-shadow:none}.btn.red{background:#783d3e;color:#fff;border-color:#a96163;box-shadow:none}.btn.tiny{min-height:33px;padding:6px 12px;font-size:12px;border-radius:9px}.btn.full{width:100%}.btn.selected{outline:2px solid var(--gold);outline-offset:3px}.btn:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ecc586;outline-offset:2px}
.hero{min-height:480px;display:grid;grid-template-columns:1.13fr .87fr;align-items:center;gap:60px;padding:72px 0 55px}.hero h1 em{font-style:normal;color:var(--gold)}.hero .lead{max-width:570px;font-size:18px;color:#c0d0c7;line-height:1.75;margin:24px 0 30px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}.pills{display:flex;gap:18px;flex-wrap:wrap;color:#b0c9bd;font-size:12px;font-weight:600}.pills span:before{content:'✦';color:var(--gold);margin-right:7px}.hero-visual{min-height:390px;display:grid;place-items:center;position:relative}.hero-visual:before{content:'';position:absolute;width:80%;aspect-ratio:1;background:#43968a;opacity:.12;filter:blur(80px);border-radius:50%}.preview-hexes{position:relative;display:grid;grid-template-columns:repeat(5,64px);grid-template-rows:repeat(5,61px);transform:rotate(-14deg) scale(1.1);filter:drop-shadow(6px 23px 15px #0006)}.preview-hex{width:88px;height:100px;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border:0;position:absolute;display:grid;place-items:center;font-size:36px;box-shadow:inset 0 0 20px #0008}.preview-hex:after{content:'';position:absolute;inset:5px;clip-path:inherit;border:2px solid #ffffff3d}.hex-a{background:linear-gradient(120deg,#4b9477,#27604c)}.hex-b{background:linear-gradient(120deg,#ddb76c,#aa7b42)}.hex-c{background:linear-gradient(120deg,#b66658,#8c493e)}.hex-d{background:linear-gradient(120deg,#8ea78b,#65846d)}.hex-e{background:linear-gradient(120deg,#6f91a0,#375c6c)}.floating-card{position:absolute;background:#f9efda;color:#1d4343;border-radius:14px;padding:14px 19px;box-shadow:0 18px 45px #0007;z-index:2;font-weight:800;display:flex;gap:11px;align-items:center}.floating-card span{font-size:23px}.floating-card.top{right:0;top:30px;transform:rotate(5deg)}.floating-card.bottom{left:-10px;bottom:34px;transform:rotate(-6deg)}.float-sub{display:block;font-size:11px;color:#61817a;font-weight:600}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:32px 0 20px}.section-heading h2{margin:0}.section-heading .eyebrow{margin-bottom:9px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.feature-card,.panel{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow)}.feature-card{padding:25px 26px 22px}.feature-icon{width:49px;height:49px;background:rgba(218,168,101,.13);border-radius:14px;display:grid;place-items:center;font-size:25px;margin-bottom:19px}.feature-card h3{margin-bottom:8px}.feature-card p{margin:0;line-height:1.7;font-size:13px}.lobby-grid{display:grid;grid-template-columns:1.45fr .55fr;gap:20px;margin:58px 0 70px}.panel{padding:24px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.panel-head h3{margin:0}.room-list{display:flex;flex-direction:column;gap:11px;min-height:110px}.room-row{border:1px solid var(--stroke);border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:14px;background:#ffffff08}.room-row strong{display:block;font-size:14px}.room-row small{display:block;color:#92b1a7;margin-top:2px}.room-meta{display:flex;align-items:center;gap:14px}.empty-state{text-align:center;padding:33px 15px;color:#b5c5bc}.empty-state .empty-icon{font-size:32px;opacity:.7;margin-bottom:7px}.side-cta{height:100%;background:linear-gradient(140deg,#2e655b,#234843);border:1px solid #427469;border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.side-cta .ico{font-size:40px;margin-bottom:18px}.side-cta h3{font-size:25px;margin-bottom:7px}.side-cta p{line-height:1.8}.footer{display:flex;justify-content:space-between;align-items:center;padding:24px 0 35px;color:#88a8a0;font-size:12px;border-top:1px solid var(--stroke)}
/* Auth overlay */.overlay{position:fixed;inset:0;background:rgba(4,16,19,.82);backdrop-filter:blur(12px);z-index:40;display:grid;place-items:center;padding:20px}.auth-card{width:min(480px,100%);border:1px solid #416c61;background:linear-gradient(160deg,#244c49,#142f34 68%);border-radius:24px;padding:35px;box-shadow:0 40px 120px #000a}.auth-card .brand-icon{width:54px;height:54px;font-size:32px;margin-bottom:19px}.auth-card h2{font-size:31px;margin-bottom:6px}.auth-card p{line-height:1.65}.tabs{display:flex;padding:4px;border-radius:11px;background:#0b282b;margin:25px 0 20px;gap:3px}.tab{border:0;background:transparent;color:#b4ccc3;flex:1;padding:10px 5px;border-radius:8px;font-weight:700}.tab.active{background:#3c7668;color:white}.field{margin-bottom:14px}.field label{display:block;color:#cfddd1;font-size:12px;font-weight:800;margin-bottom:7px}.field input,.field select,.field textarea{background:#0e2a30;color:#fff3dd;width:100%;border:1px solid #45645f;border-radius:10px;min-height:43px;padding:10px 13px;outline:none}.field input::placeholder{color:#779991}.field select option{background:#12353a}.auth-card .btn{margin-top:7px}.auth-card .helper{font-size:11px;text-align:center;margin:15px 0 0;color:#91afa4}
/* Room waiting */.room-layout{padding:42px 0 85px;max-width:920px;margin:auto}.room-header{text-align:center;margin:20px auto 29px}.room-header h1{font-size:clamp(34px,5vw,58px);margin-bottom:14px}.room-id{display:inline-flex;align-items:center;gap:13px;border-radius:12px;background:#eddfc2;color:#244844;font-size:21px;font-weight:900;letter-spacing:.22em;padding:12px 16px}.room-id button{background:#d3c39d;border:0;border-radius:7px;padding:7px 9px;color:#264a43;letter-spacing:0;font-size:12px;font-weight:800}.room-players{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:25px 0}.player-seat{min-height:126px;border:1px solid var(--stroke);border-radius:16px;background:#15353a;padding:20px 10px;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}.player-seat .avatar{width:44px;height:44px;font-size:18px}.player-seat.empty{border-style:dashed;background:#ffffff04;color:#82a19a}.waiting-actions{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}.room-tip{text-align:center;margin-top:25px}
/* Game */.game-shell{max-width:1800px;margin:auto;padding:0 22px 24px}.game-top{height:75px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--stroke)}.game-top .brand{font-size:16px}.game-title{display:flex;align-items:center;gap:15px}.game-title small{display:block;color:#aac6bb;font-size:11px}.game-header-actions{display:flex;align-items:center;gap:10px}.game-grid{display:grid;grid-template-columns:240px minmax(420px,1fr) 305px;gap:18px;align-items:stretch;margin-top:19px;min-height:calc(100vh - 130px)}.game-sidebar,.right-sidebar{display:flex;flex-direction:column;gap:14px}.game-card{background:rgba(21,45,49,.92);border:1px solid var(--stroke);border-radius:17px;padding:17px}.game-card h3{font-size:14px;text-transform:uppercase;letter-spacing:.09em;color:#c7dbd2;margin:0 0 14px}.game-players{display:flex;flex-direction:column;gap:10px}.game-player{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid transparent;border-radius:12px;background:#ffffff06;position:relative}.game-player.turn{background:#eac28913;border-color:#ba975c80}.game-player .avatar{width:35px;height:35px;font-size:15px}.game-player .info{flex:1;min-width:0}.game-player .info strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.game-player .info small{color:#9ab8ab;display:block;font-size:10px}.game-player .score{font-family:Outfit;font-size:22px;font-weight:800;color:var(--gold)}.player-badge{font-size:9px;color:var(--gold);font-weight:800;letter-spacing:.04em}.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mini-stat{border:1px solid var(--stroke);border-radius:11px;padding:10px;text-align:center}.mini-stat b{display:block;font-size:20px;color:#eac38b}.mini-stat small{font-size:10px;color:#a7beb7}.log-list{height:210px;overflow:auto;display:flex;flex-direction:column;gap:10px}.log-line{border-left:2px solid #bb9a64;padding-left:9px;color:#c0d1c7;font-size:11px;line-height:1.6}.game-board-panel{position:relative;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:radial-gradient(circle at 50% 48%,#27728b,#17465c 56%,#11333d);display:flex;flex-direction:column;overflow:hidden;min-height:620px;box-shadow:inset 0 0 130px #051e2699,0 22px 70px #0003}.game-board-panel:before{position:absolute;inset:0;content:'';pointer-events:none;opacity:.18;background-image:radial-gradient(circle, #fff 1px, transparent 2px);background-size:35px 35px}.board-top{position:absolute;top:17px;left:17px;right:17px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;z-index:3}.board-prompt{border:1px solid #ffffff34;background:#0f313bcc;backdrop-filter:blur(7px);border-radius:11px;padding:10px 14px;max-width:360px;font-size:12px;font-weight:700}.board-prompt b{color:var(--gold)}.board-mode{border:1px solid #e2bf81a0;background:#d7aa61;color:#1b3434;border-radius:10px;padding:9px 12px;font-weight:800;font-size:11px}.board-canvas{display:flex;align-items:center;justify-content:center;flex:1;min-height:560px;padding:52px 10px 22px}.board-svg{width:100%;max-width:850px;max-height:75vh;overflow:visible;filter:drop-shadow(0 15px 20px #001a276b)}.tile{stroke:#f8ebc477;stroke-width:3;stroke-linejoin:round;cursor:default}.tile.interactive{cursor:pointer;transition:filter .2s}.tile.interactive:hover{filter:brightness(1.3)}.tile-inner{fill:none;stroke:#ffffff38;stroke-width:1.4;pointer-events:none}.tile-label{font-size:24px;pointer-events:none;dominant-baseline:middle;text-anchor:middle}.tile-number-circle{fill:#fae6bd;stroke:#e2bd7f;stroke-width:2;filter:drop-shadow(0px 2px 2px #001b2850);pointer-events:none}.tile-number{font-family:Outfit,sans-serif;font-size:21px;fill:#3f3b30;text-anchor:middle;dominant-baseline:central;font-weight:900;pointer-events:none}.tile-number.hot{fill:#bf573b}.tile-pips{fill:#866c51;pointer-events:none}.robber-icon{font-size:27px;pointer-events:none;text-anchor:middle;dominant-baseline:middle}.water-ring{fill:none;stroke:#a8eced24;stroke-width:16;pointer-events:none}.vertex-hit,.edge-hit{cursor:pointer;outline:none}.vertex-hit:hover .placement-dot,.vertex-hit:focus-visible .placement-dot{fill:#ffdb96;stroke:#fff;stroke-width:4}.edge-hit:hover .placement-stroke,.edge-hit:focus-visible .placement-stroke{stroke:#f8cf80;stroke-width:14}.placement-dot{fill:#fff8df1c;stroke:#ffffff55;stroke-width:1;pointer-events:none}.placement-stroke{stroke:#ffffff13;stroke-width:18;stroke-linecap:round;pointer-events:none}.road-piece{stroke-width:14;stroke-linecap:round;pointer-events:none;stroke:#152a2c;paint-order:stroke}.road-piece-inner{stroke-width:10;stroke-linecap:round;pointer-events:none}.settlement-piece,.city-piece{stroke:#132e30;stroke-width:3;stroke-linejoin:round;pointer-events:none;filter:drop-shadow(1px 4px 2px #001a276b)}.resource-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:10px 13px 18px;z-index:2}.resource-legend span{display:inline-flex;gap:5px;align-items:center;font-size:11px;color:#e3ecda;background:#092e3990;border:1px solid #ffffff22;border-radius:20px;padding:5px 10px}
.turn-box{border:1px solid #9e7e4d80;background:linear-gradient(140deg,#395144,#233c3e);border-radius:14px;padding:16px}.turn-box strong{display:block;font-size:17px}.turn-box p{margin:6px 0 12px;font-size:12px}.dice-row{display:flex;gap:8px;margin:12px 0;align-items:center}.die{width:50px;height:50px;border-radius:10px;background:#fae8c9;box-shadow:0 4px 0 #bd9866;display:grid;place-items:center;color:#213d3c;font-size:30px;font-weight:900}.dice-sum{color:var(--gold);font-size:23px;font-weight:800;margin-left:5px}.resource-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.resource-stack{min-width:0;border:1px solid #ffffff18;background:#ffffff0c;border-radius:9px;padding:7px 2px;text-align:center}.resource-stack .icon{display:block;font-size:19px}.resource-stack strong{font-size:18px;font-family:Outfit}.resource-stack small{display:block;font-size:9px;color:#9ebcb3;white-space:nowrap;overflow:hidden}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.action-btn{background:#ffffff0a;border:1px solid #ffffff20;color:#e9f1e5;padding:10px 6px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:79px}.action-btn:hover:not(:disabled),.action-btn.active{border-color:var(--gold);background:#b9944426}.action-btn .ico{font-size:23px}.action-btn strong{font-size:12px}.action-btn small{font-size:9px;color:#b7c7b7}.game-control{display:flex;flex-direction:column;gap:9px}.chat-list{height:130px;overflow:auto;display:flex;flex-direction:column;gap:9px}.chat-message{color:#c1d3c8;font-size:11px;word-break:break-word}.chat-message b{color:var(--gold)}.chat-form{display:flex;gap:6px;margin-top:10px}.chat-form input{min-width:0;width:100%;background:#0c292b;border:1px solid #496a65;border-radius:9px;color:white;padding:9px;outline:none;font-size:12px}.chat-form button{border:0;border-radius:9px;background:#ce9f62;color:#193c35;font-weight:900;padding:0 12px}.market-form{display:grid;grid-template-columns:1fr 1fr;gap:8px}.market-form select{width:100%;background:#123238;color:#f6e9d7;border:1px solid #4a6965;border-radius:9px;padding:8px;font-size:11px}.notice{padding:11px 12px;border-radius:10px;background:#c79a5a1b;border:1px solid #cfa4654d;font-size:12px;color:#efd4a7}.trade-notice{background:#2a554c;border:1px solid #5b8e7b;padding:12px;border-radius:12px;font-size:12px}.trade-notice p{margin:5px 0 10px;color:#dbefe1}.end-screen{text-align:center;padding:25px 15px}.end-screen h2{font-size:34px}.end-screen .trophy{font-size:65px}
#toast{position:fixed;bottom:23px;left:50%;transform:translate(-50%,25px);background:#fcf0d6;color:#23453f;padding:12px 21px;border-radius:12px;box-shadow:0 15px 40px #0008;font-weight:800;z-index:100;opacity:0;pointer-events:none;transition:.25s;max-width:92vw;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}.loading-screen{min-height:85vh;display:flex;justify-content:center;align-items:center;flex-direction:column}.loading-screen h1{font-size:34px;letter-spacing:.14em}.loading-screen .mark{font-size:55px;color:var(--gold)}
@media(max-width:1200px){.game-grid{grid-template-columns:190px minmax(360px,1fr) 270px;gap:10px}.game-shell{padding:0 12px}.game-card{padding:12px}.board-canvas{min-height:490px}.game-board-panel{min-height:560px}}
@media(max-width:1000px){.game-grid{grid-template-columns:1fr 300px}.game-sidebar{grid-column:1/-1;flex-direction:row}.game-sidebar .game-card{flex:1}.game-board-panel{min-height:550px}.board-canvas{min-height:500px}.hero{gap:25px}}
@media(max-width:760px){.app-shell{padding:0 17px}.topbar{height:74px}.brand{font-size:15px;letter-spacing:.09em}.brand-icon{width:33px;height:33px;font-size:19px}.online-status{display:none}.hero{grid-template-columns:1fr;padding:55px 0 25px;gap:10px;min-height:auto}.hero .lead{font-size:15px;margin:19px 0 24px}.hero-visual{min-height:300px}.preview-hexes{transform:rotate(-14deg) scale(.81)}.floating-card{font-size:12px}.floating-card.top{right:5px}.floating-card.bottom{left:8px}.cards{grid-template-columns:1fr}.lobby-grid{grid-template-columns:1fr;margin-top:42px}.side-cta{min-height:210px}.footer{gap:8px;flex-direction:column;text-align:center}.panel{padding:18px}.room-players{grid-template-columns:repeat(2,1fr)}.room-layout{padding-top:35px}.room-id{font-size:18px}.game-shell{padding:0 8px}.game-top{height:65px}.game-header-actions .btn{padding:8px 10px;font-size:10px;min-height:35px}.game-title{gap:7px}.game-top .brand{font-size:13px}.game-top .brand-icon{width:29px;height:29px}.game-grid{display:flex;flex-direction:column;gap:9px;margin-top:9px}.game-sidebar{order:2;flex-direction:column}.game-board-panel{order:1;min-height:390px}.right-sidebar{order:3}.board-canvas{min-height:365px;padding:36px 4px 0}.board-svg{max-height:420px}.board-top{top:8px;left:8px;right:8px}.board-prompt{padding:7px 9px;font-size:10px}.board-mode{font-size:9px;padding:7px}.resource-legend{gap:4px;padding:3px 7px 9px}.resource-legend span{font-size:9px;padding:4px 6px}.game-players{display:grid;grid-template-columns:1fr 1fr;gap:7px}.game-player{padding:7px}.mini-stats{grid-template-columns:repeat(4,1fr)}.log-list{height:90px}.right-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:9px}.right-sidebar .turn-box,.right-sidebar .game-card:nth-child(2),.right-sidebar .game-card:nth-child(3),.right-sidebar .game-card:nth-child(4){grid-column:1/-1}.game-card h3{margin-bottom:10px}.game-card{padding:14px}.chat-list{height:90px}.action-grid{grid-template-columns:repeat(4,1fr)}.action-btn{min-height:70px}.auth-card{padding:25px}.game-top .header-link{font-size:10px}}
@media(max-width:390px){.brand{font-size:13px}.user-chip{padding-right:8px}.user-chip .avatar{display:none}.hero-actions .btn{flex:1}.game-board-panel{min-height:345px}.board-canvas{min-height:320px}.game-player .avatar{display:none}.action-grid{grid-template-columns:repeat(2,1fr)}}