/* Generated by game-rules.mjs. Edit game-rules-themes.mjs. */

:root{
  --bg:#0c1014; /* games/colonists/style.css .col-page: #0c1014 */
  --ink:#f1ead8; /* games/colonists/style.css .col-page: #f1ead8 */
  --muted:#a9b4b6; /* games/colonists/style.css .col-page --muted: #a9b4b6 */
  --accent:#e3b45c; /* games/colonists/style.css .col-page --brass: #e3b45c */
  --line:#34424c; /* games/colonists/style.css .col-page --line: #34424c */
  --panel:#10171d; /* games/colonists/style.css .col-page: #10171d */
  --display:Georgia,'Iowan Old Style','Times New Roman',serif; /* games/colonists/style.css .col-page --serif: Georgia,'Iowan Old Style','Times New Roman',serif */
  --reading:system-ui,-apple-system,"Segoe UI",Arial,sans-serif; /* games/colonists/style.css .col-page: system-ui,-apple-system,"Segoe UI",Arial,sans-serif (inherited/default) */
  --label:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace; /* games/colonists/style.css .col-page --mono: ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace */
  --sheet:#0c1014; /* games/colonists/style.css .col-page: #0c1014 */
  --titleInk:#f1ead8; /* games/colonists/style.css .col-page: #f1ead8 */
  --dot:#e3b45c; /* games/colonists/style.css .col-page --brass: #e3b45c */
  --weight:700; /* games/colonists/style.css .col-hero h1: 700 */
  --tracking:-.02em; /* games/colonists/style.css .col-hero h1: -.02em */
  --casing:none; /* games/colonists/style.css [hidden]: none */
  --italic:normal; /* games/colonists/style.css .col-pip: normal */
  --buttonBg:#e3b45c; /* games/colonists/style.css .col-page --brass: #e3b45c */
  --buttonInk:#1b1408; /* games/colonists/style.css .col-page button: #1b1408 */
  --buttonBorder:#e3b45c; /* games/colonists/style.css .col-page --brass: #e3b45c */
  --buttonRadius:8px; /* games/colonists/style.css .col-page: 8px */
  --buttonShadow:none; /* games/colonists/style.css [hidden]: none */
  --panelInk:#f1ead8; /* games/colonists/style.css .col-page: #f1ead8 */
  --panelMuted:#a9b4b6; /* games/colonists/style.css .col-page --muted: #a9b4b6 */
  --panelBorder:#34424c; /* games/colonists/style.css .col-page --line: #34424c */
  --panelRadius:14px; /* games/colonists/style.css .col-entry-card: 14px */
  --panelShadow:none; /* games/colonists/style.css [hidden]: none */
  --cover-position:50% 45%;
  --motif:"⬡";
}
#rules-content h2::before{content:counter(section,decimal-leading-zero);}
:root{--reading-inset:33px}.rulebook{background-image:linear-gradient(#34424c44 1px,transparent 1px),linear-gradient(90deg,#34424c44 1px,transparent 1px);background-size:32px 32px;padding:32px;border:1px solid var(--line)}

[data-toy=survey-building],[data-toy=survey-earning],[data-toy=survey-trading]{position:relative;height:auto;min-height:0;width:100%;margin:24px 0}
.bank-table,.cost-table,.survey-table{border:8px solid #4a3023;background:#163f46 url(skins/print/art/chart.webp) 50%/cover;box-shadow:0 10px 24px #0006;overflow:hidden;color:#fff0cc;box-sizing:border-box;position:relative;inset:auto;height:auto;padding:10px}
.survey-map{position:relative;width:100%;height:auto;aspect-ratio:1.155;margin:auto;max-width:340px}
.survey-hex{position:absolute;width:20%;height:20%;transform:translate(-50%,-50%);padding:0;border:0;background:none;cursor:pointer}
.survey-hex>.survey-art{width:100%;height:100%;object-fit:fill;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.number-token{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#f4df9f;color:#31291f;border-radius:50%;width:25px;height:25px;text-align:center;font:700 17px/25px Georgia,serif;box-shadow:0 1px 2px #0008}
.survey-hex[data-lit=true] .number-token{background:#fffbd4;box-shadow:0 0 0 4px #e4b75a,0 0 16px #fff5bd}
.survey-piece{position:absolute;transform:translate(-50%,-50%);font:900 24px/1 Georgia,serif;color:#fff5d4;text-shadow:1px 2px #18120e;pointer-events:none;z-index:2}
.survey-piece[data-owner=agnes]{color:#f08faf}
.survey-piece[data-owner=bram]{color:#5bc7ee}
.survey-cat{position:absolute;transform:translate(-50%,-50%);width:55px;height:55px;background:none;border:0;padding:0;z-index:3;cursor:pointer}
.survey-cat img{width:100%;height:100%;object-fit:contain}
.survey-dice{display:block;margin:auto;background:#ead5a8;color:#30281d;border:3px solid #b99553;border-radius:8px;font:40px/1.2 Georgia,serif;min-width:130px;min-height:56px;cursor:pointer;box-shadow:3px 5px 0 #251d16}
.survey-note{font:14px/1.4 Georgia,serif;padding:8px 0;text-align:center;min-height:0}
.survey-hand{display:flex;align-items:center;justify-content:center;gap:5px;height:47px}
.hand-name{width:45px;font:13px Georgia,serif;text-transform:capitalize}
.goods-card{position:relative;display:inline-block;width:42px;height:52px}
.survey-hand .goods-card{width:30px;height:40px}
.goods-card img{width:100%;height:100%;object-fit:contain}
.goods-card b{position:absolute;bottom:0;right:-2px;background:#251e16;color:#ffe9ae;border:1px solid #b89757;border-radius:50%;min-width:21px;text-align:center;font:700 14px/21px Georgia,serif}
.bank-hand,.builder-hand{display:flex;justify-content:center;gap:12px;height:72px}
.cost-lines{display:grid;gap:8px}
.cost-line{min-height:58px;padding:8px 12px;border:1px solid #9d7b4c;background:#e6d2a4;color:#30291c;text-align:left;font:15px/1.35 Georgia,serif;box-shadow:3px 3px #0005;cursor:pointer;text-transform:capitalize}
.building-coast{height:85px;border-bottom:5px double #b7c8ba;display:flex;align-items:end;justify-content:center;gap:16px}
.built-piece{font:48px Georgia,serif;color:#f3d68b;max-width:60px}
.built-piece img{height:65px;width:50px;object-fit:contain}
.allowance-stamp{display:block;margin:4px auto;padding:10px;border:2px solid #b99758;background:#3b2820;color:#f1d8a3;font:14px Georgia,serif;cursor:pointer}
.harbour-token{display:block;min-height:44px;margin:4px auto 12px;border:3px double #cbaa61;border-radius:50%;padding:8px 16px;background:#272c2b;color:#f6de9c;font:15px Georgia,serif;cursor:pointer}
.bank-choices{display:flex;justify-content:center;gap:8px}
.bank-choice{width:58px;height:99px;padding:2px;border:1px solid transparent;background:#15393c;color:#fff0cc;font:13px Georgia,serif;cursor:pointer}
.bank-choice img{width:50px;height:68px;object-fit:contain}
.bank-choice[aria-pressed=true]{border-color:#f5d589;transform:translateY(-5px)}
.bank-slide{display:block;min-height:48px;width:85%;background:#6a452b;color:#fff0cc;border:4px ridge #ac8955;font:15px Georgia,serif;cursor:pointer;margin:12px auto 0}
[data-toy=survey-compass]{position:absolute;right:5%;top:10%;width:68px;height:68px;z-index:1}
.brass-compass{width:68px;height:68px;border:7px ridge #af884b;border-radius:50%;background:#21383a;color:#ffe7ab;font:700 21px Georgia,serif;cursor:pointer;background-image:url(rules-art/rules-compass.webp);background-size:cover}
.brass-compass::after{content:"▲";display:block;font-size:23px}



/* Temporary brass compass face; painter's slot: rules-art/rules-compass.webp. */[data-toy=survey-portrait]{height:140px;position:relative;margin:16px 0}
.office-portrait{display:block;margin:auto;width:108px;height:118px;border:8px ridge #b8914e;padding:0;background:#294443;transform:rotate(-7deg);transition:transform .35s;cursor:pointer}
.office-portrait img{width:100%;height:100%;object-fit:cover}
.office-portrait.straight{transform:rotate(0)}
.cover-copy{pointer-events:none}
.cover-copy a{pointer-events:auto}
[data-toy] button:focus-visible{outline:3px solid #ffd57d;outline-offset:3px}
.arrive{animation:survey-arrive .5s ease-out}
.tumble{animation:survey-tumble .5s ease-out}
.shake{animation:survey-shake .25s ease-out}
.pet{animation:survey-pet .65s ease-out}
.spin{animation:survey-spin .7s ease-out}
.spend{animation:survey-spend .35s ease-out}
@keyframes survey-arrive{0%{translate:0 -45px;opacity:.1}}
@keyframes survey-tumble{0%{rotate:-20deg;translate:0 -10px}
45%{rotate:18deg}
to{rotate:0deg}}
@keyframes survey-shake{25%{translate:-5px}
75%{translate:5px}}
@keyframes survey-pet{50%{rotate:170deg;scale:1.1}}
@keyframes survey-spin{0%{rotate:-340deg}
to{rotate:0deg}}
@keyframes survey-spend{0%{translate:35px 0;opacity:.1}}
@media(max-width:560px){.survey-map{height:auto}
.bank-table,.cost-table,.survey-table{border-width:5px}
.number-token{width:21px;height:21px;font-size:14px;line-height:21px}
.survey-piece{font-size:20px}
.survey-cat{width:43px;height:43px}
.bank-choices{gap:3px}}
.resource-flight{position:absolute;width:32px;height:44px;object-fit:contain;pointer-events:none;z-index:8;animation:survey-delivery .7s ease-in-out both}
@keyframes survey-delivery{0%{translate:0 0;opacity:1;rotate:-12deg}
to{translate:var(--dx) var(--dy);opacity:0;rotate:5deg}}



/* Temporary piece silhouettes; painted print-skin pieces use these exact slots. */.built-piece.settlement,.survey-piece.settlement{background:url(rules-art/rules-settlement.webp) 50%/contain no-repeat}
.built-piece.city,.survey-piece.city{background:url(rules-art/rules-city.webp) 50%/contain no-repeat}
.built-piece.road{background:url(rules-art/rules-road.webp) 50%/contain no-repeat}
@media(prefers-reduced-motion:reduce){.resource-flight{display:none}}
.spent-goods{position:absolute;top:14px;width:42px;height:52px;object-fit:contain;pointer-events:none;z-index:5;animation:survey-paid .45s ease-in both}
@keyframes survey-paid{to{translate:130px 60px;rotate:18deg;opacity:0}}
@media(prefers-reduced-motion:reduce){.spent-goods{display:none}}
[data-toy]{overflow:clip;min-width:0;max-width:100%;overflow-wrap:anywhere;transition:height .26s ease}
[data-toy] [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){[data-toy],[data-toy] *{animation:none!important;transition:none!important}}