/* W1A — Camada visual de homologação. Sem regras, movimento espacial ou dependências externas. */
:root {
  --gold: #e4bf82;
  --text: #f2e7d6;
  --muted: #bdb2a6;
  --border: #81705b;
}
body {
  background:
    radial-gradient(ellipse 75% 58% at 50% -13%, #343142 0%, transparent 74%),
    radial-gradient(ellipse 45% 65% at -12% 90%, #211e2b 0%, transparent 82%),
    repeating-linear-gradient(0deg,#11131a 0px,#11131a 3px,#12141c 4px);
}
.page-shell { width: min(1720px, 100%); padding: clamp(8px,1.25vw,20px); }
.masthead {
  position: relative;
  min-height: 94px;
  margin-bottom: 13px;
  padding-inline: 25px;
  background: linear-gradient(100deg,#27232a 0%,#171821 53%,#24212b 100%);
  border-color: #897257;
  box-shadow: inset 0 0 0 3px #12141b, inset 0 0 0 4px #514538,0 12px 24px #06080f95;
}
.masthead::after {
  content: "";
  position: absolute;
  left: 80px;
  right: 80px;
  bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg,transparent,#98744d75,transparent);
  pointer-events: none;
}
.masthead-mark {
  width: 52px; height: 52px;
  border: 2px ridge #a68860;
  box-shadow: inset 0 0 12px #c0933833;
}
.masthead-title h1 { font-size: clamp(22px,2.2vw,35px); text-shadow: 2px 3px #0b0b10,0 0 15px #d9a46a20; }
.game-shell,.bottom-dock {
  grid-template-columns: minmax(190px,.76fr) minmax(0,3.45fr) minmax(218px,.9fr);
  gap: 12px;
}
.panel {
  background:
    linear-gradient(140deg,#2b2b34df 0%,#1b1e27f0 67%),
    repeating-linear-gradient(45deg,#80623a16 0,#80623a16 1px,transparent 1px,transparent 6px);
  border: 2px solid #776652;
  outline: 1px solid #0b0d13;
  box-shadow: inset 0 0 0 3px #11141c, inset 0 0 0 4px #423b3585,0 6px 15px #06070c80;
  padding: clamp(12px,1.05vw,18px);
}
.panel-heading { border-bottom-color: #77634b; margin-bottom: 14px; }
.panel-heading h2 { color: #f1c98f; letter-spacing: .012em; }
.inventory-panel,.party-panel { display:flex; flex-direction:column; }
.inventory-panel .panel-help,.party-panel .panel-help { margin-top: -2px; }
.inventory-group h3 {
  color:#dbc49f;
  border-bottom:1px solid #74614b;
  font-size:11px;
  letter-spacing:.1em;
}
.item-grid { gap: 6px; }
.item-slot {
  border: 1px solid #72634f;
  background:linear-gradient(145deg,#25242c,#14161d 68%);
  box-shadow: inset 1px 1px #8c795533, inset -1px -1px #080a0f;
  color:#e6c18a;
  font-size: clamp(20px,1.8vw,28px);
  min-height: 41px;
  transition: border-color .16s ease,transform .16s ease,background .16s ease;
}
.item-slot:not(.empty):hover { border-color:#e5b877;transform:translateY(-2px);background:#3c322d; }
.item-slot.chosen { border-color:#f0c589;box-shadow:inset 0 0 0 1px #efc78976,0 0 10px #eab56b30; }
.inventory-note { background:linear-gradient(90deg,#201e22,#141720);border-left-color:#c9a16b;min-height:53px; }
.vista-panel { gap: 12px; }
.vista-topline { min-height: 50px; padding: 2px 3px 0; }
.vista-topline h2 { font-size: clamp(21px,2.1vw,28px); color:#f6e2bf;letter-spacing:.012em; }
.location-count {
  font-size:11px;letter-spacing:.08em;
  border:1px solid #705c45;
  background:#13151d;
  padding:7px 10px;
  color:#ebc18b;
}
.scene-window {
  aspect-ratio: 16 / 9;
  min-height: 330px;
  border: 5px ridge #977b59;
  background: #131722;
  outline: 2px solid #101219;
  outline-offset: 3px;
  box-shadow:inset 0 0 0 1px #caa16b,0 0 0 1px #29232a,0 14px 26px #080a1080;
  isolation: isolate;
}
.scene-window::after {
  content:"";
  position:absolute; inset: 0;
  z-index:3;
  border: 1px solid #f0c58878;
  box-shadow: inset 0 0 32px #090b13a3, inset 0 0 0 7px #13131812;
  pointer-events:none;
}
.scene-window img { filter: saturate(1.08) contrast(1.045); }
.scene-shade {
  background:
    linear-gradient(0deg,#080b12ed 0%,#0a0d1440 20%,transparent 42%),
    linear-gradient(90deg,#0c0f1f38,transparent 15%,transparent 85%,#0c0f1f38);
}
.scene-stamp {
  position:absolute; top:13px; left:13px; z-index:2;
  display:flex;gap:7px;align-items:center;
  color:#f2dcb6;
  background:#151821bc;
  border:1px solid #97744c9c;
  padding:6px 10px;
  letter-spacing:.11em;
  font: 10px/1.3 system-ui,sans-serif;
  text-transform:uppercase;
  box-shadow:0 3px 8px #090b1060;
}
.scene-stamp i { font-size:13px;font-style:normal;color:#f0bd78; }
.scene-corner {
  position:absolute;z-index:4; width:17px;height:17px;
  border-color:#c7a16b;border-style:solid;pointer-events:none;
}
.scene-corner.tl {top:7px;left:7px;border-width:2px 0 0 2px}
.scene-corner.tr {top:7px;right:7px;border-width:2px 2px 0 0}
.scene-corner.bl {bottom:7px;left:7px;border-width:0 0 2px 2px}
.scene-corner.br {bottom:7px;right:7px;border-width:0 2px 2px 0}
.scene-caption { padding:33px 22px 16px; font-size:clamp(14px,1.2vw,17px);text-shadow:0 2px 5px #000; }
.caption-decor {color:#f3c881;}
.action-row { gap:9px; margin-top:3px; }
.button {
  font-weight:600;
  border-color:#8b704f;
  padding:12px 18px;
  background:linear-gradient(#474045,#282a32);
  box-shadow:inset 0 1px #a1825d66,0 3px 0 #111217;
  transition:filter .15s ease,transform .15s ease;
}
.button:not(:disabled):active {transform:translateY(2px);box-shadow:inset 0 1px #a1825d66;}
.button-gold {
  background:linear-gradient(#95704c,#59402d);
  border-color:#ddb173;
  box-shadow:inset 0 1px #f4cf9a60,0 3px 0 #161219;
}
.party-card {
  min-height:98px;
  border-color:#78634c;
  background:linear-gradient(100deg,#1c1d25,#2b2830);
  box-shadow: inset 0 0 0 2px #151720;
  transition:border-color .16s ease,filter .16s ease,transform .16s ease;
}
.party-card:hover {transform:translateX(-1px);filter:brightness(1.1)}
.party-card.active { border-color:#e2b87a; box-shadow:inset 4px 0 #d7a369,inset 0 0 0 2px #151720; }
.portrait {
  flex-basis:72px;
  height:80px;
  border-color:#b28d61;
  box-shadow:inset 0 -17px #090b1147,0 0 11px #edb87818;
}
.portrait-rukar {background:linear-gradient(135deg,#985644,#372a34 82%)}
.portrait-seren {background:linear-gradient(135deg,#baa16c,#343d59 83%)}
.portrait-mirael {background:linear-gradient(135deg,#557b6d,#2e3345 83%)}
.hero-summary strong { font-size:18px; }
.hero-summary small {color:#f0c990}
.character-detail {border-color:#8a6d4a;background:linear-gradient(130deg,#252129,#161920)}
.bottom-dock { margin-top:12px; }
.route-map {height:150px;border-color:#a08a68;background:#b69b72;}
.map-current {font-size:12px;color:#eed0a5;}
.event-log { height:156px; font-size:13px;line-height:1.75; }
.event-log p {padding:0 0 5px 16px; margin-bottom:5px; border-bottom:1px solid #84735c1f;}
.controls-panel .control-pad { max-width:245px; gap:7px; }
.control-pad button {
  min-height:52px;
  color:#f7d8a3;
  border-color:#9a7854;
  background:linear-gradient(145deg,#5a5051,#272830);
  box-shadow:inset 0 1px #b89a7275,0 3px 0 #0e1017;
  transition:filter .15s ease,transform .15s ease;
}
.control-pad button:not(:disabled):hover {filter:brightness(1.2)}
.control-pad button:not(:disabled):active {transform:translateY(2px)}
.small-note { color:#c2b5a4; }
.footer {color:#ab9e8d;margin-top:4px;}
@media(max-width:1000px) {
 .game-shell,.bottom-dock {grid-template-columns:minmax(165px,.8fr) minmax(0,2fr);}
 .scene-window {min-height:320px;}
 .party-card {min-height:85px;}
 .portrait {flex-basis:59px;height:70px;}
}
@media(max-width:650px) {
 .page-shell {padding:8px;}
 .masthead {min-height:74px;padding:10px;}
 .masthead::after {left:40px;right:40px;}
 .game-shell,.bottom-dock {display:flex;flex-direction:column;gap:10px}
 .panel {padding:11px;}
 .scene-window {min-height:220px;aspect-ratio:16/10;}
 .scene-stamp {top:9px;left:9px;padding:4px 6px;font-size:8px;}
 .scene-caption {padding:25px 11px 10px;font-size:13px;}
 .location-count {padding:5px;font-size:10px;}
 .action-row {gap:6px;}
 .button {padding:10px 7px;font-size:11px;}
 .item-slot {max-height:67px;font-size:23px;}
 .portrait {flex-basis:58px;height:65px;}
 .route-map {height:120px;}
 .event-log {height:128px;}
}
@media(prefers-reduced-motion:reduce) {
 .item-slot,.party-card,.button,.control-pad button{transition:none!important}
}