@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{font-family:'DM Sans',Arial,sans-serif;color:#193b3c;background:#f6f2e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.app-shell{max-width:1600px;margin:auto;min-height:100vh}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:#fffaf1;border-bottom:1px solid #e5dfd1}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#173d3d;font-family:Georgia,serif;font-weight:800;font-size:28px;letter-spacing:.06em;line-height:.8}.brand small{display:block;margin-top:8px;font-family:'DM Sans',sans-serif;font-size:8px;font-weight:700;letter-spacing:.27em;text-transform:uppercase}.brand-mark{font-size:46px;color:#d68c56;line-height:1}.top-actions{display:flex;align-items:center;gap:24px}.edition{font-size:12px;font-weight:700;color:#82928c;letter-spacing:.08em;text-transform:uppercase}.icon-button{width:34px;height:34px;border-radius:50%;border:1px solid #d6dcd4;background:transparent;color:#476b6a;font-weight:700;font-size:18px}.icon-button:hover{background:#e9f0ea}.main-layout{display:grid;grid-template-columns:minmax(0,1fr) 376px;gap:30px;padding:28px 42px 48px}.game-area{min-width:0}.board-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:6px 0 24px}.eyebrow,.section-kicker{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:#bb8057;font-weight:800;margin:0 0 8px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:'Playfair Display',Georgia,serif}h1{font-size:35px;line-height:1.1;margin-bottom:0;color:#163e40}h2{font-size:26px;margin-bottom:7px}.board-caption{font-size:12px;color:#8b9991;padding-bottom:4px;white-space:nowrap}.board-frame{height:min(67vw,690px);min-height:500px;max-height:690px;position:relative;overflow:hidden;display:grid;place-items:center;border-radius:22px;background:radial-gradient(circle at 30% 20%,#368c91,#1d626d 65%,#164952);box-shadow:0 20px 45px #174a5333,inset 0 0 0 8px #ffffff1b}.sea-texture{position:absolute;inset:0;opacity:.15;background-image:repeating-radial-gradient(ellipse at 20% 25%,transparent 0 25px,#d7f0e8 26px 27px,transparent 28px 55px),repeating-radial-gradient(ellipse at 78% 77%,transparent 0 34px,#d7f0e8 35px 36px,transparent 37px 67px)}#board{z-index:1;width:min(100%,760px);height:100%;max-height:690px;filter:drop-shadow(0 12px 7px #123d4566)}.board-watermark{position:absolute;bottom:19px;left:24px;color:#ffffff69;letter-spacing:.28em;font-size:10px;font-weight:800}.tile polygon{stroke:#f7e9ca;stroke-width:5;stroke-linejoin:round}.tile-wood polygon{fill:#558c64}.tile-brick polygon{fill:#c97e5d}.tile-wheat polygon{fill:#e7bd63}.tile-sheep polygon{fill:#a9bb7d}.tile-ore polygon{fill:#8f9da1}.tile-desert polygon{fill:#d5bd86}.tile text{text-anchor:middle;pointer-events:none}.tile-icon{font-family:Georgia,serif;fill:#fffdf1;font-size:27px;font-weight:700;dominant-baseline:middle}.tile-name{fill:#fffdf5;font-size:11px;font-weight:800;letter-spacing:.07em;dominant-baseline:middle;text-shadow:0 1px 2px #173b3d70}.number-disc{fill:#f7efd9;stroke:#d5c6a3;stroke-width:2}.tile-number{fill:#354b44;font-size:16px;font-weight:800;dominant-baseline:middle}.tile-number.hot{fill:#bc674a}.edge-hit{stroke:transparent;stroke-width:22}.edge-visible{stroke:transparent;stroke-width:11;stroke-linecap:round;pointer-events:none}.edge.available{cursor:pointer}.edge.available .edge-visible{stroke:#f9f0cfaa;stroke-width:8;stroke-dasharray:8 8}.edge.available:hover .edge-visible{stroke:#fff}.building-shadow{fill:#19454b99}.building-fill{stroke:#fff8e8;stroke-width:3}.building text{fill:#28464a;font-size:22px;text-anchor:middle;dominant-baseline:middle;pointer-events:none;font-weight:900}.building.available{cursor:pointer}.building.available .building-fill{stroke:#fff;stroke-width:5}.spot{cursor:pointer}.spot circle:first-child{fill:#f8efcf;stroke:#406367;stroke-width:2}.spot circle:last-child{fill:#b68d65;pointer-events:none}.spot:hover circle:first-child{fill:#fff;stroke:#d88753;stroke-width:4}.board-legend{display:flex;justify-content:center;gap:28px;margin-top:18px;color:#7e8e88;font-size:11px;font-weight:700}.board-legend span{display:flex;align-items:center;gap:7px}.legend-dot{display:inline-block;border-radius:50%;background:#e9aa73;border:2px solid #fff;box-shadow:0 0 0 1px #bfccc4}.settlement-dot{width:12px;height:12px}.city-dot{width:16px;height:16px}.legend-line{width:17px;height:5px;background:#e9aa73;border-radius:5px}.sidebar{min-width:0}.players{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}.player-card{display:flex;align-items:center;gap:9px;min-width:0;padding:12px 10px;border-radius:13px;background:#fffaf4;border:1px solid #e8e3d8}.player-card.active{background:#fffdf9;border-color:#d5b99c;box-shadow:0 4px 16px #73604913}.avatar{display:grid;place-items:center;flex:none;width:31px;height:31px;border-radius:9px;background:var(--player-color);color:#214046;font-size:15px;font-weight:800}.player-info{min-width:0;line-height:1.1}.player-info strong,.score strong{display:block;font-size:12px;white-space:nowrap}.player-info small,.score small{display:block;font-size:9px;color:#9ba79e;margin-top:5px;white-space:nowrap}.score{margin-left:auto;text-align:right}.score strong{font-size:21px;font-family:Georgia,serif}.turn-card,.resource-section,.actions-section,.journal{background:#fffdf8;border:1px solid #e6e2d8;border-radius:17px;padding:20px;margin-bottom:13px}.turn-card{background:#153e42;color:#fff;border-color:#153e42;padding:23px;box-shadow:0 12px 28px #183f4220}.turn-card .section-kicker{display:flex;justify-content:space-between;color:#d9ae7e}.turn-card .section-kicker span{color:#9ab9b7;letter-spacing:.05em}.turn-card h2{font-size:24px;line-height:1.2}.turn-card p{font-size:12px;color:#bdd1cc;line-height:1.55;min-height:37px;margin-bottom:18px}.dice-row{display:flex;align-items:center;gap:9px}.dice{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:8px;background:#fffaf0;color:#183f43;font-size:25px;font-weight:800;box-shadow:0 3px 0 #b5c7c0}.primary-button{flex:1;min-height:42px;border:0;border-radius:9px;background:#dca365;color:#153e42;font-weight:800;font-size:12px}.primary-button:not(:disabled):hover{background:#efbd81}.turn-footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid #ffffff25;font-size:10px;color:#9ec0bb}.text-button{border:0;background:transparent;color:#e8b47d;font-size:11px;font-weight:800;padding:0}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.section-title h3{font-family:Georgia,serif;font-size:18px;margin:0;color:#204247}.section-title>span{font-size:10px;color:#a3ada4}.resources{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.resource-card{min-width:0;display:flex;flex-direction:column;align-items:center;border-radius:10px;padding:10px 2px 8px;background:#eef2e9;color:#426b4d}.resource-brick{background:#f6e9df;color:#b57051}.resource-wheat{background:#f8efd8;color:#b48d3d}.resource-sheep{background:#edf2e2;color:#859d58}.resource-ore{background:#e9eeee;color:#71848b}.resource-icon{height:24px;font-size:19px;font-family:Georgia,serif}.resource-name{font-size:9px;font-weight:800;white-space:nowrap}.resource-card strong{font-size:17px;line-height:1.2;margin-top:5px}.actions-section{padding-bottom:16px}.build-actions{display:grid;gap:7px}.build-button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 10px;background:#f7f5ed;border:1px solid #edeae0;border-radius:9px;color:#234347}.build-button:not(:disabled):hover,.build-button.selected{border-color:#d3a671;background:#fff6e7}.build-icon{display:grid;place-items:center;width:33px;height:33px;border-radius:8px;background:#e6eee6;color:#61806d;font-size:21px;flex:none}.build-button strong,.build-button small{display:block}.build-button strong{font-size:12px}.build-button small{font-size:9px;color:#9aa59a;margin-top:2px;line-height:1.3}.build-arrow{margin-left:auto;color:#a3b1a8}.trade-box{margin-top:14px;padding-top:13px;border-top:1px solid #e8e6de}.trade-heading{display:flex;align-items:center;gap:7px;font-size:12px}.trade-heading>span{color:#b4875e;font-size:18px}.trade-heading small{margin-left:auto;color:#a4ada7}.trade-controls{display:flex;align-items:center;gap:5px;margin-top:9px}.trade-controls select{min-width:0;width:30%;padding:7px 4px;border:1px solid #e4e4db;border-radius:6px;background:#fff;color:#3b5958;font-size:10px}.trade-controls>span{color:#a3aaa2}.trade-controls button{flex:1;padding:8px 4px;border:0;border-radius:6px;background:#e6e9dd;color:#315b57;font-size:10px;font-weight:800}.trade-controls button:not(:disabled):hover{background:#d6e1cb}.journal{padding-bottom:12px}.journal ol{list-style:none;padding:0;margin:0}.journal li{position:relative;padding:8px 0 8px 16px;border-top:1px solid #efeee7;color:#6d817b;font-size:10px;line-height:1.4}.journal li:before{content:'';position:absolute;left:0;top:14px;width:5px;height:5px;border-radius:50%;background:#dba36f}.reset-button{display:block;margin:12px auto;border:0;background:transparent;color:#97a39a;font-size:11px;text-decoration:underline}.reset-button:hover{color:#bd7959}dialog{width:min(520px,calc(100% - 30px));padding:27px;border:1px solid #d4d6cb;border-radius:18px;box-shadow:0 25px 80px #183b3c55;color:#294446;background:#fffdf8}dialog::backdrop{background:#0f373bbb}.dialog-head{display:flex;justify-content:space-between;align-items:start}.dialog-head h2{margin-bottom:15px}dialog p,dialog li{font-size:13px;line-height:1.65}dialog ul{padding-left:20px}dialog li{margin-bottom:6px}
@media(max-width:1100px){.main-layout{grid-template-columns:minmax(0,1fr) 336px;padding:24px;gap:22px}.topbar{padding:0 24px}.board-frame{min-height:440px}.board-caption{display:none}}@media(max-width:850px){.main-layout{grid-template-columns:1fr;max-width:760px;margin:auto}.board-frame{height:min(90vw,690px);min-height:350px}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}.players,.turn-card,.resource-section,.actions-section,.journal{margin:0}.players{grid-column:1/-1}.turn-card,.actions-section{grid-row:span 2}.reset-button{grid-column:1/-1}}@media(max-width:600px){.topbar{height:72px;padding:0 16px}.brand{font-size:23px}.brand-mark{font-size:39px}.edition{display:none}.main-layout{padding:18px 12px 30px;gap:20px}.board-heading{margin:0 5px 15px}h1{font-size:27px}.board-frame{min-height:0;height:calc(100vw - 24px);border-radius:14px}.board-legend{gap:11px;flex-wrap:wrap;font-size:9px}.sidebar{display:block}.players,.turn-card,.resource-section,.actions-section,.journal{margin-bottom:11px}.reset-button{margin:13px auto}.tile-name{font-size:12px}}

