/* v1.12.0 — restrained readability and action feedback.
   Keep the existing card grammar, market order and compact mobile table.
   Load after extended-table-v1.11.0.css. */

/* A dimmed turn must not dim the information needed to plan the next turn. */
.game-card.disabled:not(.played-hand-card){opacity:1!important}
.game-card.point.unaffordable{filter:none!important}
.game-card.disabled:not(.played-hand-card):hover{
  transform:none!important;
  box-shadow:inset 0 1px rgba(255,239,199,.5),0 5px 12px rgba(0,0,0,.48)!important;
}
.game-card[aria-disabled="false"]{
  border-color:#a87535!important;
  cursor:pointer;
}
.completed-point-card[role="button"]{cursor:pointer}
.game-card[aria-disabled="false"]:hover{
  border-color:#e8bc6b!important;
  box-shadow:inset 0 0 0 1px #e8bc6b,0 7px 16px rgba(0,0,0,.5)!important;
}
.game-card[role="button"]:focus-visible,
.completed-point-card[role="button"]:focus-visible{
  outline:3px solid #ffe3a0!important;
  outline-offset:-4px;
  border-color:#ffe3a0!important;
  box-shadow:inset 0 0 0 1px #3e2b17,0 4px 12px rgba(0,0,0,.5)!important;
}
button:focus-visible,
summary:focus-visible{
  outline:2px solid #ffe3a0;
  outline-offset:2px;
}
.hand-row .played-hand-card::after{
  inset:auto 3px 3px auto;
  z-index:5;
  padding:2px 3px;
  border-radius:3px;
  background:#21180e!important;
  color:#ffe0a3;
  font-size:7px;
  line-height:1.1;
  letter-spacing:.02em;
}

/* The extended table's columns require grid, despite the earlier flex layer. */
.extended-table .opponent-seat,
.extended-table .opponent-rail.single .opponent-seat{
  display:grid!important;
  align-items:center;
  grid-template-rows:minmax(0,1fr);
}
.extended-table .seat-cap{margin-top:0!important}
.extended-table .seat-body{min-height:0}

/* Classic seats also inherit that old column-flex declaration. Use the
   existing avatar/body structure, without changing their rail or height. */
.classic-table .table-opponents .opponent-seat,
.classic-table .landscape-right-rail .opponent-seat{
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr);
  align-items:center;
}
.classic-table .seat-cap{margin-top:0!important}
.classic-table .seat-body{min-height:0}

/* A single classic seat retains its original 58px height. Its public data
   fits in the 52px interior; the avatar already identifies the AI/human seat. */
.classic-table .opponent-rail.single .opponent-seat{padding:2px!important}
.classic-table .opponent-rail.single .seat-cap{height:14px;min-height:14px;margin-top:0!important}
.classic-table .opponent-rail.single .opponent-seat .player-name{line-height:1!important}
.classic-table .opponent-rail.single .seat-order{width:14px!important;height:14px!important;font-size:8px!important}
.classic-table .opponent-rail.single .seat-type{display:none!important}
.classic-table .opponent-rail.single .mini-caravan{margin-top:1px!important;padding:1px!important}
.classic-table .opponent-rail.single .mini-caravan-grid{
  height:18px!important;
  min-height:18px!important;
  max-height:18px;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:2px!important;
}
.classic-table .opponent-rail.single .mini-caravan .caravan-cube{
  width:8px!important;
  height:8px!important;
  min-height:0!important;
}
.classic-table .opponent-rail.single .seat-footer{
  height:14px;
  min-height:14px;
  margin-top:1px!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px!important;
  gap:2px!important;
}
.classic-table .opponent-rail.single .seat-footer .mini-stat{height:14px!important;padding:0 1px!important}
.classic-table .opponent-rail.single .seat-footer .mini-stat b{
  font-size:calc(11px * var(--experience-text-scale,1))!important;
  line-height:1;
}
.classic-table .opponent-rail.single .seat-footer .coin-stack{
  width:30px!important;
  min-width:30px!important;
  grid-template-columns:repeat(2,14px)!important;
  gap:2px!important;
}
.classic-table .opponent-rail.single .seat-footer .coin{
  width:14px!important;
  height:14px!important;
  min-width:14px!important;
  font-size:10px!important;
}
@media (orientation:landscape) and (max-height:620px){
  .classic-table .table-opponents .opponent-seat,
  .classic-table .landscape-right-rail .opponent-seat{
    grid-template-columns:23px minmax(0,1fr)!important;
  }
  /* A 46px short-screen seat has a 42px interior: 11px name + 17px
     caravan + 12px footer, with two 1px gaps. */
  .classic-table .opponent-rail.single .opponent-seat{padding:1px!important}
  .classic-table .opponent-rail.single .seat-cap{height:11px;min-height:11px}
  .classic-table .opponent-rail.single .seat-order{width:11px!important;height:11px!important;font-size:6px!important}
  .classic-table .opponent-rail.single .mini-caravan-grid{height:13px!important;min-height:13px!important;max-height:13px;gap:1px!important}
  .classic-table .opponent-rail.single .mini-caravan .caravan-cube{width:6px!important;height:6px!important}
  .classic-table .opponent-rail.single .seat-footer{height:12px;min-height:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 23px!important;gap:1px!important}
  .classic-table .opponent-rail.single .seat-footer .mini-stat{height:12px!important;padding:0!important}
  .classic-table .opponent-rail.single .seat-footer .mini-stat b{font-size:8px!important}
  .classic-table .opponent-rail.single .seat-footer .coin-stack{width:23px!important;min-width:23px!important;grid-template-columns:repeat(2,11px)!important;gap:1px!important}
  .classic-table .opponent-rail.single .seat-footer .coin{width:11px!important;height:11px!important;min-width:11px!important;font-size:7.5px!important}
}

