/* Son of Shrek II — GBC-style mobile UI.
   Four-shade palettes per region set on #app via .region-* classes. */

:root {
  --px: 'Press Start 2P', 'Courier New', monospace;
  /* default (title) palette — DMG green */
  --c0: #0f380f; /* darkest */
  --c1: #306230;
  --c2: #8bac0f;
  --c3: #9bbc0f; /* lightest */
  --ink: var(--c0);
  --paper: var(--c3);
}

#app.region-es { --c0:#3d0c02; --c1:#99331f; --c2:#e08a3c; --c3:#f2d09b; } /* Ember Steppe */
#app.region-sp { --c0:#0b1f22; --c1:#1e4d40; --c2:#5e8c61; --c3:#c3d9b0; } /* Sulking Pines */
#app.region-qp { --c0:#2a1a33; --c1:#6b4d8a; --c2:#c9a0dc; --c3:#f0e2f7; } /* Quiet Parishes */
#app.region-hb { --c0:#14141f; --c1:#3c3c5c; --c2:#8888aa; --c3:#d8d8e8; } /* Hollow Below */
#app.region-sr { --c0:#0a1a2a; --c1:#2a4a66; --c2:#6a94ad; --c3:#cfe3ec; } /* Sodden Reach */
#app.region-cp { --c0:#33110a; --c1:#7a2e14; --c2:#c96f3a; --c3:#f0d9c0; } /* Cinder Pass */
#app.region-st { --c0:#101820; --c1:#2e4050; --c2:#7288a0; --c3:#d5dde5; } /* Sunken Stair */
#app.region-gw { --c0:#1a1a14; --c1:#4a483a; --c2:#9a9578; --c3:#e8e4d0; } /* Gateway */
#app.region-rg { --c0:#26140a; --c1:#5c3a1e; --c2:#a97b48; --c3:#ecd9bb; } /* Ridgemarch */
#app.region-vr { --c0:#0c2410; --c1:#2c5c30; --c2:#6ba05f; --c3:#d8ecc8; } /* Verdant Reach */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  background:#000;
  font-family: var(--px);
  display:flex; justify-content:center;
  overscroll-behavior:none;
}

#app {
  width:100%; max-width:430px; height:100dvh;
  display:flex; flex-direction:column;
  background: var(--c3);
  color: var(--c0);
  image-rendering: pixelated;
  border-left:4px solid #000; border-right:4px solid #000;
  transition: background .4s;
  position:relative;
}
/* faint scanlines for the handheld feel */
#app::after {
  content:''; position:absolute; inset:0; z-index:99; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.045) 0 1px, transparent 1px 3px);
}

canvas { image-rendering: pixelated; }

.hidden { display:none !important; }

/* ---------- HUD ---------- */
#hud {
  display:flex; justify-content:space-between; align-items:center;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 6px;
  background: var(--c0); color: var(--c3);
  font-size:9px; line-height:1.4;
  border-bottom:3px solid var(--c1);
  flex:0 0 auto;
}
.hud-left { display:flex; flex-direction:column; gap:2px; overflow:hidden; flex:1 1 auto; min-width:0; }
#hud-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#hud-title { font-size:7px; color:var(--c2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hud-right { display:flex; gap:4px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.hud-chip { background:var(--c1); padding:3px 4px; border-radius:2px; font-size:7px; white-space:nowrap; }
.hud-btn { border:0; color:var(--c3); font-family:var(--px); cursor:pointer; }

/* ---------- screens ---------- */
#screens { flex:1 1 auto; overflow-y:auto; position:relative; }
.screen { display:none; min-height:100%; padding:10px; flex-direction:column; }
.screen.active { display:flex; }

/* ---------- title ---------- */
#screen-title { align-items:center; justify-content:center; text-align:center; background:var(--c3); }
.title-card h1 { font-size:26px; line-height:1.3; margin:14px 0 6px; color:var(--c0); text-shadow:3px 3px 0 var(--c2); }
.subtitle { font-size:9px; color:var(--c1); margin-bottom:22px; }
.title-swamp img { width:min(320px, 80vw); height:auto; border:4px solid var(--c0); background:var(--c1); display:block; margin:0 auto; }
.footnote { font-size:7px; color:var(--c1); margin-top:26px; }
.menu-list { display:flex; flex-direction:column; gap:10px; align-items:center; }

