.games-hero{background:radial-gradient(circle at 87% 25%,#d29a4d64,transparent 36%),linear-gradient(112deg,#49311d,#2a211a 72%)}
.games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.game-card{overflow:hidden;border:1px solid #f0c89025;border-radius:18px;background:#2a211a;box-shadow:0 14px 42px #0002}.game-cover{height:210px;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at center,#c393485c,transparent 65%),linear-gradient(120deg,#4b3b26,#312b20)}.game-pill{position:absolute;right:17px;top:16px;background:#241b15cf;border:1px solid #f2ce9c44;border-radius:99px;padding:7px 11px;font-size:11px}.cover-cards{display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 15px 25px #0007)}.cover-cards i{display:block;width:96px;height:142px;border:5px solid #f8e0b9;border-radius:11px;background-position:center;background-size:cover;box-shadow:0 5px 20px #0005}.cover-cards i:first-child{background-image:url('/assets/cards/wood.png');transform:rotate(-17deg) translate(17px,13px)}.cover-cards i:nth-child(2){background-image:url('/assets/cards/wheat.png');z-index:2;transform:translateY(-13px)}.cover-cards i:last-child{background-image:url('/assets/cards/ore.png');transform:rotate(17deg) translate(-17px,13px)}.game-card-body{padding:22px}.game-card-body h2{font-size:27px;margin:0 0 8px}.game-card-body p:not(.eyebrow){color:#d6c5ae;font-size:13px;min-height:60px}.game-card-body button{margin-top:5px}.second-cover{background:radial-gradient(circle,#93765864,transparent 55%),linear-gradient(135deg,#342a27,#292525);color:#c1a782;font-size:85px}.coming-soon{opacity:.72}
.game-rules{border:1px solid #f0c89029;border-radius:14px;background:#2b2118;margin:18px 0;padding:16px 18px;color:#d8c5a9;font-size:13px}.game-rules summary{color:#f0cb8d;font-weight:750;cursor:pointer}.rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 23px;line-height:1.6}.rules-grid strong{color:#f8e8ce}
.entry-panel{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;padding:24px;border:1px solid #f0c8902c;border-radius:16px;background:#2a211a}.entry-column h3{font-size:21px;margin-bottom:16px}.entry-column label{display:block;margin:10px 0 6px;font-size:12px;color:#d8c5aa}.entry-column input,.game-form select,.trade-form select,.trade-form input,.chat-form input{display:block;width:100%;border-radius:9px;background:#1b1916;color:#fff5e8;border:1px solid #f0c89038;padding:11px;outline:none}.entry-column input:focus,.game-form select:focus,.trade-form select:focus,.trade-form input:focus,.chat-form input:focus{border-color:#edbc78}.entry-column button{margin-top:16px}.entry-divider{display:grid;place-items:center;color:#ad9272;font-size:12px}
.room-head{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #f0c8902b;border-radius:15px;padding:18px 20px;background:#2a211a;margin:18px 0}.room-head h2{font-size:27px;margin:3px 0}.room-head p:not(.eyebrow){color:#ccba9e;font-size:12px;margin:0}.room-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.invite-code{font-size:21px;letter-spacing:.18em;color:#f1c47e;font-weight:850;padding:7px 11px;background:#1d1712;border-radius:9px}.game-toolbar{display:flex;align-items:center;gap:26px;border:1px solid #f0c89028;border-radius:12px;background:#241e19;padding:10px 16px;margin-bottom:16px}.game-toolbar>div{display:flex;gap:11px;align-items:center;white-space:nowrap}.game-toolbar span{color:#bdac91;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.game-toolbar strong{color:#f4d9a5;font-size:21px;font-variant-numeric:tabular-nums}.game-toolbar strong.timer-low{color:#ff9485;animation:timer-pulse .8s infinite alternate}.game-toolbar details{font-size:12px;color:#c9b99d;min-width:0}.game-toolbar summary{cursor:pointer;color:#f0ca8e;font-weight:700}.game-toolbar p{margin:9px 0 3px;line-height:1.6}
.lobby-panel{border:1px solid #f0c89024;border-radius:16px;background:#2a211a;padding:25px}.lobby-panel p{font-size:13px;color:#cbbb9d}.lobby-player-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:20px 0}.lobby-player{border:1px solid #f0c89024;border-radius:11px;padding:14px;background:#ffffff08;display:flex;align-items:center;gap:10px}.player-orb{height:24px;width:24px;border-radius:50%;border:3px solid #fff7e0b0;flex:none}.lobby-player strong{font-size:13px}.lobby-player small{display:block;color:#c8b79e;font-size:11px}
.game-dashboard{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(325px,.6fr);gap:17px;align-items:start}.board-column,.game-side{min-width:0}.guide-strip{border:1px solid #efc08355;background:linear-gradient(90deg,#76512b55,#30251a);border-radius:12px;padding:13px 16px;margin-bottom:12px;display:flex;align-items:center;gap:15px}.guide-strip span{color:#f5c87e;font-size:10px;font-weight:850;letter-spacing:.14em;white-space:nowrap}.guide-strip strong{font-size:13px;font-weight:600;color:#fff1d4}.board-panel{overflow:auto;min-height:620px;border:1px solid #d8ae7455;background:radial-gradient(circle at 50% 46%,#225974,#12364d 65%,#132b39);border-radius:17px;position:relative;box-shadow:inset 0 0 90px #041b2b8c,0 18px 40px #0003}.board-caption{position:absolute;z-index:2;top:15px;left:16px;font-size:10px;font-weight:800;letter-spacing:.12em;background:#102533dc;padding:8px 10px;border-radius:8px;color:#f6d6a0;pointer-events:none}.game-board{display:block;width:100%;min-width:620px;height:auto;filter:drop-shadow(0 8px 10px #001521aa)}.game-board .tile-group{cursor:default}.game-board .tile-group.legal-tile{cursor:pointer}.game-board .tile-border{stroke:#e7d0a5;stroke-width:.055}.game-board .tile-group:hover .tile-border{stroke:#fff7df;stroke-width:.09}.game-board .tile-group.legal-tile .tile-border{stroke:#fff2a5;stroke-width:.12;animation:legal-glow 1.1s ease-in-out infinite alternate}.game-board .number-disc{fill:#f8efdb;stroke:#96764e;stroke-width:.045;filter:drop-shadow(0 .05px .12px #2d251e)}.game-board .number-disc.hot{fill:#f2c688}.game-board .number-text{font-size:.33px;fill:#34291d;font-weight:850;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.game-board .desert-icon{font-size:.48px;fill:#f8e7ae;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.game-board .storm-marker circle{fill:#27313a;stroke:#ffd98d;stroke-width:.05}.game-board .storm-marker text{fill:#ffd98d;font-size:.25px;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.game-board .board-edge{stroke:#fff7d62c;stroke-width:.10;stroke-linecap:round}.game-board .board-edge.owned-edge{stroke:var(--owner);stroke-width:.20;filter:drop-shadow(0 0 .06px #fff8)}.game-board .board-edge.legal-edge{stroke:#fff3ac;stroke-width:.19;cursor:pointer;filter:drop-shadow(0 0 .09px #ffe9a7);animation:legal-glow 1.2s ease-in-out infinite alternate}.game-board .board-edge.legal-edge:hover{stroke:#fff;stroke-width:.25}.game-board .board-vertex{fill:#ffffff20;stroke:#fff7da4a;stroke-width:.04}.game-board .board-vertex.legal-vertex{fill:#fce3a4b8;stroke:#fff;stroke-width:.085;cursor:pointer;filter:drop-shadow(0 0 .14px #ffde8c);animation:legal-glow 1.2s ease-in-out infinite alternate}.game-board .board-vertex.legal-vertex:hover{fill:#fff;stroke-width:.12}.game-board .board-building{stroke:#fff5dc;stroke-width:.05;filter:drop-shadow(0 .08px .07px #0016)}.game-board .board-building.legal-vertex{cursor:pointer;filter:drop-shadow(0 0 .15px #fff);animation:legal-glow 1.2s ease-in-out infinite alternate}@keyframes legal-glow{to{opacity:.64}}
.hand-panel{border:1px solid #f0c8902a;border-radius:15px;background:#2a211a;padding:16px;margin-top:13px}.hand-heading{display:flex;align-items:center;justify-content:space-between}.hand-heading h3{font-size:16px;margin:0 0 12px}.hand-heading span{font-size:11px;color:#cdbb9f}.resource-hand{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.resource-card{position:relative;min-width:0;aspect-ratio:3/4;border-radius:9px;overflow:hidden;border:2px solid #f2d7a780;background:#1a1816;box-shadow:0 5px 12px #0005;transition:transform .2s ease,filter .2s ease}.resource-card:hover{transform:translateY(-6px) rotate(-2deg)}.resource-card.empty{filter:grayscale(.6);opacity:.7}.resource-card>img{width:100%;height:100%;object-fit:cover}.resource-card-caption{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:4px;align-items:center;background:linear-gradient(transparent,#1a140ff0 36%);padding:20px 7px 7px;font-size:11px}.resource-card-caption strong{overflow:hidden;text-overflow:ellipsis}.resource-card-caption span{border-radius:50%;background:#f1d39b;color:#352213;min-width:23px;height:23px;display:grid;place-items:center;font-weight:850}
.game-side{display:grid;align-content:start;gap:12px;max-height:1100px;overflow:auto;padding-right:3px}.side-panel{border:1px solid #f0c89025;border-radius:14px;background:#2a211a;padding:16px}.side-panel h3{font-size:15px;margin:0 0 11px}.side-panel p{font-size:12px;color:#cfbfa7;margin-bottom:9px}.section-heading{display:flex;justify-content:space-between;align-items:center}.section-heading span{font-size:10px;color:#baaa92}.dice-area{display:flex;align-items:center;gap:10px;background:#1e1b17;border:1px solid #f0c89022;border-radius:11px;padding:11px;margin:8px 0 12px}.die{width:50px;height:50px;filter:drop-shadow(0 4px 3px #0006)}.dice-area strong{font-size:24px;color:#f4c884;margin-left:auto}.dice-area span{font-size:12px;color:#bcae96;margin-left:auto}.dice-area.rolling .die{animation:dice-tumble .75s cubic-bezier(.22,.85,.3,1)}.dice-area.rolling .die:nth-child(2){animation-delay:.08s}@keyframes dice-tumble{0%{transform:rotate(-50deg) translateY(-20px) scale(.75)}50%{transform:rotate(90deg) translateY(8px)}100%{transform:rotate(0) translateY(0)}}.turn-panel .primary-button,.turn-panel .secondary-button{width:100%}
.player-list,.event-list,.chat-list{display:grid;gap:8px}.player-line{display:flex;align-items:center;gap:9px;border-radius:9px;padding:8px;background:#ffffff07}.player-line.current{border:1px solid #e8b56c66;background:#c8893922}.player-line .player-orb{width:22px;height:22px;border-width:2px}.player-line>span:nth-child(2){min-width:0}.player-line strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis}.player-line small{display:block;color:#bea98a;font-size:10px}.player-line>b{font-size:19px;color:#f5cd86;margin-left:auto;white-space:nowrap}.player-line>b small{display:inline;font-weight:400}.achievements{font-size:11px;color:#e8c787;margin-top:10px;line-height:1.6}
.build-list{display:grid;gap:6px}.build-action{display:flex;align-items:center;justify-content:space-between;gap:7px;border:1px solid #f0c8902b;background:#ffffff09;border-radius:9px;color:#f6ead4;padding:9px;text-align:left}.build-action:hover:not(:disabled){background:#f0c89020;border-color:#f0c89066}.build-action.selected{background:#c28c4d4f;border-color:#f3c686}.build-action>span:first-child{display:grid;gap:3px}.build-action strong{font-size:12px}.build-action small{color:#c4b397;font-size:10px}.cost-list{display:flex;gap:3px;flex:none}.cost-token{width:23px;height:31px;position:relative;border-radius:4px;overflow:hidden;border:1px solid #ffe4b888}.cost-token img{width:100%;height:100%;object-fit:cover}.cost-token small{position:absolute;bottom:0;right:0;background:#1a1714dd;color:#fff3d9;padding:1px 3px;font-size:9px}.development-hand{display:flex;gap:8px;overflow-x:auto;margin-top:12px;padding-bottom:7px}.development-card{flex:0 0 84px;border:1px solid #e4b97888;border-radius:8px;overflow:hidden;background:#1c1a18;position:relative;min-height:118px;padding-bottom:8px}.development-card img{width:100%;height:62px;object-fit:cover}.development-card span,.development-card small{display:block;padding:2px 5px;font-size:10px}.development-card button{margin:3px 5px;padding:3px 7px;border-radius:5px;background:#d5a367;color:#23190e;border:0;font-weight:750;font-size:10px}
.panel-intro{margin-top:12px}.game-form{display:grid;grid-template-columns:1fr 1fr auto;gap:5px;align-items:center}.game-form select,.trade-form select,.trade-form input{padding:8px;font-size:11px}.game-form button,.trade-form button,.chat-form button{border:1px solid #f0c89045;background:#715230;border-radius:8px;color:#fff3dc;padding:8px;font-size:11px;font-weight:700;white-space:nowrap}.game-form button:hover,.trade-form button:hover,.chat-form button:hover{background:#90683d}.trade-form{display:grid;gap:7px}.trade-fields{display:grid;grid-template-columns:1fr 1fr;gap:7px}.trade-fields label{font-size:10px;color:#cdb99d}.trade-fields select{margin:4px 0}.trade-request{border:1px solid #e2ba7a80;background:#ab874022;padding:10px;border-radius:9px;margin-top:11px}.trade-request button{margin-right:7px;padding:6px 9px;border-radius:6px;border:1px solid #f0c8906b;background:#7b5b33;color:#fff3df;font-size:11px}.event-list,.chat-list{max-height:170px;overflow:auto;font-size:11px}.event-list div{color:#d0bea2;border-bottom:1px solid #ffffff12;padding-bottom:7px}.chat-list b{color:#f2ca8d}.chat-form{display:flex;gap:5px;margin-top:9px}.chat-form input{padding:8px;font-size:11px;min-width:0}
@keyframes timer-pulse{to{opacity:.5}}
@media(max-width:1100px){.game-dashboard{grid-template-columns:minmax(0,1fr)}.game-side{max-height:none;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.games-grid{grid-template-columns:1fr}.rules-grid{grid-template-columns:1fr}.entry-panel{grid-template-columns:1fr;gap:10px}.entry-divider{padding:5px}.room-head{align-items:flex-start;flex-direction:column}.room-actions{width:100%}.game-side{grid-template-columns:1fr}.game-toolbar{align-items:flex-start;flex-direction:column;gap:9px}.board-panel{min-height:380px}.game-board{min-width:510px}.resource-hand{gap:3px}.resource-card-caption{padding:15px 3px 4px;font-size:9px}.resource-card-caption span{min-width:17px;height:17px}.guide-strip{align-items:flex-start;flex-direction:column;gap:3px}}
/* Available intersections remain visible without obscuring the illustrated board. */
.game-board .board-vertex.legal-vertex{fill:#ffe2a478;stroke:#fff1bf99;stroke-width:.065;filter:drop-shadow(0 0 .045px #ffe2a4)}
.game-board .board-vertex.legal-vertex:hover{fill:#fff1c9;stroke:#fff;stroke-width:.11;filter:drop-shadow(0 0 .12px #fff4bb)}