/* Dialogs remain fully scrollable on short screens, including their actions. */
.modal{
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right))
          max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
}
.modal .modal-card{
  max-height:calc(100vh - 16px)!important;
  max-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)))!important;
  min-height:0;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#b1844b #19110c;
  scroll-padding-block:12px;
}
.modal .modal-card button{
  min-height:36px;
  min-width:36px;
  font-size:12px;
}
.modal .modal-close{
  top:7px;
  right:7px;
  padding:0;
  display:grid;
  place-items:center;
  font-size:27px!important;
}
.modal h3{padding-right:26px}
.modal .modal-card p{color:#dfcdb1}
.modal-actions{flex-wrap:wrap}
.modal .payment-color:disabled{opacity:.52}
.modal .choice:disabled{opacity:.58}

/* Compact consequences are shown only inside the existing action dialog. */
.action-preview{
  margin:12px 0 0;
  padding:10px 11px;
  border:1px solid #7c5a34;
  border-radius:10px;
  background:linear-gradient(140deg,#271d13,#17110d);
  color:#f0dfc4;
  text-align:left;
  line-height:1.35;
}
.preview-heading{
  display:block;
  margin-bottom:8px;
  color:#f0ce91;
  font-size:12px;
}
.preview-spices{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.preview-spice{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  min-width:0;
  padding:6px;
  border:1px solid #59442f;
  border-radius:6px;
  background:#100d09;
  font-size:11px;
}
.preview-spice .color-square{
  flex:0 0 13px;
  width:13px;
  height:13px;
}
.preview-spice>span{flex:1 1 auto}
.preview-spice b{font-size:12px;white-space:nowrap;color:#ffedce}
.preview-spice small{font-size:10px;color:#d9be8f;white-space:nowrap}
.preview-capacity{
  display:block;
  margin-top:8px;
  color:#ddc39e;
  font-size:11px;
}
.preview-warning,
.preview-pending{
  display:block;
  margin-top:6px;
  color:#ffca86;
  font-size:11px;
  line-height:1.4;
}
.compact-preview{
  margin:6px 0 0;
  padding:6px;
  border-color:#685039;
  border-radius:6px;
  background:#120e0a;
}
.compact-preview .preview-spices{display:flex;flex-wrap:wrap;gap:4px}
.compact-preview .preview-spice{padding:3px 4px;gap:4px;flex:1 1 auto}
.compact-preview .preview-spice>span{display:none}
.compact-preview .preview-spice b{font-size:11px}
.compact-preview .preview-spice small{font-size:10px}
.compact-preview .preview-spice .color-square{width:11px;height:11px;flex-basis:11px}
.compact-preview .preview-capacity{margin-top:5px;font-size:10px}
.compact-preview .preview-warning,
.compact-preview .preview-pending{margin-top:4px;font-size:10px}
.coin-reward{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:8px 10px;
  border:1px solid #8b6a36;
  border-radius:8px;
  background:#2a2112;
  color:#ffe2a0;
  font-size:12px;
  line-height:1.4;
}

/* Readability increases only where there is room for the complete table. */
@media (min-width:1100px) and (min-height:650px){
  body.game-active{--experience-text-scale:1}
  body.game-active[data-font-size="large"]{--experience-text-scale:1.08}
  body.game-active[data-font-size="xlarge"]{--experience-text-scale:1.16}
  body.game-active .game-hud{
    height:52px;
    flex-basis:52px;
    grid-template-columns:182px minmax(0,1fr);
    gap:6px;
    margin-bottom:6px;
    padding-right:300px!important;
  }
  body.game-active .game-hud .room-head,
  body.game-active .game-hud .turn-banner{
    height:52px;
    min-height:52px;
    padding:6px 8px;
  }
  body.game-active .game-hud .code{font-size:18px!important}
  body.game-active .game-hud .small-btn{font-size:11px!important;min-height:30px;padding:4px 6px}
  body.game-active .game-hud .turn-title{font-size:calc(16px * var(--experience-text-scale))!important;line-height:1.15}
  body.game-active .game-hud .turn-banner .subtle{font-size:calc(11px * var(--experience-text-scale))!important;color:#d4bea0;line-height:1.15}
  body.game-active .game-hud .turn-banner{gap:8px}
  body.game-active .game-hud .turn-banner>div:first-child{min-width:0}
  body.game-active .game-hud .ai-turn-status{min-width:0;width:180px;flex:0 1 180px;padding:4px 6px}
  body.game-active .game-hud .ai-status-top strong,
  body.game-active .game-hud .ai-status-top small,
  body.game-active .game-hud .ai-pace{font-size:11px!important;line-height:1.2}
  body.game-active .game-hud .ai-status-top>b{font-size:11px!important;width:24px;height:24px}
  body.game-active .game-hud .ai-pace{display:none}
  body.game-active .game-hud .end-warning,
  body.game-active .game-hud .host-game-controls>small,
  body.game-active .human-timeout-warning strong,
  body.game-active .human-timeout-warning small{font-size:11px!important}
  body.game-active .top-actions{height:36px;top:max(8px,env(safe-area-inset-top));gap:5px}
  body.game-active .top-actions .ghost{height:36px;font-size:11px!important;padding:5px 9px}

  /* Earlier layers used a different grid row and dock minimum. Keep them equal. */
  .landscape-game-shell{grid-template-rows:minmax(0,1fr) var(--v160-dock-h)!important}
  .landscape-game-shell .personal-zone{
    height:100%!important;
    min-height:0!important;
    grid-template-rows:minmax(0,1fr);
  }
  .personal-zone .personal-zone-left,
  .personal-zone .personal-zone-right,
  .personal-zone .completed-orders-panel{min-height:0}

  .landscape-board{
    grid-template-columns:clamp(136px,12vw,168px) minmax(0,1fr) clamp(136px,12vw,168px)!important;
    gap:8px!important;
    padding:8px;
  }
  .landscape-market{position:relative;container-type:size}
  .official-lane-head{height:20px!important;margin-bottom:5px}
  body.game-active .official-lane-head h3{font-size:12px!important}
  body.game-active .official-lane-head span{font-size:11px!important;color:#d0b695!important;max-width:38%}
  .official-card-track{gap:6px!important}
  .landscape-market .official-card-slot .game-card.point .point-score{
    background:linear-gradient(180deg,#805b36,#4d321f)!important;
  }
  .landscape-market .official-card-slot .game-card.point .point-score .point-value{
    color:#ffe7b5!important;
    font-size:32px!important;
    text-shadow:0 1px 2px #27190d!important;
  }
  .landscape-market .official-card-slot .game-card.point .point-unit{
    font-size:11px!important;
    color:#f3d7a4!important;
  }
  .landscape-market .official-card-slot .game-card .effect strong{
    font-size:12px!important;
    line-height:1.25;
    max-width:70%;
    text-align:center;
    white-space:normal;
  }
  .landscape-market .official-card-slot .game-card .upgrade-icon{
    font-size:22px!important;
    color:#714617!important;
  }
  .landscape-market .official-card-slot .game-card .upgrade-full{font-size:12px!important}
  .table-opponents .opponent-seat,
  .landscape-right-rail .opponent-seat{padding:7px}
  body.game-active .table-opponents .opponent-seat .player-name,
  body.game-active .landscape-right-rail .opponent-seat .player-name{font-size:calc(12px * var(--experience-text-scale))!important;line-height:1.2!important;color:#f0dfc4}
  .table-opponents .seat-type,
  .landscape-right-rail .seat-type{font-size:11px!important;color:#dfbd7c}
  .table-opponents .seat-order,
  .landscape-right-rail .seat-order{width:18px!important;height:18px!important;font-size:11px!important}
  .table-opponents .opponent-seat .mini-stat,
  .landscape-right-rail .opponent-seat .mini-stat{height:22px!important}
  body.game-active .table-opponents .opponent-seat .mini-stat b,
  body.game-active .landscape-right-rail .opponent-seat .mini-stat b{font-size:calc(11px * var(--experience-text-scale))!important}
  .table-opponents .opponent-seat .seat-footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 39px!important}
  .landscape-right-rail .opponent-seat .seat-footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 39px!important}
  .opponent-seat .seat-footer .coin-stack{width:39px!important;min-width:39px!important;grid-template-columns:repeat(2,18px)!important;gap:3px!important}
  .opponent-seat .seat-footer .coin{width:18px!important;height:18px!important;min-width:18px!important;font-size:10px!important}
  .extended-table .opponent-seat,
  .extended-table .opponent-rail.single .opponent-seat{max-height:98px!important;grid-template-columns:28px minmax(0,1fr)!important;padding:5px!important;gap:5px!important}
  .extended-table .seat-avatar,
  .extended-table .opponent-rail.single .seat-avatar{width:26px!important;font-size:11px!important}
  .extended-table .opponent-seat .seat-type{display:none!important}
  .extended-table .opponent-seat .mini-caravan-grid{min-height:18px!important;gap:2px!important}
  .extended-table .opponent-seat .mini-caravan .caravan-cube{width:8px!important;height:8px!important}
  .rail-tools .compact-drawer summary,
  .extended-table .rail-tools .compact-drawer summary{padding:6px!important;font-size:11px!important}
  .compact-drawer .log-list,
  .compact-drawer .rules-short,
  .compact-drawer .log-item{font-size:12px}
  .opponent-seat .seat-host-action,
  .extended-table .opponent-seat .seat-host-action{font-size:9px!important;top:19px!important;padding:3px 5px!important}

  /* Resource totals become readable without enlarging the existing dock. */
  body.game-active .personal-zone .personal-zone-left{padding:3px 4px!important}
  body.game-active .personal-zone .personal-identity-row{height:20px!important;margin-bottom:2px!important}
  body.game-active .personal-zone .personal-identity-row strong{font-size:calc(13px * var(--experience-text-scale))!important;line-height:1.2}
  .personal-zone .personal-identity-row .large-coins .coin{width:20px!important;height:20px!important;font-size:11px!important}
  body.game-active .personal-zone .caravan-card{padding:2px!important}
  body.game-active .personal-zone .caravan-card-top{height:14px!important;font-size:calc(11px * var(--experience-text-scale))!important;line-height:1;margin-bottom:2px!important}
  body.game-active .personal-zone .caravan-card-top b{font-size:calc(12px * var(--experience-text-scale))!important}
  .personal-zone .caravan-capacity-grid{height:34px!important;min-height:34px!important;padding:2px!important;gap:2px!important}
  .personal-zone .caravan-capacity-grid .caravan-cube,
  .personal-zone .caravan-capacity-grid .caravan-slot-empty{width:min(100%,13px)!important}
  .personal-zone .caravan-count-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin-top:3px}
  .personal-zone .caravan-count{min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:2px;font-size:0;line-height:1}
  .personal-zone .caravan-count i{width:11px;height:11px;flex:0 0 11px}
  body.game-active .personal-zone .caravan-count b{font-size:calc(11px * var(--experience-text-scale));color:#f3dfbc;margin-left:0}
  .personal-zone-right.has-orders .hand-row .game-card{width:66px!important;flex-basis:66px!important;height:86px!important;min-height:86px!important}
  .personal-zone-right.has-orders .hand-row .game-card .effect{min-height:78px!important}
  .personal-zone-right.has-orders .hand-row .game-card .cube{width:9px!important;height:9px!important}
  .hand-cycle-divider span{font-size:9px!important}
  .completed-orders-head b,
  .completed-orders-head span{font-size:11px!important}
  .rest-action-card strong{font-size:11px!important}
  .rest-action-card small{font-size:10px!important}

  /* Both width and height come from this market, never the viewport alone.
     The seven-slot row reserves six gaps plus 16px for stack shadows. */
  @supports (width:1cqw) and (height:1cqh){
    .landscape-market{
      --experience-card-w:min(122px,calc((100cqw - 52px) / 7),calc((100cqh - 64px) / 2.8));
      --experience-card-h:calc(var(--experience-card-w) * 1.4);
    }
    .landscape-market .point-track{grid-template-columns:repeat(6,minmax(0,var(--experience-card-w)))}
    .landscape-market .merchant-track{grid-template-columns:repeat(7,minmax(0,var(--experience-card-w)))}
    .landscape-market .official-card-slot{width:var(--experience-card-w)}
    .landscape-market .official-card-slot .game-card,
    .landscape-market .official-card-slot .game-card.point{width:var(--experience-card-w);height:var(--experience-card-h);min-height:var(--experience-card-h)}
    .landscape-market .official-card-slot .game-card:not(.point) .effect{min-height:0!important}
    .landscape-market .deck-stack,
    .landscape-market .deck-card-back{height:var(--experience-card-h)}
    .landscape-market .deck-card-back{width:var(--experience-card-w)}
  }
}

@media (orientation:landscape) and (max-height:620px){
  .modal .modal-card{padding:15px!important}
  .modal h3{font-size:22px!important;margin-bottom:8px}
  .modal p{margin-block:8px;line-height:1.4}
  .modal-actions{margin-top:12px;gap:7px}
  .action-preview{margin-top:8px;padding:8px}
  .preview-heading{margin-bottom:5px}
  .preview-spices{gap:4px}
  .preview-spice{padding:4px}
  .compact-preview{margin-top:5px;padding:5px}
}

/* Short landscape keeps the original runtime dock allocation, without a
   conflicting minimum from the later hand-readability layer. */
@media (orientation:landscape) and (max-height:520px){
  .landscape-game-shell{grid-template-rows:minmax(0,1fr) var(--runtime-dock-h)!important}
  .landscape-game-shell .personal-zone{
    height:100%!important;
    min-height:0!important;
    max-height:var(--runtime-dock-h)!important;
    grid-template-rows:minmax(0,1fr);
  }
  .personal-zone .personal-zone-left,
  .personal-zone .personal-zone-right,
  .personal-zone .completed-orders-panel{min-height:0}
}

/* Keep JS presentation phases and timing intact; remove only motion. */
@media (prefers-reduced-motion:reduce){
  .game-card,
  .completed-point-card,
  .rest-action-card,
  .table-pulse,
  .receive-glow,
  .table-action-scrim,
  .table-action-stage,
  .turn-announcement,
  .ai-turn-frame,
  .ai-turn-frame::before,
  .ai-turn-frame::after{animation:none!important;transition:none!important}
  .game-card[aria-disabled="false"]:hover{transform:none!important}
}
body[data-motion="reduced"] .game-card,
body[data-motion="reduced"] .completed-point-card,
body[data-motion="reduced"] .rest-action-card,
body[data-motion="reduced"] .table-action-scrim,
body[data-motion="reduced"] .table-action-stage,
body[data-motion="reduced"] .ai-turn-frame,
body[data-motion="reduced"] .ai-turn-frame::before,
body[data-motion="reduced"] .ai-turn-frame::after{animation:none!important;transition:none!important}
body[data-motion="reduced"] .game-card[aria-disabled="false"]:hover{transform:none!important}