:root{
  
  --green:#28a05e;
  --red:#ce1d24;
  --blue:#0387cc;
  --black:#1a1a18;

  --bg:#f9faf8;
  --board:#D4E4D9;
  --panel:#ffffff;
  --card:#d5e4d8;
  --tile2:#eaf3ee;
  --border:#ccd6cf;
}

*{ box-sizing:border-box; }
html,body{
  height:100%; margin:0; padding:0;
  font-family:"Fredoka", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:var(--bg);
  color:var(--black);
}


.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--panel); border-bottom:3px solid var(--blue);
}
.topbar h1{
  margin:0; font-size:22px; font-weight:900; color:#ce1d24; text-transform:uppercase; letter-spacing:1px;
}
.controls button{
  background:#f3f9fb; color:var(--black); border:1px solid var(--border);
  padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:600; margin-left:8px;
}
.controls button:hover{ background:#e8f5ff; border-color:var(--blue); }


.layout{
  display:grid;
  grid-template-columns: minmax(900px, 1fr) 380px;
  gap:20px;
  padding:16px;
  height:calc(100vh - 60px);
}
@media (max-width:1280px){
  .layout{ grid-template-columns: minmax(820px, 1fr) 340px; }
}
.board-wrap{ display:flex; align-items:center; justify-content:center; height:100%; }


.board{
  
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  grid-template-rows:    repeat(11, minmax(0, 1fr));
  gap:2px;
  background:var(--board);
  border:3px solid var(--green);
  border-radius:12px;
  box-shadow:0 8px 16px rgba(0,0,0,0.05);
  padding:4px;
  position:relative;
  overflow:hidden;
  background-clip:padding-box;
  container-type:inline-size; 
}



.tile{
  background:var(--card);
  border:2px solid #000;
  border-radius:0;
  position:relative;
  padding:2px;
  display:flex; align-items:flex-start; justify-content:flex-start;
  transition:transform .12s ease, background .2s ease;
  min-width:0; min-height:0;
  overflow:hidden;
  isolation:isolate; 
}
.tile:hover{ box-shadow: 0 1px 0 rgba(0,0,0,.06) inset; }
.tile.corner{ background:linear-gradient(135deg, var(--card), var(--tile2)); }


.tile .tile-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; user-select:none;
}
.tile .tile-bg .tile-icon{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:3px; width:16px; height:16px;
  object-fit:contain; image-rendering:auto; opacity:1;
}


.tile .name,
.tile .price,
.tile .owner-chip,
.tile .buildings,
.tile .token-stack{
  position:relative; z-index:2;
}


.tile .name{
  text-align:center; line-height:1.15;
  padding:4px 4px 20px;
  max-width:100%;
  color:var(--black);
  word-break:break-word;
  overflow:hidden; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  font-size:clamp(9px, 1.2vmin, 13px);
}


.tile .price,
.tile .owner-chip{
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  font-size:12px; font-weight:700; letter-spacing:.3px;
  padding:3px 10px;
  color:var(--black);
  border-radius:0; 
  background:rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.12);
  pointer-events:none; white-space:nowrap;
}


