/* =========================================================
   MONOPOLI INDONESIA — gaya lucu pastel 💕
   ========================================================= */
.fi { font-family: 'uicons-regular-rounded'; font-style: normal; font-weight: normal; display: inline-block; line-height: 1; vertical-align: -2px; }
.flat-emoji { display: inline-flex; align-items: center; justify-content: center; vertical-align: -2px; color: #305b50; }
.flat-emoji.avatar-0 { color: #d4575e; }
.flat-emoji.avatar-1 { color: #3e72ae; }
.flat-emoji.avatar-2 { color: #3f926d; }
.flat-emoji.avatar-3 { color: #b78a28; }
.btn .fi { margin-right: 7px; }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:root {
  --pink: #c64d4b; --pink-soft: #f3d9cf; --blue: #347c68; --blue-soft: #d6ece0;
  --cream: #fffaf0; --ink: #253c36; --ink-soft: #61736b;
  --green: #548c52; --yellow: #e5bd50; --red: #bb5147; --purple: #7b7b69;
  --shadow: 0 10px 30px rgba(120, 80, 140, .18);
}
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Baloo 2', 'Comic Sans MS', 'Segoe UI', sans-serif;
  color: var(--ink); background: #e9f1e8;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; }

.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 10; }
.lobby-bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, transparent 48%, rgba(32,93,72,.06) 49%, rgba(32,93,72,.06) 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(32,93,72,.06) 49%, rgba(32,93,72,.06) 51%, transparent 52%),
    linear-gradient(160deg, #edf5e9 0%, #f7f1de 55%, #dcebe2 100%);
  background-size: auto, auto, auto;
}
.floaters { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.floaters span { position: absolute; font-size: 28px; opacity: .8; animation: floaty 6s ease-in-out infinite; }

@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-22px) rotate(6deg); } }
@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes bounceIn { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 80% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes wobble { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,107,157,.45); } 50% { box-shadow: 0 0 0 10px rgba(255,107,157,0); } }
@keyframes slideDown { 0% { transform: translateY(-40px); opacity: 0; } 15%,85% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
@keyframes dicePop { 0% { transform: scale(0) rotate(-20deg); } 55% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes riseFade { 0% { transform: translateY(8px); opacity: 0; } 20%,80% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes spinHeart { 0%,100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12); } }

.pop-in { animation: popIn .45s cubic-bezier(.34,1.56,.64,1) both; }

/* ---------- lobby ---------- */
.lobby-card {
  width: min(430px, 92vw); background: rgba(255,250,239,.96); backdrop-filter: blur(8px);
  border-radius: 20px; padding: 26px 26px 20px; box-shadow: 0 14px 0 #c4d6c5, 0 24px 45px rgba(29,67,52,.16);
  border: 3px solid #2b5d4a; text-align: center; max-height: 94vh; overflow: auto;
}
.lobby-logo .logo-emoji { font-size: 54px; display: inline-block; animation: wobble 2.4s ease-in-out infinite; }
.lobby-logo h1 { font-family: 'Fredoka', 'Baloo 2', sans-serif; font-size: 34px; line-height: 1; letter-spacing: 1px; }
.lobby-logo h1 span { color: #bd3e3e; }
.lobby-logo h1 em { display: block; font-style: normal; font-size: 24px; color: #2b6650; letter-spacing: 6px; }
.tagline { margin-top: 8px; color: var(--ink-soft); font-size: 14.5px; font-weight: 600; }

.lbl { display: block; text-align: left; margin: 16px 2px 6px; font-weight: 700; color: var(--ink-soft); font-size: 14px; }
.inp {
  width: 100%; padding: 12px 16px; border-radius: 16px; border: 2.5px solid #f0e3f2;
  font-size: 17px; font-weight: 700; color: var(--ink); background: #fff; outline: none;
  transition: border-color .15s, transform .15s;
}
.inp:focus { border-color: var(--pink); transform: scale(1.01); }
.inp.code { text-transform: uppercase; text-align: center; letter-spacing: 8px; font-size: 22px; }

.avatar-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: -4px auto 6px; min-height: 148px; }
.avatar-stage canvas { width: 132px; height: 132px; display: block; }
.avatar-stage strong { margin-top: -8px; font-size: 15px; color: var(--ink); }
.avatar-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.avatar-hint { margin-top: 9px; font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.avatar-opt {
  min-width: 0; min-height: 82px; border-radius: 15px; background: #fff;
  border: 2.5px solid #e4e8dc; display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: all .15s cubic-bezier(.34,1.56,.64,1);
}
.avatar-opt img { width: 56px; height: 56px; object-fit: contain; }
.avatar-opt span { font-size: 11px; font-weight: 800; line-height: 1.1; }
.avatar-opt:hover { transform: translateY(-4px) rotate(-6deg); }
.avatar-opt.sel { border-color: #205b46; background: #dceadd; }
.avatar-opt:focus-visible, .color-opt:focus-visible { outline: 3px solid #205b46; outline-offset: 2px; }
.color-row { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.color-opt { width: 31px; height: 31px; border-radius: 50%; background: var(--swatch); border: 3px solid #fff; box-shadow: 0 0 0 1px #a3b3a6; }
.color-opt.sel { box-shadow: 0 0 0 3px #205b46; transform: scale(1.08); }

.btn {
  border-radius: 18px; padding: 12px 20px; font-size: 17px; font-weight: 800; color: #fff;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), filter .15s;
  box-shadow: 0 6px 0 rgba(0,0,0,.12);
}
.btn:active { transform: translateY(4px) scale(.98); box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.btn.big { width: 100%; padding: 15px; font-size: 19px; margin-top: 14px; }
.btn-pink { background: linear-gradient(180deg, #ff8ab5, var(--pink)); }
.btn-blue { background: linear-gradient(180deg, #6dabff, var(--blue)); }
.btn-green { background: linear-gradient(180deg, #85dd90, var(--green)); }
.btn-red { background: linear-gradient(180deg, #ff8f8f, var(--red)); }
.btn-ghost { background: #fff; color: var(--ink); border: 2.5px solid #f0e3f2; box-shadow: none; }
.btn-ghost:hover { border-color: var(--purple); }
.btn:disabled { filter: grayscale(.7) opacity(.6); cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; margin-top: 6px; }
.btn-row .btn { flex: 1; }
.join-row { display: flex; gap: 10px; margin-top: 14px; align-items: stretch; }
.join-row .inp.code { flex: 1; }
.join-row .btn { white-space: nowrap; }
.btn-link { display: inline-block; margin-top: 14px; color: var(--ink-soft); font-weight: 700; font-size: 14.5px; }
.btn-link:hover { color: var(--pink); }
.credit { margin-top: 18px; color: #c9a9d8; font-weight: 700; font-size: 13px; }

/* ---------- waitroom ---------- */
.wr-title { font-family: 'Fredoka', sans-serif; color: var(--ink-soft); font-size: 16px; letter-spacing: 2px; margin-bottom: 6px; }
.wr-code {
  font-family: 'Fredoka', sans-serif; font-size: 52px; font-weight: 700; letter-spacing: 10px;
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 4px 0 10px; animation: wobble 3s ease-in-out infinite;
}
.wr-players { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.wr-player {
  display: flex; align-items: center; gap: 12px; background: #fff; border: 2.5px solid #f6ecf8;
  border-radius: 16px; padding: 9px 14px; font-weight: 800; font-size: 17px; text-align: left;
}
.wr-player .av { font-size: 26px; }
.player-swatch { width: 15px; height: 15px; border-radius: 50%; flex: none; border: 2px solid #fff; box-shadow: 0 0 0 1px #8ca194; }
.wr-player .host { margin-left: auto; font-size: 13px; color: var(--pink); }
.wr-player .off { margin-left: auto; font-size: 12px; color: #c33; }
.wr-hint { color: var(--ink-soft); font-size: 13.5px; margin-top: 12px; font-weight: 600; }

/* ---------- game HUD ---------- */
#game { position: fixed; inset: 0; }
#c3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#speech-overlays { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.speech-bubble { position: absolute; min-width: 90px; max-width: min(190px, 50vw); padding: 6px 9px; border: 2px solid #285d48; border-radius: 11px; background: #fffdf5; color: #263f32; box-shadow: 0 4px 0 #afc8b1, 0 9px 16px rgba(22,54,36,.24); font-size: 12px; font-weight: 800; line-height: 1.25; text-align: center; overflow-wrap: anywhere; transform: translate(-50%, -100%); }
.speech-bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 11px; height: 11px; background: #fffdf5; border-right: 2px solid #285d48; border-bottom: 2px solid #285d48; transform: translateX(-50%) rotate(45deg); }

#topbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; z-index: 5; pointer-events: none;
}
.tb-logo {
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px); border-radius: 999px;
  padding: 7px 18px; font-weight: 800; font-size: 15px; box-shadow: var(--shadow); white-space: nowrap;
}
.tb-logo b { color: var(--pink); }
.tb-btns { display: flex; gap: 8px; pointer-events: auto; }
#btn-settings { display: none; }
#settings-menu { display: flex; gap: 8px; }
#settings-menu[hidden] { display: flex !important; }
.tb-btn {
  width: 40px; height: 40px; border-radius: 14px; background: rgba(255,255,255,.88); font-size: 18px;
  box-shadow: var(--shadow); transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.tb-btn:hover { transform: scale(1.12) rotate(-6deg); }

/* HUD pojok: duit sendiri + giliran (duit orang lain gak keliatan) */
#me-hud {
  position: absolute; top: calc(8px + env(safe-area-inset-top, 0px));
  left: calc(8px + env(safe-area-inset-left, 0px)); z-index: 5;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start; max-width: 250px;
}
.me-money {
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border-radius: 999px;
  padding: 7px 18px; font-weight: 800; font-size: 19px; color: #1a9c5c; box-shadow: var(--shadow);
  border: 2px solid #fff; white-space: nowrap;
}
.me-wallet { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px; }
.wchip {
  background: rgba(255,255,255,.94); border-radius: 999px; padding: 4px 11px;
  font-size: 11.5px; font-weight: 800; color: #7a5b00; box-shadow: var(--shadow);
  display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid #ffe08a;
}
.wchip .fi { color: #d9a13b; }
.wchip.bank { color: #3568b0; border-color: #b9d4ff; }
.wchip.bank .fi { color: #4d96ff; }
.me-props { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 4px; }
.pchip {
  width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; cursor: pointer;
}
.pchip.m { opacity: .35; }
.pchip.h::after { content: '⌂'; font-size: 9px; }
.pchip.ht::after { content: 'H'; font-size: 8px; font-weight: 900; }
.pchip.lm { box-shadow: 0 0 6px 1px rgba(255,217,61,.9); border-color: #ffd93d; }
.me-turn {
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-radius: 999px;
  padding: 5px 14px; font-weight: 700; font-size: 13px; color: var(--ink-soft);
  box-shadow: var(--shadow); white-space: nowrap;
}
.me-turn b { color: var(--ink); }
.me-turn.me { color: var(--pink); animation: pulseGlow 1.8s infinite; }
.me-turn.me b { color: var(--pink); }

#actionbar {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; gap: 10px; align-items: center;
}
#actionbar .btn { padding: 13px 24px; font-size: 17px; border-radius: 20px; animation: bounceIn .35s cubic-bezier(.34,1.56,.64,1) both; }
#actionbar .btn-bet { background: #fff; color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.10); }
#actionbar .btn-bet.active { background: var(--pink-soft); border-color: var(--pink); box-shadow: 0 0 0 2.5px var(--pink) inset, 0 4px 0 rgba(0,0,0,.08); }
#actionbar .btn b { font-weight: 900; }
.tb-btn .fi { font-size: 16px; }
#actionbar .btn:nth-child(2) { animation-delay: .06s; } #actionbar .btn:nth-child(3) { animation-delay: .12s; } #actionbar .btn:nth-child(4) { animation-delay: .18s; }

#toasts { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); z-index: 7; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: rgba(255,255,255,.96); border: 1px solid #d4dce2; border-left: 4px solid #526e83; border-radius: 10px; padding: 11px 16px; font-weight: 600; font-size: 14px;
  box-shadow: var(--shadow); animation: slideDown 2.6s ease both; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center;
}
.toast.big { font-size: 18px; }

#banner {
  position: absolute; top: 42%; left: 50%; z-index: 8; transform: translate(-50%,-50%);
  font-family: 'Fredoka', sans-serif; font-size: clamp(28px, 6vw, 52px); font-weight: 700; color: #fff;
  text-shadow: 0 4px 0 var(--pink), 0 8px 24px rgba(255,107,157,.5);
  animation: bannerAnim 1.6s cubic-bezier(.34,1.56,.64,1) both; pointer-events: none; white-space: nowrap;
}
@keyframes bannerAnim { 0% { transform: translate(-50%,-50%) scale(0) rotate(-10deg); opacity: 0; } 25% { transform: translate(-50%,-50%) scale(1.1) rotate(2deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 0; } }

#dice-pop {
  position: absolute; top: 30%; left: 50%; z-index: 8; transform: translate(-50%,-50%);
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 84px; color: #fff;
  text-shadow: 0 5px 0 #7c5cff, 0 10px 30px rgba(124,92,255,.5);
  animation: dicePop .5s cubic-bezier(.34,1.56,.64,1) both, riseFade 1.4s .9s ease both;
  pointer-events: none;
}
#dice-pop small { font-size: 30px; display: block; text-align: center; color: #fff44f; text-shadow: 0 3px 0 #ff9f43; }
#dice-pop.dbl small { animation: spinHeart 1s ease-in-out infinite; }

/* ---------- modal ---------- */
#modal-root:empty { display: none; }
.modal-wrap {
  position: fixed; inset: 0; z-index: 50; background: rgba(74,59,82,.45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 16px; animation: popIn .2s ease both;
}
.modal {
  background: var(--cream); border-radius: 26px; padding: 22px; width: min(430px, 94vw);
  max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); border: 3px solid #fff;
  animation: bounceIn .4s cubic-bezier(.34,1.56,.64,1) both; position: relative; text-align: center;
}
.modal h3 { font-family: 'Fredoka', sans-serif; font-size: 22px; margin-bottom: 4px; }
.modal .sub { color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.modal .btn-row { margin-top: 16px; }

/* Kartu undian mengikuti bahasa visual papan permainan: kertas, bingkai ganda, dan segel. */
.card-label { color: #205b46; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 2px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.card-flip-scene { perspective: 900px; margin: 10px auto 10px; width: 224px; height: 286px; }
.card-flip {
  width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.34,1.2,.5,1);
}
#owner-legend { position: absolute; top: 66px; right: calc(9px + env(safe-area-inset-right, 0px)); z-index: 5; display: grid; gap: 4px; pointer-events: none; }
.owner-legend-row { display: flex; align-items: center; gap: 5px; max-width: 150px; padding: 3px 7px; background: rgba(255,253,245,.91); border: 1px solid #c3d5c5; border-radius: 7px; box-shadow: 0 3px 8px rgba(35,65,48,.1); font-size: 10px; line-height: 1.1; }
.owner-legend-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-legend-row small { white-space: nowrap; color: var(--ink-soft); }
.owner-dot { width: 9px; height: 9px; border: 1px solid #254d3e; border-radius: 2px; flex: 0 0 auto; }
.owner-id { display: inline-grid; place-items: center; min-width: 22px; height: 17px; padding: 0 2px; border: 1px solid #254d3e; border-radius: 3px; color: white; font-size: 9px; font-weight: 900; flex: 0 0 auto; }
.card-flip.go { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px;
  display: flex; align-items: stretch; justify-content: stretch; padding: 8px;
  background: #fffaf0; border: 3px solid #254d3e;
  box-shadow: 0 7px 0 #b6cbb9, 0 16px 24px rgba(36,68,52,.18);
}
.card-face.back {
  transform: rotateY(180deg); color: var(--ink); font-family: 'Fredoka', sans-serif; font-size: 20px; font-weight: 700;
}
.card-flip-scene.chance { --card-accent: #bd6338; --card-tint: #f9e0bd; }
.card-flip-scene.dana { --card-accent: #1d7668; --card-tint: #d5ede4; }
.card-face-frame { position: relative; flex: 1; border: 2px solid var(--card-accent); background: linear-gradient(155deg, #fffdf5 0%, var(--card-tint) 100%); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 10px; text-align: center; }
.card-face-frame::before, .card-face-frame::after { content: ''; position: absolute; width: 22px; height: 22px; border: 2px solid var(--card-accent); }
.card-face-frame::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
.card-face-frame::after { right: 5px; bottom: 5px; border-left: 0; border-top: 0; }
.card-corner { font: 800 8px 'Baloo 2', sans-serif; letter-spacing: 1.8px; color: var(--card-accent); }
.cf-icon, .card-face.back .big { width: 84px; height: 84px; border: 3px solid var(--card-accent); border-radius: 50%; display: grid; place-items: center; background: #fffaf1; color: var(--card-accent); box-shadow: 0 4px 0 rgba(36,68,52,.12); }
.card-face strong { color: var(--card-accent); font-size: 19px; line-height: 1.12; }
.card-face.back strong { color: #254d3e; }
.card-stamp { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--card-accent); border-radius: 50%; color: var(--card-accent); }
.cf-text { margin: 12px 0 4px; padding: 11px 13px; border: 2px solid #c8d7c9; background: #f7f9ed; border-radius: 8px; font-size: 15px; font-weight: 700; color: #253c36; line-height: 1.35; }

/* deed — premium card */
.deed {
  width: min(304px, 100%); margin: 10px auto; border-radius: 8px; overflow: hidden;
  border: 3px solid #254d3e; background: #fffdf5; box-shadow: 0 6px 0 #c3d4c3, 0 15px 24px rgba(34,69,51,.14);
}
.deed-head {
  display: flex; align-items: center; gap: 11px; padding: 13px 15px;
  background: var(--gc, #5c9277);
  color: #fff; font-family: 'Fredoka', sans-serif; border-bottom: 3px solid #254d3e;
}
.deed-head .dh-ic { font-size: 26px; opacity: .95; background: rgba(255,255,255,.22); border-radius: 12px; padding: 8px 9px; }
.deed-head .dh-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.deed-head .dh-txt small { font-family: 'Baloo 2', sans-serif; font-size: 9.5px; letter-spacing: 1.6px; opacity: .85; font-weight: 800; }
.deed-head .dh-txt b { font-size: 17px; font-weight: 700; }
.deed-head .dh-lm {
  margin-left: auto; font-size: 11px; font-weight: 800; background: #ffd93d; color: #7a5b00;
  padding: 4px 9px; border-radius: 999px; display: flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.deed-body { padding: 12px 15px 14px; font-size: 13px; background: #fffdf5; }
.pr-row { display: flex; align-items: center; gap: 7px; padding: 4.5px 0; }
.pr-row.hl { background: #fff7d6; margin: 0 -8px; padding: 5px 8px; border-radius: 9px; }
.pr-ic { color: var(--gc, #a78bfa); width: 18px; text-align: center; }
.pr-lb { color: var(--ink-soft); font-weight: 600; }
.pr-dots { flex: 1; border-bottom: 2px dotted #e5d9ea; margin: 0 4px; transform: translateY(3px); }
.pr-val { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pr-cost { margin-top: 6px; padding-top: 6px; border-top: 1.5px dashed #eee0ee; }
.pr-note { margin-top: 9px; background: #e9f1e8; border-radius: 6px; padding: 7px 10px; font-size: 11px; color: #3e6650; font-weight: 700; line-height: 1.5; }
.pr-owner {
  margin-top: 10px; background: #f1f7ff; border-radius: 12px; padding: 7px 12px;
  font-weight: 800; font-size: 12.5px; color: #3568b0; display: flex; align-items: center; gap: 6px;
}
.pr-owner.free { background: #e8f1e8; color: #285a45; }
.tile-effect { margin-top: 9px; padding: 6px 9px; border: 2px solid #d79c59; border-radius: 7px; background: #fff0d1; color: #7d4d22; font-size: 10px; font-weight: 800; }
.tile-effect.rentFree { border-color: #86bdd3; background: #e6f5f8; color: #376779; }
.purchase-balance { display: grid; gap: 2px; margin: 10px auto; padding: 8px 12px; background: #e8f1e8; border: 2px solid #bcd2bd; border-radius: 8px; font-weight: 800; }
.purchase-balance b { font-size: 20px; color: #235d43; }
.purchase-balance span { font-size: 12px; }
.purchase-warning { color: #ac493f; font-size: 12px; font-weight: 800; }
.btn-landmark { display: flex; justify-content: center; align-items: center; gap: 7px; width: 100%; margin: 8px 0; padding: 10px; background: #bc9840; color: #fff; border: 2px solid #806325; border-radius: 9px; font-size: 13px; }
.btn-landmark b { white-space: nowrap; }
.event-mark { width: 78px; height: 78px; margin: 0 auto 9px; border: 3px solid #2d6d54; border-radius: 50%; display: grid; place-items: center; color: #2d6d54; background: #e8f1e8; }
.event-report-modal { max-width: 520px; text-align: left; }
.event-report-top { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d4dce2; padding-bottom: 12px; font-size: 11px; letter-spacing: .08em; color: #5b6975; }
.event-report-top > span:first-child { font-weight: 700; color: #273b4e; }
.event-report-head { display: flex; align-items: center; gap: 18px; margin: 20px 0 12px; }
.event-report-head .event-mark { flex: 0 0 64px; width: 64px; height: 64px; margin: 0; border-radius: 16px; }
.event-report-head small { color: #687782; }
.event-report-head h3 { margin: 4px 0 0; font-size: 22px; }
.event-report-body { line-height: 1.65; color: #273b4e; }
.event-report-foot { padding: 12px 0; border-top: 1px solid #d4dce2; color: #687782; font-size: 12px; line-height: 1.5; }
.event-report #event-ok { width: 100%; margin-top: 8px; }
@media (max-height: 480px) { .event-report-head { margin: 10px 0; } .event-report-head h3 { font-size: 18px; } .event-report-body { margin: 8px 0; } }
.event-mark.flood { color: #3a7d9c; border-color: #3a7d9c; background: #e0f0f5; }
.event-mark.blackout { color: #ad842b; border-color: #ad842b; background: #fff0d0; }
.event-mark.concert { color: #a06d18; border-color: #d1a540; background: #fff1c7; box-shadow: 0 0 0 8px rgba(235,191,79,.2), 0 0 30px rgba(245,183,53,.55); animation: pulseGlow 1.1s infinite; }
.event-mark.festival { color: #a06d18; border-color: #d1a540; background: #fff1c7; box-shadow: 0 0 0 8px rgba(235,191,79,.2), 0 0 30px rgba(245,183,53,.55); }
.project-actions { display: grid; gap: 6px; margin: 12px 0; padding: 10px; border: 2px solid #c9d8c8; border-radius: 9px; background: #f4f8ee; text-align: left; }
.project-actions > b { color: #275941; font-size: 14px; }
.project-actions > small { color: var(--ink-soft); font-weight: 800; }
.project-btn { width: 100%; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 7px; font-size: 12px; text-align: left; }
.project-btn strong { margin-left: auto; white-space: nowrap; }
.city-options { margin-top: 9px; text-align: left; border: 2px solid #c9d8c8; border-radius: 8px; background: #f8f9f2; }
.city-options > summary { list-style: none; cursor: pointer; padding: 8px 10px; color: #285d48; font-weight: 800; font-size: 13px; }
.city-options > summary::-webkit-details-marker { display: none; }
.city-options > summary::after { content: '⌄'; float: right; font-size: 17px; line-height: 1; }
.city-options[open] > summary::after { transform: rotate(180deg); }
.city-options .project-actions { margin: 0 7px 7px; border-width: 1px; }
.city-options .deed { margin: 7px auto; }
.fly-hint { background: #fffdf5; border: 2px solid #2c6b52; border-radius: 11px; padding: 7px 10px; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; box-shadow: var(--shadow); }
.fly-hint .btn { padding: 6px 10px !important; font-size: 12px !important; }
#chat-ui { position: absolute; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 9; pointer-events: auto; }
#chat-toggle { display: grid; place-items: center; color: #245743; border: 2px solid #245743; }
#chat-panel { width: min(290px, calc(100vw - 24px)); margin-bottom: 8px; border: 2px solid #245743; border-radius: 12px; background: #fffdf5; box-shadow: var(--shadow); padding: 10px; }
#chat-panel { position: absolute; right: 0; bottom: 56px; margin: 0; }
.chat-title { display: flex; align-items: center; justify-content: space-between; font-weight: 900; }
.chat-title button { font-size: 22px; }
#chat-messages { min-height: 48px; max-height: 130px; overflow: auto; font-size: 12px; }
.chat-message { margin: 4px 0; overflow-wrap: anywhere; }
.chat-reactions { display: flex; justify-content: space-between; gap: 4px; margin: 6px 0; }
.chat-reactions button { flex: 1; border: 1px solid #c9d9cb; border-radius: 7px; background: #ecf3e9; padding: 5px 0; }
#chat-form { display: flex; gap: 5px; }
#chat-input { width: 100%; min-width: 0; border: 1px solid #bdd2c2; border-radius: 7px; padding: 7px; font: inherit; font-size: 12px; }
#chat-form button { padding: 0 10px; background: #347c68; color: white; border-radius: 7px; font-size: 12px; font-weight: 800; }
.pr-owner .av { font-size: 16px; }
.special-tile { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 13px 4px 5px; }
.special-icon { width: 83px; height: 83px; display: grid; place-items: center; border: 3px solid #285847; border-radius: 50%; color: #285847; background: #edf3e6; }
.special-tile p { font-size: 15px; line-height: 1.3; font-weight: 800; color: var(--ink); }
.special-tile small { width: 100%; border-top: 2px solid #ccd8c8; padding-top: 9px; font-size: 9px; font-weight: 800; letter-spacing: 1.3px; color: #557768; }
.rent-row.hl { background: #fff7d6; border-radius: 6px; }

/* ROLL HUD — tombol roll besar di tengah papan ala game mobile */
#roll-hud {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 6; display: flex; align-items: center; gap: 16px;
}
.roll-btn {
  width: 104px; height: 104px; border-radius: 50%;
  background: linear-gradient(180deg, #ff9fbb, #ff5f95);
  color: #fff; font-family: 'Fredoka', sans-serif; font-size: 19px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 6px 0 #d94f7f, 0 10px 26px rgba(255,95,149,.5);
  border: 4px solid #fff; transition: transform .12s cubic-bezier(.34,1.56,.64,1);
  animation: rollPulse 1.6s ease-in-out infinite;
}
.roll-btn .fi { font-size: 22px; }
.roll-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.roll-tickets {
  background: #fff; border-radius: 999px; padding: 2px 10px;
  font-size: 11px; font-weight: 800; color: var(--ink-soft); box-shadow: var(--shadow);
  display: inline-flex; align-items: center; gap: 4px;
}
.bet-pill:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
.bet-pill:disabled:hover { transform: none; }
.roll-btn:active { transform: scale(.92); }
@keyframes rollPulse { 0%,100% { box-shadow: 0 6px 0 #d94f7f, 0 10px 26px rgba(255,95,149,.5); } 50% { box-shadow: 0 6px 0 #d94f7f, 0 14px 34px rgba(255,95,149,.75); } }
.bet-pill {
  background: #fff; border: 3px solid #ffe1ec; border-radius: 999px; padding: 11px 20px;
  font-family: 'Fredoka', sans-serif; font-size: 15px; font-weight: 700; color: var(--ink-soft);
  box-shadow: 0 4px 14px rgba(120,80,140,.18); transition: all .13s cubic-bezier(.34,1.56,.64,1);
}
.bet-pill.active {
  border-color: var(--pink); color: var(--pink); background: var(--pink-soft);
  transform: scale(1.08); box-shadow: 0 0 0 3px #fff inset, 0 4px 14px rgba(255,107,157,.4);
}

/* save link */
.save-link {
  background: #f1f7ff; border: 2px dashed #9cc3f5; border-radius: 12px; padding: 10px 12px;
  font-size: 12px; font-weight: 700; color: #3568b0; word-break: break-all; margin-top: 10px;
}
.wr-player.ready { border-color: #b7e2c1; background: #f2fcf4; }
.wr-player .host { color: #1a9c5c; }

/* fly */
.fly-head { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--blue); }
.fly-head .fi { font-size: 26px; }
.go-medal { color: #d9a13b; display: inline-flex; }

/* fly map */
.fly-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; max-height: 46vh; overflow: auto; padding: 2px; }
.fly-opt {
  border: 2px solid #f0e3f2; border-radius: 13px; padding: 8px 4px; font-size: 12px; font-weight: 800;
  background: #fff; transition: all .13s; line-height: 1.25;
}
.fly-opt .fe { font-size: 19px; display: block; }
.fly-opt:hover { border-color: var(--blue); transform: translateY(-3px) rotate(-2deg); background: var(--blue-soft); }
.fly-opt.corner { background: #fff3f8; }

/* trade */
.trade-cols { display: flex; gap: 10px; text-align: left; margin-top: 10px; }
.trade-col { flex: 1; background: #fff; border-radius: 14px; padding: 9px; border: 2px solid #f0e3f2; }
.trade-col h4 { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.trade-item { display: flex; align-items: center; gap: 7px; padding: 4px 2px; font-size: 13.5px; font-weight: 700; }
.trade-item input { accent-color: var(--pink); width: 16px; height: 16px; }
.trade-dot { width: 13px; height: 13px; border-radius: 4px; }
.trade-cash { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.trade-cash input { width: 100%; }
.trade-open { display: inline-flex; align-items: center; gap: 7px; width: auto; padding: 0 12px; }
.trade-open span { font-size: 12px; font-weight: 700; }
.trade-slots { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 10px; margin: 18px 0; }
.trade-slot { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px 10px; border: 2px dashed var(--slot-color); border-radius: 12px; background: #fffdf7; color: #294439; cursor: pointer; }
.trade-slot.filled { border-style: solid; border-top-width: 8px; }
.trade-slot small { font-size: 11px; color: #687782; }
.trade-slot > span:last-child { font-size: 11px; color: #687782; }
.trade-slot-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: #edf3ef; }
.trade-exchange { color: #597066; }
.trade-balance { margin-top: 10px; font-size: 12px; line-height: 1.5; color: #687782; }
.trade-pick-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; background: #fffdf7; border: 2px solid #4c8b78; box-shadow: var(--shadow); width: max-content; max-width: calc(100vw - 24px); font-size: 13px; }
.trade-pick-hint .btn { padding: 7px 12px; }
.event-mark.blackHole, .tile-effect.blackHole { color: #7851b4; border-color: #ad82e2; background: #efe7fa; }
.event-mark.thr, .event-mark.subsidy { color: #277460; border-color: #69b89e; background: #e4f4ec; }
@media (max-height: 480px) { .trade-slots { margin: 10px 0; } .trade-slot { min-height: 105px; padding: 8px; gap: 5px; } .trade-slot-icon { width: 32px; height: 32px; } }

/* gameover */
.go-crown { font-size: 64px; animation: wobble 2s ease-in-out infinite; }
.go-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.go-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 8px 12px; font-weight: 800; }
.go-row .worth { margin-left: auto; color: #1a9c5c; }

/* rules */
.rules-list { text-align: left; font-size: 14px; line-height: 1.55; font-weight: 600; color: var(--ink-soft); }
.rules-list b { color: var(--ink); }
.rules-list li { margin: 7px 0 7px 18px; }

/* debt panel */
.debt-box { background: #fff0f0; border: 2.5px solid #ffc9c9; border-radius: 16px; padding: 12px; margin-top: 10px; font-weight: 700; color: #c0392b; }

/* mobile */
@media (max-width: 760px) {
  .me-money { font-size: 15px; padding: 5px 13px; }
  .me-turn { font-size: 11px; padding: 4px 10px; }
  #actionbar { bottom: 10px; }
  #actionbar .btn { padding: 12px 18px; font-size: 15px; }
  .tb-logo { display: none; }
  .wr-code { font-size: 40px; letter-spacing: 6px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .speech-bubble { font-size: 11px; max-width: 142px; }
  #owner-legend { top: calc(57px + env(safe-area-inset-top, 0px)); }
  .owner-legend-row { max-width: 132px; font-size: 9px; }
  #chat-ui { right: calc(8px + env(safe-area-inset-right, 0px)); bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  #toasts { left: 50%; transform: translateX(-50%); }
  #topbar { top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); left: auto; transform: none; }
  #btn-settings { display: inline-flex; align-items: center; justify-content: center; }
  #settings-menu, #settings-menu[hidden] { display: none !important; }
  #settings-menu:not([hidden]) { position: absolute; top: 48px; right: 0; display: flex !important; flex-direction: column; gap: 5px; width: 180px; padding: 8px; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
  #settings-menu .tb-btn { display: flex; align-items: center; gap: 11px; width: 100%; height: 38px; padding: 0 10px; text-align: left; border-radius: 10px; background: #f6f2fa; font-size: 16px; }
  #settings-menu .tb-btn::after { content: attr(title); font-size: 13px; font-weight: 700; text-transform: capitalize; }
  #toasts { top: calc(62px + env(safe-area-inset-top, 0px)); width: min(340px, calc(100vw - 36px)); }
  .toast { border-radius: 18px; font-size: 13px; line-height: 1.35; }
}

/* =========================================================
   HP LANDSCAPE — kompak & nyaman di layar pendek 📱↔
   ========================================================= */
@media (max-height: 540px) {
  /* HUD */
  #topbar { top: calc(6px + env(safe-area-inset-top, 0px)); }
  .tb-btn { width: 34px; height: 34px; font-size: 15px; border-radius: 11px; }
  .tb-logo { display: none; }
  .me-money { font-size: 14px; padding: 4px 12px; }
  .me-turn { font-size: 10.5px; padding: 3px 10px; }
  .me-props { max-width: 170px; }
  .pchip { width: 11px; height: 11px; border-radius: 3px; }
  #actionbar { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  #actionbar .btn { padding: 10px 15px; font-size: 13.5px; border-radius: 14px; }
  #toasts { top: calc(44px + env(safe-area-inset-top, 0px)); }
  .toast { font-size: 12.5px; padding: 6px 15px; }
  #banner { font-size: 30px; }
  #dice-pop { font-size: 52px; }
  #dice-pop small { font-size: 19px; }

  /* modal */
  .modal { padding: 12px 14px; border-radius: 18px; max-height: 94vh; }
  .modal h3 { font-size: 16.5px; }
  .modal .sub { font-size: 11.5px; }
  .modal .btn-row { margin-top: 10px; gap: 7px; }
  .btn { padding: 10px 14px; font-size: 14px; border-radius: 14px; }
  .btn.big { padding: 12px; font-size: 15px; margin-top: 8px; }
  .deed { width: 210px; margin: 6px auto; }
  .deed-head { padding: 9px 11px; }
  .deed-head .dh-txt b { font-size: 14px; }
  .deed-head .dh-txt small { font-size: 8px; }
  .deed-head .dh-ic { font-size: 20px; padding: 6px 7px; }
  .deed-body { padding: 7px 10px 9px; font-size: 10.5px; }
  .pr-row { padding: 2.5px 0; gap: 5px; }
  .pr-note { font-size: 8.5px; padding: 4px 7px; margin-top: 5px; }
  .pr-owner { font-size: 10px; padding: 5px 8px; margin-top: 7px; }
  .me-money { font-size: 14px; padding: 4px 12px; }
  .me-turn { font-size: 10.5px; padding: 3px 10px; }
  .me-props { max-width: 170px; }
  .pchip { width: 11px; height: 11px; border-radius: 3px; }
  .card-flip-scene { width: 148px; height: 210px; margin: 4px auto; }
  .cf-icon, .card-face.back .big { width: 55px; height: 55px; }
  .cf-icon .fi, .card-face.back .big .fi { font-size: 34px !important; }
  .card-face-frame { padding: 6px; }
  .card-corner { font-size: 6px; letter-spacing: .7px; }
  .card-face strong { font-size: 13px; }
  .card-stamp { width: 24px; height: 24px; }
  .cf-icon { font-size: 36px; }
  .card-face.back .big { font-size: 40px; }
  .cf-title { font-size: 15px; }
  .card-face.back { font-size: 17px; }
  .cf-text { font-size: 12px; }
  .fly-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; max-height: 54vh; }
  .fly-opt { font-size: 9.5px; padding: 5px 3px; border-radius: 10px; }
  .fly-opt .fe { font-size: 15px; }
  .trade-cols { gap: 7px; margin-top: 7px; }
  .trade-col { padding: 6px; }
  .trade-col h4 { font-size: 11px; }
  .trade-item { font-size: 11px; gap: 5px; padding: 3px 2px; }
  .trade-cash { margin-top: 7px; }
  .rules-list { font-size: 11.5px; }
  .rules-list li { margin: 5px 0 5px 14px; }
  .go-crown { font-size: 44px; }
  .go-row { padding: 5px 9px; font-size: 12.5px; }

  /* lobby & waitroom tetap muat */
  .lobby-card { padding: 14px 18px 12px; border-radius: 20px; width: min(560px, 94vw); }
  .lobby-logo .logo-emoji { font-size: 34px; }
  .lobby-logo h1 { font-size: 24px; }
  .lobby-logo h1 em { font-size: 15px; letter-spacing: 4px; }
  .tagline { font-size: 11.5px; margin-top: 3px; }
  .lbl { margin: 8px 2px 4px; font-size: 11.5px; }
  .inp { padding: 8px 12px; font-size: 14px; border-radius: 12px; }
  .inp.code { font-size: 16px; letter-spacing: 6px; }
  .avatar-stage { min-height: 101px; margin-bottom: 2px; }
  .avatar-stage canvas { width: 88px; height: 88px; }
  .avatar-stage strong { font-size: 11px; margin-top: -5px; }
  .avatar-opt { min-height: 56px; border-radius: 11px; }
  .avatar-opt img { width: 36px; height: 36px; }
  .avatar-opt span { font-size: 8px; }
  .color-opt { width: 25px; height: 25px; }
  .join-row { margin-top: 8px; }
  .btn-link { margin-top: 8px; font-size: 12px; }
  .wr-code { font-size: 34px; letter-spacing: 7px; padding: 2px 0 6px; }
  .wr-player { padding: 6px 10px; font-size: 14px; border-radius: 12px; }
  .wr-player .av { font-size: 19px; }
  .wr-hint { font-size: 11px; margin-top: 8px; }
}



.toast { display: flex; align-items: center; gap: 12px; line-height: 1.45; }
.toast-icon { display: grid; place-items: center; flex: 0 0 28px; color: #526e83; }
.toast-message { text-align: left; }

@media (max-height: 480px) {
  .trade-modal h3 { margin: 0; }
  .trade-modal > .sub { margin: 4px 0; font-size: 11px; }
  .trade-modal .trade-slots { margin: 6px 0; }
  .trade-modal .trade-slot { min-height: 82px; padding: 6px; gap: 3px; }
  .trade-modal .trade-slot small { font-size: 9px; }
  .trade-modal .trade-slot-icon { width: 24px; height: 24px; }
  .trade-modal .trade-slot-icon i { font-size: 18px !important; }
  .trade-modal .lbl { margin: 6px 0 4px; font-size: 11px; }
  .trade-modal .trade-balance { margin: 6px 0; font-size: 10px; line-height: 1.35; }
  .trade-modal .trade-cash { margin-top: 4px; }
  .trade-modal .inp { padding: 7px 10px; }
  .trade-modal #tr-clear-give { padding: 3px; margin: 0; font-size: 11px; }
  .trade-modal #tr-error:empty { display: none; }
  .trade-modal .btn-row { margin-top: 7px; }
}

.edition-picker { display: flex; gap: 12px; margin: 22px 0; }
.edition-option { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 10px; background: #fffdf7; border: 2px solid #e7c4be; border-radius: 16px; color: #294439; cursor: pointer; }
.edition-option.world { border-color: #bad2e5; background: #f6fbff; }
.edition-option img { width: 56px; height: 42px; object-fit: contain; }
.edition-option strong { font-size: 17px; }
.edition-option > span:last-child { font-size: 11px; line-height: 1.4; color: #687782; }
.edition-globe { width: 56px; height: 42px; display: grid; place-items: center; font-size: 45px; color: #4487b3; line-height: 1; }
.wr-edition { color: #4c7465; margin: 5px 0 12px; font-size: 14px; }
.deed-flag { width: 62px; height: 46px; object-fit: contain; border: 1px solid #c4ccd2; background: white; }
.trade-modal { max-width: 560px; }
.trade-modal #tr-clear-get { font-size: 11px; padding: 3px; margin: 0; }
@media (max-height: 480px) {
  .edition-picker { margin: 12px 0; }
  .edition-option { padding: 12px 10px; gap: 6px; }
  .trade-modal .lbl { margin-top: 3px; }
  .trade-modal .trade-slot { min-height: 62px; }
  .trade-modal .trade-slot-icon { display: none; }
  .trade-modal .trade-balance { font-size: 9px; }
  .trade-modal #tr-to { padding: 5px 8px; font-size: 11px; }
}

.trade-flag { width: 42px; height: 32px; object-fit: contain; }
@media (max-height: 480px) {
  .trade-modal .trade-slot { min-height: 48px; padding: 4px; gap: 2px; }
  .trade-modal > h3 { font-size: 15px; }
  .trade-modal > .sub { font-size: 10px; line-height: 1.25; }
  .trade-modal .trade-balance { margin: 4px 0; line-height: 1.25; }
  .trade-modal #tr-clear-give, .trade-modal #tr-clear-get { font-size: 9px; padding: 2px; }
  .trade-modal .trade-slots { margin: 4px 0; }
}

@media (max-height: 480px) {
  #topbar { top: 8px; right: 8px; left: auto; transform: none; }
  .tb-logo { display: none; }
  .tb-btns { gap: 6px; }
  .tb-btn.trade-open { width: auto; min-width: 62px; padding: 0 8px; gap: 5px; white-space: nowrap; flex-shrink: 0; }
  .trade-open span { font-size: 10px; }
  #btn-settings { display: inline-flex; align-items: center; justify-content: center; }
  #settings-menu, #settings-menu[hidden] { display: none !important; }
  #settings-menu:not([hidden]) { position: absolute; top: 44px; right: 0; display: flex !important; flex-direction: column; gap: 5px; width: 180px; padding: 8px; border-radius: 14px; background: #fffdf7; box-shadow: var(--shadow); }
  #settings-menu .tb-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 8px; text-align: left; }
  #settings-menu .tb-btn::after { content: attr(title); font-size: 12px; text-transform: capitalize; }
}

.flat-emoji.avatar-4 { color: #9b6997; }
.flat-emoji.avatar-5 { color: #98734e; }
.flat-emoji.avatar-6 { color: #446981; }
.flat-emoji.avatar-7 { color: #4e805d; }
@media (min-width: 700px) and (max-height: 480px) {
  .avatar-row { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  .avatar-opt img { width: 34px; height: 34px; }
  .avatar-opt span { font-size: 8px; }
}

.setup-card .lobby-logo .logo-emoji { font-size: 32px; }
.setup-card .lobby-logo h1 { font-size: 28px; }
.setup-card .lobby-logo h1 em { font-size: 18px; letter-spacing: 4px; }
.setup-card .tagline { font-size: 11px; margin-top: 4px; }
.setup-card #btn-change-edition { margin-top: 8px; }

/* Game HUD: raised controls, player cards and compact effect badges. */
#game {
  --hud-navy: #173c42; --hud-gold: #edc66d;
  --board-bottom: 70vh; --board-top: 30vh; --board-left: 16px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
}
#topbar { left: auto; right: 16px; transform: none; top: calc(14px + env(safe-area-inset-top, 0px)); gap: 10px; }
.tb-logo { border: 2px solid #e9d49b; border-radius: 14px; background: #173c42; color: #fff6dc; box-shadow: 0 4px 0 #0b252b, 0 8px 16px #14382a26; font-size: 13px; }
.tb-logo b { color: #f1ca6b; }
#game .tb-btn { border: 2px solid #d7e9df; background: linear-gradient(#fffdf2, #e5ede1); color: #214e47; border-radius: 14px; box-shadow: 0 4px 0 #9ab4a4, 0 6px 12px #173c4220; width: 44px; height: 44px; }
#game .tb-btn:hover { transform: translateY(-2px); }
#game .tb-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #9ab4a4; }
#game .tb-btn:disabled { opacity: .45; transform: none; }
#game button:focus-visible, .modal button:focus-visible { outline: 3px solid #e8b63d; outline-offset: 3px; }
#board-tools { position: absolute; left: var(--board-left); top: calc(var(--board-bottom) + 14px); display: flex; gap: 10px; z-index: 6; }
#game #btn-trade { width: auto; min-width: 102px; padding: 0 15px; color: #fff7de; border-color: #e5c475; background: linear-gradient(#356c61, #1c4b46); box-shadow: 0 4px 0 #0e302e, 0 8px 16px #123e3033; }
#btn-trade .fi { color: #f3d27b; }
#game #btn-event-vote { width: auto; padding: 0 12px; }
.trade-open span { font-size: 13px; }
#game #btn-event-vote.vote-pending { border-color: #e8ba4c; color: #8b6419; background: #fff2c4; }
#me-hud { top: calc(14px + env(safe-area-inset-top, 0px)); left: calc(14px + env(safe-area-inset-left, 0px)); max-width: 290px; gap: 7px; }
.me-profile { min-width: 250px; display: flex; align-items: center; gap: 10px; padding: 9px 12px 10px; border: 2px solid #d5e9d5; border-radius: 19px; background: linear-gradient(135deg, #214f4c, #123638); box-shadow: 0 5px 0 #092e30, 0 10px 18px #173c4226; }
.me-profile > div { flex: 1; min-width: 0; }
.me-profile small { display: block; font-size: 11px; line-height: 1.25; color: #c9ded0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-avatar { display: grid; place-items: center; flex: 0 0 35px; height: 35px; background: var(--player-color); color: #fff; border: 2px solid #fff9df; border-radius: 12px; box-shadow: inset 0 -3px 0 #0002; }
.me-money { background: none; border: 0; backdrop-filter: none; box-shadow: none; padding: 0; color: #fff0ac; font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.me-money > .fi { color: #edc66d; }
.victory-meter { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #edc66d; font-size: 10px; border-left: 1px solid #fff2; padding-left: 9px; }
.me-wallet { padding: 0; gap: 5px; }
.wchip { background: #fff9e8; color: #725722; border: 1px solid #e4cb90; box-shadow: 0 2px 0 #b9c7a7; border-radius: 9px; font-size: 11px; min-height: 26px; padding: 3px 8px; }
.wchip.bank { background: #edf5f4; color: #326469; border-color: #b6d5cd; }
.wchip.bank .fi { color: #447971; }
.wchip.sell-card { color: #16784a; background: #e4f6dc; border-color: #abd39c; }
.card-inventory { position: relative; box-shadow: 2px 2px 0 #b3c7a4, 4px 4px 0 #d1dcc0; margin-right: 3px; }
.me-props { padding: 0 0 3px; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.pchip { width: 25px; height: 25px; flex: 0 0 25px; border-radius: 6px; border: 2px solid #fff7e5; color: #173c42; box-shadow: inset 0 -3px 0 #0002, 0 2px 0 #809b8b; }
.pchip.h::after, .pchip.ht::after { content: none; }
.me-turn { background: #fff9e6; border: 1px solid #ddcc9d; box-shadow: 0 2px 0 #b6c4a3; border-radius: 9px; padding: 4px 9px; color: #53655c; font-size: 11px; }
.me-turn.me { animation: none; background: #d7efcc; border-color: #95bc78; color: #34632c; }
.me-turn.me b { color: #34632c; }
#owner-legend { top: calc(78px + env(safe-area-inset-top, 0px)); right: 16px; gap: 7px; }
.owner-legend-row { min-width: 136px; max-width: 178px; padding: 7px 9px; gap: 8px; border: 2px solid #d0ded0; border-radius: 12px; background: #fff9e9; box-shadow: 0 3px 0 #b3c6b2; }
.owner-legend-row > div { min-width: 0; flex: 1; }
.owner-legend-row b { display: block; font-size: 11px; line-height: 1.3; }
.owner-legend-row small { display: block; font-size: 10px; line-height: 1.3; color: #6c7c70; }
.owner-legend-row.current { border-color: var(--player-color); background: #fff5d3; }
.owner-legend-row.eliminated { opacity: .45; }
.owner-id { height: 26px; min-width: 26px; border: 2px solid #fff; border-radius: 9px; font-size: 10px; box-shadow: 0 2px 0 #0002; }
.turn-light { flex: 0 0 6px; height: 6px; background: #58a557; border-radius: 50%; box-shadow: 0 0 0 3px #58a55726; }
.legend-turn { display: none; }
#status-hud { position: absolute; top: 205px; left: 14px; max-width: 270px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.status-chip { --effect: #438f82; --effect-bg: #e7f4ea; display: flex; align-items: center; gap: 7px; background: var(--effect-bg); color: var(--effect); border: 1px solid var(--effect); border-radius: 11px; padding: 5px 8px; box-shadow: 0 3px 0 #173c421a; font-size: 11px; }
.status-icon { display: grid; place-items: center; }
.status-label { line-height: 1.15; font-weight: 800; }
.status-count { display: flex; align-items: center; gap: 3px; margin-left: 2px; padding-left: 7px; border-left: 1px solid currentColor; font-size: 15px; line-height: 1; }
.status-count small { font-size: 8px; font-weight: 600; }
.status-chip.portal { --effect: #8854bb; --effect-bg: #f0e8ff; }
.status-chip.festival { --effect: #a67319; --effect-bg: #fff1c3; }
.status-chip.flood { --effect: #287d9b; --effect-bg: #e0f4fc; }
.status-chip.blackout { --effect: #7256ab; --effect-bg: #ede6fc; }
.status-chip.danger { --effect: #b94a49; --effect-bg: #fce5df; }
.status-chip.reverse { --effect: #be6e2f; --effect-bg: #ffedda; }
.status-chip.vote { --effect: #9b7323; --effect-bg: #fff3ce; }
.status-chip.recession, .fee-due { --effect: #a64b42; --effect-bg: #fae6df; color: #a64b42; background: #fae6df; }
#toasts { top: 76px; width: min(370px, calc(100vw - 28px)); gap: 6px; }
.toast { --toast-accent: #3e777f; --toast-bg: #f0f8f4; width: max-content; padding: 9px 12px; gap: 9px; border: 1px solid #c1d3c4; border-left: 4px solid var(--toast-accent); border-radius: 13px; background: var(--toast-bg); box-shadow: 0 3px 0 #113a3020, 0 8px 18px #113a3026; font-size: 12px; font-weight: 700; animation: gameToast 3s ease both; }
.toast-icon { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; color: var(--toast-accent); background: #fff9; }
.toast-message { line-height: 1.35; color: #294943; }
.toast-message > small { display: block; font-size: 9px; color: #6c7c71; letter-spacing: .03em; margin-bottom: 2px; }
.toast-gain { --toast-accent: #21824a; --toast-bg: #e6f7e7; border-color: #b6d9b5; }
.toast-loss { --toast-accent: #c44747; --toast-bg: #ffebe7; border-color: #e7b9b0; }
.toast-reward { --toast-accent: #b38023; --toast-bg: #fff2d0; border-color: #e6d397; }
.toast-warning { --toast-accent: #c27135; --toast-bg: #fff0df; border-color: #e1c4a4; }
.toast-portal { --toast-accent: #8854bb; --toast-bg: #f1e8ff; border-color: #d1bee6; }
.toast-trade { --toast-accent: #34789e; --toast-bg: #e7f2fb; border-color: #bed7e7; }
.money-gain { color: #157637; }
.money-loss { color: #bd353e; }
.toast-gain .toast-message > b, .toast-loss .toast-message > b { font-size: 17px; font-variant-numeric: tabular-nums; }
@keyframes gameToast { 0% { opacity: 0; transform: translateY(-8px) scale(.96); } 8%, 85% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-5px); } }
#banner { top: calc(var(--board-top) - 32px); max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; font-family: 'Baloo 2', sans-serif; font-size: 15px; color: #fff4ce; padding: 7px 18px; border: 2px solid #d7bd76; border-radius: 12px; background: #214e48; text-shadow: none; box-shadow: 0 4px 0 #102f2d; }
#dice-pop { top: calc(var(--board-top) + 28px); font-size: 46px; text-shadow: 0 3px 0 #315e57, 0 6px 12px #123e3033; }
#dice-pop small { font-size: 16px; }
#actionbar { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px); justify-content: center; flex-wrap: wrap; gap: 9px; }
#actionbar .btn, .modal .btn { border: 2px solid #fff8; border-radius: 14px; box-shadow: 0 4px 0 #183d3433, inset 0 2px 0 #ffffff40; }
#actionbar .btn { font-size: 15px; padding: 11px 20px; }
.modal-wrap { background: #0b292a85; backdrop-filter: blur(5px); animation: modalBackdrop .15s ease both; }
.modal { border: 2px solid #dfcc9a; border-radius: 22px; background: linear-gradient(160deg, #fffdf3, #f4efd9); box-shadow: 0 7px 0 #203e37, 0 22px 60px #071c2666, inset 0 0 0 4px #fff9; animation: gamePanel .22s ease both; }
@keyframes modalBackdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes gamePanel { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.modal { overflow-x: hidden; }
.modal .btn-row { flex-wrap: wrap; }
.modal .btn-row > .btn { flex: 1 1 110px; overflow-wrap: anywhere; }
.property-modal .deed { margin-top: 0; }
.deed-head .dh-txt { min-width: 0; }
.deed-head .dh-txt b { overflow-wrap: anywhere; }
.deed-head .dh-lm { font-size: 9px; padding: 3px 6px; }
.property-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.property-actions .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 48px; padding: 10px; font-size: 13px; }
.property-actions .primary { grid-column: 1 / -1; }
.property-actions .btn b { font-size: 12px; white-space: nowrap; }
.property-hint { padding-top: 7px; color: #67816f; font-size: 11px; }
.player-badge { display: inline-grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; background: var(--player-color, #42c7bd); border: 1px solid #fff; color: white; font-size: 11px; font-weight: 800; }
.me-avatar { font-size: 13px; font-weight: 800; }
.victory-meter > small { font-size: 8px; white-space: nowrap; }
.status-chip.event-progress, .status-chip.pending { --effect: #507468; --effect-bg: #f7f5dc; }
.build-path { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 12px 0; color: #5e7868; font-size: 12px; font-weight: 800; }
.build-path > span { color: #b39753; }
#build { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.draw-card-modal { max-width: 360px; padding: 18px; }
.draw-card-modal .card-label { font-size: 12px; letter-spacing: .08em; }
.draw-card-modal .card-flip-scene { width: min(260px, 100%); height: 174px; margin: 13px auto; }
.draw-card-modal .card-face-frame { justify-content: center; padding: 15px; gap: 10px; }
.draw-card-modal .card-face .big, .draw-card-modal .cf-icon { margin: 0; }
.draw-card-modal .card-face strong { font-size: 21px; line-height: 1.15; }
.draw-card-copy > p { color: #506d5d; font-size: 14px; line-height: 1.45; }
.card-effect { margin: 12px 0; padding: 10px 12px; border-radius: 11px; border: 1px solid #d3c593; color: #79632b; background: #fff1c6; font-size: 14px; font-weight: 800; line-height: 1.4; }
.card-effect.gain { background: #e4f5dd; border-color: #a9ce9b; color: #237245; font-size: 21px; }
.card-effect.loss { background: #fae6df; border-color: #dab2a5; color: #b74444; font-size: 21px; }
#card-ok { width: 100%; }
@media (max-height: 540px) and (orientation: landscape) {
  .property-modal { display: flex; align-items: center; gap: 16px; max-width: 540px; width: min(540px, 94vw); }
  .property-modal .deed { flex: 1; min-width: 0; margin: 0; }
  .property-modal .property-actions { display: flex; flex-direction: column; flex: 0 0 160px; margin: 0; }
  .property-modal .property-hint { display: none; }
  .draw-card-modal { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px 18px; max-width: 530px; width: min(530px, 94vw); }
  .draw-card-modal .card-label { grid-column: 1 / -1; }
  .draw-card-modal .card-flip-scene { grid-row: 2 / 4; width: 160px; height: 177px; margin: 0; }
  .draw-card-modal .card-face strong { font-size: 17px; }
  .draw-card-copy > p { font-size: 12px; }
  .draw-card-modal #card-ok { align-self: end; }
}
.modal .btn-row .btn { min-width: 0; }
.trade-slots { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); }
.trade-slot { min-width: 0; overflow-wrap: anywhere; }
.trade-cash input { min-width: 0; }
.event-report-top { color: #73806c; border-color: #d6d4bb; font-size: 10px; }
.event-report-top > span:first-child { background: #244f44; color: #fff2c3; padding: 4px 8px; border-radius: 6px; letter-spacing: .04em; }
.event-report-top > span:last-child { align-self: center; }
.event-report-head { gap: 14px; }
.event-report-head .event-mark { border-radius: 18px; box-shadow: 0 4px 0 #234e3320; }
.event-report-head h3 { font-size: 24px; line-height: 1.15; color: #254c42; }
.event-report-body { font-size: 14px; line-height: 1.5; }
.event-report-foot { font-size: 11px; border-color: #d6d4bb; }
.visit-actions .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px; font-size: 13px; }
.visit-actions .btn b { font-size: 14px; font-variant-numeric: tabular-nums; }
.visit-building-line { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 2px 0 8px; color: #5e7462; font-size: 11px; font-weight: 800; }
.visit-bonus { display: inline-block; margin-top: 8px; border: 1px solid #d7b86b; border-radius: 7px; background: #fff2ca; color: #8c6724; padding: 3px 8px; font-size: 10px; font-weight: 800; }
.visit-tariffs { margin-top: 9px; border-top: 1px solid #dae1cb; padding-top: 6px; }
.visit-tariffs summary { cursor: pointer; color: #547261; font-size: 11px; font-weight: 800; }
.visit-tariffs[open] summary { margin-bottom: 8px; }
.visit-modal .deed { margin: 8px auto; }
.visit-modal .btn-link { margin-top: 10px; font-size: 12px; }
@media (min-width: 761px) and (min-height: 541px) {
  #board-tools { gap: 8px; }
  #game #btn-event-vote { padding: 0 8px; gap: 5px; }
  #btn-event-vote span { font-size: 11px; }
}

@media (max-width: 760px) and (orientation: portrait) {
  #topbar { right: calc(12px + env(safe-area-inset-right, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); }
  #me-hud { left: calc(12px + env(safe-area-inset-left, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); max-width: calc(100vw - 76px); gap: 7px; }
  .me-profile { width: min(300px, calc(100vw - 76px)); min-width: 0; padding: 8px 10px; gap: 8px; border-radius: 16px; }
  .me-avatar { flex-basis: 31px; height: 31px; border-radius: 10px; }
  .me-profile small { font-size: 10px; }
  .me-money { font-size: clamp(17px, 5vw, 22px); }
  .victory-meter { font-size: 9px; padding-left: 7px; }
  .me-wallet { min-height: 25px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 3px; scrollbar-width: none; }
  .wchip { flex-shrink: 0; min-height: 24px; padding: 3px 7px; font-size: 10px; }
  .me-props { position: fixed; left: 12px; right: 12px; top: calc(178px + env(safe-area-inset-top, 0px)); gap: 4px; }
  .pchip { width: 22px; height: 22px; flex-basis: 22px; }
  .me-turn { display: none; }
  #owner-legend { top: calc(116px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; display: flex; gap: 5px; }
  .owner-legend-row { min-width: 0; max-width: none; flex: 1; padding: 5px; gap: 5px; border-radius: 10px; }
  .owner-legend-row b { font-size: 10px; }
  .owner-legend-row small { font-size: 8px; }
  .legend-turn { display: inline; }
  .legend-turn + .legend-info { display: none; }
  .owner-id { min-width: 22px; height: 24px; font-size: 9px; border-radius: 7px; }
  .turn-light { display: none; }
  .me-props { top: calc(157px + env(safe-area-inset-top, 0px)); }
  #status-hud { left: 12px; right: 12px; top: calc(188px + env(safe-area-inset-top, 0px)); max-width: none; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; pointer-events: auto; }
  .status-chip { flex-shrink: 0; font-size: 10px; padding: 5px 7px; gap: 5px; }
  .status-count small { display: none; }
  #board-tools { left: 12px; top: calc(var(--board-bottom) + 8px); gap: 9px; }
  #game #btn-trade { min-width: 97px; padding: 0 14px; }
  #game #btn-event-vote { padding: 0 10px; }
  .trade-open span { font-size: 11px; }
  #chat-ui { right: 12px; top: calc(var(--board-bottom) + 8px); bottom: auto; }
  #chat-panel { bottom: 55px; width: min(330px, calc(100vw - 24px)); }
  #settings-menu:not([hidden]) { top: 53px; right: 0; background: #fff8e5; border: 2px solid #d5c99c; box-shadow: 0 4px 0 #8caa96, 0 12px 24px #123e3033; }
  #game #settings-menu .tb-btn { height: 40px; border: 0; box-shadow: none; background: #edf0df; }
  #toasts { top: calc(76px + env(safe-area-inset-top, 0px)); bottom: auto; left: auto; right: 12px; transform: none; width: min(190px, calc(55vw - 12px)); align-items: stretch; }
  #game.has-toast .me-wallet { max-width: calc(45vw - 20px); }
  .toast { width: 100%; max-height: 35px; overflow: hidden; padding: 5px 6px; font-size: 10px; gap: 5px; border-radius: 9px; }
  .toast-icon { flex-basis: 20px; width: 20px; height: 20px; }
  .toast-message > small { display: none; }
  .toast-gain .toast-message > b, .toast-loss .toast-message > b { font-size: 14px; white-space: nowrap; }
  #banner { font-size: 12px; padding: 5px 12px; top: calc(var(--board-top) - 20px); }
  #dice-pop { font-size: 36px; top: calc(var(--board-top) + 24px); }
  #actionbar { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 32px); gap: 7px; }
  #actionbar .btn { font-size: 13px; padding: 11px 13px; }
  .modal-wrap { padding: 14px; }
  .modal { width: min(430px, calc(100vw - 28px)); max-height: calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 20px 17px; }
  .modal .btn { min-height: 44px; font-size: 14px; }
  .event-report-top > span:last-child { max-width: 52%; text-align: right; line-height: 1.25; }
  .event-report-head h3 { font-size: 22px; }
  .event-report-head .event-mark { flex-basis: 54px; width: 54px; height: 54px; }
}
@media (max-width: 760px) and (orientation: portrait) and (max-height: 720px) {
  #me-hud { top: calc(10px + env(safe-area-inset-top, 0px)); gap: 5px; }
  #topbar { top: calc(10px + env(safe-area-inset-top, 0px)); }
  .me-profile { padding: 6px 9px; }
  #toasts { top: calc(65px + env(safe-area-inset-top, 0px)); max-height: 32px; }
  #owner-legend { top: calc(106px + env(safe-area-inset-top, 0px)); }
  .me-props { top: calc(148px + env(safe-area-inset-top, 0px)); }
  #status-hud { top: calc(150px + env(safe-area-inset-top, 0px)); bottom: auto; }
  #game.has-status .me-props { display: none; }
  #actionbar { bottom: calc(13px + env(safe-area-inset-bottom, 0px)); }
  #roll-hud { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .roll-btn { width: 76px; height: 76px; font-size: 16px; border-width: 3px; }
  .bet-pill { min-height: 44px; padding: 8px 12px; font-size: 12px; }
  .roll-tickets { display: none; }
}
@media (max-width: 760px) and (orientation: portrait) and (max-height: 620px) {
  .me-props { display: none; }
  #owner-legend { top: calc(106px + env(safe-area-inset-top, 0px)); }
}
@media (orientation: landscape) and (max-height: 540px) {
  #me-hud { top: 8px; left: 10px; max-width: 210px; gap: 6px; }
  .me-profile { min-width: 200px; padding: 6px 9px; gap: 7px; }
  .me-money { font-size: 16px; }
  .me-avatar { flex-basis: 28px; height: 28px; }
  #game .tb-btn { width: 36px; height: 36px; border-radius: 11px; }
  #board-tools { top: auto; bottom: 14px; left: 12px; }
  #game #btn-trade { min-width: 90px; }
  #owner-legend { top: 60px; right: 10px; }
  .owner-legend-row { min-width: 120px; padding: 4px 6px; }
  #status-hud { top: 160px; left: 10px; max-width: 200px; }
  #toasts { top: 12px; width: 280px; }
  #actionbar { bottom: 14px; max-width: 40vw; gap: 6px; }
  #actionbar .btn { padding: 8px 10px; font-size: 11px; }
  #banner { top: 26%; font-size: 12px; }
  .modal { padding: 14px; }
  #roll-hud { bottom: 12px; gap: 10px; }
  .roll-btn { width: 76px; height: 76px; font-size: 16px; border-width: 3px; }
  .bet-pill { min-height: 42px; padding: 8px 12px; font-size: 12px; }
  .roll-tickets { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toast, #banner, #actionbar .btn, .modal, .modal-wrap { animation: none; }
  #game button { transition: none; }
}
.setup-card .lbl { margin-top: 10px; margin-bottom: 4px; }
.setup-card .avatar-stage { min-height: 104px; }
.setup-card .avatar-stage canvas { width: 100px; height: 100px; }
.setup-card .avatar-opt { min-height: 64px; }
.setup-card .avatar-opt img { width: 45px; height: 45px; }
.setup-card .avatar-hint { font-size: 10px; margin-top: 6px; }
@media (max-height: 480px) {
  .setup-card .lobby-logo .logo-emoji { display: none; }
  .setup-card .lobby-logo h1 { font-size: 20px; }
  .setup-card .lobby-logo h1 em { font-size: 13px; letter-spacing: 3px; }
  .setup-card .tagline { font-size: 10px; line-height: 1.2; }
  .setup-card #btn-change-edition { margin-top: 4px; font-size: 10px; }
  .setup-card .lbl { margin-top: 6px; margin-bottom: 3px; font-size: 10px; }
  .setup-card .inp { padding: 6px 10px; font-size: 12px; }
  .setup-card .avatar-stage, .setup-card .avatar-hint { display: none; }
  .setup-card .avatar-opt { min-height: 46px; }
  .setup-card .avatar-opt img { width: 30px; height: 30px; }
  .setup-card .color-opt { width: 24px; height: 24px; }
  .setup-card .btn.big { margin-top: 4px; padding: 7px; font-size: 13px; }
  .setup-card .join-row { margin-top: 6px; }
  .setup-card .btn-link { margin-top: 6px; font-size: 10px; }
}