/*
 * Splendor Family Online v0.3.3 large-number table rebuild
 * Single-source game-table layout.
 * The board is sized from available height so 12 vertical development cards
 * remain readable on short landscape phones.
 */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.game-active{
  width:100vw;
  height:100dvh;
  overflow:hidden;
}

.game-shell.table-v030{
  --layout-gap:clamp(3px,.55vw,8px);
  --rail-width:clamp(112px,14vw,190px);
  --dock-size:clamp(76px,19dvh,116px);
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) var(--dock-size);
  gap:var(--layout-gap);
  overflow:hidden;
}

.table-v030 .hud{
  min-height:0;
}
.table-v030 .turn-box.my-turn{
  border-color:#e9c465!important;
  background:linear-gradient(90deg,rgba(77,54,15,.72),rgba(8,24,33,.96))!important;
  box-shadow:inset 4px 0 #f0c65e,0 0 12px rgba(230,183,75,.18);
}
.table-v030 .turn-box.my-turn .turn-title{
  color:#ffe6a0;
  text-shadow:0 1px 5px #000;
}

.table-layout-v030{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:var(--rail-width) minmax(0,1fr);
  gap:var(--layout-gap);
  overflow:hidden;
}

/* Opponents: never includes state.viewer_index. */
.opponents-rail{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:repeat(var(--opponent-count),minmax(0,1fr));
  gap:var(--layout-gap);
  overflow:hidden;
}

.opponents-rail.empty{
  display:none;
}