.tile .buildings{ position:absolute; left:2px; bottom:2px; display:flex; gap:2px; }
.house,.hotel{
  width:8px; height:8px; border-radius:2px; border:1px solid rgba(0,0,0,0.15);
}
.house{ background:#28a05e; }
.hotel{ background:#ce1d24; width:12px; height:8px; border-radius:3px; }


.token-stack{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; gap:2px; flex-wrap:wrap;
}
.token,.token-abs{
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(0,0,0,0.2); box-shadow:0 0 0 2px rgba(0,0,0,0.08);
}
.token-abs{
  position:absolute; transition:left .28s linear, top .28s linear, transform .1s ease;
  will-change:left, top, transform;
}
.token-abs.moving{ transform:scale(1.08); }


.tile[style]{ border-color:#000 !important; }


.sidebar{ overflow:auto; }
.panel{
  background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:10px; margin-bottom:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.04);
}
.panel h2{ font-size:14px; margin:0 0 8px; color:var(--black); }


#players .player{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 8px; border:1px solid var(--border); border-radius:10px; margin-bottom:6px;
  background:#f3f6f4; color:var(--black);
}
#players .left{ display:flex; align-items:center; gap:8px; }
.pdot{ width:12px; height:12px; border-radius:50%; border:2px solid rgba(0,0,0,0.2); box-shadow:0 0 0 2px rgba(0,0,0,0.08); }
.player .meta{ color:var(--black); font-size:12px; }
.now{ color:#28a05e; font-weight:700; margin-left:8px; }


#ownership .ownership-body .ownrow{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 8px; margin-bottom:6px;
  border:1px solid var(--border); border-radius:10px; background:#f3f6f4; color:var(--black);
}
#ownership .cirdot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px; border:2px solid rgba(0,0,0,0.15); }
#ownership .left{ display:flex; align-items:center; gap:6px; }
#ownership .by{ font-size:12px; color:var(--black); }


.logs{ height:28vh; }
.logs-body{ height:calc(28vh - 34px); overflow:auto; display:flex; flex-direction:column; gap:6px; }
.logline{ font-size:12px; color:var(--black); }
.code{
  background:#f6faf7; border:1px solid var(--border);
  border-radius:8px; padding:8px; max-height:180px; overflow:auto;
  color:var(--black); font-size:12px;
}
.code.small{ max-height:120px; }


.board-dice{
  position:absolute; left:50%;
  top: clamp(85px, 10cqw, 130px);
  transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:#0c121c; 
  border:1px solid rgba(255,255,255,0.15);
  border-radius:12px; padding:6px 10px;
  color:#eaf0ff; font-weight:800; letter-spacing:.4px;
  z-index:12; pointer-events:none;
}
.board-die{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--border); border-radius:8px;
  font-weight:900; font-size:16px; color:var(--black);
}
.board-dice .sum{ font-size:12px; opacity:.9; margin-left:2px; }

.die.spinning, .board-die.spinning{
  animation:diceSpin .12s linear infinite;
}
@keyframes diceSpin{
  0%{ transform: translateY(0) rotate(0); }
  50%{ transform: translateY(-2px) rotate(6deg); }
  100%{ transform: translateY(0) rotate(0); }
}


.decisions-body{
  max-height:40vh; overflow:auto; display:flex; flex-direction:column; gap:8px;
}
.decision-item{
  display:flex; flex-direction:column; gap:4px;
  padding:8px; border:1px solid var(--border); border-radius:10px;
  background:#f3f6f4; color:var(--black); font-size:12px;
}
.decision-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:700; }
.decision-meta{ display:flex; align-items:center; gap:8px; opacity:.75; font-weight:600; }


@media (max-width:800px){
  .layout{ grid-template-columns:1fr; height:auto; }
  .board-wrap{ align-items:flex-start; }
}
@media (max-width:480px){
  .board{ aspect-ratio:auto; }
  .dice{ gap:10px; }
  .die{ width:44px; height:44px; font-size:18px; line-height:1; }
  .dice > div:last-child{ font-size:14px; }

  .tile .name{
    -webkit-line-clamp:2;
    font-size:clamp(9px, 3.2vw, 12px);
    padding:4px 4px 12px;
  }
  .tile .price, .tile .owner-chip{ font-size:10px; bottom:4px; padding:2px 8px; }
  .tile .buildings{ left:2px; bottom:2px; gap:2px; }
  .house{ width:6px; height:6px; }
  .hotel{ width:10px; height:7px; }
  .token-abs{ width:12px; height:12px; border-width:1.5px; }
  .board{ gap:1px; padding:3px; }
  #players .player{ padding:6px 8px; }
  .player .meta{ font-size:11px; }
  .now{ font-size:11px; }
  .logs{ height:24vh; }
  .logs-body{ height:calc(24vh - 34px); }
  .board-dice{ top:95px; }
}