/* Painted terrain and tactile cardboard edges. */
.tile .tile-frame{fill:#d9ba82;stroke:#62452e;stroke-width:2.5;stroke-linejoin:round}
.tile .tile-art{pointer-events:none}
.tile .tile-inner-stroke{fill:none;stroke:#f7e2b5;stroke-width:2;stroke-linejoin:round;pointer-events:none}
.tile .number-disc-shadow{fill:#37271c99;filter:blur(2px)}
.tile .number-disc{fill:#f5ecd3;stroke:#6a5037;stroke-width:2.2;filter:drop-shadow(0 2px 2px #30251566)}
.tile .tile-number{font-family:Georgia,serif;font-size:20px;font-weight:800;fill:#3d3125;dominant-baseline:middle}
.tile .tile-number.hot{fill:#a92f27}
.tile .number-pip{fill:#594430;pointer-events:none}
.tile-wood .tile-frame{fill:#79936e}.tile-sheep .tile-frame{fill:#bac796}.tile-wheat .tile-frame{fill:#d9b66b}.tile-brick .tile-frame{fill:#c78760}.tile-ore .tile-frame{fill:#929994}.tile-desert .tile-frame{fill:#d4bb86}

/* Illustrated resource cards. */
.resource-card{position:relative;min-height:91px;padding:7px 2px 8px;border:1px solid #d9cbb0;border-top:4px solid var(--accent);box-shadow:0 2px 0 #d4c8ad;background:linear-gradient(180deg,#fffdf3,#f6f0df);color:#344c47}
.resource-wood{--accent:#568361}.resource-brick{--accent:#c97a58}.resource-wheat{--accent:#d8ad55}.resource-sheep{--accent:#9eaf6c}.resource-ore{--accent:#8a999c}
.resource-card .resource-icon{display:block;width:42px;height:42px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 1px #59473530)}
.resource-card .resource-name{margin-top:1px;font-size:9px;color:#56675e}
.resource-card strong{margin-top:3px;font-family:Georgia,serif;font-size:17px;color:#273e3b}

[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.notice{max-width:1000px;margin:18px auto 0;padding:14px 20px;background:#e4eee0;border:1px solid #cbd9c4;border-radius:10px;font-size:14px;line-height:1.5}
.notice.error{background:#fbe9df;border-color:#deb9a1;color:#843e2b}
.welcome-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center;max-width:1080px;padding:90px 32px;margin:auto;min-height:calc(100vh - 88px)}
.welcome-copy h1{font-size:44px;line-height:1.2;margin:16px 0 24px}.welcome-copy>p:not(.eyebrow){font-size:16px;line-height:1.7;max-width:430px;color:#728579;margin-bottom:22px}
.welcome-resources{display:flex;gap:12px;margin:24px 0}.welcome-resources img{width:50px;height:50px;filter:drop-shadow(0 3px 2px #67573724)}
.welcome-caption{font-size:12px;color:#9b855e}
.entry-card{background:#fffdf6;padding:32px;border:1px solid #ded7c5;border-radius:20px;box-shadow:0 16px 45px #36504a12}.entry-card h2{font-size:29px}.entry-card>p:not(.eyebrow){font-size:13px;color:#7b897d;line-height:1.6}
.entry-card label{display:block;font-size:13px;font-weight:700;margin:22px 0 8px}.entry-card input{width:100%;border:1px solid #d9d9ca;border-radius:9px;padding:13px 14px;background:#fffefa;font:inherit;color:#234347}.entry-card input:focus{outline:2px solid #62988c;outline-offset:2px}
.entry-card .primary-button{display:block;width:100%;margin:16px 0;min-height:48px;font-size:14px}.entry-card>a{display:inline-block;color:#597d72;font-size:13px;margin:0 0 14px}
.entry-note{font-size:12px!important;color:#859186;line-height:1.6;margin:16px 0 0}
.room-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 22px;margin:24px 42px 0;border:1px solid #e0dacb;border-radius:14px;background:#fffdf6}.room-bar .eyebrow{display:block;margin:0 0 4px;font-size:10px}.connection-status{font-size:11px;color:#608969}.connection-status.offline{color:#b47748}
.share-controls{display:flex;gap:8px;align-items:center;flex:1;max-width:520px}.share-controls input{width:100%;min-width:0;padding:10px;border:1px solid #e3dfd4;border-radius:7px;background:#f5f3e9;color:#708478;font-size:12px}.share-controls button{flex:none;border:0;border-radius:7px;padding:12px;background:#1e5555;color:#fff7e7;font-size:11px;font-weight:700}
.lobby-panel{max-width:680px;margin:55px auto;padding:30px}.lobby-panel h1{margin:10px 0 18px}.lobby-panel>p:not(.eyebrow){color:#748477;line-height:1.6;font-size:14px}.lobby-members{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}.lobby-member{display:flex;align-items:center;gap:12px;padding:18px;border:1px solid #e1daca;background:#fffdf7;border-radius:12px;min-width:0}.lobby-member>div{min-width:0}.lobby-member strong{display:block;font-size:14px;overflow-wrap:anywhere}.lobby-member small{display:block;margin-top:5px;color:#8f9d8f;font-size:10px}.lobby-member .avatar{width:40px;height:40px}
.lobby-panel>.primary-button{min-height:46px;padding:0 26px;font-size:14px}.player-info strong{overflow:hidden;text-overflow:ellipsis}.player-info small{font-size:8px}.player-card .avatar{width:28px;height:28px}.player-card{gap:7px}
@media(max-width:850px){.welcome-layout{gap:30px;padding:50px 24px}.welcome-copy h1{font-size:34px}.room-bar{margin:20px 24px 0}.notice{margin:15px 24px 0}.entry-card{padding:24px}}
@media(max-width:600px){.welcome-layout{display:block;padding:34px 20px}.welcome-copy h1{font-size:32px}.welcome-copy>p:not(.eyebrow){font-size:14px;margin-bottom:12px}.welcome-resources{margin:18px 0}.welcome-resources img{width:42px;height:42px}.entry-card{margin-top:28px}.room-bar{margin:16px 12px 0;padding:14px;display:block}.share-controls{margin-top:12px;max-width:none}.share-controls button{font-size:10px;padding:12px 8px}.lobby-panel{padding:20px;margin:25px auto}.lobby-members{grid-template-columns:1fr}.notice{margin:12px 12px 0}.lobby-panel>.primary-button{width:100%}}