:root{--ink:#211a15;--muted:#75695e;--paper:#f7f0e4;--paper-deep:#ece0ce;--cream:#fffaf1;--wood:#241a14;--wood-soft:#37261d;--terracotta:#b95635;--terracotta-dark:#84361f;--gold:#d7ad60;--line:#4831222e;--shadow:0 22px 70px #27160c24}*{box-sizing:border-box}html{background:var(--wood);min-width:320px}body{color:var(--ink);background:radial-gradient(circle at 15% 5%,#fff8e2f5,#0000 34rem),linear-gradient(135deg,#f9f1e4 0%,#eee0cc 100%);min-height:100vh;margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #b956356b}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{width:min(1480px,100% - 40px);margin:0 auto;padding:24px 0 30px}.site-header{border-bottom:0;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;min-height:56px;padding:0 4px;display:grid}.brand-lockup{grid-column:2;justify-self:center;align-items:center;gap:14px;display:flex}.header-action{grid-column:3;justify-self:end}.brand-mark{background:var(--terracotta);clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);width:46px;height:46px;position:relative;box-shadow:inset 0 0 0 4px #ffffff40}.brand-mark:before,.brand-mark:after,.brand-mark span{content:"";transform-origin:bottom;background:#ffe9c4;border-radius:4px;width:3px;position:absolute;left:50%}.brand-mark:before{height:22px;top:12px;transform:rotate(0)translate(-50%)}.brand-mark:after{height:17px;top:15px;transform:rotate(55deg)}.brand-mark span{height:17px;top:15px;transform:rotate(-55deg)}.brand-lockup h1{letter-spacing:-.03em;margin:1px 0 0;font-family:Georgia,Times New Roman,serif;font-size:clamp(1.35rem,2vw,1.72rem)}.brand-kicker,.eyebrow{color:var(--terracotta-dark);letter-spacing:.18em;text-transform:uppercase;margin:0;font-size:.68rem;font-weight:800}.primary-action,.secondary-action{cursor:pointer;border:0;border-radius:6px;justify-content:center;align-items:center;gap:10px;min-height:46px;padding:0 22px;font-weight:800;transition:transform .16s,box-shadow .16s,background .16s;display:inline-flex}.primary-action{color:#fff9ef;background:linear-gradient(135deg, var(--terracotta), #9a452b);box-shadow:0 9px 22px #85361f33}.secondary-action{color:var(--terracotta-dark);background:0 0;border:1px solid #84361f59}.primary-action:hover:not(:disabled),.secondary-action:hover:not(:disabled){transform:translateY(-2px)}.primary-action:disabled,.secondary-action:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.hero-copy{grid-template-columns:1.1fr .9fr;align-items:end;gap:60px;padding:10px 4px 18px;display:grid}.hero-copy h2{letter-spacing:-.055em;max-width:850px;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(1.2rem,2vw,2rem);font-weight:500;line-height:.94}.hero-copy>p{max-width:540px;color:var(--muted);margin:0 0 7px auto;font-family:Georgia,Times New Roman,serif;font-size:clamp(1.04rem,1.4vw,1.3rem);line-height:1.55}.tabs{z-index:2;border:1px solid var(--line);background:#eee0ccd1;border-bottom:0;border-radius:10px 10px 0 0;gap:4px;width:fit-content;margin:0 0 -1px 26px;padding:5px;display:flex;position:relative}.tab{min-height:44px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:9px;padding:0 22px;font-weight:750;display:flex}.tab.active{color:var(--ink);background:var(--cream);box-shadow:0 5px 15px #412a191a}.tab-number{color:var(--terracotta);font-size:.66rem;font-weight:900}.workspace{border:1px solid var(--line);box-shadow:var(--shadow);background:#fffaf1cc;border-radius:15px;overflow:hidden}.board-workspace{grid-template-columns:minmax(290px,356px) minmax(0,1fr);min-height:690px;display:grid}.settings-panel,.order-form-card{background:linear-gradient(#fffaf1f2,#f7f0e4f2),repeating-linear-gradient(0deg,#0000 0 12px,#58341c06 13px);padding:32px}.settings-panel{border-right:1px solid var(--line)}.panel-heading h3,.result-heading h3,.extension-panel h3,.order-form-card h3,.turn-result-card h3{letter-spacing:-.025em;margin:5px 0 0;font-family:Georgia,Times New Roman,serif;font-size:1.72rem;font-weight:500}.panel-heading>p:last-child{color:var(--muted);margin:12px 0 0;line-height:1.5}.control-group{border:0;min-width:0;margin:27px 0 0;padding:0}.control-group legend,.field-label{color:#5f5147;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px;font-size:.72rem;font-weight:850;display:block}.segmented-control{background:#e9ddcb;border:1px solid #52392614;border-radius:8px;grid-auto-columns:1fr;grid-auto-flow:column;padding:4px;display:grid}.segment{min-height:39px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:5px;font-weight:800}.segment.active{color:var(--terracotta-dark);background:var(--cream);box-shadow:0 3px 10px #452d1c1f}.size-note{color:var(--muted);flex-wrap:wrap;gap:8px 12px;padding:12px 3px 0;font-size:.76rem;display:flex}.size-note span:before{content:"•";color:var(--gold);margin-right:6px}.control-description{color:var(--muted);margin:9px 2px 0;font-size:.8rem;line-height:1.45}.balance-options{gap:8px;margin-top:24px;display:grid}.balance-card{border:1px solid var(--line);cursor:pointer;background:#ffffff59;border-radius:7px;align-items:flex-start;gap:11px;padding:11px 12px;display:flex}.balance-card.selected{background:#b956350f;border-color:#b9563585}.balance-card input{accent-color:var(--terracotta);margin-top:3px}.balance-card span{gap:2px;display:grid}.balance-card strong{font-size:.86rem}.balance-card small{color:var(--muted);line-height:1.35}.switch-row{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;margin-top:24px;padding-top:21px;display:flex}.switch-row.compact{border-top:0;margin-top:16px;padding-top:0}.switch-row span{gap:3px;display:grid}.switch-row strong{font-size:.86rem}.switch-row small{color:var(--muted);font-size:.72rem;line-height:1.35}.switch-row input{appearance:none;cursor:pointer;background:#cfc2af;border-radius:99px;flex:none;width:41px;height:23px;margin:0;transition:background .15s}.switch-row input:before{content:"";background:#fff;border-radius:50%;width:17px;height:17px;margin:3px;transition:transform .15s;display:block;box-shadow:0 2px 6px #22191240}.switch-row input:checked{background:var(--terracotta)}.switch-row input:checked:before{transform:translate(18px)}.full-width{width:100%;margin-top:27px}.result-panel{background:radial-gradient(circle at 50% 45%,#ffffffd6,#0000 34rem),linear-gradient(135deg,#eadcc8,#d9c7ae);min-width:0;padding:28px 30px 24px}.result-heading{justify-content:space-between;align-items:flex-end;gap:20px;min-height:52px;display:flex}.result-meta{align-items:center;gap:8px;display:flex}.result-meta span,.result-meta time{color:#625448;background:#fffaf19e;border-radius:99px;padding:6px 9px;font-size:.7rem;font-weight:750}.board-shell{border-radius:10px;height:calc(100% - 60px);min-height:610px;margin-top:6px;position:relative;overflow:visible}.catan-board{-webkit-user-select:none;user-select:none;touch-action:none;cursor:grab;width:100%;height:calc(100% - 34px);min-height:0;display:block}.catan-board:active{cursor:grabbing}.zoom-controls{z-index:4;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffaf1e6;border:0;border-radius:7px;align-items:center;gap:3px;margin:0;padding:4px;display:flex;position:absolute;top:12px;right:8px;box-shadow:0 8px 24px #331f1224}.zoom-controls button,.zoom-controls output{background:0 0;border:0;place-items:center;min-width:34px;height:32px;font-weight:850;display:grid}.zoom-controls button{cursor:pointer;border-radius:4px}.zoom-controls button:hover{background:#eadfce}.zoom-controls output{min-width:47px;color:var(--muted);font-size:.7rem}.zoom-controls .zoom-reset{width:auto;color:var(--terracotta-dark);padding:0 9px;font-size:.72rem}.board-hint{color:#493629a8;text-align:center;background:#fffaf1b8;border-radius:999px;width:min(100% - 24px,420px);margin:5px auto 0;padding:4px 9px;font-size:.72rem;line-height:1.35;position:static}.ocean-frame{fill:#478c9f;stroke:#d3a65c;stroke-width:22px}.coast-frame line{stroke:#efd18e;stroke-width:8px;stroke-linecap:round}.expansion-frame rect{fill:#963f28;stroke:#ffe3aa;stroke-width:2px}.expansion-frame text{fill:#fff5df;font-weight:900}.expansion-frame .expansion-piece-code{font-size:11px}.expansion-frame .expansion-piece-type{fill:#ffd28f;letter-spacing:.7px;font-size:8px}.terrain{stroke:#f2d69b;stroke-width:4px;stroke-linejoin:round}.terrain-pattern{pointer-events:none;stroke:#0000}.terrain-forest{fill:#3e7350}.terrain-pasture{fill:#8faf60}.terrain-fields{fill:#d8a944}.terrain-hills{fill:#b75b3f}.terrain-mountains{fill:#746f6a}.terrain-desert{fill:#d9bd7e}.number-disc-shadow{fill:#271a1047;transform:translateY(3px)}.number-disc{fill:#fff4dc;stroke:#6c5136;stroke-width:1.5px}.number-text{fill:#37261a;font-family:Georgia,serif;font-size:24px;font-weight:800}.number-text-red{fill:#bd382a}.pip{fill:#3f2a1b}.pip-red{fill:#bd382a}.robber{fill:#342a23;stroke:#e6c889;stroke-width:1.5px}.harbor-links line{stroke:#f7e1b2;stroke-width:4px;stroke-linecap:round}.harbor-links circle{fill:#fff6e4;stroke:#694729;stroke-width:1.8px}.harbor-marker{fill:#fff6e4;stroke:#694729;stroke-width:2.4px}.harbor-resource-marker{filter:drop-shadow(0 2px 2px #38221333)}.harbor-ratio{fill:#432d1d;font-size:10px;font-weight:900}.harbor-resource{fill:#a2482d;font-size:9px;font-weight:900}.harbor-resource-band{stroke:#fff6e4c7;stroke-width:1px}.harbor-resource-band-forest{fill:#3e7350}.harbor-resource-band-pasture{fill:#718e48}.harbor-resource-band-fields{fill:#b68125}.harbor-resource-band-hills{fill:#a94732}.harbor-resource-band-mountains{fill:#625e5b}.harbor-resource-name{fill:#fffaf0;letter-spacing:.1px;font-size:8.5px;font-weight:900}.frame-port-tag rect{fill:#963f28;stroke:#ffe3aa;stroke-width:1.5px}.frame-port-tag text{fill:#fff5df;letter-spacing:.35px;font-size:8px;font-weight:900}.empty-board,.empty-order{text-align:center;align-content:center;place-items:center;min-height:540px;padding:30px;display:grid}.empty-board h3,.empty-order h3{margin:22px 0 6px;font-family:Georgia,serif;font-size:1.7rem;font-weight:500}.empty-board p,.empty-order p{max-width:390px;color:var(--muted);margin:0;line-height:1.55}.empty-hex{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:#b956351f;place-items:center;width:118px;height:106px;display:grid}.empty-hex span{width:54px;height:54px;color:var(--terracotta);background:#fffaf1b8;border-radius:50%;place-items:center;font-family:Georgia,serif;font-size:2rem;display:grid}.extension-panel{color:#fff3df;box-shadow:var(--shadow);background:linear-gradient(105deg,#241a14fa,#3a261bf5),repeating-linear-gradient(90deg,#0000 0 40px,#ffffff05 41px);border:1px solid #5e3f2838;border-radius:14px;margin-top:22px;padding:28px 32px 32px}.extension-panel .eyebrow{color:#dfa563}.piece-grid{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px;display:grid}.piece-stat{background:#ffffff09;border:1px solid #ffeacc21;border-radius:8px;grid-template-columns:auto 1fr;align-items:baseline;gap:0 10px;padding:18px;display:grid}.piece-stat.featured{background:#b9563524;border-color:#dfa5638c}.piece-stat strong{color:#e9b676;font-family:Georgia,serif;font-size:2rem;font-weight:500}.piece-stat span{font-weight:800}.piece-stat small{color:#fff3df99;grid-column:1/-1;margin-top:6px;line-height:1.4}.frame-assembly{border-top:1px solid #ffeacc29;grid-template-columns:minmax(190px,.75fr) minmax(0,2fr);align-items:start;gap:24px;margin-top:18px;padding-top:22px;display:grid}.frame-assembly h4{margin:5px 0 7px;font-family:Georgia,serif;font-size:1.2rem;font-weight:500}.frame-assembly p{color:#fff3df9e;margin:0;font-size:.78rem;line-height:1.5}.frame-piece-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.frame-piece-list li{background:#ffffff0a;border:1px solid #ffeacc24;border-radius:8px;gap:4px;min-width:0;padding:13px;display:grid}.frame-piece-list strong{color:#e9b676;font-size:.77rem}.frame-piece-list span{font-size:.76rem;font-weight:800;line-height:1.25}.frame-piece-list small{color:#fff3df8c;font-size:.67rem;line-height:1.35}.order-workspace{grid-template-columns:minmax(340px,.85fr) minmax(340px,1.15fr);min-height:610px;display:grid}.order-form-card{border-right:1px solid var(--line)}.player-fields{gap:8px;margin-top:22px;display:grid}.player-field{border:1px solid var(--line);background:#ffffff80;border-radius:7px;grid-template-columns:42px 1fr;align-items:center;min-height:52px;display:grid;overflow:hidden}.player-field>span{height:100%;color:var(--terracotta);border-right:1px solid var(--line);place-items:center;font-size:.68rem;font-weight:900;display:grid}.player-field input{width:100%;height:50px;color:var(--ink);background:0 0;border:0;outline:0;padding:0 14px;font-weight:700}.player-field:focus-within{border-color:#b95635a3;box-shadow:0 0 0 3px #b9563514}.form-message{color:var(--muted);margin:12px 0 0;font-size:.78rem}.form-message.error{color:#a73d2d}.order-actions{gap:10px;margin-top:24px;display:flex}.turn-result-card{background:radial-gradient(circle at 25% 35%,#fffcf0f2,#0000 20rem),linear-gradient(135deg,#eadcc8,#d8c4aa);grid-template-columns:minmax(210px,.8fr) minmax(240px,1.2fr);align-items:center;gap:30px;padding:42px;display:grid}.winner-card{text-align:center;background:#fffaf19e;border:1px solid #74512e33;border-radius:45% 45% 9px 9px;place-items:center;min-height:330px;padding:30px;display:grid;box-shadow:inset 0 0 0 7px #ffffff38}.crown{color:var(--terracotta);font-size:3rem}.winner-card p{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin:15px 0 0;font-size:.72rem;font-weight:850}.winner-card h3{overflow-wrap:anywhere;margin:5px 0 15px;font-size:clamp(2rem,4vw,3.5rem)}.winner-card time{color:var(--muted);font-size:.75rem}.turn-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.turn-list li{background:#fffaf19e;border:1px solid #69482b1f;border-radius:7px;grid-template-columns:42px 1fr auto;align-items:center;min-height:58px;padding:0 17px 0 8px;display:grid}.turn-list li>span{width:32px;height:32px;color:var(--muted);background:#5d422b14;border-radius:50%;place-items:center;font-size:.72rem;font-weight:900;display:grid}.turn-list li.first{background:#fff9eaf0;border-color:#b9563573}.turn-list li.first>span{color:#fff;background:var(--terracotta)}.turn-list strong{text-overflow:ellipsis;overflow:hidden}.turn-list small{color:var(--terracotta-dark);letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;font-weight:850}.turn-result-card>.empty-order{grid-column:1/-1}.order-die{width:94px;height:94px;color:var(--terracotta);background:#fffaf1b8;border-radius:20px;place-items:center;font-size:3.5rem;display:grid;box-shadow:0 12px 32px #3823141f}.site-footer{color:var(--muted);justify-content:space-between;align-items:center;gap:30px;padding:28px 4px 0;font-size:.75rem;display:flex}.site-footer p{margin:0}.site-footer button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-bottom:1px solid;padding:2px 0}.toast{z-index:20;color:#fff8e9;background:#231913f2;border:1px solid #ffffff1f;border-radius:7px;padding:13px 18px;font-size:.82rem;font-weight:750;animation:.18s ease-out toast-in;position:fixed;bottom:24px;right:24px;box-shadow:0 16px 38px #160c0747}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width:1050px){.board-workspace{grid-template-columns:310px minmax(0,1fr)}.settings-panel,.order-form-card{padding:27px}.piece-grid{grid-template-columns:repeat(2,1fr)}.frame-assembly{grid-template-columns:1fr}.frame-piece-list{grid-template-columns:repeat(2,minmax(0,1fr))}.turn-result-card{gap:18px;padding:28px}}@media (max-width:820px){.app-shell{width:min(100% - 22px,720px);padding-top:14px}.hero-copy{grid-template-columns:1fr;gap:20px;padding:38px 4px 30px}.hero-copy>p{margin-left:0}.board-workspace,.order-workspace{grid-template-columns:1fr}.settings-panel,.order-form-card{border-right:0;border-bottom:1px solid var(--line)}.result-panel{padding:25px 18px 18px}.board-shell{min-height:590px}.turn-result-card{grid-template-columns:1fr}}@media (max-width:560px){.app-shell{width:100%;padding-top:0}.site-header{justify-content:space-between;align-items:flex-start;padding-left:14px;padding-right:14px;display:flex}.brand-lockup,.header-action{grid-column:auto;justify-self:auto}.header-action{min-height:40px;padding:0 13px;font-size:.74rem}.brand-kicker{display:none}.brand-mark{width:38px;height:38px}.hero-copy h2{font-size:clamp(1.35rem,5.5vw,1.85rem)}.hero-copy{padding-left:14px;padding-right:14px}.tabs{width:100%;margin-left:0;padding-left:14px;padding-right:14px}.tab{flex:1;justify-content:center;padding:0 9px;font-size:.78rem}.settings-panel,.order-form-card{padding:24px 19px}.workspace{border-left:0;border-right:0;border-radius:0}.result-panel{padding-left:0;padding-right:0}.result-heading{flex-direction:column;align-items:flex-start;padding-left:14px;padding-right:14px}.board-shell{border-radius:0;min-height:520px;margin-left:0;margin-right:0}.catan-board{min-height:0}.zoom-controls{top:8px;right:4px}.piece-grid,.frame-piece-list{grid-template-columns:1fr}.extension-panel{padding:24px 20px}.order-actions{flex-direction:column}.turn-result-card{padding:20px 14px 26px}.winner-card{min-height:280px}.site-footer{flex-direction:column;align-items:flex-start;gap:12px}.toast{text-align:center;bottom:12px;left:12px;right:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto;transition-duration:.01ms;animation-duration:.01ms;animation-iteration-count:1}}