/* ---------- shared bits ---------- */
.btn {
  font-family:var(--px); font-size:10px;
  background:var(--c0); color:var(--c3);
  border:0; padding:12px 16px;
  border-radius:3px;
  box-shadow: 0 4px 0 var(--c1);
  cursor:pointer;
  min-width:44px; min-height:44px;
}
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 var(--c1); }
.btn.ghost { background:var(--c2); color:var(--c0); box-shadow:0 4px 0 var(--c1); }
.btn.wide { width:100%; }
.btn:disabled { opacity:.45; }

.narrate-box {
  background:var(--c0); color:var(--c3);
  border:3px solid var(--c1); border-radius:4px;
  padding:10px; font-size:9px; line-height:1.8;
  min-height:58px; margin:10px 0;
  white-space:pre-wrap;
}
.panel-title { font-size:13px; margin:6px 0 8px; }
.panel-sub { font-size:9px; margin:14px 0 6px; color:var(--c1); }
.panel-hint { font-size:8px; line-height:1.7; color:var(--c1); margin-bottom:10px; }
.action-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }

/* ---------- dialog (onboarding / story) ---------- */
#screen-dialog { justify-content:flex-end; background:var(--c2); }
.scene {
  flex:1; display:flex; align-items:center; justify-content:center; font-size:40px;
  background-image:url('../assets/title-art.png');
  background-size:cover; background-position:center;
  image-rendering:pixelated;
  border-bottom:4px solid var(--c0);
  margin:-10px -10px 10px; /* bleed to screen edges */
}
.dialogue-box {
  background:var(--c3); border:4px solid var(--c0); border-radius:4px;
  padding:12px; margin-bottom:calc(env(safe-area-inset-bottom, 0px) + 6px);
  position:relative;
}
.speaker { font-size:8px; background:var(--c0); color:var(--c3); display:inline-block; padding:3px 6px; margin-bottom:8px; }
.dialogue-text { font-size:10px; line-height:1.9; min-height:90px; }
.dialogue-input { display:flex; gap:8px; margin-top:10px; }
.dialogue-input input, .camp-input input {
  flex:1; font-family:var(--px); font-size:10px;
  border:3px solid var(--c0); background:#fff; color:#111;
  padding:10px; border-radius:3px; min-width:0;
}
.dialogue-choices { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.continue-hint { position:absolute; right:10px; bottom:6px; font-size:10px; animation:bob 1s infinite; }
@keyframes bob { 50% { transform:translateY(3px); } }

/* ---------- zone ---------- */
.zone-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.zone-name { font-size:11px; }
.zone-region { font-size:7px; color:var(--c1); text-align:right; }
.zone-canvas-wrap { border:4px solid var(--c0); border-radius:2px; line-height:0; }
#zone-canvas { width:100%; height:auto; }
.zone-mates { font-size:7px; color:var(--c1); margin-top:6px; line-height:1.8; }
.exit-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; padding-bottom:8px; }
.exit-row .btn { font-size:8px; padding:10px; }
.exit-row .btn.hidden-exit { outline:3px dashed var(--c2); outline-offset:-6px; }