.table-v030 .opponent-panel{
  min-width:0;
  min-height:0;
  height:auto;
  padding:clamp(4px,.55vw,8px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(2px,.35vh,5px);
  border-radius:10px;
  overflow:hidden;
}

.table-v030 .opponent-panel.active{
  border-color:#ebc46c!important;
  box-shadow:inset 0 0 24px rgba(227,181,82,.13),0 0 13px rgba(227,181,82,.22)!important;
}

.table-v030 .player-head{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(3px,.45vw,7px);
  align-items:center;
}

.table-v030 .player-head .avatar{
  width:clamp(22px,2.8vw,34px);
  height:clamp(22px,2.8vw,34px);
  font-size:clamp(7px,.75vw,10px);
}

.player-identity,.my-name{min-width:0}
.table-v030 .player-name{
  font-size:clamp(8px,.8vw,12px);
}
.table-v030 .player-meta{
  font-size:clamp(6px,.55vw,8px);
}
.table-v030 .player-score,
.table-v030 .my-head .score{
  display:flex;
  align-items:baseline;
  gap:2px;
  font-size:clamp(17px,2vw,28px);
}
.table-v030 .player-score small,
.table-v030 .my-head .score small{
  font:700 clamp(5px,.5vw,8px) Inter,system-ui,sans-serif;
  color:#907b55;
}

.opponent-assets{
  min-height:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:2px;
  align-items:stretch;
}

.opponent-bonus-cell{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:2px;
  border:1px solid rgba(218,177,81,.58);
  border-radius:7px;
  background:linear-gradient(145deg,rgba(72,48,15,.94),rgba(17,12,5,.98));
  color:#f4d67e;
  overflow:hidden;
}
.opponent-bonus-cell .bonus-crown{
  font-size:clamp(13px,1.5vw,20px);
  line-height:1;
}
.opponent-bonus-cell>span:last-child{
  display:flex;
  align-items:baseline;
  gap:2px;
}
.opponent-bonus-cell b{
  color:#fff3c5;
  font:900 clamp(11px,1.35vw,18px)/1 Georgia,serif;
}
.opponent-bonus-cell em{
  color:#d2b76e;
  font:800 clamp(5px,.52vw,8px)/1 Inter,system-ui,sans-serif;
  font-style:normal;
}

.asset-gem{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1px,.25vw,4px);
  padding:2px;
  border:1px solid rgba(87,105,111,.42);
  border-radius:7px;
  background:linear-gradient(160deg,rgba(15,34,45,.96),rgba(3,10,15,.96))!important;
  overflow:hidden;
}
.asset-gem>.gem-icon{
  width:clamp(10px,1.35vw,19px)!important;
  height:clamp(10px,1.35vw,19px)!important;
  flex:0 0 auto;
}
.asset-values{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  flex-wrap:wrap;
  line-height:1;
}
.asset-metric{
  min-width:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:1px;
  line-height:1;
}
.asset-metric b{
  color:#f3dfaa;
  font:900 clamp(9px,1.1vw,16px) Georgia,serif;
}
.asset-metric em{
  font-style:normal;
  color:#90a5ab;
  font-size:clamp(5px,.55vw,8px);
  white-space:nowrap;
}
.token-value{
  padding:1px 3px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
}
.token-value b{color:#fff}

.opponent-foot{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:2px;
  color:#9cafb4;
  font-size:clamp(5px,.55vw,8px);
}
.opponent-foot span{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  white-space:nowrap;
}
.opponent-foot .gem-icon{
  width:8px!important;
  height:8px!important;
}

/* Central market: deck / 3x4 vertical cards / supply / actual Bonus cards. */
.table-v030-board{
  position:relative;
  min-width:0;
  min-height:0;
  display:block!important;
  padding:clamp(3px,.55vw,9px)!important;
  overflow:hidden!important;
}

.table-v030 .market-board{
  --board-gap:clamp(3px,.6vw,10px);
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:grid!important;
  grid-template-columns:minmax(40px,.72fr) minmax(0,4fr) clamp(44px,5.2vw,76px) clamp(62px,7.2vw,108px)!important;
  gap:var(--board-gap)!important;
  align-items:stretch!important;
  overflow:hidden;
}

.table-v030 .deck-column,
.table-v030 .market-rows{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  gap:var(--board-gap)!important;
  align-content:stretch!important;
}

.table-v030 .board-deck-slot{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  justify-items:center;
  gap:2px;
}

.table-v030 .board-deck-slot .tier-deck{
  width:auto!important;
  max-width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:.68/1!important;
  border-radius:clamp(4px,.5vw,8px);
}

.table-v030 .board-tier-tag{
  min-width:0;
  height:auto;
  gap:0;
  line-height:1;
}
.table-v030 .board-tier-tag b{font-size:clamp(6px,.7vw,10px)}
.table-v030 .board-tier-tag small{font-size:clamp(5px,.48vw,7px)}

.table-v030 .market-row{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:var(--board-gap)!important;
  justify-content:stretch!important;
  align-items:stretch!important;
  overflow:hidden;
}

.table-v030 .market-row .dev-card,
.table-v030 .market-row .empty-card{
  width:auto!important;
  max-width:100%!important;
  height:100%!important;
  max-height:100%!important;
  min-height:0!important;
  aspect-ratio:.68/1!important;
  justify-self:center;
  border-radius:clamp(4px,.55vw,9px);
}

.table-v030 .dev-card .card-art-frame{
  inset:0!important;
}
.table-v030 .dev-card .card-top{
  height:auto!important;
  padding:clamp(2px,.45vh,5px)!important;
}
.table-v030 .dev-card .card-vp{
  min-width:clamp(15px,2.4vh,27px)!important;
  min-height:clamp(15px,2.4vh,27px)!important;
  padding:1px 3px!important;
  font-size:clamp(10px,2.2vh,23px)!important;
}
.table-v030 .dev-card .bonus-gem{
  width:clamp(16px,2.8vh,30px)!important;
  height:clamp(16px,2.8vh,30px)!important;
}
.table-v030 .dev-card .card-cost{
  left:clamp(2px,.38vw,5px)!important;
  right:auto!important;
  bottom:clamp(2px,.4vh,5px)!important;
  display:grid!important;
  grid-template-columns:repeat(2,clamp(22px,4.2vh,28px));
  gap:2px!important;
  align-items:end!important;
}
.table-v030 .dev-card .cost-chip{
  position:relative;
  width:clamp(22px,4.2vh,28px)!important;
  height:clamp(22px,4.2vh,28px)!important;
  min-width:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center;
  border:1px solid rgba(255,255,255,.44)!important;
  border-radius:50%!important;
  background:#05070a!important;
  overflow:hidden;
}
.table-v030 .dev-card .cost-chip .gem-icon{
  position:absolute!important;
  inset:1px;
  width:calc(100% - 2px)!important;
  height:calc(100% - 2px)!important;
  opacity:.9;
}
.table-v030 .dev-card .cost-chip b{
  position:relative;
  z-index:2;
  color:#fff!important;
  font:900 clamp(12px,2.45vh,17px)/1 Georgia,serif!important;
  text-shadow:-1px -1px #000,1px -1px #000,-1px 1px #000,1px 1px #000,0 2px 3px #000;
}

.table-v030 .supply-column{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid!important;
  grid-template-rows:repeat(6,minmax(0,1fr));
  gap:clamp(2px,.4vh,6px)!important;
  align-content:stretch!important;
}
.table-v030 .supply-column .bank-token{
  min-width:0;
  min-height:0!important;
  height:auto;
  padding:1px;
  gap:clamp(1px,.25vw,4px);
  border-radius:999px;
}
.table-v030 .supply-column .bank-token .chip{
  --token-size:clamp(20px,4.2vh,42px);
}
.table-v030 .supply-column .bank-token b{
  min-width:clamp(18px,2vw,25px);
  padding:2px 4px;
  border:1px solid rgba(238,202,111,.78);
  border-radius:999px;
  background:rgba(3,10,15,.93)!important;
  color:#fff6d4!important;
  font:900 clamp(12px,2.3vh,18px)/1 Georgia,serif!important;
  text-shadow:0 1px 3px #000;
  box-shadow:0 1px 5px rgba(0,0,0,.55);
}

.table-v030 .nobles-column{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid!important;
  grid-template-rows:auto repeat(var(--bonus-count),minmax(0,1fr))!important;
  gap:clamp(2px,.4vh,6px)!important;
  align-content:stretch!important;
}
.table-v030 .bonus-column-title{
  min-width:0;
  padding:2px 1px;
  text-align:center;
  line-height:1.05;
}
.table-v030 .bonus-column-title b{
  display:block;
  color:#e2c67f;
  font-size:clamp(7px,.75vw,11px);
}
.table-v030 .bonus-column-title small{
  display:block;
  color:#776d58;
  font-size:clamp(4px,.44vw,7px);
}
.table-v030 .nobles-column .noble{
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  padding:clamp(2px,.35vw,5px)!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  gap:clamp(2px,.32vw,5px)!important;
  align-items:center!important;
  border-radius:clamp(4px,.5vw,8px);
}
.table-v030 .nobles-column .noble .vp{
  font-size:clamp(14px,2.5vh,25px)!important;
}
.table-v030 .nobles-column .noble-req{
  min-width:0;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:1px;
  align-content:stretch;
}
.table-v030 .nobles-column .req-chip{
  width:100%;
  height:auto;
  min-width:0;
  min-height:0;
  padding:1px 3px;
  display:grid;
  grid-template-columns:clamp(13px,2.5vh,20px) minmax(0,1fr);
  gap:3px;
  align-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(5,9,12,.86);
  overflow:hidden;
}
.table-v030 .nobles-column .req-chip i{
  position:static;
  width:clamp(13px,2.5vh,20px)!important;
  height:clamp(13px,2.5vh,20px)!important;
}
.table-v030 .nobles-column .req-chip b{
  color:#fff;
  font:900 clamp(11px,2.1vh,16px)/1 Georgia,serif;
  text-shadow:-1px -1px #000,1px -1px #000,-1px 1px #000,1px 1px #000;
}

/* Bottom player dock: one identity, one compact asset strip, reserved cards. */
.table-v030 .personal-dock.compact-dock{
  width:100%;
  height:100%;
  min-height:0;
  display:grid!important;
  grid-template-columns:clamp(105px,15vw,205px) minmax(0,1fr) clamp(138px,20vw,290px)!important;
  gap:var(--layout-gap)!important;
  padding:clamp(3px,.45vw,6px)!important;
  overflow:hidden!important;
}
.my-identity,
.table-v030 .my-assets,
.table-v030 .my-reserved{
  min-width:0;
  min-height:0;
  padding:clamp(3px,.45vw,6px);
  border:1px solid #493f2c;
  border-radius:8px;
  background:linear-gradient(145deg,rgba(7,21,31,.98),rgba(2,8,13,.98));
  overflow:hidden;
}
.table-v030 .my-head{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(3px,.4vw,7px);
}
.table-v030 .my-head .avatar{
  width:clamp(24px,3vw,38px);
  height:clamp(24px,3vw,38px);
  font-size:clamp(8px,.85vw,11px);
}
.my-name{
  display:flex;
  flex-direction:column;
}
.my-name strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(8px,.9vw,13px);
}
.my-name small{
  color:#80959c;
  font-size:clamp(5px,.55vw,8px);
}
.my-quick-stats{
  display:flex;
  justify-content:space-between;
  gap:3px;
  margin-top:clamp(2px,.5vh,6px);
  color:#9cafb4;
  font-size:clamp(5px,.6vw,9px);
  white-space:nowrap;
}
.table-v030 .my-assets{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(2px,.4vw,6px);
  align-items:stretch;
}
.table-v030 .my-assets .asset-gem{
  flex-direction:column;
  gap:1px;
}
.table-v030 .my-assets .asset-gem>.gem-icon{
  width:clamp(14px,2.3vw,31px)!important;
  height:clamp(14px,2.3vw,31px)!important;
}
.table-v030 .my-assets .asset-values{gap:4px}
.table-v030 .my-assets .asset-metric b{
  font-size:clamp(11px,1.55vw,21px);
}
.table-v030 .my-assets .asset-metric em{
  font-size:clamp(5px,.58vw,8px);
}
.table-v030 .my-reserved{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
.table-v030 .reserved-title{
  display:flex;
  justify-content:space-between;
  margin-bottom:2px;
  color:#b5c6cb;
  font-size:clamp(6px,.65vw,9px);
  font-weight:900;
}
.table-v030 .reserved-grid{
  min-width:0;
  min-height:0;
  height:auto!important;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2px,.35vw,5px);
}
.table-v030 .reserved-grid .dev-card,
.table-v030 .reserved-grid .reserved-empty{
  width:auto!important;
  max-width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:.68/1!important;
  justify-self:center;
}
.table-v030 .reserved-grid .dev-card .card-vp{
  font-size:clamp(7px,1.45vh,14px)!important;
  min-width:13px!important;
  min-height:13px!important;
}
.table-v030 .reserved-grid .dev-card .bonus-gem{
  width:clamp(12px,2vh,20px)!important;
  height:clamp(12px,2vh,20px)!important;
}
.table-v030 .reserved-grid .cost-chip{
  width:clamp(12px,1.8vh,16px)!important;
  height:clamp(12px,1.8vh,16px)!important;
  min-width:0!important;
}
.table-v030 .reserved-grid .card-cost{
  grid-template-columns:repeat(2,clamp(12px,1.8vh,16px))!important;
  gap:1px!important;
}
.table-v030 .reserved-grid .cost-chip .gem-icon{
  width:calc(100% - 2px)!important;
  height:calc(100% - 2px)!important;
}
.table-v030 .reserved-grid .cost-chip b{
  font-size:clamp(7px,1.15vh,9px)!important;
}
.table-v030 .action-tray{
  bottom:calc(var(--dock-size) + 8px)!important;
}