@container (max-width:900px){
  .tile .name{
    -webkit-line-clamp:2;
    font-size:clamp(9px, 1.2cqw, 12px);
    padding-bottom:14px; line-height:1.1;
  }
  .tile .price, .tile .owner-chip{
    font-size:clamp(9px, 1.0cqw, 11px);
    padding:2px 8px; bottom:5px;
  }
  .house{ width:7px; height:7px; }
  .hotel{ width:11px; height:7px; }
  .token-abs{
    width:clamp(10px, 1.3cqw, 14px);
    height:clamp(10px, 1.3cqw, 14px);
    border-width:1.5px;
  }
  .board-die{
    width:clamp(30px, 4.6cqw, 38px);
    height:clamp(30px, 4.6cqw, 38px);
    font-size:clamp(14px, 2cqw, 18px);
  }
}


@container (max-width:760px){
  .tile .name{
    -webkit-line-clamp:2;
    font-size:clamp(9px, 1.1cqw, 11px);
    padding-bottom:10px;
  }
  .tile .price, .tile .owner-chip{
    font-size:clamp(8.5px, .95cqw, 10px);
    bottom:4px; padding:2px 7px;
  }
  .house{ width:6px; height:6px; }
  .hotel{ width:10px; height:7px; }
  .token-abs{ width:clamp(9px, 1.1cqw, 12px); height:clamp(9px, 1.1cqw, 12px); }
  .logs{ height:24vh; }
  .logs-body{ height:calc(24vh - 34px); }
}


@container (max-width:640px){
  .tile .name{
    -webkit-line-clamp:2;
    font-size:clamp(9px, 1.0cqw, 10px);
    padding-bottom:8px; letter-spacing:.1px;
  }
  .tile .price, .tile .owner-chip{
    font-size:clamp(8px, .9cqw, 9.5px);
    padding:2px 6px;
  }
  .board{ gap:1px; padding:3px; }
}

.tile .tile-bg{
  display: flex;
  align-items: center;
  justify-content: center; 
}

.tile .tile-bg .tile-icon{
  position: static !important;   
  transform: none !important;
  left: auto !important;
  bottom: auto !important;

  
  width: clamp(18px, 26%, 44px);
  height: auto;                   
  opacity: 1;                     
  pointer-events: none;
  image-rendering: auto;
}

.tile-compact{
  padding: 4px 4px 22px;              
}

.tile-compact .tile-bg{
  display:flex;
  align-items:center;
  justify-content:center;             
}

.tile-compact .tile-bg .tile-icon{
  position: static !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
  width: clamp(18px, 28%, 48px);
  height: auto;
  opacity: 1;
  pointer-events: none;
}

.tile-compact .price{
  position:absolute;
  left:50%; bottom:6px; transform:translateX(-50%);
  font-size: clamp(11px, 2.2cqw, 13px);
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 0;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.12);
}

.tile-compact{
  
  padding: 6px 4px 28px;
}


.tile-compact .tile-bg{
  display: flex;
  align-items: center;
  justify-content: flex-end;       
  padding-bottom: 22px;            
}


.tile-compact .tile-bg .tile-icon{
  position: static !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
  pointer-events: none;

  width: clamp(14px, 22%, 34px);   
  height: auto;
  opacity: 1;
  margin-bottom: 4px;              
}


.tile-compact .price{
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  font-size: clamp(11px, 2.2cqw, 13px);
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 0;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.12);
  z-index: 2;                      
}


@container (max-width: 760px){
  .tile-compact{ padding-bottom: 30px; }
  .tile-compact .tile-bg{ padding-bottom: 24px; }
  .tile-compact .tile-bg .tile-icon{
    width: clamp(12px, 20%, 28px);
    margin-bottom: 6px;
  }
  .tile-compact .price{
    bottom: 4px;
    padding: 2px 8px;
    font-size: clamp(10px, 1.9cqw, 12px);
  }
}


