/* Shared HUD and responsive menu refinements. */
.close-button {background-size:cover;background-repeat:no-repeat}
.build-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.build-choice.opt {gap:10px;padding:18px 10px 12px;border:1px solid #84613c;border-radius:3px;background:linear-gradient(#f3e4c7,#d9bc8f);box-shadow:inset 0 1px #fff9,0 3px 0 #795633,0 5px 9px #39241433;transition:transform .12s,box-shadow .12s}
.build-choice.opt:enabled:hover {background:linear-gradient(#fff0d1,#e6c798);box-shadow:inset 0 1px #fff,0 3px 0 #795633,0 6px 13px #39241455}
.build-choice.opt:enabled:active {transform:translateY(2px);box-shadow:inset 0 1px #fff8,0 1px 0 #795633}
.build-choice.opt:focus-visible {outline:2px solid #822b20;outline-offset:4px}
.build-choice.opt:disabled {opacity:1;cursor:default;box-shadow:inset 0 1px #fff5;background:#d5bf9e;border-color:#aa8e67}
.build-choice.opt:disabled>.ui-icon {opacity:.55}
.build-choice.opt>span {width:100%}
.build-choice .sub {min-height:34px;line-height:1.4;margin-top:5px}
.build-choice .build-cost-label {margin-top:auto;font-size:calc(11px * var(--text-scale, 1));letter-spacing:.04em;color:#674d32}
.build-costs {display:flex;justify-content:center;gap:8px}
.build-resource {display:flex;align-items:center;flex-direction:column;gap:3px;font-size:calc(14px * var(--text-scale, 1));white-space:nowrap;color:#584631}
.build-resource .ricon {width:27px;height:27px}
.build-resource.short .ricon {filter:grayscale(1);opacity:.3}
.resource-check {height:12px;font:700 calc(12px * var(--text-scale, 1))/12px var(--serif);color:#35512d}
.build-resource.short .resource-check {color:#876c4d}
.build-choice .build-cta {display:block;margin-top:5px;padding:9px 2px;background:#6e271e;color:#fff0d1;border:1px solid #a26b42;border-radius:2px;font-size:calc(15px * var(--text-scale, 1));font-variant:small-caps;text-shadow:0 1px #351008}
.build-choice:disabled .build-cta {background:transparent;color:#755638;border-color:#a88c664d;text-shadow:none;font-size:calc(13px * var(--text-scale, 1))}
@media(max-width:760px) {
  .build-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .build-choice.opt {padding:10px 7px 8px;gap:6px;min-height:0}
  .build-choice.opt>.ui-icon {width:43px;height:43px}
  .build-choice .big {font-size:calc(16px * var(--text-scale, 1))}
  .build-choice .sub {min-height:32px;font-size:calc(10px * var(--text-scale, 1))}
  .build-costs {gap:4px}
  .build-resource {font-size:calc(12px * var(--text-scale, 1))}
  .build-resource .ricon {width:23px;height:23px}
  .build-choice .build-cta {font-size:calc(13px * var(--text-scale, 1));padding:8px 1px}
  .build-choice:disabled .build-cta {font-size:calc(11px * var(--text-scale, 1))}
  #sheet:has(.build-grid) {max-height:calc(100dvh - 18px);top:50%}
  #sheet:has(.build-grid)>.row.center {gap:6px;margin-top:15px!important;padding-top:12px}
  #sheet:has(.build-grid)>.row.center button {font-size:calc(12px * var(--text-scale, 1));padding:6px 8px}
}
@media(max-width:760px) and (max-height:800px) {
  #sheet:has(.build-grid) .sheet-title {height:54px;min-height:54px;margin-bottom:6px}
  #sheet:has(.build-grid)>p.hint {font-size:calc(12px * var(--text-scale, 1));margin-bottom:12px}
  .build-choice.opt {gap:4px;padding:8px 6px 7px}
  .build-choice.opt>.ui-icon {width:32px;height:32px}
  .build-choice .big {font-size:calc(15px * var(--text-scale, 1))}
  .build-choice .sub {font-size:calc(9px * var(--text-scale, 1));min-height:26px;margin-top:3px}
  .build-choice .build-cost-label {font-size:calc(10px * var(--text-scale, 1))}
  .build-resource .ricon {width:21px;height:21px}
  .build-resource {font-size:calc(11px * var(--text-scale, 1))}
  .build-choice .build-cta {padding:7px 1px;font-size:calc(12px * var(--text-scale, 1))}
  .build-choice:disabled .build-cta {font-size:calc(10px * var(--text-scale, 1))}
}
#purse {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  width:440px;
  max-width:calc(100vw - 24px);
  gap:0;
  padding:10px 5px;
  margin:0 auto 10px;
  min-height:64px;
  background:none;
  border:0;
  border-radius:0;
  clip-path:none;
  filter:none;
  box-shadow:none;
}
#purse .res {
  min-width:0;
  justify-content:center;
  gap:6px;
  padding:0 5px;
  color:#fff4dd;
}
#purse .res + .res {border:0}
#purse .res .ricon {width:34px;height:34px;filter:drop-shadow(0 2px 3px #001018b3)}
#purse .res b {font:700 calc(23px * var(--text-scale, 1))/1.15 var(--serif);font-variant-numeric:tabular-nums;text-shadow:0 2px 3px #001018,0 0 6px #00101899}
#purse .res.none {opacity:1;color:#d4c7b1}
#purse .res.none .ricon {opacity:.55}
#purse .res.tot {display:none}
#purse .res.pop {animation:inventory-receive .45s ease-out}
@keyframes inventory-receive {40%{filter:drop-shadow(0 0 5px #ffe2a0)}}
#dice {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:max-content;
  margin:9px auto 0;
  padding:6px 13px;
  min-height:42px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#fff4dd;
  font-family:var(--serif);
  text-shadow:0 2px 4px #001018;
}
#dice:empty {display:none}
#dice .dice-label {font-size:calc(10px * var(--text-scale, 1));font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#d6c5a2}
#dice b {min-width:25px;text-align:center;font-size:calc(25px * var(--text-scale, 1));line-height:1;font-variant-numeric:tabular-nums}
#dice .dice-pair {border-left:1px solid #cfb77c40;padding-left:10px;font-size:calc(12px * var(--text-scale, 1));color:#b9c8cb}
#dice.seven b {color:#ffba98}
#hand {bottom:140px}
#tools {flex-direction:column;gap:8px}
#tools button {
  width:44px;height:44px;min-height:44px;padding:5px;
  display:grid;place-items:center;
  background:none;
  border:0;border-radius:0;
  clip-path:none;
  box-shadow:none;
  transition:background .15s,transform .15s;
}
#tools #bFlat,#tools #bLog {display:none}
#tools button::after {display:none}
#tools button .ui-icon {display:block;width:27px;height:27px;object-fit:contain;filter:saturate(.35)}
#tools button:hover {background:#294955}
#tools button:active {transform:scale(.95)}
#tools button:focus-visible {outline:2px solid #ffdda0;outline-offset:3px}
#acts button.end-turn {
  min-height:44px;padding:7px 16px;gap:8px;
  border:1px solid #ae8a5580;border-radius:2px;
  background:#601f1deb;
  color:#f5e4c4;font:700 calc(15px * var(--text-scale, 1))/1.2 var(--serif);font-variant:small-caps;
  text-shadow:0 1px 2px #210c0c;box-shadow:none;
}
#acts button.end-turn::before {display:none}
#acts button.end-turn .ui-icon {display:none}
#acts button.end-turn::after {content:'›';font:400 calc(23px * var(--text-scale, 1))/1 var(--serif)}
#acts button.end-turn:hover {background:#7a2b24}
#acts button.end-turn:focus-visible {outline:2px solid #fff1c9;outline-offset:3px}
#acts button.end-turn:disabled {opacity:.45}
@media(min-width:761px) {
  .seat .mobile-vp {display:none}
  .seat .mini {flex-direction:row-reverse}
}
/* Keep the compact stat strip exclusive to portrait/mobile layouts. */
@media(max-width:760px) {
.seat .l2,#seats.many .l2 {
  left:0;right:0;bottom:0;min-height:28px;padding:3px 5px;
  display:flex;justify-content:space-evenly;gap:3px;
  background:linear-gradient(90deg,transparent,#041b29b3 25%,#041b29b3 75%,transparent);
  border-bottom:1px solid #c4a67066;
}
.seat .mini,#seats.many .mini {flex-direction:row;gap:3px;min-width:0;font-family:var(--serif)}
.seat .mini b {transform:none;background:none;border:0;padding:0;font-family:var(--serif)}
.seat .mini>.ui-icon {display:block;width:17px;height:19px;object-fit:contain}
.seat .mini>.mini-card-back {display:block;width:12px;height:19px;object-fit:contain}
.seat .vp,#seats.many .vp {
  position:static;display:flex;align-items:baseline;justify-content:center;gap:3px;
  width:auto;height:auto;min-width:0;padding:0 0 0 5px;
  background:none;border:0;border-left:1px solid #c4a67044;border-radius:0;box-shadow:none;
  color:#f3d391;font-size:calc(17px * var(--text-scale, 1));line-height:1;
}
.seat .vp::after {content:'VP';font-size:calc(8px * var(--text-scale, 1));letter-spacing:.04em}
  .seat .desktop-vp,#seats.many .desktop-vp {display:none}
  .seat {width:calc((100vw - 30px)/4);max-width:86px;height:102px}
  .seat>.avatar {width:64px;left:calc(50% - 32px)}
  #seats.many .seat {width:calc((100vw - 24px)/6);height:112px}
  .seat .l2,#seats.many .l2 {padding:4px 2px;gap:2px;min-height:29px}
  .seat .mini,#seats.many .mini {gap:2px;min-width:0}
  .seat .mini>.ui-icon {width:13px;height:16px}
  .seat .mini>.mini-card-back {width:10px;height:16px}
  .seat .mini b {min-width:0;font:700 calc(11px * var(--text-scale, 1))/1 var(--serif)}
  .seat .vp,#seats.many .vp {font-size:calc(13px * var(--text-scale, 1));padding-left:3px;gap:2px}
  .seat .vp::after {font-size:calc(6px * var(--text-scale, 1))}
  #seats.many .l2 {flex-wrap:wrap}
  #seats.many .vp {width:100%;border-left:0;padding:0}
  #top {top:115px}
  body:has(#seats.many) #top {top:125px}
  #purse {width:370px;max-width:calc(100vw - 20px);min-height:60px;padding:9px 3px;margin-bottom:8px}
  #purse .res {gap:4px;padding:0 3px}
  #purse .res .ricon {width:29px;height:29px}
  #purse .res b {font-size:calc(22px * var(--text-scale, 1))}
  #dice {min-height:36px;margin-top:5px;padding:5px 10px;gap:8px}
  #dice b {font-size:calc(23px * var(--text-scale, 1))}
  #dice .dice-label {font-size:calc(9px * var(--text-scale, 1))}
  #dice .dice-pair {font-size:calc(11px * var(--text-scale, 1));padding-left:8px}
  body:has(#dice:not(:empty)) #tools {top:186px}
  #hand {bottom:184px}
}