:root {
  --bg: #f3efe4;
  --surface: #fffdf8;
  --ink: #28241f;
  --muted: #716b62;
  --line: rgba(64, 49, 30, .13);
  --accent: #a97942;
  --accent-dark: #81572d;
  --accent-light: #ead7bd;
  --green: #407a58;
  --shadow: 0 18px 50px rgba(69, 50, 27, .13);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 1024px; min-height: 100vh; background: radial-gradient(circle at 50% -20%, #fffdf7 0, var(--bg) 52%); color: var(--ink); font-family: Inter, system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif; font-size: 17px; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(169,121,66,.35); outline-offset: 3px; }
.hidden { display: none !important; }
.app-shell { width: min(1440px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0 38px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; margin-bottom: 18px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 2.4rem; line-height: 1.08; letter-spacing: -.035em; }
h2 { margin-bottom: 16px; font-size: 1.3rem; }
.eyebrow { margin-bottom: 7px; color: var(--accent-dark); font-size: .78rem; font-weight: 850; letter-spacing: .18em; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.button, .icon-button { border: 0; border-radius: 999px; min-height: 50px; padding: 0 25px; font-weight: 780; transition: transform .14s, box-shadow .14s, background .14s; }
.button:hover, .icon-button:hover { transform: translateY(-1px); }
.button:active, .icon-button:active, .button.keyboard-active { transform: translateY(1px) scale(.97); }
.button:disabled { cursor: not-allowed; opacity: .45; }
.primary { color: #fff; background: linear-gradient(180deg, #b78953, var(--accent)); box-shadow: 0 8px 20px rgba(145,98,47,.25); }
.primary:hover { box-shadow: 0 10px 24px rgba(145,98,47,.34); }
.secondary, .icon-button { color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(69,50,27,.05); }
.icon-button[aria-pressed="false"] { color: var(--muted); background: #ebe7de; }
.buy { color: #fff; background: linear-gradient(180deg, #4c9369, var(--green)); box-shadow: 0 8px 20px rgba(64,122,88,.23); }
.setup-panel { max-width: 600px; margin: 7vh auto 0; padding: 38px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.setup-panel > p { color: var(--muted); font-size: 1.05rem; }
.player-count { display: flex; gap: 10px; margin: 26px 0; }
.count-btn { flex: 1; min-height: 50px; border: 1px solid var(--line); border-radius: 13px; background: #f7f3ea; color: var(--ink); font-weight: 650; }
.count-btn.active { border-color: var(--accent); background: var(--accent-light); font-weight: 800; }
.name-fields { display: grid; gap: 14px; margin-bottom: 24px; }
.name-field { display: flex; align-items: center; gap: 13px; }
.name-field span { width: 31px; height: 31px; border: 3px solid #fff; border-radius: 50%; flex: 0 0 31px; box-shadow: 0 2px 7px rgba(0,0,0,.18); }
.name-field input { width: 100%; min-height: 50px; padding: 0 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-size: 1rem; }
.setup-panel .primary { width: 100%; }
.game-layout { display: grid; grid-template-columns: minmax(850px, 1fr) 330px; gap: 24px; align-items: start; }
.board-wrap { min-width: 0; }
.board { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); width: min(100%, 1030px); aspect-ratio: 1; margin-left: auto; overflow: hidden; border: 3px solid #5f4b34; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.space { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-width: 0; padding: 9px 5px 7px; border: 1px solid var(--line); background: rgba(255,255,255,.66); text-align: center; font-size: clamp(.88rem, 1vw, 1rem); }
.space:nth-child(4n+1) { background: rgba(239,230,214,.44); }
.space-name { line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.space-price { color: var(--accent-dark); font-size: .88em; font-weight: 750; }
.space-icon { font-size: clamp(1.25rem, 1.75vw, 1.65rem); line-height: 1; filter: saturate(.9); }
.owner-strip { position: absolute; top: 0; left: 0; right: 0; height: 7px; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
.tokens { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 20px; }
.token { width: clamp(16px, 1.35vw, 20px); height: clamp(16px, 1.35vw, 20px); border: 3px solid white; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.38); }
.board-center { grid-column: 2 / 7; grid-row: 2 / 7; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; background: radial-gradient(circle at 50% 38%, #fff 0, #f5ead9 70%, #ead8bb 100%); text-align: center; }
.board-center::before { content: "大富翁"; position: absolute; color: rgba(129,87,45,.055); font-size: clamp(5rem, 10vw, 9.5rem); font-weight: 900; letter-spacing: .08em; transform: rotate(-12deg); pointer-events: none; }
.board-center > * { position: relative; z-index: 1; }
.turn-badge { max-width: 100%; margin-bottom: 8px; padding: 10px 22px; overflow: hidden; border: 1px solid rgba(169,121,66,.12); border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 6px 18px rgba(69,50,27,.09); font-size: 1.18rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.dice { margin: 2px 0 12px; color: #433527; font-size: clamp(6.5rem, 9vw, 8.8rem); line-height: 1; filter: drop-shadow(0 7px 7px rgba(55,38,20,.14)); }
.dice.rolling { animation: shake .12s linear infinite; }
@keyframes shake { 0%,100% { transform: rotate(-8deg) scale(.96); } 50% { transform: rotate(8deg) scale(1.04); } }
.board-center .button { min-width: 210px; margin: 5px 0; font-size: 1.08rem; }
.action-hint { min-height: 1.5em; max-width: 410px; margin: 12px 0 0; color: var(--muted); font-size: .96rem; }
.keyboard-hint { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #81796f; font-size: .79rem; }
kbd { min-width: 58px; padding: 4px 9px; border: 1px solid #cfc6b9; border-bottom-width: 3px; border-radius: 7px; background: #fff; color: #554a3e; font: 700 .74rem Inter, system-ui, sans-serif; text-align: center; box-shadow: 0 2px 3px rgba(0,0,0,.05); }
.sidebar { display: grid; gap: 18px; }
.sidebar section { padding: 22px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,253,248,.93); box-shadow: 0 10px 28px rgba(69,50,27,.075); }
.players { display: grid; gap: 11px; }
.player-card { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #fff; transition: border .2s, background .2s, transform .2s; }
.player-card.active { border-color: var(--accent); background: #f7ecdd; transform: translateX(-4px); box-shadow: 4px 5px 12px rgba(105,72,36,.08); }
.player-card.bankrupt { opacity: .45; }
.player-head { display: flex; align-items: center; gap: 10px; }
.player-dot { width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.player-name { min-width: 0; flex: 1; overflow: hidden; font-size: 1.03rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.money { margin-top: 8px; font-size: 1rem; }
.money strong { color: var(--accent-dark); font-size: 1.12rem; }
.assets { margin-top: 3px; color: var(--muted); font-size: .86rem; }
.log-section { max-height: 410px; overflow: hidden; }
.game-log { max-height: 330px; margin: 0; padding-left: 25px; overflow: auto; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.game-log li { padding: 2px 0 5px 3px; }
.game-log li:first-child { color: var(--ink); font-weight: 700; }
dialog { width: min(440px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 22px; box-shadow: 0 22px 70px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(42,42,42,.35); backdrop-filter: blur(3px); }
.dialog-content { padding: 34px; text-align: center; }
.dialog-icon { margin-bottom: 8px; font-size: 3rem; }
.dialog-content p { color: var(--muted); font-size: 1.02rem; line-height: 1.6; white-space: pre-line; }
@media (max-width: 1220px) {
  body { min-width: 900px; }
  .app-shell { width: calc(100% - 28px); }
  .game-layout { grid-template-columns: minmax(700px, 1fr) 285px; gap: 16px; }
  .space { padding: 6px 3px; font-size: .73rem; }
  .space-icon { font-size: 1.2rem; }
  .sidebar section { padding: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* v3 — 經典臺灣紙板桌遊 */
:root { --board-red:#a64032; --board-green:#315e4a; --board-gold:#bd8a3e; --paper:#f8f0dc; }
body { background-color:#d8c9aa; background-image: radial-gradient(rgba(93,65,31,.08) 1px, transparent 1px), linear-gradient(135deg,#eee4cc,#d7c5a4); background-size:5px 5px,100% 100%; }
.app-shell { width:min(1510px,calc(100% - 46px)); }
.topbar { padding:0 8px; }
h1 { color:#5a261f; font-family:Georgia,"Noto Serif TC","PMingLiU",serif; font-size:2.65rem; letter-spacing:.01em; text-shadow:0 1px #fff; }
.eyebrow { color:#7b5a31; letter-spacing:.22em; }
.game-layout { grid-template-columns:minmax(930px,1fr) 340px; gap:25px; }
.board { width:min(100%,1100px); border:9px solid #5a2d22; outline:3px solid #c29249; outline-offset:-6px; border-radius:13px; background:#f5e9cf; box-shadow:0 24px 65px rgba(53,29,13,.27), inset 0 0 0 2px rgba(255,255,255,.45); }
.space { padding:25px 6px 8px; border:1px solid rgba(75,48,24,.28); background:#fffaf0; color:#2b2118; font-size:15px; box-shadow:inset 0 0 14px rgba(129,88,41,.05); }
.space:nth-child(4n+1) { background:#f7eedb; }
.region-label { position:absolute; top:0; left:0; right:0; min-height:21px; padding:3px 2px 2px; color:#fff; background:#735d3d; font-size:10px; font-weight:850; letter-spacing:.14em; line-height:1.2; text-transform:uppercase; text-shadow:0 1px 1px rgba(0,0,0,.25); }
.group-north .region-label { background:#9e392f; }
.group-west .region-label { background:#39745a; }
.group-central .region-label { background:#35668a; }
.group-south .region-label { background:#b47728; }
.group-east .region-label { background:#6e4b88; }
.type-chance .region-label { background:#75548b; }
.type-bonus .region-label { background:#b17c2d; }
.type-tax .region-label { background:#83534c; }
.type-start .region-label,.type-rest .region-label { background:#32644f; }
.type-jail .region-label,.type-goToJail .region-label { background:#4e4b47; }
.space-icon { margin-top:3px; font-size:1.85rem; filter:drop-shadow(0 2px 1px rgba(0,0,0,.1)); }
.space-name { min-height:2.25em; display:flex; align-items:center; justify-content:center; color:#2b2118; font-family:"Noto Serif TC","PMingLiU","Microsoft JhengHei",serif; font-size:1em; font-weight:900; line-height:1.08; text-wrap:balance; }
.space-price { display:inline-block; padding:2px 7px; border:1px solid rgba(130,82,34,.19); border-radius:999px; color:#703b24; background:#f4e3c3; font-size:.85em; font-weight:850; }
.owner-strip { z-index:2; top:21px; height:7px; }
.tokens { min-height:23px; }
.token { width:21px; height:21px; border:3px solid #fff9eb; box-shadow:0 2px 6px rgba(0,0,0,.5); }
.board-center { border:1px solid rgba(87,54,24,.2); background-color:#eeddb9; background-image:linear-gradient(45deg,rgba(139,96,46,.035) 25%,transparent 25%,transparent 75%,rgba(139,96,46,.035) 75%),linear-gradient(45deg,rgba(139,96,46,.035) 25%,transparent 25%,transparent 75%,rgba(139,96,46,.035) 75%),radial-gradient(circle at 50% 40%,#fffaf0 0,#f2e4c8 67%,#dfc395 100%); background-position:0 0,8px 8px,0 0; background-size:16px 16px,16px 16px,100% 100%; }
.board-center::before { content:"臺灣\A環島大富翁"; white-space:pre; color:rgba(117,52,38,.075); font-family:Georgia,"PMingLiU",serif; font-size:clamp(4rem,7vw,7.2rem); line-height:.86; letter-spacing:.02em; transform:rotate(-9deg); }
.turn-badge { border:2px solid #b68645; color:#612f25; background:#fffaf0; font-family:"Noto Serif TC","PMingLiU",serif; font-size:1.3rem; box-shadow:0 5px 0 #d0aa72,0 10px 22px rgba(75,44,20,.12); }
.dice { color:#582b22; font-size:9.4rem; filter:drop-shadow(0 9px 1px rgba(65,35,18,.18)); }
.board-center .button { min-width:235px; min-height:54px; font-size:1.12rem; }
.primary { background:linear-gradient(#b54e3d,#8e3429); border:1px solid #6f271f; box-shadow:0 5px 0 #61231d,0 10px 20px rgba(88,40,24,.2); }
.primary:hover { box-shadow:0 5px 0 #61231d,0 12px 25px rgba(88,40,24,.3); }
.buy { background:linear-gradient(#4d8065,#326047); border:1px solid #254d39; box-shadow:0 5px 0 #244936,0 10px 20px rgba(37,77,57,.2); }
.button:active,.button.keyboard-active { transform:translateY(4px); box-shadow:0 1px 0 rgba(60,30,20,.7); }
.keyboard-hint { color:#766651; }
kbd { border-color:#a89170; background:#fffaf0; }
.sidebar section { border:2px solid #9c7442; border-radius:11px; background:#f8efd9; box-shadow:0 8px 0 rgba(100,64,30,.13),0 14px 34px rgba(64,36,17,.11); }
.sidebar h2 { padding-bottom:10px; border-bottom:2px solid #bf9258; color:#612f25; font-family:"Noto Serif TC","PMingLiU",serif; font-size:1.38rem; }
.player-card { border:1px solid #b99a6d; border-radius:7px; background:#fffaf0; }
.player-card.active { border:2px solid #9f392f; background:#f7e3cc; transform:translateX(-5px); box-shadow:5px 5px 0 rgba(122,67,37,.12); }
.player-name { font-size:1.08rem; }
.money strong { color:#8f392c; font-size:1.25rem; }
.game-log { color:#5e5142; font-size:.94rem; }
.icon-button,.secondary { border-color:#a98c66; background:#f8efd9; }
dialog { border:4px solid #8c5a31; border-radius:13px; background:#fff8e8; }
.dialog-content h2 { color:#713126; font-family:"Noto Serif TC","PMingLiU",serif; font-size:1.55rem; }
@media (max-width:1300px) { .game-layout{grid-template-columns:minmax(790px,1fr) 300px}.space{padding:23px 3px 6px;font-size:13px}.space-icon{font-size:1.45rem}.region-label{font-size:9px}.dice{font-size:7.5rem} }

/* v4 — 可讀性、所有權與房產升級 */
body { font-size:18px; }
.app-shell { width:min(1580px,calc(100% - 38px)); }
.game-layout { grid-template-columns:minmax(980px,1fr) 360px; gap:28px; }
.board { width:min(100%,1160px); }
.space { padding:29px 7px 8px; font-size:17px; }
.region-label { min-height:24px; padding-top:4px; font-size:11px; }
.space-icon-frame { display:flex; align-items:center; justify-content:center; width:54px; height:54px; margin-top:2px; border:1px solid rgba(91,56,27,.16); border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#ead9b9); box-shadow:inset 0 2px 2px rgba(255,255,255,.8),0 3px 7px rgba(72,43,20,.14); }
.space-icon { margin:0; font-size:2.15rem; line-height:1; filter:drop-shadow(0 2px 1px rgba(0,0,0,.15)); }
.space-name { min-height:2.35em; font-size:1.02em; line-height:1.12; }
.space-price { padding:3px 8px; font-size:.9em; }
.space.owned { border:4px solid var(--owner-color); padding:26px 4px 5px; background:#fff9ec; box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),inset 0 0 22px color-mix(in srgb,var(--owner-color) 15%,transparent); }
.space.owned .region-label { left:-1px; right:-1px; top:-1px; }
.owner-badge { position:absolute; z-index:4; top:25px; left:4px; right:4px; display:flex; align-items:center; justify-content:center; gap:4px; min-height:20px; overflow:hidden; border-radius:4px; color:#251c15; background:rgba(255,255,255,.94); box-shadow:0 2px 5px rgba(0,0,0,.2); font-size:11px; font-weight:900; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
.owner-badge i { width:9px; height:9px; flex:0 0 9px; border-radius:50%; }
.space.owned .space-icon-frame { width:46px; height:46px; margin-top:18px; }
.space.owned .space-icon { font-size:1.85rem; }
.buildings { position:absolute; z-index:5; right:4px; bottom:26px; padding:3px 5px; border:1px solid #6d4d24; border-radius:5px; color:#fff8dc; background:#315e4a; box-shadow:0 2px 4px rgba(0,0,0,.25); font-size:10px; letter-spacing:1px; }
.owner-strip { display:none; }
.token { width:24px; height:24px; }
.turn-badge { font-size:1.45rem; }
.action-hint { max-width:500px; color:#5c4c39; font-size:1.08rem; font-weight:650; }
.board-center .button { min-width:285px; min-height:58px; font-size:1.18rem; }
.upgrade { color:#fff; border:1px solid #785618; background:linear-gradient(#d7a93e,#a8781f); box-shadow:0 5px 0 #765315,0 10px 20px rgba(111,77,22,.23); }
.player-card { padding:17px; }
.player-name { font-size:1.18rem; }
.money { font-size:1.08rem; }
.money strong { font-size:1.35rem; }
.assets { font-size:.98rem; }
.game-log { font-size:1rem; line-height:1.62; }
.sidebar h2 { font-size:1.5rem; }
@media(max-width:1380px){.game-layout{grid-template-columns:minmax(840px,1fr) 320px}.space{padding:26px 4px 6px;font-size:14px}.space-icon-frame{width:44px;height:44px}.space-icon{font-size:1.75rem}.owner-badge{font-size:9px}.space.owned .space-icon-frame{width:38px;height:38px}.space.owned .space-icon{font-size:1.55rem}}

.player-card { border-left:7px solid var(--player-color); }
.asset-list { display:grid; gap:6px; margin-top:10px; }
.asset-chip { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:7px; padding:7px 8px; border:1px solid color-mix(in srgb,var(--player-color) 45%,#aa8d68); border-radius:6px; background:color-mix(in srgb,var(--player-color) 9%,#fffaf0); font-size:.82rem; }
.asset-chip span { overflow:hidden; color:#34261c; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.asset-chip strong { padding:2px 5px; border-radius:4px; color:#fff; background:var(--player-color); font-size:.72rem; }
.asset-chip small { color:#71442c; font-size:.72rem; font-weight:800; }
.no-assets { padding:7px 2px 2px; color:#8a7965; font-size:.8rem; }