:root{font-family:system-ui,"Microsoft JhengHei",sans-serif;color:#253b37;background:#f4f1e9;line-height:1.6}*{box-sizing:border-box}body{max-width:1440px;margin:auto;padding:24px}h1,h2,h3,p{margin-top:0}h1{font-size:32px;margin-bottom:2px}h2{font-size:23px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}header p{margin-bottom:6px}.eyebrow{letter-spacing:.12em;font-size:12px;color:#65796e}button,input,select{font:inherit}button{background:#255d4e;color:#fff;border:1px solid #255d4e;border-radius:9px;padding:10px 16px;cursor:pointer}button:hover{filter:brightness(.95)}button:disabled{background:#e2e5e1;color:#737e77;border-color:#cbd1cb;cursor:not-allowed}.secondary{color:#255d4e;background:transparent}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #b87721;outline-offset:3px}input,select{padding:9px;border:1px solid #becbc3;border-radius:7px;background:white;max-width:100%}label{display:flex;flex-direction:column;gap:4px}.setup-fields{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:18px}.panel{background:#fffdf8;border:1px solid #d9dfd4;border-radius:14px;padding:22px;margin-bottom:18px}.legend{margin-bottom:20px;padding:12px;background:#e9eee5;border-radius:9px;font-size:13px}.legend a{margin-left:14px;color:#255d4e}.badge{display:inline-block;font-size:11px;padding:2px 7px;border-radius:5px;vertical-align:middle;line-height:1.6}.user{background:#dcebe2;color:#285c45}.assistant{background:#f4e5c9;color:#80561d}.small{font-size:12px;color:#64726a}main{display:grid;grid-template-columns:minmax(450px,1.12fr) minmax(340px,.88fr);gap:24px;align-items:start}.players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}.player{background:#fffdf8;border:1px solid #d5ddd1;border-top:4px solid var(--color);border-radius:10px;padding:13px}.player.active{outline:2px solid var(--color);outline-offset:2px}.player strong{overflow-wrap:anywhere}.resources{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}.resources b{display:block;font-size:22px;line-height:1.3}.resources span{font-size:11px;color:#64726a}.board-scene{perspective:1200px;padding:24px 25px 40px;background:#e6e7d8;border-radius:22px;overflow:hidden}#board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,104px);gap:7px;transform:rotateX(23deg) rotateZ(-4deg) scale(.94);background:#b19b75;padding:9px;border-radius:12px;box-shadow:0 8px #927650,0 16px #755d3e,4px 22px 15px #463b3144}.tile{position:relative;display:flex;flex-direction:column;gap:3px;padding:8px;border-radius:7px;background:linear-gradient(135deg,#fffdf1,#f1e7cb);box-shadow:0 4px #b5aa8f;font-size:13px}.tile[data-type=event]{background:linear-gradient(135deg,#fbe9db,#eacdb8)}.tile[data-type=investment]{background:linear-gradient(135deg,#dfedec,#bad2c9)}.tile[data-type=start]{background:linear-gradient(135deg,#e6edcd,#c7d7a1)}.tile.current{outline:3px solid #32735b;outline-offset:-3px}.tile-num{font-size:10px;color:#667467}.tokens{display:flex;gap:6px;margin-top:auto}.token{position:relative;display:inline-flex;align-items:flex-end;justify-content:center;background:var(--color);width:22px;height:27px;color:white;font-size:10px;font-weight:bold;border-radius:45% 45% 30% 30%;box-shadow:3px 4px 3px #273c3a55;padding-bottom:1px}.token:before{content:'';position:absolute;top:-7px;width:14px;height:14px;background:radial-gradient(circle at 35% 25%,#ffffff99,var(--color));border-radius:50%}.hop{animation:hop .35s ease-out}@keyframes hop{from{transform:translateY(-13px)}70%{transform:translateY(0)}85%{transform:translateY(-3px)}to{transform:translateY(0)}}.step{position:absolute;right:6px;top:5px;background:#255d4e;color:white;border-radius:30px;font-size:10px;padding:0 5px}.board-center{grid-area:2 / 2 / 4 / 4;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:repeating-linear-gradient(90deg,#d4dfbd 0 24px,#cfdbb6 24px 48px);border:5px solid #f0e6c9;border-radius:8px;padding:12px}.board-center strong{font-size:22px}.die{font-size:40px;background:#fffdf5;border-radius:10px;padding:0 15px;box-shadow:3px 5px #b0a98a;margin:9px 0;color:#255d4e}.movement{margin:16px 0 8px;padding:12px 14px;border-left:4px solid #255d4e;background:#e4ebe0;min-height:50px;border-radius:5px}.board-note{margin-bottom:18px}.turn{color:#64806b;border-bottom:1px solid #e2e6dd;padding-bottom:10px;margin-bottom:15px}.option{width:100%;text-align:left;background:white;color:#253b37;border-color:#c6d0c2;margin:8px 0;padding:14px}.option strong,.option .effect,.option .small{display:block}.option .effect{color:#285e45;font-weight:600;font-size:14px;margin:5px 0}.option .badge{margin-top:7px}.notice{background:#f8ecd7;padding:12px;border-radius:8px;font-size:13px}.budget-row{display:grid;grid-template-columns:1fr auto;gap:6px;margin:12px 0}.bar{grid-column:1 / 3;height:6px;background:#e5e9de;border-radius:5px;overflow:hidden}.bar i{display:block;height:100%;background:#548269}.score-row{padding:16px;background:#edf1e7;border-radius:10px;margin:10px 0}.score-row h3{margin-bottom:8px}.score{font-size:30px;font-weight:700;color:#255d4e}summary{cursor:pointer;font-weight:650}details[open] summary{margin-bottom:15px}#log{max-height:400px;overflow:auto;font-size:13px}#log p{padding:9px 0;margin:0;border-bottom:1px solid #e1e5db}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;vertical-align:top;border-bottom:1px solid #dce2d6;padding:12px}th{background:#edf1e7}td:first-child{width:25%;font-weight:600}footer{font-size:12px;color:#67776a;padding:6px}[hidden]{display:none!important}@media(max-width:980px){main{grid-template-columns:1fr}.board-scene{max-width:700px;margin:auto}header{align-items:flex-start}.players{max-width:700px;margin:0 auto 18px}}@media(max-width:540px){body{padding:12px}header{flex-direction:column;gap:8px}h1{font-size:27px}.panel{padding:16px}.legend a{display:block;margin:7px 0 0}.board-scene{padding:16px 10px 29px}#board{grid-template-rows:repeat(4,88px);gap:5px;padding:6px;transform:rotateX(21deg) rotateZ(-3deg) scale(.94)}.tile{font-size:10px;padding:5px}.board-center strong{font-size:17px}.board-center{padding:6px}.board-center .small{font-size:10px}.die{font-size:31px}.resources{gap:9px}.resources b{font-size:19px}.player{padding:9px}.token{width:16px;height:22px;font-size:8px}.token:before{width:11px;height:11px;top:-6px}.tokens{gap:3px}th,td{padding:8px;font-size:12px}}@media(prefers-reduced-motion:reduce){.hop{animation:none}}
/* Discussion layout: show only the decision needed for this turn. */
.howto{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.howto span{background:#e7ece3;color:#315c4b;padding:7px 12px;border-radius:8px;font-size:13px;font-weight:600}
main{grid-template-areas:"players action" "board action";grid-template-rows:auto 1fr;gap:14px 22px}
#players{grid-area:players;margin:0}.board-area{grid-area:board}#action{grid-area:action;align-self:start;position:sticky;top:14px}
.board-scene{padding:10px 20px 20px;border-radius:16px}#board{grid-template-rows:repeat(4,88px)}
.movement{font-size:13px;padding:9px 12px;margin:10px 0 12px;min-height:0}
.option{margin:6px 0;padding:11px 12px}.option .small{line-height:1.4}.turn{padding-bottom:6px;margin-bottom:10px}
#action h2{margin-bottom:8px}.panel{margin-bottom:14px}.badge{font-weight:600}
#sources table{display:block;overflow-x:auto}#discussion textarea{width:100%;min-height:90px;font:inherit;resize:vertical;border:1px solid #becbc3;border-radius:8px;padding:10px;margin:5px 0 12px}
@media(max-width:980px){main{grid-template-areas:"players" "action" "board";grid-template-columns:1fr;grid-template-rows:auto}#action{position:static}.players{width:100%;max-width:none}}
@media(max-width:540px){.howto span{font-size:11px;padding:5px 7px}#board{grid-template-rows:repeat(4,78px)}.board-scene{padding:8px 7px 19px}}

/* Sixteen spaces form a five-by-five perimeter. */
#board{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,78px)}
.board-center{grid-area:2 / 2 / 5 / 5}
.tile[data-type=transport],.tile[data-type=meal],.tile[data-type=housing],.tile[data-type=work],.tile[data-type=clothing],.tile[data-type=entertainment]{background:linear-gradient(135deg,#fbe9db,#eacdb8)}
.tile[data-type=opportunity]{background:linear-gradient(135deg,#e5f1dd,#c4dfb9)}
.tile[data-type=trap]{background:linear-gradient(135deg,#f8e1dd,#e9bdb5)}
@media(max-width:540px){#board{grid-template-rows:repeat(5,62px)}.tile{gap:1px}.board-center strong{font-size:16px}.board-center .small{font-size:9px}}