@media (max-width: 480px){
  .tile-compact .tile-bg .tile-icon{
    width: clamp(12px, 18%, 26px);
    margin-bottom: 6px;
  }
  .tile-compact .price{
    bottom: 4px;
    padding: 2px 7px;
    font-size: 10px;
  }
}

.tile-compact{
  padding: 6px 4px 28px;           
}


.tile-compact .tile-bg{
  display: flex;
  align-items: center;
  justify-content: flex-end;       
  padding-bottom: 22px;            
}


.tile-compact .tile-bg .tile-icon{
  position: static !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
  pointer-events: none;

  width: clamp(14px, 22%, 34px);
  height: auto;
  opacity: 1;
  margin-bottom: 4px;
}


.tile-compact .price,
.tile-compact .owner-chip{
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  font-size: clamp(11px, 2.2cqw, 13px);
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 0;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.12);
  z-index: 2;                      
  color: var(--black);
}


@container (max-width: 760px){
  .tile-compact{ padding-bottom: 30px; }
  .tile-compact .tile-bg{ padding-bottom: 24px; }
  .tile-compact .tile-bg .tile-icon{
    width: clamp(12px, 20%, 28px);
    margin-bottom: 6px;
  }
  .tile-compact .price,
  .tile-compact .owner-chip{
    bottom: 4px;
    padding: 2px 8px;
    font-size: clamp(10px, 1.9cqw, 12px);
  }
}


@media (max-width: 480px){
  .tile-compact .tile-bg .tile-icon{
    width: clamp(12px, 18%, 26px);
    margin-bottom: 6px;
  }
  .tile-compact .price,
  .tile-compact .owner-chip{
    bottom: 4px;
    padding: 2px 7px;
    font-size: 10px;
  }
}

.tile-compact .owner-chip{ display:block !important; }


@container (max-width: 760px){
  .board-die{
    width: clamp(24px, 3.6cqw, 30px);
    height: clamp(24px, 3.6cqw, 30px);
    font-size: clamp(11px, 1.6cqw, 13px);
  }
  .board-dice .sum{
    font-size: clamp(9px, 1.4cqw, 11px);
  }
}


@media (max-width: 480px){
  .board-die{
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
  .board-dice .sum{
    font-size: 11px;
  }
}

.tile-compact.no-chip .tile-bg{
  display: flex;
  align-items: center;
  justify-content: center;   
  padding-bottom: 0;         
}

.tile-compact.no-chip .tile-bg .tile-icon{
  margin-bottom: 0;          
  width: clamp(18px, 28%, 48px); 
}


.tile-compact.no-chip .price,
.tile-compact.no-chip .owner-chip{
  display: none !important;
}
.tile .tile-bg .tile-icon[alt="go"] { transform: scaleX(-1) !important; }
.tile .tile-bg{
  position: absolute;
  inset: 0;
  z-index: 0 !important;      
  pointer-events: none;
}

.tile .tile-bg .tile-icon{
  z-index: -1 !important;     
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(18px, 26%, 44px);
  height: auto;
  opacity: 1;
  pointer-events: none;
}


.tile .tile-bg .tile-icon[alt="go"]{
  transform: translate(-50%, -50%) scaleX(-1);
  transform-origin: center;
}

.board {
  position: relative;
  overflow: hidden;
}

.board::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/bg.png") center center no-repeat;
  background-size: 50% auto;
  transform: translate(-3%, -3%) rotate(-45deg); 
  transform-origin: center center;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}


.tile .owner-chip,
.tile-compact .owner-chip{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(0,0,0,.8);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}


.tile .owner-chip .owner-name{
  text-shadow: none;
  font-weight: 900;
}


@container (max-width: 760px){
  .tile .owner-chip,
  .tile-compact .owner-chip{
    padding: 2px 8px;
    border-width: 1px;
  }
}

.topbar .x-link{
  display:inline-flex; align-items:center;
}
.topbar .x-link img{
  width:22px; height:22px; display:block;
}
.topbar .x-link:hover{ opacity:.8; }