@media (orientation:landscape) and (max-height:650px){
  .game-shell.table-v030{
    --rail-width:clamp(104px,14vw,150px);
    --dock-size:clamp(74px,19dvh,102px);
  }
  .table-v030 .hud{height:31px;min-height:31px}
  .table-v030 .hud-room{padding:2px 5px}
  .table-v030 .table-v030-board{padding:3px!important}
  .table-v030 .market-board{
    grid-template-columns:minmax(36px,.7fr) minmax(0,4fr) clamp(40px,5.2vw,58px) clamp(54px,7vw,78px)!important;
  }
  .table-v030 .opponent-panel{padding:3px}
  .table-v030 .player-meta{display:none}
  .table-v030 .my-identity,
  .table-v030 .my-assets,
  .table-v030 .my-reserved{padding:3px}
  .table-v030 .personal-dock.compact-dock{
    grid-template-columns:clamp(92px,14vw,150px) minmax(0,1fr) clamp(126px,19vw,210px)!important;
    padding:3px!important;
  }
  .table-v030 .action-tray{padding:4px 6px;font-size:8px}
}

@media (orientation:landscape) and (max-height:540px){
  body.game-active .topbar{
    position:fixed;
    z-index:90;
    top:3px;
    right:4px;
    left:auto;
    width:auto;
    height:27px!important;
    padding:0!important;
    border:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    pointer-events:none;
  }
  body.game-active .topbar .brand{display:none}
  body.game-active .top-actions{gap:3px;pointer-events:auto}
  body.game-active .top-actions .ghost{
    min-height:26px;
    padding:3px 7px!important;
    border-radius:7px;
    background:#07151df2;
    font-size:8px!important;
  }
  body.game-active .room{height:100dvh!important;padding:2px 3px!important}
  .game-shell.table-v030{
    --layout-gap:2px;
    --rail-width:clamp(130px,16vw,154px);
    --dock-size:clamp(64px,15.5dvh,78px);
  }
  .table-v030 .hud{
    height:30px!important;
    min-height:30px!important;
    grid-template-columns:100px minmax(0,1fr)!important;
    gap:2px!important;
  }
  .table-v030 .hud-box{padding:2px 5px!important}
  .table-v030 .hud-room b{font-size:12px!important}
  .table-v030 .hud .ghost.small{padding:2px 4px!important;font-size:7px!important}
  .table-v030 .turn-box{padding-right:118px!important}
  .table-v030 .turn-title{font-size:10px!important}
  .table-v030 .turn-sub{display:none}
  .table-v030 .ai-timer{min-width:96px!important;max-width:140px}
  .table-v030 .ai-line{font-size:7px}
  .table-v030 .market-board{
    --board-gap:2px;
    grid-template-columns:42px minmax(0,4fr) 68px 102px!important;
  }
  .table-v030 .table-v030-board{padding:2px!important}
  .table-v030 .board-tier-tag small,
  .table-v030 .bonus-column-title small{display:none}
  .table-v030 .board-tier-tag b{font-size:8px}
  .table-v030 .board-deck-slot{gap:1px}
  .table-v030 .board-deck-slot .tier-deck b{font-size:9px!important;padding:2px 4px}
  .table-v030 .dev-card .card-vp{
    min-width:21px!important;
    min-height:21px!important;
    padding:1px 4px!important;
    font-size:16px!important;
  }
  .table-v030 .dev-card .bonus-gem{
    width:23px!important;
    height:23px!important;
  }
  .table-v030 .dev-card .card-cost{
    left:3px!important;
    bottom:3px!important;
    gap:2px!important;
    grid-template-columns:repeat(2,24px)!important;
  }
  .table-v030 .dev-card .cost-chip{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    padding:0!important;
  }
  .table-v030 .dev-card .cost-chip .gem-icon{
    width:22px!important;
    height:22px!important;
  }
  .table-v030 .dev-card .cost-chip b{font-size:14px!important}
  .table-v030 .reserved-grid .card-cost{grid-template-columns:repeat(2,14px)!important;gap:1px!important}
  .table-v030 .reserved-grid .cost-chip{width:14px!important;height:14px!important;min-width:14px!important}
  .table-v030 .reserved-grid .cost-chip .gem-icon{width:12px!important;height:12px!important}
  .table-v030 .reserved-grid .cost-chip b{font-size:8px!important}
  .table-v030 .supply-column{gap:2px!important}
  .table-v030 .supply-column .bank-token{gap:3px!important;padding:2px!important}
  .table-v030 .supply-column .bank-token .chip{--token-size:34px}
  .table-v030 .supply-column .bank-token b{min-width:21px;padding:2px 4px;font-size:17px!important}
  .table-v030 .supply-column .bank-token::after{display:none}
  .table-v030 .nobles-column{gap:2px!important}
  .table-v030 .bonus-column-title b{font-size:9px}
  .table-v030 .nobles-column .noble{padding:2px 3px!important}
  .table-v030 .nobles-column .noble .vp{font-size:18px!important}
  .table-v030 .nobles-column .noble{grid-template-columns:22px minmax(0,1fr)!important;gap:2px!important}
  .table-v030 .nobles-column .req-chip{width:100%;height:auto;padding:0 2px;grid-template-columns:14px minmax(0,1fr);gap:2px}
  .table-v030 .nobles-column .req-chip i{width:14px!important;height:14px!important}
  .table-v030 .nobles-column .req-chip b{font-size:12px!important}
  .table-v030 .opponent-panel{grid-template-rows:19px minmax(0,1fr) 8px;gap:2px;padding:3px}
  .table-v030 .player-head .avatar{width:19px;height:19px;font-size:7px}
  .table-v030 .player-name{font-size:9px}
  .table-v030 .player-score{font-size:15px}
  .opponent-assets{gap:2px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
  .asset-gem{padding:1px;border-radius:5px;gap:2px}
  .opponent-assets .asset-gem{flex-direction:row!important}
  .opponent-assets .asset-gem>.gem-icon{width:14px!important;height:14px!important}
  .asset-values{gap:2px;flex-wrap:nowrap}
  .opponent-assets .asset-metric b{font-size:11px}
  .asset-metric em{font-size:7px}
  .token-value{padding:1px 2px}
  .opponent-foot{font-size:6px;gap:1px;line-height:1}
  .opponent-foot .gem-icon{width:9px!important;height:9px!important}
  .opponent-bonus-cell{gap:3px;padding:1px 2px;border-radius:5px}
  .opponent-bonus-cell .bonus-crown{font-size:16px}
  .opponent-bonus-cell b{font-size:14px}
  .opponent-bonus-cell em{font-size:6px}
  .table-v030 .personal-dock.compact-dock{
    grid-template-columns:104px minmax(0,1fr) 132px!important;
    padding:2px!important;
  }
  .table-v030 .my-head .avatar{width:24px;height:24px}
  .table-v030 .my-head .score{font-size:17px}
  .my-name strong{font-size:9px}
  .my-name small{font-size:7px}
  .my-quick-stats{font-size:7px;margin-top:2px}
  .table-v030 .my-assets{gap:2px}
  .table-v030 .my-assets .asset-gem{flex-direction:row;gap:3px;padding:2px}
  .table-v030 .my-assets .asset-gem>.gem-icon{width:26px!important;height:26px!important}
  .table-v030 .my-assets .asset-values{gap:3px;flex-direction:column}
  .table-v030 .my-assets .asset-metric b{font-size:16px}
  .table-v030 .my-assets .asset-metric em{font-size:7px}
  .table-v030 .reserved-title{font-size:7px;margin:0 0 1px}
  .table-v030 .reserved-grid{gap:2px}
  .table-v030 .action-tray{bottom:calc(var(--dock-size) + 5px)!important}
  .action-overlay{inset:0!important}

  .modal{padding:5px!important}
  .modal-card{
    width:min(660px,calc(100vw - 14px))!important;
    max-height:calc(100dvh - 10px)!important;
    padding:10px 12px!important;
    overflow:auto;
  }
  .modal-close{width:26px;height:26px;top:6px;right:7px;font-size:15px}
  .modal-card h3{font-size:19px!important;margin:0 30px 6px 0!important}
  .modal-actions{gap:5px;margin-top:6px}
  .modal-actions .ghost,.modal-actions .primary{min-height:31px;padding:5px 11px}

  #modalBody.card-dialog,
  #modalBody.payment-dialog{
    min-height:0;
    display:grid;
    grid-template-columns:132px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    column-gap:14px;
    align-items:center;
  }
  #modalBody.card-dialog>h3,
  #modalBody.payment-dialog>h3{grid-column:2;grid-row:1}
  #modalBody.card-dialog>.action-visual,
  #modalBody.payment-dialog>.action-visual{
    grid-column:1;
    grid-row:1/4;
    margin:0!important;
  }
  #modalBody.card-dialog>.action-visual .dev-card,
  #modalBody.payment-dialog>.action-visual .dev-card{
    width:126px!important;
    height:180px!important;
  }
  #modalBody.card-dialog>p{grid-column:2;grid-row:2;margin:3px 0;font-size:13px}
  #modalBody.card-dialog>.modal-actions{grid-column:2;grid-row:3}

  #modalBody.payment-dialog>.payment-grid{
    grid-column:2;
    grid-row:2;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
  }
  #modalBody.payment-dialog>.payment-grid .payment-row{
    min-width:0;
    min-height:38px;
    grid-template-columns:24px minmax(0,1fr) auto;
    gap:4px;
    padding:4px;
  }
  #modalBody.payment-dialog .color-label{font-size:0;gap:0}
  #modalBody.payment-dialog .color-label .gem-icon{width:21px;height:21px}
  #modalBody.payment-dialog .payment-summary{font-size:9px;line-height:1.25}
  #modalBody.payment-dialog .gold-adjust{gap:2px}
  #modalBody.payment-dialog .gold-adjust button{width:25px;height:25px;padding:0}
  #modalBody.payment-dialog>p{
    grid-column:2;
    grid-row:3;
    justify-self:start;
    margin:7px 0 0;
    font-size:10px;
  }
  #modalBody.payment-dialog>.modal-actions{
    grid-column:2;
    grid-row:3;
    justify-self:end;
    margin:3px 0 0;
  }
  #modalBody.return-dialog .discard-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  #modalBody.return-dialog .discard-choice{padding:5px;gap:3px;flex-direction:column}
}