/* ---------- battle ---------- */
#screen-battle { background:var(--c3); }
.battle-stage { position:relative; height:210px; border:4px solid var(--c0); border-radius:4px; background:var(--c2); overflow:hidden; }
.combatant { position:absolute; display:flex; gap:8px; align-items:center; }
.combatant.enemy { top:10px; right:10px; flex-direction:row-reverse; }
.combatant.player { bottom:10px; left:10px; }
.combatant canvas { width:96px; height:96px; }
.combatant img { width:104px; height:104px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(2px 3px 0 rgba(0,0,0,.25)); }
@keyframes hitshake { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-4px,1px)} 50%{transform:translate(4px,-1px)} 75%{transform:translate(-2px,0)} }
.combatant.shake { animation:hitshake .3s; }
.plate { background:var(--c3); border:3px solid var(--c0); border-radius:3px; padding:6px; min-width:130px; }
.plate-name { font-size:8px; margin-bottom:5px; white-space:nowrap; }
.plate-sub { font-size:7px; margin-top:4px; color:var(--c1); }
.hpbar { height:8px; background:var(--c1); border:2px solid var(--c0); border-radius:2px; overflow:hidden; }
.hpbar-fill { height:100%; width:100%; background:#3a9e3a; transition:width .35s; }
.hpbar-fill.warn { background:#c9a227; }
.hpbar-fill.crit { background:#b03030; }
.battle-log {
  background:var(--c0); color:var(--c3); border:3px solid var(--c1); border-radius:4px;
  padding:8px; font-size:9px; line-height:1.8; height:96px; overflow-y:auto; margin:8px 0;
  white-space:pre-wrap;
}
.move-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-bottom:8px; }
.move-grid .btn { font-size:8px; line-height:1.5; padding:10px 6px; }
.move-grid .btn small { display:block; font-size:6px; color:var(--c2); margin-top:4px; }
.class-action-row { display:flex; gap:8px; margin-bottom:8px; }
.class-action-row .btn { font-size:8px; flex:1; background:var(--c1); }

/* ---------- camp ---------- */
.camp-input { display:flex; gap:8px; }
.camp-meta { display:flex; gap:14px; font-size:8px; color:var(--c1); margin:4px 0; }
.deed-list { list-style:none; font-size:8px; line-height:2; }
.deed-list li { border-bottom:2px solid var(--c2); padding:4px 0; }

/* ---------- hero ---------- */
.hero-class { font-size:9px; color:var(--c1); margin-bottom:10px; }
.statgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.stat-cell { background:var(--c2); border:3px solid var(--c0); border-radius:3px; padding:10px 8px; text-align:center; }
.stat-cell .k { font-size:8px; color:var(--c0); margin-bottom:6px; }
.stat-cell .v { font-size:15px; line-height:1; margin-bottom:6px; }
.stat-cell .m { font-size:7px; color:var(--c1); line-height:1; }
.xpbar-wrap { margin:12px 0 0; font-size:7px; }
.xpbar { height:10px; background:var(--c1); border:2px solid var(--c0); border-radius:2px; overflow:hidden; margin-bottom:4px; }
.xpbar-fill { height:100%; background:var(--c0); transition:width .35s; }
.tag-row { display:flex; flex-wrap:wrap; gap:6px; }
.tag { background:var(--c0); color:var(--c3); font-size:7px; padding:4px 7px; border-radius:2px; }
.inv-list { list-style:none; font-size:8px; line-height:2.1; }

/* ---------- score / the table ---------- */
.score-big { font-size:34px; text-align:center; margin-top:10px; text-shadow:3px 3px 0 var(--c2); }
.score-sub { font-size:7px; text-align:center; color:var(--c1); margin-bottom:12px; }
.standings { list-style:none; }
.standings li { display:flex; justify-content:space-between; font-size:9px; padding:8px 6px; border:3px solid var(--c0); border-radius:3px; background:var(--c2); margin-bottom:6px; }
.standings li.you { background:var(--c0); color:var(--c3); }
.standings .pk-mark { color:#b03030; }

/* ---------- king ---------- */
.king-art { text-align:center; margin:8px 0; }
#king-art { width:82%; border:4px solid var(--c0); background:var(--c1); image-rendering:pixelated; }
.kingbar-wrap { font-size:7px; }
.kingbar { height:14px; background:var(--c3); border:3px solid var(--c0); border-radius:2px; overflow:hidden; margin-bottom:4px; }
.kingbar-fill { height:100%; background:#b03030; transition:width .5s; }
.king-stats { font-size:8px; line-height:2; color:var(--c1); }

/* ---------- tab bar ---------- */
#tabbar {
  flex:0 0 auto; display:flex;
  background:var(--c0); border-top:3px solid var(--c1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#tabbar button {
  flex:1; font-family:var(--px); font-size:8px;
  background:none; border:0; color:var(--c2);
  padding:14px 0; cursor:pointer;
}
#tabbar button.active { color:var(--c3); background:var(--c1); }

/* small phones */
@media (max-height:640px) {
  .dialogue-text { min-height:60px; }
  .battle-stage { height:170px; }
  .combatant canvas { width:72px; height:72px; }
}