:root{
  --dm-bg:#0f1220;
  --dm-board:#1b2140;
  --dm-accent:#6ec1ff;
  --dm-text:#e6ecff;
  --dm-muted:#9aa7c7;
  --dm-good:#38d39f;
  --dm-bad:#ff7a7a;
}

html,body{height:100%;margin:0;background:var(--dm-bg);color:var(--dm-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif}

.dm-root{display:flex;flex-direction:column;min-height:100vh}

.dm-header{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px}
.dm-title{font-size:18px;letter-spacing:.5px}
.dm-hint{color:var(--dm-muted);font-size:12px;margin-left:auto}
/* Mobile header hint + messages icon */
.is-mobile .dm-hint{ display:inline-flex; align-items:center; gap:6px; }
.dm-icon-btn{ background:transparent; color:var(--dm-text); border:1px solid rgba(255,255,255,.18); width:22px; height:22px; border-radius:6px; display:inline-grid; place-items:center; cursor:pointer; font-size:14px; line-height:1; padding:0; }
.dm-icon-btn:hover{ background:rgba(255,255,255,.08); }

.dm-main{display:grid;grid-template-columns:1fr;gap:12px;flex:1;padding:12px}

.dm-board{position:relative;aspect-ratio:1/1;width:100%;max-height:calc(100vh - 160px);background:var(--dm-board);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:grid;grid-template-rows:repeat(11,1fr);grid-template-columns:repeat(11,1fr);overflow:hidden}
/* 6x6 perimeter variant (20 tiles) */
.dm-board.dm-6{ grid-template-rows:repeat(6,1fr); grid-template-columns:repeat(6,1fr); }
/* 7x7 perimeter variant (24 tiles) */
.dm-board.dm-7{ grid-template-rows:repeat(7,1fr); grid-template-columns:repeat(7,1fr); }
.dm-hub{position:absolute;inset:10% 10%;display:flex;align-items:center;justify-content:center;z-index:50}
.dm-hub-inner{width:min(92%, 520px);max-height:80%;overflow:auto;background:rgba(17,21,40,.9);color:var(--dm-text);border:1px solid rgba(255,255,255,.12);border-radius:12px;backdrop-filter:blur(6px);padding:12px;display:flex;flex-direction:column;align-items:stretch;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
/* Make center hub slightly smaller on the mobile boards to avoid covering side tiles */
.dm-board.dm-6 .dm-hub{ inset:14% 18%; }
.dm-board.dm-6 .dm-hub-inner{ width:min(84%, 420px); }
.dm-board.dm-7 .dm-hub{ inset:16% 20%; }
.dm-board.dm-7 .dm-hub-inner{ width:min(82%, 420px); }

/* 3D dice size override in hub */
.dm-hub-inner{ --dice-size: 90px; --pip-size: 12px; }
.dm-dice3d.scene{ gap:8px; margin:8px 0; }
.dm-ctrl-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0; }
.dm-tile{position:relative;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--dm-text);border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.dm-tile .dm-name{position:absolute;inset:auto 4px 4px 4px;text-align:center;line-height:1.2}

/* Mobile board tile text: larger for readability */
.dm-board.dm-6 .dm-tile{ font-size:22px; }
.dm-board.dm-7 .dm-tile{ font-size:22px; }

.dm-corner{background:rgba(255,255,255,.05);font-weight:600}
.dm-tax-office{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));outline:2px dashed rgba(255,255,255,.08);outline-offset:-6px}

.dm-property{--prop:#6ec1ff;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));}
.dm-property::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--prop)}

/* 地產持有者標記（右上角圓點） */
.dm-owner{position:absolute;top:4px;right:4px;width:12px;height:12px;border-radius:50%;border:2px solid rgba(0,0,0,.35);box-shadow:0 0 0 2px rgba(255,255,255,.2)}
/* 房子數量徽章（左上角數字） */
.dm-house{position:absolute;top:4px;left:4px;min-width:16px;height:16px;padding:0 4px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.18);color:var(--dm-text);font-weight:700;font-size:12px;line-height:1;border:1px solid rgba(255,255,255,.22)}

.dm-chance,.dm-fate{background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 6px,rgba(255,255,255,.01) 6px 12px)}
.dm-chance{border-color:rgba(110,193,255,.4)}
.dm-fate{border-color:rgba(255,122,122,.35)}

.dm-token{position:absolute;width:20px;height:20px;border-radius:50%;border:2px solid rgba(0,0,0,.35);box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,255,255,.15);transform:translate(-50%,-50%);transition:transform .16s ease, opacity .16s ease;opacity:.6;z-index:10}
.dm-token.is-active{box-shadow:0 4px 14px rgba(110,193,255,.6),inset 0 0 0 2px rgba(255,255,255,.3);opacity:1}

.dm-sidebar{display:flex;flex-direction:column;gap:12px}
.dm-controls{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}
.dm-btn{background:var(--dm-accent);color:#001326;border:none;border-radius:8px;padding:10px 12px;font-weight:700;cursor:pointer;box-shadow:0 6px 14px rgba(110,193,255,.25)}
.dm-btn[disabled]{opacity:.6;cursor:not-allowed;filter:grayscale(.3)}
.dm-dice{display:flex;gap:8px}
.dm-die{width:40px;height:40px;border-radius:8px;background:#fff;color:#111;display:grid;place-items:center;font-weight:800}

.dm-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px}
.is-mobile .dm-messages-panel{ display:none !important; }
.dm-tax-info{font-weight:700;letter-spacing:.3px}
.dm-dice .dm-tax-info{margin-left:auto}
.dm-players{display:flex;flex-direction:column;gap:8px}
.dm-player{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:center;opacity:.6;border-left:3px solid transparent;border-radius:6px;padding:2px 4px;transition:opacity .16s ease, background .16s ease, border-color .16s ease}
.dm-player.is-current{opacity:1;background:rgba(110,193,255,.08);border-left-color:var(--dm-accent)}
.dm-player .dm-chip{width:14px;height:14px;border-radius:50%;border:2px solid rgba(0,0,0,.35)}
.dm-player .dm-meta{font-size:12px;color:var(--dm-muted)}
.dm-player .dm-money{font-variant-numeric:tabular-nums}

/* Player name input */
.dm-name-input{width:84px;max-width:100%;background:rgba(255,255,255,.06);color:var(--dm-text);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:4px 6px;font-size:12px}
.dm-name-input:focus{outline:none;border-color:var(--dm-accent);box-shadow:0 0 0 2px rgba(110,193,255,.25)}
.dm-name-input.is-invalid{border-color:var(--dm-bad);box-shadow:0 0 0 2px rgba(255,122,122,.25)}

.dm-messages{position:relative; display:flex; flex-direction:column; gap:6px; max-height:28vh; overflow:auto}
.dm-toast{position:relative;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 10px;font-size:12px}
.is-hidden{display:none !important}

.dm-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:1000}
.dm-modal.is-open{display:flex}
.dm-dialog{background:#111528;border:1px solid rgba(255,255,255,.1);border-radius:12px;max-width:520px;width:100%;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.5)}

.pulse{animation:pulse 300ms ease-in-out}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

@media (max-width: 900px){
  .dm-main{grid-template-columns:1fr}
}
.dm-dice3d{ display:none !important; }

/* Portrait mobile: dock players below the board */
.dm-players-dock{ display:none; }
@media (max-width: 640px) and (orientation: portrait){
  .dm-players-dock{ display:block; }
  .dm-players-dock .dm-players-panel{ position:static; box-shadow:0 10px 30px rgba(0,0,0,.45); }
  .dm-players{ max-height:28vh; overflow:auto; }
}