@media (orientation:landscape) and (max-width:780px){
  .table-v030 .market-board{
    grid-template-columns:40px minmax(0,4fr) 66px 98px!important;
  }
  .table-v030 .dev-card .card-cost{
    grid-template-columns:repeat(2,24px);
  }
}

/* v0.4.0 information-first card visuals live with the single table layout. */
.table-v030 .board-deck-slot.tier-1 .tier-deck{background:linear-gradient(145deg,#1e6d4d,#0a2f25 72%),repeating-linear-gradient(45deg,transparent 0 8px,#82dfaa1f 8px 10px)!important;border-color:#78c894!important;box-shadow:4px 3px 0 #0d3e2e,8px 6px 0 #061812!important}
.table-v030 .board-deck-slot.tier-2 .tier-deck{background:linear-gradient(145deg,#b58925,#5a3a08 72%),repeating-linear-gradient(45deg,transparent 0 8px,#fff1a31f 8px 10px)!important;border-color:#f0ce72!important;box-shadow:4px 3px 0 #785717,8px 6px 0 #251704!important}
.table-v030 .board-deck-slot.tier-3 .tier-deck{background:linear-gradient(145deg,#285da0,#0b2349 72%),repeating-linear-gradient(45deg,transparent 0 8px,#8cc9ff1f 8px 10px)!important;border-color:#75aeea!important;box-shadow:4px 3px 0 #173b73,8px 6px 0 #071226!important}
.table-v030 .tier-deck::before{content:"◆";position:absolute;inset:8% 10%;display:grid;place-items:center;border:1px solid #f4d88780;transform:rotate(45deg);color:#f4d276;font-size:22px;text-shadow:0 0 12px #ffdc78}.table-v030 .tier-deck b{z-index:2;color:#fff3c5;font-size:10px}
.dev-card{--bonus-rgb:190,180,155;--bonus-edge:#d2c7ad;border-width:2px!important;border-color:var(--bonus-edge)!important;background:#0a1218!important;box-shadow:0 0 0 1px rgba(var(--bonus-rgb),.75),0 5px 12px #000c,inset 0 7px 15px rgba(var(--bonus-rgb),.28)!important}
.dev-card.bonus-white{--bonus-rgb:226,235,239;--bonus-edge:#eff9ff}.dev-card.bonus-blue{--bonus-rgb:35,139,222;--bonus-edge:#58b9f2}.dev-card.bonus-green{--bonus-rgb:38,169,111;--bonus-edge:#57d896}.dev-card.bonus-red{--bonus-rgb:218,54,67;--bonus-edge:#ff6e78}.dev-card.bonus-black{--bonus-rgb:105,99,118;--bonus-edge:#aaa4bb}
.dev-card::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--bonus-rgb),.24),transparent 34%,transparent 63%,rgba(var(--bonus-rgb),.17)),linear-gradient(90deg,rgba(var(--bonus-rgb),.20),transparent 20% 80%,rgba(var(--bonus-rgb),.18));box-shadow:inset 0 0 18px rgba(var(--bonus-rgb),.18)}.dev-card .card-art-frame{inset:0!important}.dev-card .card-top,.dev-card .card-cost{z-index:4}
.table-v030 .dev-card .card-cost{left:3px!important;right:auto!important;bottom:4px!important;display:grid!important;grid-template-columns:repeat(2,clamp(25px,2.05vw,31px))!important;gap:2px!important;align-content:end!important;align-items:end!important}
.table-v030 .dev-card .cost-chip{width:clamp(25px,2.05vw,31px)!important;height:clamp(25px,2.05vw,31px)!important;min-width:0!important;padding:0!important;justify-content:center!important;gap:0!important;border:2px solid #f5f6f7!important;border-radius:50%!important;background:#05080bed!important;box-shadow:0 2px 5px #000d,0 0 0 1px #000!important;font:900 clamp(14px,1.25vw,18px)/1 Georgia,serif!important;text-shadow:0 2px 2px #000!important}
.table-v030 .dev-card .cost-chip .gem-icon{position:absolute!important;width:100%!important;height:100%!important;inset:0!important;border:0!important;opacity:.92!important}.table-v030 .dev-card .cost-chip b{position:relative;z-index:2;color:#fff!important;-webkit-text-stroke:1px #061018;text-shadow:0 1px 2px #000,0 0 4px #000!important}
.gem-icon.white,.chip.white,.gem-ribbon .white{border-color:#263d4b!important;box-shadow:inset 0 0 0 2px #fff,inset 0 4px 7px #fff,0 0 0 2px #87a0ad,0 3px 7px #000b!important;background:radial-gradient(circle at 34% 27%,#fff 0 23%,#d7e0e4 25% 57%,#8797a0 59% 76%,#344956 78% 100%)!important}
.supply-column .bank-token:has(.chip.white){background:#0b1a22!important;border-color:#7d929c!important}.supply-column .bank-token:has(.chip.white)>b{color:#fff!important;text-shadow:0 1px 3px #000;font-size:clamp(13px,1.3vw,18px)!important}
@media (orientation:landscape) and (max-height:650px){.table-v030 .dev-card .card-cost{grid-template-columns:repeat(2,25px)!important;gap:1px!important;left:2px!important;bottom:2px!important}.table-v030 .dev-card .cost-chip{width:25px!important;height:25px!important;font-size:15px!important;border-width:1.5px!important}}