*{box-sizing:border-box}body{margin:0;background:#154c53;color:#433b2b;font-family:system-ui,sans-serif}#scene{position:fixed;inset:0}canvas{display:block}header{position:absolute;top:36px;left:40px;display:flex;align-items:center;gap:18px;color:#fff1d6;pointer-events:none}.seal{font-size:54px}small{font-size:10px;letter-spacing:3px;font-weight:700}h1{font-family:Georgia,serif;font-weight:400;font-size:56px;margin:5px 0}h1 span{display:block;font-family:system-ui;font-size:12px;letter-spacing:3px;text-transform:uppercase}aside{position:absolute;right:32px;top:40px;width:280px;background:#fff3dcf2;padding:26px;border-radius:5px;box-shadow:0 16px 50px #092d3233;border:1px solid #ffffff55}h2{font:29px Georgia,serif;margin:15px 0}p{font-size:13px;line-height:1.8;color:#736951}#selection{border-top:1px solid #cfc0a4;padding:18px 0;font-size:13px;min-height:70px}button{cursor:pointer;border:0;border-radius:4px;background:#315951;color:#fff5de;padding:13px 17px;font:600 12px system-ui;width:100%;margin-top:8px}button:disabled{opacity:.45;cursor:default}.secondary{background:#e7d9bf;color:#514b3d}.note{font-size:11px;margin-bottom:0}footer{position:absolute;bottom:24px;left:40px;right:32px;display:flex;align-items:center;justify-content:space-between;color:#f5e9cd;font-size:12px}footer button{width:auto;margin:0}#error{position:absolute;inset:30%;background:#fff3dc;padding:30px}button:focus-visible{outline:3px solid #dca75b;outline-offset:3px}@media(max-width:750px){header{top:20px;left:20px}h1{font-size:38px}.seal{font-size:36px}aside{top:auto;bottom:76px;right:15px;width:220px;padding:15px}aside p:not(.note){display:none}h2{font-size:22px}footer{left:15px;right:15px;bottom:15px}footer span{max-width:170px;font-size:10px}}
aside{width:310px;max-height:calc(100vh - 120px);overflow:auto}#players{margin-top:15px}.player{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:12px}.player span{margin-left:auto;color:#84765e}.player.active{font-weight:700}.player i{height:9px;width:9px;border-radius:50%}#hand{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}#hand span{font-size:10px;background:#e9ddc5;padding:8px;border-radius:4px}#hand b{display:block;font-size:18px;margin-top:3px}.build-modes{display:flex;gap:5px}.build-modes button{padding:10px 6px}.chosen{background:#a77340}.cost{font-size:10px;line-height:1.4}#trade{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:10px}select{padding:7px;border:1px solid #c5b897;background:#fff4df;max-width:95px}#discard label{display:flex;justify-content:space-between;font-size:12px;padding:4px}input{width:55px}#log{font-size:11px;white-space:pre-line;line-height:1.8}details{font-size:11px;line-height:1.7}#status{color:#a45134}@media(max-width:750px){aside{width:240px;max-height:55vh}#hand{grid-template-columns:repeat(3,1fr)}}

@media(min-width:751px){#scene{right:350px}header{top:25px;left:25px}h1{font-size:44px}aside{top:25px}}@media(max-width:750px){#scene{bottom:48vh}aside{left:15px;right:15px;width:auto;bottom:65px;max-height:40vh}header{top:10px;left:15px}h1{font-size:28px}.seal{font-size:25px}header small{font-size:8px}h1 span{font-size:9px}}

#bonuses{font-size:10px;line-height:1.8;color:#84765e}.card{border:1px solid #d2c2a4;border-radius:5px;padding:10px;margin:8px 0;display:flex;gap:5px;flex-wrap:wrap}.card span{width:100%;font-size:12px}.card button{padding:8px}.card select{max-width:105px}dialog{background:#fff3dc;border:1px solid #cbb998;border-radius:12px;padding:28px;max-width:420px;color:#433b2b;box-shadow:0 20px 90px #082a3266}dialog::backdrop{background:#07282d99;backdrop-filter:blur(5px)}dialog label{display:flex;justify-content:space-between;align-items:center;margin:15px 0;font-size:13px}dialog input{width:130px;padding:8px}dialog select{max-width:150px}#player-trade{display:flex;align-items:center;gap:8px;margin-top:8px}#player-trade button{margin:0;padding:10px;font-size:10px}#cards:empty{display:none}

.piece-legend{font-size:10px;line-height:1.7;margin:8px 0;color:#74664f}

#cities-knights h3{font:21px Georgia,serif;margin:20px 0 10px}.barbarian-track{padding:12px;background:#e8dcc5;border-radius:6px}.barbarian-track strong,.ck-knight strong{font-size:12px}.barbarian-track progress{width:100%;height:12px;accent-color:#a65338;margin-top:8px}.barbarian-track p{font-size:11px;margin:5px 0}.ck-improvements>div,.ck-knight{padding:12px 0;border-bottom:1px solid #d2c2a4}.ck-improvements strong{font-size:12px}.ck-improvements label,.ck-card-fields label,.ck-decision label{display:flex;justify-content:space-between;align-items:center;font-size:11px;gap:8px;margin:6px 0}.ck-improvements small,.card small{display:block;font-size:10px;line-height:1.6;margin-top:7px}.ck-knight{display:flex;flex-wrap:wrap;gap:5px}.ck-knight strong{width:100%}.ck-knight button{width:calc(50% - 3px);font-size:10px;padding:8px;margin:0}.ck-decision{padding:12px;border:2px solid #a77340;border-radius:6px;margin:12px 0}.ck-decision strong{font-size:12px}.ck-card-fields{width:100%}.ck-card-fields select{max-width:175px}.card strong{font-size:12px}#cities-knights .build-modes button{font-size:10px}#cities-knights[hidden]{display:none}@media(max-width:750px){aside .barbarian-track p,aside #cities-knights p{display:block}}

/* Mediterranean miniature: an open tabletop, parchment and a visible card hand. */
body{background:#164c58}#scene{bottom:194px}#scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 38%,#092a3333 100%)}header{z-index:2;text-shadow:0 2px 20px #0d34394d}header small{color:#d7ca9f}.seal{color:#d4bd83}aside{background:#f3ead5f5;border:1px solid #ded0ad;border-radius:8px;box-shadow:0 18px 65px #092c354d}#selection{min-height:0;padding:14px 0}.piece-legend{margin:5px 0}#hand-tray{position:fixed;left:25px;right:375px;bottom:54px;z-index:3;padding:11px 16px 13px;background:#143f45e8;border:1px solid #dccb952e;border-radius:9px;color:#e8ddbd;box-shadow:0 8px 35px #092a333b;backdrop-filter:blur(12px)}.hand-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.hand-heading>span{font-size:9px;letter-spacing:2px;font-weight:700}.hand-heading b{letter-spacing:0;font-weight:400;color:#b8c6b4;margin-left:10px}.hand-heading button{width:auto;margin:0;padding:7px 12px;background:#e7dbc0;color:#544c37;font-size:10px}#hand{display:flex;justify-content:center;gap:9px;overflow-x:auto;padding:3px 3px 6px;margin:0;scrollbar-width:thin;scrollbar-color:#8b9b87 transparent}#hand .hand-card{flex:0 0 74px;position:relative;min-height:103px;padding:7px 7px 8px;border-radius:5px;border:1px solid #dbceaa;border-top:3px solid var(--card-color);background:linear-gradient(145deg,#f4ead1,#e6d5af);color:#514933;box-shadow:0 4px 10px #061f3340;display:flex;flex-direction:column;align-items:center}#hand .hand-card svg{width:46px;height:54px;margin:2px 0 4px;filter:drop-shadow(0 2px 1px #493c241a)}#hand .material-name{padding:0;background:none;font:600 10px system-ui}#hand .material-kind{padding:0;margin-top:3px;background:none;font-size:7px;text-transform:uppercase;letter-spacing:.7px;color:#8a7b5a}#hand .card-quantity{position:absolute;right:4px;top:4px;padding:2px 5px;min-width:18px;border-radius:3px;background:var(--card-color);color:#fff7df;font:700 11px system-ui;text-align:center}#hand .empty-card{opacity:.78}#hand .stacked{box-shadow:2px 2px 0 #b4a682,4px 4px 0 #887e64,0 5px 10px #061f3333}#cards-dialog{width:min(720px,calc(100vw - 30px));max-width:720px;max-height:85vh;overflow:auto;padding:24px}#cards-dialog .cards-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #cdbc97;margin-bottom:18px}#cards-dialog h2{font-size:28px;margin:0 0 15px}#close-cards{width:34px;height:34px;padding:0;margin:0 0 15px;font-size:22px}.empty-cards{font-size:14px;line-height:1.8}#cards-dialog #cards,#progress-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}#cards-dialog .card{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:16px;margin:0;background:linear-gradient(145deg,#f8efdb,#eaddbd);border-radius:8px;border-top:4px solid #a89467;box-shadow:0 4px 12px #58432312}#cards-dialog .card.science{border-top-color:#688665}#cards-dialog .card.trade{border-top-color:#b39a50}#cards-dialog .card.politics{border-top-color:#577e8e}#cards-dialog .card strong,#cards-dialog .card>span{font:21px Georgia,serif;text-align:center}#cards-dialog .card small{font-size:12px;line-height:1.7;letter-spacing:0;font-weight:400;margin:0}#cards-dialog .action-card-art{height:86px;display:flex;align-items:center;justify-content:center;font:64px Georgia,serif;color:#6e765b;background:radial-gradient(ellipse,#c9bc8a40,transparent 70%)}#cards-dialog .action-card-art svg{height:76px;width:76px}#cards-dialog .card button{margin-top:auto}#cards-dialog label{margin:6px 0}#cards-dialog .ck-card-fields select{max-width:170px}#progress-cards>h3,#progress-cards>p{grid-column:1/-1}#progress-cards h3{font-size:12px;margin:0;font-weight:400;color:#85765b}#progress-cards>p{margin:0;line-height:1.8;font-size:14px}footer{z-index:4;font-size:11px}footer button{padding:10px 14px}dialog select#variant{max-width:175px}
@media(min-width:751px) and (max-width:1050px){#hand-tray{left:15px;right:365px;padding:10px}#hand{justify-content:flex-start}#hand .hand-card{flex-basis:65px}.hand-heading b{display:none}}
@media(max-width:750px){#scene{right:0;bottom:calc(40vh + 190px)}#hand-tray{left:15px;right:15px;bottom:calc(40vh + 75px);padding:8px 10px}.hand-heading{margin-bottom:4px}.hand-heading>span{font-size:8px;letter-spacing:1px}.hand-heading b{font-size:8px;margin-left:5px}.hand-heading button{font-size:9px;padding:6px 8px}#hand{justify-content:flex-start;gap:6px;padding-bottom:4px}#hand .hand-card{flex-basis:52px;min-height:70px;padding:4px;border-top-width:2px}#hand .hand-card svg{height:37px;width:35px;margin:0 0 3px}#hand .card-quantity{font-size:9px;min-width:15px;padding:1px 3px;right:2px;top:2px}#hand .material-name{font-size:8px}#hand .material-kind{display:none}#cards-dialog{padding:18px;max-height:86vh}#cards-dialog .card strong,#cards-dialog .card>span{font-size:21px}#cards-dialog #cards,#progress-cards{grid-template-columns:1fr}header{gap:10px}aside{max-height:40vh}footer{bottom:15px}#selection{padding:10px 0}}
@media(prefers-reduced-motion:reduce){#hand-tray{backdrop-filter:none}}

#map-card-prompt:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;color:#ffe3a0;font-size:13px}#map-card-prompt button{width:auto;flex-shrink:0}

#hand[hidden]{display:none}@media(max-width:750px){#map-card-prompt{font-size:11px}#map-card-prompt button{font-size:11px;padding:8px}}

/* Illustrated parchment cards with restrained brass and ink details. */
#hand .hand-card{background:radial-gradient(ellipse at 30% 10%,#fff5dd88,transparent 70%),linear-gradient(145deg,#f4ead1,#e6d5af);transition:transform .2s ease,box-shadow .2s ease}#hand .hand-card::after{content:"";position:absolute;inset:5px;border:1px solid #b49b5b26;border-radius:2px;pointer-events:none}#hand .hand-card:hover{transform:translateY(-2px);box-shadow:0 7px 13px #071f3555}#hand .material-name{z-index:1}#hand .received{animation:received-card .9s ease-out}@keyframes received-card{0%{box-shadow:0 0 0 2px #ecd298,0 0 19px #ecd29866}100%{box-shadow:0 4px 10px #061f3340}}#cards-dialog .card{position:relative;background:radial-gradient(ellipse at 20% 0,#fff8e6a8,transparent 75%),linear-gradient(145deg,#f8efdb,#eaddbd);box-shadow:0 5px 13px #58432316,inset 0 0 0 4px #fffcf026}#cards-dialog .card::after{content:"";position:absolute;inset:5px;border:1px solid #b49b5b33;border-radius:3px;pointer-events:none}#cards-dialog .card-track{width:auto;align-self:center;padding:3px 10px;border:1px solid #b5a37c66;border-radius:20px;font:600 9px system-ui;text-transform:uppercase;letter-spacing:1.5px;color:#7e7559;background:#f2e9cf80}#cards-dialog .science .card-track{color:#57725a}#cards-dialog .politics .card-track{color:#4f727b}#cards-dialog .trade .card-track{color:#927938}#cards-dialog .action-card-art{height:128px;background:none}#cards-dialog .action-card-art svg{width:170px;height:128px;filter:drop-shadow(0 3px 2px #6f5a3610)}#cards-dialog .card strong,#cards-dialog .card>span:not(.card-track){font-size:23px}#cards-dialog .card small{color:#70664e}body[data-motion="false"] #hand .received{animation:none}body[data-motion="false"] #hand .hand-card{transition:none}@media(prefers-reduced-motion:reduce){#hand .received{animation:none}#hand .hand-card{transition:none}}

#cards-dialog[open] .card{animation:card-enter .3s ease-out both}@keyframes card-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}body[data-motion="false"] #cards-dialog .card{animation:none}@media(prefers-reduced-motion:reduce){#cards-dialog .card{animation:none!important}}

#cards-dialog .card>span.card-track{font:600 9px system-ui;letter-spacing:1.5px;width:auto}#cards-dialog{scrollbar-width:thin;scrollbar-color:#b8a883 #f6ecd4}#cards-dialog .cards-dialog-heading{position:sticky;top:-24px;padding-top:10px;background:#fff3dc;z-index:2}@media(max-width:750px){#cards-dialog .cards-dialog-heading{top:-18px}}

.player .player-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:inherit}.player i{flex-shrink:0}.player span{flex-shrink:0}dialog #player-name{width:170px;max-width:55%;font:inherit;border:1px solid #c5b897;background:#fff9eb;border-radius:4px}

#victory-confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:1000;pointer-events:none}#victory-confetti[hidden]{display:none}