:root {
  --ink: #19372e; --muted: #687971; --paper: #fbf7ea; --cream: #f1ead8; --green: #164c3c;
  --green-2: #236b52; --gold: #c9973c; --red: #b94d42; --line: rgba(31, 73, 58, .18);
  --shadow: 0 18px 42px rgba(31, 58, 45, .12);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 12% 5%, #fff3cc, transparent 26%), radial-gradient(circle at 88% 10%, #d8eadc, transparent 30%), #e8e7d9; font-family: Inter, "Noto Sans SC", system-ui, sans-serif; }
button, input, select { font: inherit; } button { cursor: pointer; }
.hidden { display: none !important; }
.shell { width: min(1560px, 100%); margin: auto; padding: 16px; }
.hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 28px; color: #fffaf0; border-radius: 24px; background: linear-gradient(130deg, #123b31, #1f6650 62%, #b18438); box-shadow: var(--shadow); }
.hero h1 { margin: 2px 0; font: 800 clamp(2rem, 5vw, 4.2rem)/1 Georgia, "Noto Serif SC", serif; letter-spacing: .12em; }.hero p { margin: 5px 0; }
.eyebrow { margin: 0 0 5px; color: var(--gold); font-size: .7rem; font-weight: 900; letter-spacing: .18em; }.hero .eyebrow { color: #f4d58b; }
.connection-status { padding: 9px 14px; white-space: nowrap; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: rgba(255,255,255,.12); }
.panel { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,252,242,.95); box-shadow: 0 9px 25px rgba(38,61,48,.08); }
.setup-wrap { width: min(720px,100%); margin: 42px auto; }.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.mode-tabs button { padding: 12px; border: 0; border-radius: 13px; color: var(--muted); background: rgba(255,255,255,.62); }.mode-tabs button.active { color: white; background: var(--green); }
.setup-card { display: grid; grid-template-columns: 1.3fr 1fr auto; align-items: end; gap: 15px; padding: 23px; }
label { display: grid; gap: 6px; color: var(--muted); font-size: .83rem; } input, select { min-height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; }
button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fffdf6; transition: transform .15s, box-shadow .15s; }
button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(33,64,49,.13); } button:disabled { cursor: not-allowed; opacity: .48; }
button.primary { color: white; border-color: var(--green-2); background: var(--green-2); } button.danger { color: white; border-color: var(--red); background: var(--red); } button.rise { border-color: #4a8f65; background: #e4f2e7; } button.fall { border-color: #c97869; background: #fae7df; }
button.small { min-height: 32px; padding: 4px 9px; font-size: .76rem; }.join-intent { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0; border: 0; }
.join-intent label { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 11px; }.join-intent input { min-height: auto; }.join-intent small { display: block; }
.room-layout { display: grid; grid-template-columns: 275px minmax(0,1fr); gap: 14px; margin-top: 14px; }.room-role-banner { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; border-radius: 13px; color: #4a3d27; background: #f2dda4; }
.room-role-banner div { display: flex; gap: 11px; align-items: baseline; }.room-role-banner span { font-size: .8rem; opacity: .75; }.room-role-banner[data-role="spectator"] { color: white; background: #50645e; }
.sidebar { display: grid; align-content: start; gap: 12px; }.sidebar .panel { padding: 16px; }.room-code { margin: 5px 0 14px; color: var(--green); font: 2.4rem Georgia, serif; letter-spacing: .16em; }.host-tools { display: grid; gap: 8px; }
.rules-card p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }.section-head,.private-head,.market-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.section-head h2,.private-head h2,.market-head h2 { margin: 0; font-size: 1.08rem; }
.spectator-panel summary { cursor: pointer; font-weight: 800; }.log { max-height: 280px; overflow: auto; }.log.collapsed { display: none; }.log-item { padding: 8px 0; border-bottom: 1px dashed var(--line); color: #576a61; font-size: .78rem; line-height: 1.42; }
.game-area { min-width: 0; }.notice { margin-bottom: 10px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 13px; color: #315a4b; background: rgba(255,252,240,.82); }
.market-board { padding: 20px; overflow: hidden; border-radius: 24px; color: #f8f1df; background: linear-gradient(145deg,#12372e,#19513e 57%,#102f29); box-shadow: inset 0 0 75px rgba(0,0,0,.28), var(--shadow); }.market-head h2 { font: 1.5rem Georgia,"Noto Serif SC",serif; }.round-chip { padding: 7px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.08); font-size: .82rem; }
.stock-ticker { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin: 16px 0; }.stock-ticker article { padding: 10px; border-top: 4px solid var(--company); border-radius: 10px; background: rgba(255,255,255,.1); }.stock-ticker span,.stock-ticker b { display: block; }.stock-ticker b { margin-top: 4px; font: 1.45rem Georgia,serif; }.price-track { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.12); }.price-track i { display: block; height: 100%; background: var(--company); }
.information-panel { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; }.info-card { flex: 0 0 145px; display: grid; grid-template-columns: 1fr auto; gap: 3px 7px; padding: 9px 10px; border-left: 4px solid var(--company); border-radius: 9px; color: var(--ink); background: #fffaf0; }.info-card small { grid-column: 1 / -1; color: var(--muted); }.info-card strong { color: var(--company); }.hidden-info { border-left-color: #a7a9a4; color: #6e7772; background: repeating-linear-gradient(45deg,#f1eee5 0 7px,#e5e2d9 7px 14px); }
.stockpiles { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }.stockpile { min-width: 0; padding: 11px; border: 1px solid rgba(255,255,255,.17); border-radius: 13px; background: rgba(255,255,255,.08); }.stockpile.open { border-color: #e7c16d; }.stockpile header { display: grid; gap: 2px; margin-bottom: 9px; }.stockpile header span { color: #d8cbaa; font-size: .72rem; }.pile-cards { display: grid; gap: 5px; }.market-card { display: block; min-width: 0; padding: 7px; overflow: hidden; border-left: 4px solid var(--company,#aa9a78); border-radius: 7px; color: #18372d; background: #fff9eb; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }.kind-hidden { border-left-color: #a6a497; color: #eee8d6; background: repeating-linear-gradient(45deg,#45685c 0 7px,#38594f 7px 14px); }.kind-fee { border-left-color: #b64d41; }.kind-action { border-left-color: #d39b37; }.empty-pile { color: #b9c9c1; font-size: .75rem; }
.players-panel { margin-top: 12px; padding: 15px; }.players { display: grid; grid-template-columns: repeat(auto-fit,minmax(215px,1fr)); gap: 8px; margin-top: 10px; }.player-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 10px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: #fffdf6; }.player-row.current { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,151,60,.15); }.player-row.self { background: #edf6ef; }.player-row.offline { opacity: .62; }.player-row div b,.player-row div small { display: block; }.player-row div small,.player-row span { color: var(--muted); font-size: .72rem; }.player-row .debt { color: #a34f46; }.player-row button { grid-column: 2; grid-row: 2 / 4; }
.control-dock { position: sticky; z-index: 20; bottom: 8px; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(330px,.7fr); gap: 14px; margin-top: 12px; padding: 15px; box-shadow: 0 -7px 32px rgba(27,54,42,.16); }.action-zone { min-width: 0; }.action-hint { margin: 7px 0; color: var(--muted); font-size: .83rem; line-height: 1.45; }.action-buttons { display: flex; flex-wrap: wrap; align-items: end; gap: 7px; max-height: 230px; overflow: auto; }.action-buttons select { min-width: 110px; }
.timer { position: relative; min-width: 72px; overflow: hidden; border-radius: 999px; color: var(--green); background: #e7eee8; text-align: center; }.timer b { position: relative; z-index: 2; display: block; padding: 7px; }.timer i { position: absolute; inset: auto 0 0; height: 4px; background: var(--green-2); }
.private-zone { min-width: 0; padding-left: 14px; border-left: 1px solid var(--line); }.private-head strong { color: var(--green-2); font-size: 1.15rem; }.my-information { display: flex; gap: 6px; overflow-x: auto; margin: 7px 0; }.my-information .info-card { flex-basis: 125px; padding: 7px; font-size: .76rem; }.my-portfolio { display: grid; gap: 5px; }.my-portfolio > div { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }.my-portfolio small { min-width: 120px; color: var(--muted); }.my-portfolio span { padding: 4px 7px; border-left: 4px solid var(--company); border-radius: 6px; background: #edf1e9; font-size: .75rem; }.my-portfolio em { color: var(--muted); font-size: .75rem; }
.supply-form { display: grid; grid-template-columns: repeat(4,minmax(105px,1fr)); gap: 7px; width: 100%; }.supply-form label { font-size: .7rem; }.bid-choice { display: flex; gap: 5px; }.sell-grid { display: grid; gap: 6px; width: 100%; }.sell-row { display: grid; grid-template-columns: 1.1fr repeat(3,1fr); gap: 6px; align-items: end; padding: 7px; border-radius: 9px; background: #f3efe3; }.sell-row input { width: 100%; }.score-card { flex: 0 0 180px; display: grid; gap: 3px; padding: 10px; border-radius: 9px; color: var(--ink); background: #fff8e5; }.score-card strong { color: var(--green); font-size: 1.15rem; }.muted { color: var(--muted); font-size: .78rem; }

@media (max-width: 1100px) {
  .stockpiles { grid-template-columns: repeat(3,minmax(0,1fr)); }.stock-ticker { grid-template-columns: repeat(3,minmax(0,1fr)); }.control-dock { grid-template-columns: 1fr; }.private-zone { padding: 10px 0 0; border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 860px) {
  .room-layout { grid-template-columns: 220px minmax(0,1fr); }.stockpiles { grid-template-columns: repeat(2,minmax(0,1fr)); }.sidebar .rules-card { display: none; }
}
@media (max-width: 760px) {
  .shell { padding: 8px; }.hero { padding: 14px 16px; border-radius: 17px; }.hero p:not(.eyebrow) { display: none; }.connection-status { max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
  .setup-card { grid-template-columns: 1fr; }.join-intent { grid-template-columns: 1fr; }.room-layout { display: block; }.room-role-banner { margin: 9px 0; }.sidebar { grid-template-columns: 1fr 1fr; margin-bottom: 9px; }.sidebar .rules-card,.sidebar .log-card { display: none; }
  .market-board { padding: 12px; border-radius: 17px; }.stock-ticker { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }.stock-ticker article { padding: 7px; }.stock-ticker b { font-size: 1.15rem; }.information-panel { padding-bottom: 8px; }.info-card { flex-basis: 125px; }
  .stockpiles { grid-template-columns: minmax(0,1fr); }.stockpile { display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 8px; }.stockpile header { margin: 0; }.pile-cards { grid-template-columns: repeat(auto-fit,minmax(95px,1fr)); }
  .players { grid-template-columns: 1fr 1fr; }.control-dock { bottom: calc(4px + env(safe-area-inset-bottom)); max-height: 55vh; overflow-y: auto; margin-top: 8px; padding: 10px; border-radius: 14px; }.control-dock[data-role="spectator"] { position: relative; bottom: auto; }.action-buttons { max-height: 170px; }.supply-form { grid-template-columns: 1fr 1fr; }.sell-row { grid-template-columns: 1fr 1fr; }.sell-row b { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: 1.75rem; }.hero .eyebrow { display: none; }.sidebar { grid-template-columns: 1fr; }.sidebar .spectator-panel { display: none; }.market-head { align-items: flex-start; }.round-chip { font-size: .68rem; }
  .stock-ticker article span { font-size: .7rem; }.players { grid-template-columns: 1fr; }.player-row { grid-template-columns: minmax(0,1fr) auto auto; }.player-row strong { grid-column: 2; grid-row: 1; }.player-row > span { grid-column: auto; }.player-row button { grid-column: 3; grid-row: 1 / 3; }
  .stockpile { grid-template-columns: 88px minmax(0,1fr); padding: 8px; }.pile-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }.market-card { padding: 6px; font-size: .66rem; }.action-buttons button,.action-buttons select { min-height: 36px; font-size: .76rem; }.bid-choice { width: 100%; }.bid-choice select,.bid-choice button { flex: 1; min-width: 0; }
  .my-information .info-card { flex-basis: 112px; }.my-portfolio small { min-width: 100%; }.supply-form { grid-template-columns: 1fr; }.sell-row { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }