:root{color-scheme:dark;--bg:#101c18;--panel:#1b3029;--line:#375348;--light:#e7f6df;--muted:#9db4a5;--gold:#fbd67a;--green:#79d79c}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -20%,#294e38,#101c18 55%);font:15px system-ui,-apple-system,sans-serif;color:var(--light)}header{display:flex;justify-content:space-between;align-items:center;padding:16px max(20px,3vw);border-bottom:1px solid #395a42;background:#102118;gap:14px}.brand{font-size:20px}.brand small{font-size:12px;display:block;color:var(--gold);margin-left:30px}main{padding:22px;max-width:1700px;margin:auto}h1,h2,h3{margin:0 0 12px}h1{font-size:26px}h3{font-size:18px}p{color:var(--muted);line-height:1.5}button,input,select,textarea{font:inherit}button{border:0;border-radius:9px;cursor:pointer;background:var(--green);color:#123126;padding:10px 15px;font-weight:750}button:hover{filter:brightness(1.09)}button:disabled{opacity:.4;cursor:default}.ghost{background:#314d3e;color:var(--light);border:1px solid var(--line)}input,select,textarea{background:#10231b;color:var(--light);border:1px solid #45604e;border-radius:8px;padding:10px;min-width:0}input[type=number]{width:110px}.panel{border:1px solid var(--line);background:var(--panel);padding:17px;border-radius:15px;margin-bottom:14px}.center{max-width:540px;margin:10vh auto;text-align:center}.center input{margin:10px}.sectionhead,.gameheading,.formrow{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:15px}.formrow{justify-content:flex-start}.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px}.room{padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:13px}.room h3{margin:0}.room p{margin:12px 0}.room button{margin:5px 5px 0 0}.game-layout{display:grid;grid-template-columns:minmax(620px,1fr) 350px;gap:22px;align-items:start}.board{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr));aspect-ratio:1;background:#25372d;box-shadow:0 20px 55px #0008;border:7px solid #10241b;border-radius:9px;overflow:hidden}.cell{position:relative;cursor:pointer;min-width:0;min-height:0;background:#f5f2de;color:#203325;border:1px solid #789381;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;overflow:hidden;padding:2px}.cell:hover{background:#fff7ce;z-index:1;outline:2px solid var(--gold)}.cell.selected{outline:3px solid #e7af40;z-index:2}.cell .strip{height:10px;background:var(--group,#7aab63);width:100%;flex-shrink:0}.cell .art{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;font-size:clamp(13px,2.3vw,32px);width:100%;overflow:hidden}.cell .art img{max-width:95%;max-height:100%;object-fit:contain}.cell .label{font-size:clamp(7px,.65vw,11px);font-weight:800;line-height:1.05;max-width:100%;overflow-wrap:anywhere}.cell .price{font-size:clamp(7px,.65vw,11px);font-weight:750;color:#4c5b44}.cell .tokens{position:absolute;left:2px;right:2px;bottom:15px;display:flex;justify-content:center;gap:1px;flex-wrap:wrap}.token{width:13px;height:13px;border-radius:50%;border:2px solid white;box-shadow:0 1px 3px #0009;flex-shrink:0}.owner{position:absolute;inset:0;border:3px solid var(--owner);pointer-events:none}.stars{position:absolute;top:10px;right:1px;font-size:9px;background:#152b1ecc;color:#ffe97e}.board-center{grid-row:2/11;grid-column:2/11;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;text-align:center;padding:14px;background:radial-gradient(circle,#2f503d,#1a3229)}.center-title{font-size:47px}.center-title h1{font-weight:950;letter-spacing:2px;font-size:clamp(24px,3vw,52px);color:#f5d879;text-shadow:2px 4px #152a1a}.center-title small{font-size:13px;letter-spacing:3px;color:#c0e1b6}.dice{font-size:35px;margin:15px}.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.events{max-height:160px;overflow:auto;font-size:12px;text-align:left;color:#bbd0bd;max-width:500px;margin-top:18px}.events div{margin-bottom:4px}aside{min-width:0}.player{display:flex;align-items:center;gap:9px;padding:9px;border-radius:9px;margin:6px 0;background:#13271e}.player.active{outline:1px solid var(--gold)}.player .cash{margin-left:auto;color:var(--gold);font-weight:750}.player .token{width:17px;height:17px}.tile-photo{display:block;max-height:130px;max-width:100%;margin:10px auto}.rents{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:12px 0}.rents span{padding:6px;border-radius:6px;background:#11271d}.rents .current{outline:1px solid #f5d878}.trade-line{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.trade-line label{font-size:12px}.chat #chatMessages{height:180px;overflow:auto;background:#102219;padding:9px;border-radius:9px;margin:10px 0;font-size:13px}.chatline{margin:5px 0;overflow-wrap:anywhere}.chatline b{color:var(--gold)}.chatline em{font-style:normal;color:#c789e7}.chat input{flex:1}.editor-grid{display:grid;grid-template-columns:260px 1fr;gap:16px}#tileList{height:500px;overflow:auto;background:#12271d;border-radius:10px;padding:8px}#tileList button{display:block;width:100%;text-align:left;margin:3px 0;background:#294538;color:var(--light);font-size:13px}#tileEditor label{display:block;margin:10px 0}#tileEditor input,#tileEditor select{width:100%;margin-top:4px}.chance-row{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}.chance-row input:first-child{flex:1}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:14px 22px;border-radius:9px;background:#9c3535;color:white;z-index:20}@media(max-width:1130px){.game-layout{grid-template-columns:1fr}.board{max-width:900px;width:100%;margin:auto}.cell .label{font-size:clamp(7px,1.1vw,11px)}.cell .price{font-size:clamp(7px,1.1vw,11px)}.cell .art{font-size:clamp(13px,3vw,33px)}aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}@media(max-width:650px){main{padding:10px}.board{border-width:3px;min-width:350px}.cell .label{font-size:7px}.cell .price{font-size:7px}.cell .strip{height:5px}.cell .tokens{bottom:10px}.token{width:9px;height:9px}.cell .art{font-size:17px}.center-title{font-size:30px}.center-title h1{font-size:22px}.dice{font-size:24px;margin:4px}.board-center{padding:4px}.events{font-size:9px;max-height:70px}.actions button{font-size:11px;padding:6px}.editor-grid{grid-template-columns:1fr}aside{display:block}}

/* Доступный и адаптивный редактор */
#editor .panel{min-width:0}#editor .formrow{align-items:flex-start}#editor .formrow>label{display:flex;flex-direction:column;gap:6px;min-width:190px}#editor .formrow>label input{width:100%;max-width:260px}
.settings-grid,.chance-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.setting{min-width:0;display:flex!important;flex-direction:column;gap:6px;margin:0!important;font-weight:700}.setting small{display:block;font-size:12px;line-height:1.45;color:var(--muted);font-weight:400;min-height:34px}.setting input,.setting select{display:block;width:100%!important;max-width:100%;min-width:0;margin-top:auto!important}.setting-wide{grid-column:1/-1}.hint{font-size:13px;margin:0 0 16px}.chance-explainer{background:#123126;border:1px solid #426955;border-radius:12px;padding:15px;margin:12px 0 18px}.chance-explainer p{margin:8px 0 0}.chance-card{border:1px solid var(--line);background:#142a21;border-radius:14px;padding:16px;margin:12px 0;min-width:0}.chance-card-head{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:14px}.chance-remove{font-size:13px;padding:8px 11px}.chance-prob{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;color:var(--muted);font-size:13px}.chance-prob b{color:var(--gold);font-size:16px}#saveInfo{overflow-wrap:anywhere}
@media(max-width:700px){header{padding:12px;flex-wrap:wrap}.brand{font-size:17px}main{padding:10px}#editor>.panel{padding:12px}#editor .sectionhead{align-items:flex-start}.settings-grid,.chance-fields{grid-template-columns:1fr;gap:16px}.setting small{min-height:0}.chance-card{padding:13px}.chance-card-head{margin-bottom:12px}.editor-grid{grid-template-columns:minmax(0,1fr)}#tileList{height:210px}#editor .formrow>label{width:100%}#editor .formrow>label input{max-width:100%}#saveConfig{width:100%}.chance-explainer{padding:12px}}
.field-help{font-size:12px;font-weight:400;line-height:1.4;color:var(--muted);display:block;max-width:290px}

/* v3: игровое поле и центральный чат */
.board-scroll{min-width:0;overflow:auto;overscroll-behavior-x:contain;border-radius:12px}
.board{width:100%;min-width:0}.board-center{justify-content:center;gap:8px}.center-chat{width:min(96%,650px);margin:2px auto 0;text-align:left;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#1a3229ed}.center-chat h3{font-size:15px;margin:0 0 5px}.center-chat #chatMessages{height:150px;min-height:50px;overflow-y:auto;flex:1}.center-chat .formrow{margin:6px 0 0;flex-wrap:nowrap}.center-chat input{flex:1;min-width:0}.center-chat button{padding:9px}.center-title{font-size:30px}.center-title h1{font-size:clamp(16px,2vw,32px);margin:3px}.center-title small{font-size:11px}.dice{font-size:25px;margin:4px}.eventline{color:#bbd0bd;border-left:2px solid #7fae83;padding-left:7px}.capacity-label{display:flex;align-items:center;gap:8px;color:var(--muted)}.capacity-label select{width:75px}
@media(max-width:700px){.board-scroll{width:100%;overflow-x:auto;overflow-y:hidden;border:1px solid var(--line)}.board{width:710px;min-width:710px;max-width:none;aspect-ratio:1;border-width:4px}.cell .label{font-size:10px}.cell .price{font-size:10px}.cell .art{font-size:26px}.cell .strip{height:8px}.center-title{font-size:29px}.center-title h1{font-size:25px}.center-chat{width:94%;padding:10px;min-height:210px}.center-chat #chatMessages{height:155px}.board-center{gap:4px}.gameheading{gap:8px}.gameheading h2{font-size:18px}.capacity-label{width:100%}}

/* v4 mobile game UI — fixed viewport, zero document scrolling */
.mobile-dock,.mobile-panel-head,.mobile-chat-panel{display:none}
@media(max-width:700px){
 html,body{max-width:100%;overflow-x:hidden}
 body:has(#game:not([hidden])){height:100dvh;overflow:hidden}
 body:has(#game:not([hidden]))>header{height:44px;min-height:44px;overflow:hidden;display:flex;flex-wrap:nowrap;padding:5px 10px;gap:8px}
 body:has(#game:not([hidden])) .brand{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
 body:has(#game:not([hidden])) .brand b{font-size:13px}
 body:has(#game:not([hidden])) .brand small{display:none}
 body:has(#game:not([hidden])) #me{font-size:11px;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 body:has(#game:not([hidden])) main{height:calc(100dvh - 44px);padding:0;overflow:hidden}
 #game:not([hidden]){display:flex;flex-direction:column;width:100%;height:100%;min-height:0;overflow:hidden;position:relative}
 #game .gameheading{height:42px;min-height:42px;margin:0;padding:3px 8px;flex-wrap:nowrap;gap:6px;overflow:hidden}
 #game .gameheading .ghost{padding:7px 8px;font-size:12px;white-space:nowrap}
 #game .gameheading h2{font-size:14px;min-width:0;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin:0}
 #gameStatus{font-size:10px;white-space:nowrap}
 #game .game-layout{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;padding:3px 4px 0}
 #game .board-scroll{width:min(calc(100vw - 8px),calc(100dvh - 152px));max-width:100%;height:auto;aspect-ratio:1;overflow:hidden;border:none;margin:0 auto;flex-shrink:0}
 #game .board{width:100%;height:100%;min-width:0;max-width:none;aspect-ratio:1;border:2px solid #14291c;border-radius:5px}
 #game .cell{padding:0;border-width:.5px}
 #game .cell .strip{height:3px}
 #game .cell .art{font-size:clamp(8px,2.7vw,16px);min-height:0}
 #game .cell .label{font-size:clamp(4px,1.35vw,7px);line-height:1;letter-spacing:-.2px;max-height:2.1em;overflow:hidden}
 #game .cell .price{font-size:clamp(4px,1.25vw,7px);line-height:1}
 #game .cell .tokens{bottom:5px;gap:0}
 #game .cell .token{height:7px;width:7px;border:1px solid white}
 #game .cell .owner{border-width:2px}
 #game .cell .stars{font-size:6px;top:2px}
 #game .board-center{padding:3px;justify-content:center;gap:2px}
 #game .center-title{font-size:17px;line-height:1}
 #game .center-title h1{font-size:clamp(11px,3.6vw,19px);letter-spacing:0;margin:2px 0}
 #game .center-title small{font-size:9px;letter-spacing:1px}
 #game .dice{font-size:clamp(14px,4vw,24px);margin:2px}
 #game .actions{gap:4px;max-width:100%;align-items:center;max-height:85px;overflow:hidden}
 #game .actions button{padding:6px 8px;font-size:clamp(10px,2.5vw,13px)}
 #game .actions p{font-size:clamp(9px,2.25vw,12px);margin:2px}
 #game .center-chat{width:95%;min-height:0;height:clamp(43px,12vh,105px);padding:3px 6px;margin:0;flex:0 1 auto;overflow:hidden}
 #game .center-chat h3{font-size:10px;margin:0 0 2px}
 #game .center-chat #chatMessages{height:auto;min-height:0;flex:1;padding:3px;margin:0;font-size:9px;overflow:hidden}
 #game .center-chat .formrow{display:none}
 #game .center-chat .chatline{margin:2px 0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
 #game .mobile-dock{height:calc(57px + env(safe-area-inset-bottom,0px));flex-shrink:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px 8px max(5px,env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#12291f;position:relative;z-index:21}
 #game .mobile-dock button{background:#264536;color:#e7f6df;font-size:20px;padding:2px;border-radius:8px;display:flex;flex-direction:column;justify-content:center;align-items:center}
 #game .mobile-dock span{font-size:10px}
 #game .mobile-dock button.active{background:#508266}
 #game aside{display:none;position:absolute;z-index:32;left:7px;right:7px;bottom:calc(60px + env(safe-area-inset-bottom,0px));top:auto;max-height:min(69dvh,550px);overflow-y:auto;overscroll-behavior:contain;grid-template-columns:1fr;gap:0;background:#183328;border:1px solid #668573;border-radius:14px;padding:10px;box-shadow:0 0 0 500px #0003,0 12px 35px #0009}
 #game aside.mobile-open{display:block}
 #game aside .panel{display:none;margin:0;padding:8px;border:0;background:transparent}
 #game aside[data-active-panel="players"] [data-mobile-panel="players"],#game aside[data-active-panel="tile"] [data-mobile-panel="tile"],#game aside[data-active-panel="trade"] [data-mobile-panel="trade"]{display:block}
 #game .mobile-panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 4px 8px;font-size:15px}
 #game .mobile-panel-head button{background:#314d3e;color:white;padding:4px 11px}
 #game .game-shade:not([hidden]){display:block;position:absolute;inset:0;background:#0006;z-index:29}
 #game .mobile-chat-panel:not([hidden]){display:flex;flex-direction:column;position:absolute;z-index:32;top:10%;left:7px;right:7px;bottom:calc(60px + env(safe-area-inset-bottom,0px));background:#1b3029;border:1px solid #668573;border-radius:14px;padding:11px;min-height:0;box-shadow:0 12px 30px #0008}
 #mobileChatMessages{flex:1;min-height:0;overflow-y:auto;overflow-wrap:anywhere;font-size:13px;background:#102219;border-radius:8px;padding:9px}
 .mobile-chat-input{display:flex;gap:6px;margin-top:8px}
 .mobile-chat-input input{min-width:0;flex:1}
 .mobile-chat-input button{padding:8px 12px}
}
@media(max-width:700px) and (max-height:660px){
 #game .center-title{font-size:12px}
 #game .center-title h1{font-size:11px}
 #game .center-chat{height:36px}
 #game .center-chat h3{display:none}
 #game .dice{font-size:13px}
}

/* v5 — constrain every game layer to the actual visual viewport.
   The previous flex/grid min-content sizing could widen #game beyond the screen. */
@media (max-width:700px) {
  html, body { width:100%; max-width:100%; margin:0; overflow-x:clip; }
  body:has(#game:not([hidden])) main { width:100%; min-width:0; max-width:100%; }
  #game:not([hidden]) {
    position:fixed;
    inset:44px 0 0 0;
    width:100vw;
    max-width:100vw;
    height:calc(100dvh - 44px);
    min-width:0;
    margin:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
  }
  #game .gameheading { width:100%; min-width:0; max-width:100%; flex-shrink:0; }
  #game .game-layout {
    width:100%; min-width:0; max-width:100%;
    display:flex; flex-direction:column;
    align-items:center; justify-content:flex-start;
    box-sizing:border-box; flex:1 1 auto;
    overflow:hidden; margin:0; padding:4px 0 0;
  }
  #game .board-scroll {
    display:block;
    box-sizing:border-box;
    width:min(100vw, calc(100dvh - 162px));
    max-width:100vw;
    min-width:0;
    height:auto;
    aspect-ratio:1;
    flex:0 0 auto;
    margin:0 auto;
    padding:0;
    overflow:hidden;
  }
  #game .board {
    display:grid;
    box-sizing:border-box;
    width:100%;height:100%;
    min-width:0;max-width:100%;
    margin:0;
    grid-template-columns:repeat(11,minmax(0,1fr));
    grid-template-rows:repeat(11,minmax(0,1fr));
  }
  #game .mobile-dock {
    width:100%;min-width:0;max-width:100%;
    grid-template-columns:repeat(4,minmax(0,1fr));
    box-sizing:border-box;
  }
  #game .mobile-dock button { min-width:0;max-width:100%;overflow:hidden; }
  #game .mobile-dock span { white-space:nowrap;font-size:clamp(9px,2.4vw,11px); }
}

/* v6: subtle monopoly group on the right edge of owned-property tiles */
#game .cell{position:relative;}
#game .cell .group-tag{position:absolute;right:1px;top:50%;transform:translateY(-50%);max-height:72%;max-width:12px;overflow:hidden;writing-mode:vertical-rl;text-orientation:mixed;font-weight:700;font-size:clamp(5px,.75vw,9px);line-height:1;color:#27352a;background:color-mix(in srgb,var(--group) 70%,white);border-radius:3px;padding:2px 1px;white-space:nowrap;pointer-events:none;z-index:2}
#game .cell .label{padding-right:8px}
.trade-limit-info{font-size:12px;line-height:1.4;color:#b7d8c4;margin:8px 0;padding:9px;border-radius:8px;background:#233b31}
.trade-limit-info.trade-invalid{color:#ffe0b6;background:#48342e}
@media(max-width:700px){#game .cell .group-tag{font-size:5px;max-width:7px;padding:1px 0;border-radius:2px}#game .cell .label{padding-right:4px}}

/* v7 — readable valuation and one-click balancing of a trade */
.trade-balance-actions {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}
.trade-balance-actions small {font-size:12px;color:#a9c3b5}
#tradeProperties label:has(input[type=checkbox]) {display:flex!important;align-items:center;gap:8px;padding:6px 3px;min-width:0;}
#tradeProperties label input[type=checkbox] {flex:0 0 auto}
.trade-property-name {flex:1;min-width:0;overflow-wrap:anywhere;}
.trade-property-price {margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:#f0cf7a;}
#tradeProperties p {display:flex;justify-content:space-between;gap:8px;}
#tradeProperties p strong {font-variant-numeric:tabular-nums;color:#f0cf7a;white-space:nowrap;}
@media(max-width:700px){.trade-balance-actions{flex-direction:column;align-items:stretch}.trade-balance-actions button{width:100%;}.trade-property-price{font-size:14px}}