: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; }

/* v5 — 90 年代經典電腦大富翁氛圍與完整視窗適配 */
:root { --arcade-blue:#176eaa; --arcade-cyan:#8ed9dd; --arcade-yellow:#ffd75a; --arcade-red:#d84738; }
.app-shell { width:min(1760px,calc(100% - 32px)); padding:14px 0 24px; }
.topbar { min-height:76px; margin-bottom:12px; padding:0 10px; }
h1 { color:#b72f29; font-family:"Arial Rounded MT Bold","Microsoft JhengHei",sans-serif; font-size:2.75rem; font-weight:1000; letter-spacing:.01em; text-shadow:0 2px #fff7bd,2px 4px 0 #e0a43d; }
.eyebrow { color:#176eaa; font-weight:1000; }
.game-layout { grid-template-columns:minmax(760px,1fr) 360px; gap:20px; align-items:start; }
.board-wrap { display:flex; justify-content:flex-end; }
.board { width:min(100%,calc(100vh - 130px),1160px); max-height:calc(100vh - 130px); border:8px solid #733d20; outline:4px solid #ffd75a; border-radius:18px; box-shadow:0 8px 0 #4d2718,0 18px 40px rgba(40,22,8,.3); }
.space { background:linear-gradient(150deg,#fffef1,#f3e7bf); }
.space:nth-child(4n+1) { background:linear-gradient(150deg,#e9fbf5,#d6efe6); }
.region-label { background:linear-gradient(#3c86c1,#195887); border-bottom:2px solid rgba(255,255,255,.45); }
.space-icon-frame { border:3px solid #fff; background:radial-gradient(circle at 35% 25%,#fff,#bde8e8 70%,#62a7b7); box-shadow:0 3px 0 #397787,0 6px 10px rgba(0,0,0,.18); }
.space-icon { font-size:2.3rem; filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
.space-name { color:#242f4d; font-family:"Arial Rounded MT Bold","Microsoft JhengHei",sans-serif; font-weight:1000; text-shadow:0 1px #fff; }
.space-price { border:2px solid #d69c24; color:#703a13; background:linear-gradient(#fff8a3,#ffd75a); box-shadow:0 2px 0 #af7215; }
.board-center { border:4px solid #4e9da6; background:radial-gradient(circle at 50% 34%,#e9ffff 0,#a9e4df 48%,#5fb3bd 100%); box-shadow:inset 0 0 0 5px rgba(255,255,255,.38); }
.board-center::before { color:rgba(23,110,170,.11); text-shadow:2px 2px rgba(255,255,255,.5); }
.turn-badge { border:3px solid #fff; color:#fff; background:linear-gradient(#df5848,#a7242a); box-shadow:0 4px 0 #71161e,0 8px 18px rgba(50,15,20,.25); font-family:"Arial Rounded MT Bold","Microsoft JhengHei",sans-serif; }
.dice { color:#fff; text-shadow:0 4px 0 #176eaa; filter:drop-shadow(0 7px 0 rgba(24,82,120,.4)); }
.primary { border:3px solid #fff08e; background:linear-gradient(#f25d4d,#b72c2b); box-shadow:0 5px 0 #7d2024,0 9px 15px rgba(70,22,18,.25); }
.buy { border:3px solid #bff8d1; background:linear-gradient(#49a96e,#237545); box-shadow:0 5px 0 #185b34,0 9px 15px rgba(20,75,44,.22); }
.upgrade { border:3px solid #fff0a0; background:linear-gradient(#ffc94c,#e48722); box-shadow:0 5px 0 #a45616,0 9px 15px rgba(103,60,15,.25); }
.secondary,.icon-button { border:2px solid #4b88ad; color:#174664; background:linear-gradient(#fff,#cfeaf2); box-shadow:0 3px 0 #39708f; }
.sidebar { max-height:calc(100vh - 130px); grid-template-rows:auto minmax(190px,1fr); }
.sidebar section { padding:16px; border:4px solid #357fa7; border-radius:13px; background:linear-gradient(#fffef0,#e6f3e9); box-shadow:0 5px 0 #205976,0 10px 24px rgba(18,71,95,.18); }
.sidebar h2 { margin-bottom:10px; padding:7px 12px; border:2px solid #fff094; border-radius:7px; color:#fff; background:linear-gradient(#e94d41,#b3222b); box-shadow:0 3px 0 #761a22; font-family:"Arial Rounded MT Bold","Microsoft JhengHei",sans-serif; font-size:1.25rem; }
.players { max-height:calc(100vh - 400px); overflow:auto; padding:2px 5px 5px 2px; }
.player-card { padding:11px 12px; border:2px solid #6d97ad; border-left:8px solid var(--player-color); border-radius:9px; background:linear-gradient(135deg,#fff,#e7f2f5); box-shadow:0 3px 0 #b5ccd5; }
.player-card.active { border-color:#efb431; background:linear-gradient(135deg,#fffad2,#ffd976); box-shadow:4px 5px 0 #c88422; }
.player-avatar { display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex:0 0 46px; border:3px solid #fff; border-radius:50%; background:radial-gradient(circle,#fff 25%,var(--player-color)); box-shadow:0 3px 0 color-mix(in srgb,var(--player-color) 70%,#333); font-size:1.75rem; line-height:1; }
.player-dot { display:none; }
.log-section { min-height:0; max-height:none; overflow:hidden; }
.game-log { max-height:calc(100vh - 310px); font-size:.92rem; }
.tokens { position:absolute; z-index:12; right:2px; bottom:3px; display:flex; align-items:flex-end; min-height:46px; overflow:visible; }
.token { position:relative; display:block; width:43px; height:43px; flex:0 0 43px; border:3px solid #fff; border-radius:50% 50% 45% 45%; background:radial-gradient(circle at 45% 32%,#fff 0,#fff 38%,var(--token-color) 40%,var(--token-color) 100%); box-shadow:0 3px 0 color-mix(in srgb,var(--token-color) 70%,#222),0 5px 8px rgba(0,0,0,.4); transform:translateY(-2px); }
.token-face { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:1.75rem; line-height:1; filter:drop-shadow(0 1px #fff); }
.token-name { position:absolute; left:50%; bottom:-17px; max-width:76px; padding:2px 5px; overflow:hidden; border:2px solid #fff; border-radius:5px; color:#fff; background:var(--token-color); box-shadow:0 2px 4px rgba(0,0,0,.35); font-size:10px; font-weight:1000; line-height:1.1; text-overflow:ellipsis; text-shadow:0 1px rgba(0,0,0,.5); white-space:nowrap; transform:translateX(-50%); }
.space:has(.token) { z-index:10; overflow:visible; box-shadow:inset 0 0 0 4px var(--token-color,#ffd75a),0 0 18px rgba(255,210,65,.75); }
@media(max-height:1050px){.app-shell{padding-top:8px}.topbar{min-height:65px;margin-bottom:7px}h1{font-size:2.3rem}.board{width:min(100%,calc(100vh - 95px),1160px);max-height:calc(100vh - 95px)}.sidebar{max-height:calc(100vh - 95px)}.space{font-size:14px;padding-top:25px}.space-icon-frame{width:43px;height:43px}.space-icon{font-size:1.75rem}.space.owned .space-icon-frame{width:36px;height:36px}.token{width:37px;height:37px;flex-basis:37px}.token-face{font-size:1.5rem}.players{max-height:calc(100vh - 350px)}}

/* v6 — 真正依可見區域縮放、強所有權色與房屋等級 */
html,body { min-height:100%; }
body:has(#gamePanel:not(.hidden)) { overflow:hidden; }
.board { width:min(100%,var(--board-fit-size,calc(100dvh - 120px)),1160px); max-width:var(--board-fit-size,calc(100dvh - 120px)); max-height:var(--board-fit-size,calc(100dvh - 120px)); }
.sidebar { height:var(--board-fit-size,calc(100dvh - 120px)); max-height:var(--board-fit-size,calc(100dvh - 120px)); }
.space.owned { border:5px solid var(--owner-color); padding:25px 3px 4px; background:linear-gradient(145deg,color-mix(in srgb,var(--owner-color) 30%,white),color-mix(in srgb,var(--owner-color) 13%,#fff8dd)); box-shadow:inset 0 0 0 3px #fff,inset 0 0 24px color-mix(in srgb,var(--owner-color) 38%,transparent),0 0 0 2px color-mix(in srgb,var(--owner-color) 75%,#222); }
.space.owned .region-label { color:#fff; background:linear-gradient(color-mix(in srgb,var(--owner-color) 76%,white),color-mix(in srgb,var(--owner-color) 82%,#222)); border-bottom-color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.owner-badge { left:3px; right:3px; min-height:22px; border:2px solid #fff; color:#fff; background:var(--owner-color); box-shadow:0 3px 0 color-mix(in srgb,var(--owner-color) 65%,#222),0 5px 8px rgba(0,0,0,.25); font-size:12px; text-shadow:0 1px 1px rgba(0,0,0,.65); }
.owner-badge::before { content:'所有者'; margin-right:2px; font-size:8px; opacity:.9; }
.owner-badge i { background:#fff!important; border:2px solid color-mix(in srgb,var(--owner-color) 55%,#222); }
.buildings { position:absolute; z-index:8; right:3px; bottom:25px; display:grid; justify-items:center; gap:1px; min-width:42px; padding:2px 4px 3px; border:2px solid #fff; border-radius:7px; color:#fff; background:var(--owner-color); box-shadow:0 3px 0 color-mix(in srgb,var(--owner-color) 65%,#222),0 5px 8px rgba(0,0,0,.28); letter-spacing:0; }
.house-row { display:flex; align-items:flex-end; justify-content:center; gap:0; height:18px; white-space:nowrap; }
.house-row i { display:inline-block; margin-left:-2px; font-style:normal; font-size:17px; line-height:1; filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 2px 1px rgba(0,0,0,.35)); }
.house-row i:first-child { margin-left:0; }
.buildings b { font-size:9px; line-height:1; text-shadow:0 1px rgba(0,0,0,.6); }
.asset-chip { border-left:6px solid var(--player-color); background:color-mix(in srgb,var(--player-color) 16%,#fffaf0); }
.asset-level { display:grid; justify-items:center; gap:1px; min-width:45px; padding:3px 5px!important; color:#fff; background:var(--player-color)!important; font-size:.68rem!important; line-height:1.05; }
.asset-level span { overflow:visible!important; color:inherit!important; font-size:.75rem; letter-spacing:-3px; line-height:1; }
.asset-level.land { background:#687b82!important; }
@media(max-height:820px){.topbar{min-height:56px}.app-shell{padding-top:5px}.space{font-size:13px}.owner-badge{font-size:10px}.house-row i{font-size:14px}.buildings{bottom:22px;min-width:36px}.board-center .button{min-height:46px}.dice{font-size:6.5rem}}

/* v7 — 額外底部安全區、五棟房屋、3D骰子、玩家卡預設收合 */
body:has(#gamePanel:not(.hidden)) { overflow:hidden; }
.board { width:min(100%,var(--board-fit-size,calc(100dvh - 180px)),1160px); max-width:var(--board-fit-size,calc(100dvh - 180px)); max-height:var(--board-fit-size,calc(100dvh - 180px)); }
.sidebar { height:var(--board-fit-size,calc(100dvh - 180px)); max-height:var(--board-fit-size,calc(100dvh - 180px)); }
.space.owned { padding-bottom:7px; }
.buildings { position:relative; right:auto; bottom:auto; order:4; width:calc(100% - 8px); min-width:0; margin:1px 4px 2px; padding:2px 3px; }
.house-row { width:100%; height:17px; gap:1px; }
.house-row i { margin:0!important; font-size:clamp(10px,1.05vw,16px); }
.buildings b { font-size:9px; }
.space-price { position:relative; z-index:9; order:5; flex:0 0 auto; margin-top:1px; }
.tokens { order:6; }
.player-summary { display:grid; grid-template-columns:46px minmax(0,1fr) auto 32px; align-items:center; gap:9px; }
.player-summary .money { display:grid; justify-items:end; margin:0; line-height:1.05; white-space:nowrap; }
.player-summary .money small { color:#6b7880; font-size:.68rem; font-weight:750; }
.player-summary .money strong { font-size:1.28rem; }
.asset-toggle { display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:2px solid #fff; border-radius:50%; color:#fff; background:var(--player-color); box-shadow:0 2px 0 color-mix(in srgb,var(--player-color) 65%,#222); font-size:1.15rem; font-weight:1000; line-height:1; }
.player-details { margin-top:9px; padding-top:8px; border-top:2px dashed color-mix(in srgb,var(--player-color) 45%,#aaa); }
.player-details[hidden] { display:none!important; }
.players { max-height:none; overflow:auto; }
.dice { width:142px; height:142px; display:flex; align-items:center; justify-content:center; border:5px solid #eaf8ff; border-radius:25px; color:#174f86; background:linear-gradient(145deg,#fff 8%,#d4eaff 52%,#8fbddd); box-shadow:inset 8px 8px 12px rgba(255,255,255,.95),inset -10px -12px 16px rgba(25,81,127,.24),0 12px 0 #176eaa,0 20px 24px rgba(20,69,105,.35); font-size:7.3rem; line-height:1; perspective:700px; transform-style:preserve-3d; }
.dice.rolling { animation:dice3d .72s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes dice3d { 0%{transform:translateY(0) rotateX(0) rotateY(0) rotateZ(0) scale(1)} 25%{transform:translateY(-38px) rotateX(110deg) rotateY(85deg) rotateZ(30deg) scale(.9)} 55%{transform:translateY(-18px) rotateX(230deg) rotateY(190deg) rotateZ(115deg) scale(1.05)} 80%{transform:translateY(8px) rotateX(335deg) rotateY(300deg) rotateZ(185deg) scale(.96)} 100%{transform:translateY(0) rotateX(360deg) rotateY(360deg) rotateZ(360deg) scale(1)} }
@media(max-height:820px){.dice{width:112px;height:112px;font-size:5.8rem}.house-row{height:14px}.house-row i{font-size:11px}.buildings{padding:1px 2px}.player-summary{grid-template-columns:40px minmax(0,1fr) auto 30px}.player-avatar{width:40px;height:40px;flex-basis:40px}}

/* v7.1 — 保守全螢幕安全區，任何環境都不永久裁切 */
body:has(#gamePanel:not(.hidden)) { overflow-x:hidden; overflow-y:auto; }
.board { width:min(100%,var(--board-fit-size,calc(100dvh - 240px)),1160px); max-width:var(--board-fit-size,calc(100dvh - 240px)); max-height:var(--board-fit-size,calc(100dvh - 240px)); }
.sidebar { height:var(--board-fit-size,calc(100dvh - 240px)); max-height:var(--board-fit-size,calc(100dvh - 240px)); }

/* v8 — 移除棋盤最小尺寸鎖定，紀錄清楚可讀 */
.board { width:var(--board-fit-size); max-width:min(100%,var(--board-fit-size)); max-height:none; min-width:0; min-height:0; }
.sidebar { height:var(--board-fit-size); max-height:var(--board-fit-size); min-height:0; }
.game-log { min-height:0; }
.game-log ol { font-size:clamp(16px,1.18vw,19px); line-height:1.55; }
.game-log li { padding:8px 9px 8px 4px; border-bottom:1px solid rgba(83,64,39,.14); }
@media(max-height:760px){.game-log ol{font-size:16px;line-height:1.48}.game-log li{padding:6px 7px 6px 3px}.app-shell{padding-top:8px}.brand-strip{margin-bottom:7px}}

/* v8.1 — 紀錄固定可讀字級，不跟棋盤縮小 */
.game-log ol,
.game-log li { font-size:18px!important; line-height:1.58!important; }
.game-log li { padding:8px 9px 8px 5px!important; }

/* v9 — 角色選擇、真3D骰子、額外底部安全區 */
.player-setup-row{display:grid;grid-template-columns:minmax(250px,1fr) 230px;gap:12px;align-items:center}.avatar-picker{display:grid;grid-template-columns:auto 1fr 44px;align-items:center;gap:8px;padding:7px 10px;border:2px solid #c8b890;border-radius:12px;background:#fffaf0;font-weight:850}.avatar-picker select{width:100%;min-height:42px;border:1px solid #b9a77f;border-radius:8px;background:white;font-size:17px;padding:5px}.avatar-picker b{font-size:30px;text-align:center}.dice-cube{--die-size:104px;position:relative;width:var(--die-size);height:var(--die-size);margin:24px auto 30px;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(28deg);filter:drop-shadow(0 18px 10px rgba(30,55,76,.35));transition:transform .35s}.die-face{position:absolute;inset:0;border:3px solid #d2dbe4;border-radius:22px;background:radial-gradient(circle at 33% 28%,#fff 0 12%,transparent 13%),linear-gradient(145deg,#fff 0%,#f5f8fb 55%,#c7d2dc 100%);box-shadow:inset 7px 7px 10px rgba(255,255,255,.95),inset -8px -9px 14px rgba(61,87,108,.2)}.die-front{transform:translateZ(calc(var(--die-size)/2))}.die-back{transform:rotateY(180deg) translateZ(calc(var(--die-size)/2))}.die-right{transform:rotateY(90deg) translateZ(calc(var(--die-size)/2))}.die-left{transform:rotateY(-90deg) translateZ(calc(var(--die-size)/2))}.die-top{transform:rotateX(90deg) translateZ(calc(var(--die-size)/2))}.die-bottom{transform:rotateX(-90deg) translateZ(calc(var(--die-size)/2))}.die-face::before{content:"";position:absolute;width:18%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#657586 0 8%,#152534 45%,#07121a 100%);box-shadow:inset 2px 3px 3px #000,0 1px 0 #fff}.die-front::before{left:41%;top:41%}.die-back::before{left:18%;top:18%;box-shadow:inset 2px 3px 3px #000,0 1px 0 #fff,54px 0 #152534,0 54px #152534,54px 54px #152534}.die-right::before{left:18%;top:18%;box-shadow:inset 2px 3px 3px #000,0 1px 0 #fff,54px 54px #152534}.die-left::before{left:18%;top:18%;box-shadow:inset 2px 3px 3px #000,0 1px 0 #fff,54px 0 #152534,27px 27px #152534,0 54px #152534,54px 54px #152534}.die-top::before{left:18%;top:18%;box-shadow:inset 2px 3px 3px #000,0 1px 0 #fff,54px 0 #152534,27px 27px #152534}.die-bottom::before{left:18%;top:14%;box-shadow:inset 2px 3px 3px #000,0 1px 0 #fff,0 29px #152534,0 58px #152534,54px 0 #152534,54px 29px #152534,54px 58px #152534}.dice-cube.rolling{animation:trueDiceRoll .72s cubic-bezier(.25,.8,.25,1) infinite}@keyframes trueDiceRoll{0%{transform:translateY(0) rotateX(-18deg) rotateY(28deg) rotateZ(0)}30%{transform:translateY(-50px) rotateX(155deg) rotateY(130deg) rotateZ(60deg)}65%{transform:translateY(-18px) rotateX(315deg) rotateY(290deg) rotateZ(170deg)}100%{transform:translateY(0) rotateX(702deg) rotateY(748deg) rotateZ(360deg)}}
.dice-cube[data-value="2"]{transform:rotateX(-18deg) rotateY(-62deg)}.dice-cube[data-value="3"]{transform:rotateX(-108deg) rotateY(0)}.dice-cube[data-value="4"]{transform:rotateX(-18deg) rotateY(118deg)}.dice-cube[data-value="5"]{transform:rotateX(72deg) rotateY(0)}.dice-cube[data-value="6"]{transform:rotateX(-18deg) rotateY(208deg)}
.board{max-width:min(100%,var(--board-fit-size));}.money strong,.space-price{font-variant-numeric:tabular-nums}.money strong{font-size:clamp(18px,1.55vw,26px)}
@media(max-height:760px){.dice-cube{--die-size:78px;margin:14px auto 18px}.die-face{border-radius:16px}.player-setup-row{grid-template-columns:1fr}}
@media(max-width:760px){.player-setup-row{grid-template-columns:1fr}.avatar-picker{grid-template-columns:auto 1fr 44px}}
@media(prefers-reduced-motion:reduce){.dice-cube.rolling{animation:none}}

/* v10 — 移除上方頁首，改為左側直立遊戲工具欄 */
body:has(#gamePanel:not(.hidden)) { overflow:hidden; }
.app-shell { width:calc(100% - 16px); max-width:none; padding:8px 0; }
.game-layout { display:grid; grid-template-columns:150px minmax(0,1fr) 350px; gap:14px; align-items:start; }
.game-rail { height:var(--board-fit-size); min-height:0; display:flex; flex-direction:column; justify-content:space-between; padding:18px 12px; border:4px solid #176eaa; border-radius:16px; background:linear-gradient(180deg,#fff8d6 0%,#f2df9d 100%); box-shadow:inset 0 0 0 3px #fff,0 8px 0 #0f5a8e,0 13px 22px rgba(40,63,78,.22); overflow:hidden; }
.rail-brand { text-align:center; }
.rail-brand .eyebrow { margin:0 0 14px; color:#176eaa; font-size:12px; line-height:1.3; letter-spacing:.12em; }
.rail-brand h1 { margin:0; color:#b72f29; font-size:clamp(28px,2.45vw,42px); line-height:1.12; letter-spacing:.02em; text-shadow:0 2px #fff7bd,2px 4px 0 #e0a43d; }
.rail-brand::after { content:'🎲'; display:block; margin-top:18px; font-size:50px; filter:drop-shadow(0 4px 2px rgba(43,68,82,.3)); }
.rail-actions { display:grid; gap:12px; }
.rail-actions button { width:100%; min-width:0; min-height:58px; display:grid; place-items:center; gap:1px; padding:7px 4px; font-size:26px; }
.rail-actions button span { display:block; font-size:14px; font-weight:900; }
.board-wrap { min-width:0; display:flex; justify-content:center; }
.board { margin:0 auto; }
.sidebar { margin:0; }
.setup-panel { margin-top:max(7vh,48px); }
@media(max-width:1450px){.game-layout{grid-template-columns:126px minmax(0,1fr) 320px;gap:10px}.rail-brand h1{font-size:30px}.game-rail{padding:14px 9px}.rail-brand::after{font-size:42px}.rail-actions button{min-height:52px}}
@media(max-height:760px){.app-shell{padding:5px 0}.game-rail{padding:10px 8px}.rail-brand .eyebrow{font-size:9px;margin-bottom:7px}.rail-brand h1{font-size:24px}.rail-brand::after{margin-top:8px;font-size:34px}.rail-actions{gap:7px}.rail-actions button{min-height:44px;font-size:21px}.rail-actions button span{font-size:11px}}

/* v11 — 更保守的底部安全區與寫實遊戲骰子 */
.dice-cube {
  --die-size: 110px;
  perspective: 900px;
  filter: drop-shadow(0 24px 13px rgba(20,29,35,.38));
}
.dice-cube::after {
  content:""; position:absolute; left:9%; right:9%; bottom:-45%; height:25%;
  border-radius:50%; background:radial-gradient(ellipse,rgba(13,20,25,.48),rgba(13,20,25,.14) 48%,transparent 72%);
  transform:rotateX(74deg); filter:blur(3px); pointer-events:none;
}
.die-face {
  overflow:hidden;
  border:1px solid rgba(115,105,84,.48);
  border-radius:25px;
  background:
    radial-gradient(circle at 24% 18%,rgba(255,255,255,.98),transparent 31%),
    radial-gradient(circle at 77% 82%,rgba(179,166,135,.2),transparent 43%),
    repeating-radial-gradient(circle at 50% 50%,rgba(114,100,72,.026) 0 1px,transparent 1px 4px),
    linear-gradient(145deg,#fffef7 0%,#f7f2e5 47%,#d8cfbc 100%);
  box-shadow:
    inset 7px 8px 12px rgba(255,255,255,.96),
    inset -10px -12px 18px rgba(92,79,54,.25),
    inset 0 0 0 3px rgba(255,255,255,.3),
    0 0 2px rgba(58,47,31,.5);
  backface-visibility:hidden;
}
.die-face::after {
  content:""; position:absolute; inset:4px; border-radius:21px;
  background:linear-gradient(118deg,rgba(255,255,255,.65) 0 12%,transparent 28% 72%,rgba(88,70,43,.08));
  box-shadow:inset 0 0 4px rgba(255,255,255,.75); pointer-events:none;
}
/* 每面使用多層徑向漸層，黑點具有凹陷高光與內壁陰影 */
.die-face::before { content:""; position:absolute; inset:0; width:auto; aspect-ratio:auto; border-radius:inherit; background-repeat:no-repeat; box-shadow:none; }
.die-front::before { background-image:radial-gradient(circle at 50% 50%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.85) 11%,transparent 13%); }
.die-back::before { background-image:radial-gradient(circle at 27% 27%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.8) 11%,transparent 13%),radial-gradient(circle at 73% 27%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.8) 11%,transparent 13%),radial-gradient(circle at 27% 73%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.8) 11%,transparent 13%),radial-gradient(circle at 73% 73%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.8) 11%,transparent 13%); }
.die-right::before { background-image:radial-gradient(circle at 29% 29%,#071019 0 7%,#263943 8%,#020609 11%,rgba(255,255,255,.8) 12%,transparent 14%),radial-gradient(circle at 71% 71%,#071019 0 7%,#263943 8%,#020609 11%,rgba(255,255,255,.8) 12%,transparent 14%); }
.die-left::before { background-image:radial-gradient(circle at 27% 27%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.8) 11%,transparent 13%),radial-gradient(circle at 50% 50%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.8) 11%,transparent 13%),radial-gradient(circle at 73% 73%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.8) 11%,transparent 13%); }
.die-top::before { background-image:radial-gradient(circle at 28% 27%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.8) 11%,transparent 13%),radial-gradient(circle at 72% 27%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.8) 11%,transparent 13%),radial-gradient(circle at 50% 50%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.8) 11%,transparent 13%),radial-gradient(circle at 28% 73%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.8) 11%,transparent 13%),radial-gradient(circle at 72% 73%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.8) 11%,transparent 13%); }
.die-bottom::before { background-image:radial-gradient(circle at 27% 25%,#071019 0 5.5%,#22323a 6.5%,#020609 9.5%,rgba(255,255,255,.8) 10.5%,transparent 12.5%),radial-gradient(circle at 73% 25%,#071019 0 5.5%,#22323a 6.5%,#020609 9.5%,rgba(255,255,255,.8) 10.5%,transparent 12.5%),radial-gradient(circle at 27% 50%,#071019 0 5.5%,#22323a 6.5%,#020609 9.5%,rgba(255,255,255,.8) 10.5%,transparent 12.5%),radial-gradient(circle at 73% 50%,#071019 0 5.5%,#22323a 6.5%,#020609 9.5%,rgba(255,255,255,.8) 10.5%,transparent 12.5%),radial-gradient(circle at 27% 75%,#071019 0 5.5%,#22323a 6.5%,#020609 9.5%,rgba(255,255,255,.8) 10.5%,transparent 12.5%),radial-gradient(circle at 73% 75%,#071019 0 5.5%,#22323a 6.5%,#020609 9.5%,rgba(255,255,255,.8) 10.5%,transparent 12.5%); }
@keyframes realistic-roll {
  0% { transform:translateY(0) rotateX(-18deg) rotateY(28deg) rotateZ(0); animation-timing-function:ease-out; }
  24% { transform:translateY(-64px) rotateX(255deg) rotateY(390deg) rotateZ(92deg); }
  63% { transform:translateY(-10px) rotateX(575deg) rotateY(760deg) rotateZ(173deg); animation-timing-function:ease-in; }
  78% { transform:translateY(3px) rotateX(650deg) rotateY(850deg) rotateZ(180deg); }
  88% { transform:translateY(-9px) rotateX(674deg) rotateY(880deg) rotateZ(182deg); }
  100% { transform:translateY(0) rotateX(702deg) rotateY(928deg) rotateZ(180deg); }
}
.dice-cube.rolling { animation:realistic-roll .88s cubic-bezier(.22,.72,.26,1); }
@media(max-height:760px){.dice-cube{--die-size:82px}}

/* v12 — 棋盤貼合視窗；結果點數固定顯示於骰子頂面 */
.dice-cube,
.dice-cube[data-value="1"],.dice-cube[data-value="2"],.dice-cube[data-value="3"],
.dice-cube[data-value="4"],.dice-cube[data-value="5"],.dice-cube[data-value="6"] {
  transform:rotateX(-24deg) rotateY(32deg) rotateZ(-2deg);
}
/* 頂面點數由遊戲結果直接產生，不再靠旋轉猜測 */
.die-top::before { display:none; }
.pip-grid { position:absolute; inset:15%; z-index:3; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); align-items:center; justify-items:center; transform:rotate(0deg); }
.pip-grid i { width:19px; height:19px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#5a6870 0 5%,#17252c 31%,#020507 72%); box-shadow:inset 2px 3px 4px #000, inset -1px -1px 2px rgba(255,255,255,.24), 0 2px 1px rgba(255,255,255,.75); }
.pip-grid.value-1 i:nth-child(1){grid-area:2/2}
.pip-grid.value-2 i:nth-child(1){grid-area:1/1}.pip-grid.value-2 i:nth-child(2){grid-area:3/3}
.pip-grid.value-3 i:nth-child(1){grid-area:1/1}.pip-grid.value-3 i:nth-child(2){grid-area:2/2}.pip-grid.value-3 i:nth-child(3){grid-area:3/3}
.pip-grid.value-4 i:nth-child(1){grid-area:1/1}.pip-grid.value-4 i:nth-child(2){grid-area:1/3}.pip-grid.value-4 i:nth-child(3){grid-area:3/1}.pip-grid.value-4 i:nth-child(4){grid-area:3/3}
.pip-grid.value-5 i:nth-child(1){grid-area:1/1}.pip-grid.value-5 i:nth-child(2){grid-area:1/3}.pip-grid.value-5 i:nth-child(3){grid-area:2/2}.pip-grid.value-5 i:nth-child(4){grid-area:3/1}.pip-grid.value-5 i:nth-child(5){grid-area:3/3}
.pip-grid.value-6 i:nth-child(1){grid-area:1/1}.pip-grid.value-6 i:nth-child(2){grid-area:1/3}.pip-grid.value-6 i:nth-child(3){grid-area:2/1}.pip-grid.value-6 i:nth-child(4){grid-area:2/3}.pip-grid.value-6 i:nth-child(5){grid-area:3/1}.pip-grid.value-6 i:nth-child(6){grid-area:3/3}
/* 可見側面維持實體骰子慣例，僅頂面代表擲骰結果 */
.die-front::before { background-image:radial-gradient(circle at 27% 27%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.85) 11%,transparent 13%),radial-gradient(circle at 73% 27%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.85) 11%,transparent 13%),radial-gradient(circle at 27% 73%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.85) 11%,transparent 13%),radial-gradient(circle at 73% 73%,#071019 0 6%,#22323a 7%,#020609 10%,rgba(255,255,255,.85) 11%,transparent 13%); }
.die-right::before { background-image:radial-gradient(circle at 27% 25%,#071019 0 5.5%,#22323a 6.5%,#020609 9.5%,rgba(255,255,255,.8) 10.5%,transparent 12.5%),radial-gradient(circle at 73% 25%,#071019 0 5.5%,#22323a 6.5%,#020609 9.5%,rgba(255,255,255,.8) 10.5%,transparent 12.5%),radial-gradient(circle at 27% 50%,#071019 0 5.5%,#22323a 6.5%,#020609 9.5%,rgba(255,255,255,.8) 10.5%,transparent 12.5%),radial-gradient(circle at 73% 50%,#071019 0 5.5%,#22323a 6.5%,#020609 9.5%,rgba(255,255,255,.8) 10.5%,transparent 12.5%),radial-gradient(circle at 27% 75%,#071019 0 5.5%,#22323a 6.5%,#020609 9.5%,rgba(255,255,255,.8) 10.5%,transparent 12.5%),radial-gradient(circle at 73% 75%,#071019 0 5.5%,#22323a 6.5%,#020609 9.5%,rgba(255,255,255,.8) 10.5%,transparent 12.5%); }
@keyframes top-result-roll {
  0%{transform:translateY(0) rotateX(-24deg) rotateY(32deg) rotateZ(-2deg)}
  35%{transform:translateY(-62px) rotateX(336deg) rotateY(392deg) rotateZ(178deg)}
  72%{transform:translateY(3px) rotateX(696deg) rotateY(752deg) rotateZ(358deg)}
  86%{transform:translateY(-9px) rotateX(706deg) rotateY(764deg) rotateZ(360deg)}
  100%{transform:translateY(0) rotateX(696deg) rotateY(752deg) rotateZ(358deg)}
}
.dice-cube.rolling { animation:top-result-roll .88s cubic-bezier(.22,.72,.26,1); }
@media(max-height:760px){.pip-grid i{width:14px;height:14px}}

/* v13 — 房屋不參與格子尺寸計算 */
.board { grid-template-rows:repeat(7,minmax(0,1fr)); grid-template-columns:repeat(7,minmax(0,1fr)); }
.space { min-width:0; min-height:0; overflow:hidden; contain:layout paint; }
.space:has(.token) { overflow:visible; contain:layout; }
.space.owned { padding-bottom:5px; }
.buildings {
  position:absolute!important;
  z-index:8;
  top:48px!important;
  right:3px!important;
  bottom:auto!important;
  left:auto!important;
  width:auto!important;
  min-width:38px!important;
  max-width:calc(100% - 6px);
  margin:0!important;
  padding:2px 3px!important;
  pointer-events:none;
}
.house-row { width:auto!important; height:15px!important; gap:0!important; }
.house-row i { margin-left:-3px!important; font-size:13px!important; }
.house-row i:first-child { margin-left:0!important; }
.buildings b { font-size:8px!important; line-height:1!important; }
.space-price { order:5; margin-top:auto; }
.tokens { order:6; flex:0 0 23px; min-height:23px; }
@media(max-height:760px){
  .buildings{top:43px!important;min-width:32px!important;padding:1px 2px!important}
  .house-row{height:12px!important}.house-row i{font-size:10px!important}.buildings b{font-size:7px!important}
}

/* v14 — 唯一主結果面；移除固定四點的視覺干擾 */
.die-front::before,.die-back::before,.die-right::before,.die-left::before,.die-top::before,.die-bottom::before { display:none!important; background-image:none!important; }
.dice-cube { --die-size:110px; transform:rotateX(-11deg) rotateY(25deg) rotateZ(-2deg)!important; }
.dice-result-face {
  position:absolute; z-index:12; left:0; top:-42px; width:var(--die-size); height:var(--die-size);
  overflow:hidden; border:1px solid rgba(105,91,65,.5); border-radius:25px;
  background:radial-gradient(circle at 24% 18%,#fff 0 9%,transparent 30%),repeating-radial-gradient(circle at 50% 50%,rgba(114,100,72,.026) 0 1px,transparent 1px 4px),linear-gradient(145deg,#fffef8,#f5efdf 54%,#d5c9b3);
  box-shadow:inset 8px 9px 12px rgba(255,255,255,.98),inset -10px -12px 18px rgba(91,76,48,.27),inset 0 0 0 3px rgba(255,255,255,.32),0 8px 13px rgba(21,29,34,.32);
  transform:rotateX(54deg) rotateZ(-2deg); transform-origin:50% 100%; backface-visibility:visible;
}
.dice-result-face::after { content:"";position:absolute;inset:4px;border-radius:21px;background:linear-gradient(118deg,rgba(255,255,255,.66),transparent 30% 72%,rgba(82,63,37,.09));pointer-events:none; }
.dice-result-face .pip-grid { inset:13%; z-index:4; transform:none; }
.dice-result-face .pip-grid i { width:20px;height:20px; }
/* 與結果面相接的側面只呈現厚度與材質，不再放固定點數 */
.die-front,.die-right { filter:brightness(.84) saturate(.82); }
@keyframes result-face-roll {
  0%{transform:translateY(0) rotateX(-11deg) rotateY(25deg) rotateZ(-2deg)}
  34%{transform:translateY(-62px) rotateX(349deg) rotateY(385deg) rotateZ(178deg)}
  73%{transform:translateY(3px) rotateX(709deg) rotateY(745deg) rotateZ(358deg)}
  86%{transform:translateY(-9px) rotateX(719deg) rotateY(757deg) rotateZ(360deg)}
  100%{transform:translateY(0) rotateX(709deg) rotateY(745deg) rotateZ(358deg)}
}
.dice-cube.rolling { animation:result-face-roll .88s cubic-bezier(.22,.72,.26,1)!important; }
@media(max-height:760px){.dice-cube{--die-size:82px}.dice-result-face{top:-31px;border-radius:19px}.dice-result-face .pip-grid i{width:15px;height:15px}}