/* Responsive visual pass: larger top text, better contrast boxes, proportional sizing */
:root{
  --bg:#1a1a2e;
  --panel:#2a2a3e;
  --text:#e0e0e0;
  --accent:#f0a500;
  --accent-soft:#ffc107;
  --muted:#4a4a5e;
  --box:#4b332a;          /* darker brown for better contrast */
  --box-hover:#5b3f32;
  --box-border:#2a1d17;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 50% -200px, rgba(240,165,0,.15), transparent), var(--bg);
  color:var(--text);
  display:flex; justify-content:center; align-items:center;
  margin:0; text-align:center;
}

#game-container{
  background: var(--panel);
  padding: clamp(16px, 2.5vw, 28px);
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  width: min(92vw, 760px);
  min-height: 70vh;
  display:flex; flex-direction:column;
}

.screen{ display:none; flex-direction:column; align-items:center; flex-grow:1; width:100%; }
.screen.active{ display:flex; }

h1{ color:var(--accent); font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: 0 0 .8rem; }
h2{ color:var(--accent); font-size: clamp(1.4rem, 3vw, 2rem); margin: .2rem 0 1rem; }
#game-over-title{ font-size: clamp(1.3rem, 2.6vw, 1.8rem); }

p{ font-size: clamp(.95rem, 1.8vw, 1.05rem); line-height:1.5; margin:.4rem 0 .9rem; }

input[type="text"], input[type="email"]{
  padding:.7rem .9rem; border:2px solid var(--muted); border-radius:10px;
  background:#121227; color:var(--text); width:min(80%, 320px);
}

.game-button{
  border:none; padding:.7rem 1rem; font-size: clamp(.95rem, 1.8vw, 1rem);
  font-weight:800; border-radius:10px; cursor:pointer;
  transition: transform .06s ease, background .25s ease;
  margin:.35rem .3rem; min-height:42px;
}
.game-button:active{ transform: scale(.97); }

#submit-name-button,#enter-dungeon-button,#play-again-button{ background:var(--accent); color:#1a1a2e; }
#submit-name-button:hover,#enter-dungeon-button:hover,#play-again-button:hover{ background:var(--accent-soft); }
.action-button-green{ background:#38761D; color:#fff; } .action-button-green:hover{ background:#275212; }
.action-button-blue{ background:#1C4587; color:#fff; } .action-button-blue:hover{ background:#102A50; }

.company-credit{ font-size:.85rem; color:#c9c9c9 }

/* Character select */
#class-options-container{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-bottom:.6rem; }
.class-option{ background:#3b3b54; color:var(--text); border:3px solid transparent; padding:.7rem; border-radius:10px; cursor:pointer; width:120px; display:flex; flex-direction:column; align-items:center; transition:.2s; }
.class-option:hover{ background:#48486b; }
.class-option.selected{ background:#e69500; color:#1a1a2e; border-color:#ffeb3b; }
.class-image{ width:70px; height:70px; object-fit:contain; border-radius:6px; }
.class-name{ font-weight:800; font-size:.95rem; }
#class-description{ font-style:italic; color:#bdbde2; min-height:3rem; padding:0 10px;  font-weight: 800; }

/* Top info header */
#player-info-header{display:flex; flex-direction:column; align-items:center; padding:.5rem 0; background:#151532; border-radius:12px; margin-bottom: .9rem;
  width: 92%;
  max-width: 520px;
  margin: 0 auto;
}
#player-name-display{ font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-weight:900; color:var(--accent); margin: .2rem 0 .4rem; }
#player-details-row{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; width:100%; padding:0 .5rem; gap:.5rem; }
.player-stats-column{ display:flex; flex-direction:column; gap:.25rem; font-size: clamp(.9rem, 1.8vw, 1.05rem); }
#player-stats-left{ text-align:left; align-items:flex-start; }
#player-stats-right{ text-align:right; align-items:flex-end; }

#player-character-display-area{ width: clamp(54px, 10vw, 80px); height: clamp(54px, 10vw, 80px); margin:0 .5rem; border:2px solid var(--muted); border-radius:10px; overflow:hidden; background:#121227; }
#player-character-display-area img{ width:100%; height:100%; object-fit:cover; }

/* Level banner larger */
#level-banner{position:sticky; top:6px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
   
  
  
  color:#ffeb3b;
  font-weight:900;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  letter-spacing:.4px;
  margin-bottom:.6rem;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  display: block;
  color: #ffeb3b; /* keep the yellow text, remove box */
}

/* Encounter area */
#dungeon-area{ margin-bottom:.6rem; display:flex; flex-direction:column; align-items:center; width:100%; }
#encounter-graphic{ margin-bottom:.6rem; width: clamp(110px, 20vw, 180px); height: clamp(110px, 20vw, 180px); display:flex; align-items:center; justify-content:center; }
.encounter-image{ max-width:100%; max-height:100%; object-fit:contain; }

#encounter-message{
  font-size: clamp(1rem, 2vw, 1.1rem); font-style:italic; color:#ffeb3b;
  min-height: clamp(54px, 10vw, 76px);
  width: 92%; max-width: 520px;
  padding:.5rem; border:1px solid var(--muted); border-radius:8px; background:#1f1f30;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: clamp(.6rem, 2vw, 1rem);
}

/* R / P / S responsive buttons with higher contrast */
#rps-choices, #action-buttons{ width:100%; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.5rem; padding-bottom:.5rem; }

/* ==== Bottom Dock to Stabilize Layout (Option A) ==== */
#bottom-dock{
  position: relative;
  width: 100%;
  --dock-h: 140px;          /* adjust as needed to fit your tallest control set */
  height: var(--dock-h);
  margin-top: .5rem;
  overflow: hidden;
  border-top: 1px solid var(--muted);
}

/* Overlap children in the dock and fade between states without reflow */
#bottom-dock > *{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: .5rem;
  transition: opacity .2s ease;
}

/* Visibility helpers */
.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.rps-button{
  background: var(--box);
  color:#f5f5f5;
  width: clamp(64px, 18vw, 112px);
  height: clamp(64px, 18vw, 112px);
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  border: 2px solid var(--box-border);
  box-shadow: 0 6px 10px rgba(0,0,0,.25);
  padding: .4rem;
}
.rps-button:hover{ background: var(--box-hover); }
.rps-action-image{ width:86%; height:86%; object-fit:contain; display:block;
}

/* Game over panels */
#game-over-graphic{ margin:.4rem 0; width: clamp(110px, 20vw, 160px); height: clamp(110px, 20vw, 160px); display:flex; align-items:center; justify-content:center; }
.game-over-image{ max-width:100%; max-height:100%; object-fit:contain; }
#game-over-actions-wrapper{ display:flex; justify-content:center; flex-wrap:wrap; width:100%; gap:.6rem; margin:.5rem 0; }
.game-over-action-panel{ padding:.7rem; background:#1f1f30; border-radius:10px; flex-grow:1; flex-basis:calc(33% - .6rem); min-width:170px; max-width:220px; }

/* Keyboard overlay */
#key-help{
  position:sticky; bottom:8px;
  background: rgba(31,31,48,.92);
  border:1px solid var(--muted); border-radius:10px;
  padding:.4rem .6rem; font-size: clamp(.85rem, 1.8vw, .95rem);
  display:inline-flex; gap:.5rem; align-items:center;
}
.kbd{ display:inline-block; border:1px solid #777; border-bottom-width:3px; border-radius:4px; padding:0 .4rem; background:#111827; color:#e5e7eb; font-weight:900; }

@media (max-width: 560px){
  #player-details-row{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; width:100%; padding:0 .5rem; gap:.5rem; }
  .player-stats-column{ font-size: .9rem; }
}

/* Light blue brand link on the start screen */
#company-link-start {
  color: #7ec8ff;
}
#company-link-start:hover,
#company-link-start:focus {
  color: #bfe4ff;
  text-decoration: underline;
}

/* Hide sticky helper bar */
#key-help{ display:none !important; }

/* --- Start screen layout adjustments --- */
#start-screen {
  
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
#player-name-input { margin-bottom: 1rem; }
#start-buttons {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

/* --- How to Play Screen --- */
#how-to-play-content {
  background-color: #1f1f30;
  border: 2px solid var(--muted);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  text-align: left;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  margin-bottom: 1rem;
}
#how-to-play-content ul {
  padding-left: 1.2rem;
  margin: 0.6rem 0 1rem;
  list-style-type: disc;
}
#how-to-play-content li { margin-bottom: 0.5rem; line-height: 1.4; }
#how-to-play-content .tip { text-align: center; color: var(--accent); font-style: italic; margin-top: 1rem; }
#how-to-play-screen h2 { color: var(--accent); margin-bottom: 0.8rem; }
#back-to-start-button { margin-top: 1rem; }

/* --- Character Select: RPS preview --- */
.rps-preview-grid{
  display:flex; gap:.8rem; justify-content:center; align-items:flex-start; 
  margin:.4rem 0 1rem;
  flex-wrap:wrap;
}
.rps-preview-item{
  background:#1f1f30; border:1px solid var(--muted); border-radius:12px;
  padding:.6rem .7rem; width:120px; display:flex; flex-direction:column; align-items:center;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.rps-preview-image{ width:72px; height:72px; object-fit:contain; display:block; }
.rps-preview-caption{ margin-top:.45rem; font-weight:800; letter-spacing:.3px; }

/* --- Player Header Centering --- */
#player-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 1rem;
}
#player-header img {
  display: block;
  margin-top: 0.5rem;
  width: 96px;
  height: auto;
}


/* Ensure the center character box is truly centered */
#player-character-display-area{ justify-self:center; }
#player-stats-left{ text-align:left; align-items:flex-start; justify-self:start; }
#player-stats-right{ text-align:right; align-items:flex-end; justify-self:end; }


/* --- Boss Intro Glow Animation --- */
@keyframes bossGlow {
  0% { text-shadow: 0 0 4px #ffcc00, 0 0 8px #ff8800; color: #fff3b0; }
  50% { text-shadow: 0 0 16px #ffcc00, 0 0 32px #ff6600; color: #ffe066; }
  100% { text-shadow: 0 0 4px #ffcc00, 0 0 8px #ff8800; color: #fff3b0; }
}

.boss-intro-glow {
  animation: bossGlow 2.2s ease-in-out infinite alternate;
  font-weight: 800;
  letter-spacing: 0.8px;
}


/* Added: purple CTA button */
.action-button-purple{ background:#6a0dad; color:#fff; }
.action-button-purple:hover{ background:#4b087d; }


/* Challenge banner on start screen */
#challenge-incoming-message {
  display: none;
  background: linear-gradient(90deg, rgba(255,215,0,0.2), rgba(255,165,0,0.2));
  border: 1px solid #f0a500;
  color: #ffeb3b;
  font-weight: 800;
  font-size: 1.1rem;
  text-align: center;
  border-radius: 10px;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 0 12px rgba(255,215,0,0.4);
}



.rps-class-text {
  color: #ffeb3b;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.6rem;
  font-size: 1rem;
  letter-spacing: 0.3px;
}



.class-desc-strong{ font-weight: 800; }


/* --- Override: Make the 'Sign Up' button blue and match CTA sizing --- */
#newsletter-submit-button {
  background: #1C4587; /* blue */
  color: #fff;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .06s ease, background .25s ease;
  padding: .7rem 1rem;
  font-size: clamp(.95rem, 1.8vw, 1rem);
  width: 100%;
  min-width: 170px;
  max-width: 220px;
}
#newsletter-submit-button:hover { background: #102A50; }

/* Center and align inputs in the newsletter panel */
#newsletter-signup-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
#newsletter-signup-section input[type="email"] {
  width: 90%;
  max-width: 220px;
}


/* Flash red effect on fail */
@keyframes flashRed {
  0% { filter: brightness(2) sepia(1) hue-rotate(-30deg) saturate(5); }
  100% { filter: none; }
}
.flash-fail {
  animation: flashRed 0.2s ease-in-out;
}


/* Monster lunge forward on fail */
@keyframes lungeForward {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-8px) scale(1.12); }
  100% { transform: translateY(0) scale(1); }
}
.encounter-image.lunge-fail {
  animation: lungeForward 0.25s ease-out;
  will-change: transform;
}


/* === Monster Defeated Visual Effect === */
#encounter-graphic {
  position: relative;
  z-index: 0;
}

#encounter-graphic.defeated .encounter-image { filter: none; transition: none; }

/* Red cross overlay that appears on top of the monster */
#encounter-graphic.defeated::before,
#encounter-graphic.defeated::after {
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  width: 10px;
  height: 84%;
  background: rgba(255, 0, 0, 0.9);
  transform-origin: center;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,0,0,0.55);
  pointer-events: none;
  z-index: 5; /* ensures cross stays above monster image */
}

#encounter-graphic.defeated::before { transform: translateX(-50%) rotate(45deg); }
#encounter-graphic.defeated::after  { transform: translateX(-50%) rotate(-45deg); }
/* === End Monster Defeated Visual Effect === */

/* === Quest Mentoring info block (start screen) === */
.company-info {
  margin-top: 1.5rem;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: #e0e0e0;
}

.company-description {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 0.8rem;
  color: #b0c4de;
}

.company-info a#company-link-start {
  display: inline-block;
  font-weight: 600;
  color: #7ec8ff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.company-info a#company-link-start:hover,
.company-info a#company-link-start:focus {
  color: #bfe4ff;
  text-decoration: underline;
}


/* --- End Screen: make card titles yellow --- */
#game-over-actions-wrapper .panel-title{
  color: #ffeb3b !important; /* stronger yellow to match level banner */
}


/* --- Make all end-screen buttons equal in size --- */
#game-over-actions-wrapper .game-button,
#game-over-actions-wrapper .action-button-purple,
#game-over-actions-wrapper .action-button-blue,
#game-over-actions-wrapper .action-button-green,
#play-again-button {
  width: 220px !important;
  height: 50px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem !important;
  padding: 0 !important;
  box-sizing: border-box;
}


/* --- Refine End Screen button sizing and layout --- */
#game-over-actions-wrapper .game-button,
#game-over-actions-wrapper .action-button-purple,
#game-over-actions-wrapper .action-button-blue,
#game-over-actions-wrapper .action-button-green,
#play-again-button {
  width: 85% !important;      /* fits nicely inside cards */
  height: 48px !important;    /* balanced height */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem !important;
  padding: 0;
  margin: 0.5rem auto;        /* space around buttons */
  box-sizing: border-box;
}


/* --- Final button layout refinement --- */
#game-over-actions-wrapper .game-button,
#game-over-actions-wrapper .action-button-purple,
#game-over-actions-wrapper .action-button-blue,
#game-over-actions-wrapper .action-button-green,
#play-again-button {
  width: 85% !important;
  height: 56px !important;       /* slightly taller */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem !important;
  padding: 0 1rem;
  margin: 0.6rem auto;
  box-sizing: border-box;
  border-radius: 8px;
}

/* Keep external link icons centered vertically */
#game-over-actions-wrapper .ext-icon {
  display: inline-block;
  position: relative;
  top: -1px;  /* nudge up slightly for perfect centering */
  margin-left: 0.4rem;
  font-weight: 900;
  font-size: 1.1em;
}


/* === Backgrounds === */
/* Global dungeon wall on all screens except start */
.screen {
  background-image: url("./images/background/wall.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 18px;
}

/* Keep the start screen using MainScreen.png */
#start-screen {
  background-image: url("./images/background/mainscreen.png");
}

/* Readability overlay that does NOT block clicks */
.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  border-radius: 18px;
  z-index: 0;
  pointer-events: none; /* allow clicks through */
}
.screen > * {
  position: relative;
  z-index: 1;
}


/* === Top Stats Bar & Class Portrait: use encounter grey === */
#player-info-header {
  width: 70%;
  margin: 0 auto;

  background-color: #1f1f30 !important; /* match encounter box */
  border: 2px solid var(--muted);
  border-radius: 12px;
}

#player-character-display-area {
  background-color: #1f1f30 !important; /* same grey for portrait bg */
  border-color: var(--muted);
}


/* Ensure dock children are flex even if inline styles existed previously */
#bottom-dock #rps-choices,
#bottom-dock #action-buttons{
  display: flex !important;
}


/* === Override: Use brown tone for class portrait background === */
#player-character-display-area {
  background-color: var(--box) !important;  /* brown tone */
  border-color: var(--box-border) !important;
}


/* === Enforce stat bar width to match encounter message === */
#player-info-header{
  width: 92% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
}


/* Hide old level banner now that Level is in the stat bar */
#level-banner{ display: none !important; }


/* Add spacing above stat bar */
#player-info-header {
  padding-top: 1.5rem !important;
}


/* Add visible margin above stat bar */
#player-info-header {
  margin-top: 1.5rem !important;
}


/* Add padding above the main title on the start screen */
#start-screen h1 {
  margin-top: 2rem !important;
}




/* Also nudge the whole character select screen down slightly in case margin is collapsed somewhere */
#character-select-screen {
  padding-top: 0.5rem;
}


/* Increase padding above the class selection heading */
#character-select-screen h1 {
  margin-top: 3rem !important;
}

#character-select-screen {
  padding-top: 1rem !important;
}


/* Increased padding for the You Escaped screen heading */
#game-over-screen h1#game-over-title {
  margin-top: 4rem !important;
}


/* === Centering Fix for Top Stats Box === */
#player-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.player-stats-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.player-avatar {
  display: block;
  margin: 0 auto;
  width: 64px;
  height: 64px;
}

#player-info p {
  margin: 4px 0;
  text-align: center;
}


/* === Strict centering for the top stats header === */
#player-details-row{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items: center !important;
  justify-items: center !important;     /* center each grid cell */
  column-gap: 0.5rem !important;
}

#player-character-display-area{
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#player-stats-left{
  justify-self: start !important;
  text-align: left !important;
  align-items: flex-start !important;
}
#player-stats-right{
  justify-self: end !important;
  text-align: right !important;
  align-items: flex-end !important;
}


/* === Vertical centering for top stats box === */
#player-details-row {
  display: flex;
  align-items: center;     /* Vertically center contents */
  justify-content: space-between;  /* Keep left/middle/right balanced */
  flex-wrap: nowrap;
  gap: 1rem;
  min-height: 100px;       /* Optional: ensures enough height */
}

#player-character-display-area {
  display: flex;
  align-items: center;
  justify-content: center;
}

#player-character-display-area img {
  display: block;
  height: 80px; /* Adjust to your character image size */
  object-fit: contain;
}

#player-stats-left, #player-stats-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* === Vertical optical-centering refinement for top stats box === */
/* Paragraphs in the stats columns had larger default margins that made the columns
   taller than the avatar, which threw off vertical centering. Reduce those margins
   and tighten line-height just inside the header. */
#player-info-header .player-stats-column p {
  margin: 0.15rem 0 !important;
  line-height: 1.2 !important;
}

/* Ensure the three columns share the same vertical center */
#player-info-header #player-details-row {
  display: flex !important;
  align-items: center !important;  /* true vertical centering */
  justify-content: space-between;
}

/* Keep avatar truly centered vertically */
#player-info-header #player-character-display-area {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Optional: normalize avatar size */
#player-info-header #player-character-display-area img {
  height: 72px;
  width: auto;
  object-fit: contain;
}


/* === Reduce top padding above Brave Adventurer text === */
#player-info-header h2,
#player-info h2 {
  margin-top: 0.25rem !important;   /* remove most of the extra top space */
  margin-bottom: 0.5rem !important; /* keeps a little breathing room below */
  line-height: 1.1;
}

/* Optional: tighten the header container itself */
#player-info-header {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}


/* Subtle glow cue when RPS buttons are ready for input */
@keyframes rpsReadyPulse {
  0%   { box-shadow: 0 0 6px rgba(255,235,59,0.25), 0 0 0 0 rgba(255,235,59,0.12); }
  100% { box-shadow: 0 0 14px rgba(255,235,59,0.65), 0 0 24px 6px rgba(255,235,59,0.14); }
}
.rps-button.rps-ready {
  border-color: #ffeb3b !important;
  animation: rpsReadyPulse 1.1s ease-in-out infinite alternate;
}


/* === Icon-only stat bar === */
.player-stats-column{
  gap: 0.35rem;
}
.stat-item{
  display:flex;
  align-items:center;
  gap: .4rem;
  font-weight: 900;
  color: var(--text);
}
.stat-item .stat-icon{
  width: 22px;
  height: 22px;
  display:inline-block;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
/* tighten numbers so the bar stays compact */
#player-stats-left span, #player-stats-right span{
  font-size: clamp(.9rem, 1.6vw, 1rem);
}



/* === Small-screen top-crop fix (CSS-only) ===
   On laptops & mobiles, the page started mid-content because the <body>
   was a flex container with vertical centering and fixed height:100%.
   We disable vertical centering on small screens, use dynamic viewport height,
   and ensure the container is horizontally centered.
*/
@media (max-width: 1024px){
  html, body { height: auto; }            /* don't lock to 100% */
  body{
    display: block;                       /* turn off flex centering */
    min-height: 100dvh;                   /* use dynamic viewport height for mobile toolbars */
    overflow-y: auto;                     /* allow natural scrolling */
    padding-top: 0.75rem;                 /* ensure the very top is visible */
  }
  #game-container{
    margin: 0 auto 1rem;                  /* keep it centered horizontally */
    min-height: unset;                    /* let it size naturally */
  }
}

/* Prefer dynamic viewport height when supported */
@supports (height: 100dvh){
  body{ min-height: 100dvh; }
}



/* === Small-screen top-start fix v2 (CSS-only) ===
   Keep the page in normal flow on laptops/mobiles and anchor content
   to the TOP-LEFT (no vertical centering). Use small-viewport units to
   avoid iOS toolbar bugs.
*/
@media (max-width: 1024px){
  html, body { height: auto !important; }
  body{
    display: flex !important;
    justify-content: flex-start !important;  /* start at the top */
    align-items: flex-start !important;       /* no vertical centering */
    min-height: 100svh !important;            /* dynamic viewport height */
    overflow-y: auto !important;
    padding-top: 0 !important;
  }
  #game-container{
    margin: 0 auto 1rem !important;           /* keep horizontally centered */
    min-height: initial !important;
  }
}

/* Prefer small viewport units when available */
@supports (height: 100svh){
  body{ min-height: 100svh; }
}



/* === Small-screen top-center fix (CSS-only) v3 ===
   Anchor content to the top of the screen while keeping it horizontally centered.
   This resolves scroll and top visibility issues on smaller devices.
*/
@media (max-width: 1024px){
  html, body { height: auto !important; }
  body{
    display: flex !important;
    justify-content: center !important;     /* keep centered horizontally */
    align-items: flex-start !important;      /* start at top */
    min-height: 100svh !important;           /* support for mobile toolbars */
    overflow-y: auto !important;
    padding-top: 0 !important;
  }
  #game-container{
    margin: 0 auto 1rem !important;
    min-height: initial !important;
  }
}

@supports (height: 100svh){
  body{ min-height: 100svh; }
}



/* === Global anti-cropping override (CSS-only) v4 ===
   Some browsers + GPU combos still crop the top when the root uses flex
   with 100% heights. Disable body flex globally and center horizontally.
*/
html, body { height: auto !important; min-height: 100% !important; }
body{
  display: block !important;           /* no vertical centering at the root */
  overflow-y: auto !important;         /* ensure document scrolls */
  overscroll-behavior-y: contain;      /* avoid elastic jumps pulling content */
}
#game-container{
  margin: 1.25rem auto !important;     /* keep centered horizontally */
  min-height: initial !important;      /* allow natural height */
}


/* === Mobile fix: make portrait image shrink with its container === */
#player-info-header #player-character-display-area img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Smaller clamps on narrow screens so the whole header fits and the image scales down */
@media (max-width: 560px){
  #player-info-header #player-character-display-area{
    width: clamp(40px, 14vw, 60px) !important;
    height: clamp(40px, 14vw, 60px) !important;
  }
}


/* === Absolute centering guarantee for portrait in header === */
#player-info-header #player-details-row{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  column-gap: .5rem !important;
  width: 100% !important;
}
#player-info-header #player-stats-left{ justify-self: start !important; text-align: left !important; }
#player-info-header #player-stats-right{ justify-self: end !important; text-align: right !important; }
#player-info-header #player-character-display-area{ grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; margin: 0 !important; }

/* Ensure there is no stray padding pushing the grid off-center on mobile */
@media (max-width: 560px){
  #player-info-header {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
}


/* === Stretch portrait to stats height === */
#player-info-header #player-details-row{
  align-items: stretch !important;         /* let grid items take full track height */
}
#player-info-header #player-character-display-area{
  align-self: stretch !important;          /* center column fills the row height */
  height: auto !important;                 /* let the box grow with the grid */
  aspect-ratio: 1 / 1 !important;          /* keep it square while stretching vertically */
  justify-self: center !important;
}
#player-info-header #player-character-display-area img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* On very small screens, cap the stretch a little so it doesn't dominate */
@media (max-width: 560px){
  #player-info-header #player-character-display-area{
    max-height: 96px !important;
  }
}


/* === Expand portrait container width and scale image === */
#player-info-header #player-character-display-area{
  width: auto !important;
  min-width: 90px !important;
  max-width: 120px !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#player-info-header #player-character-display-area img{
  width: 95% !important;
  height: 95% !important;
  object-fit: contain !important;
}

/* Slightly larger on desktop for balance */
@media (min-width: 800px){
  #player-info-header #player-character-display-area{
    min-width: 110px !important;
    max-width: 140px !important;
  }
}


/* === Visually balanced portrait sizing === */
#player-info-header #player-details-row{
  align-items: center !important;            /* center items vertically, no stretch */
}
#player-info-header #player-character-display-area{
  /* modest square that looks balanced next to 3-line stats */
  width: clamp(72px, 9vw, 88px) !important;  /* desktop-ish range */
  height: clamp(72px, 9vw, 88px) !important;
  max-height: 92px !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#player-info-header #player-character-display-area img{
  width: 95% !important;                     /* keep 95% fill as requested */
  height: 95% !important;
  object-fit: contain !important;
}
/* Slightly smaller on narrow screens */
@media (max-width: 560px){
  #player-info-header #player-character-display-area{
    width: clamp(58px, 12vw, 74px) !important;
    height: clamp(58px, 12vw, 74px) !important;
    max-height: 78px !important;
  }
}


/* === Portrait: square, top-to-bottom symmetry with stats === */
#player-info-header #player-details-row{
  align-items: stretch !important; /* make all three columns equal height */
}
#player-info-header #player-character-display-area{
  align-self: stretch !important;  /* fill the row height */
  aspect-ratio: 1 / 1 !important;  /* square: width == height */
  width: auto !important;
  height: auto !important;
  max-height: 110px !important;    /* sensible desktop cap */
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#player-info-header #player-character-display-area img{
  width: 95% !important;           /* requested image fill */
  height: 95% !important;
  object-fit: contain !important;
}

/* Slightly lower cap on narrow screens to prevent crowding */
@media (max-width: 560px){
  #player-info-header #player-character-display-area{
    max-height: 92px !important;
  }
}


/* === Add bottom padding under Visit Quest Mentoring link on start screen === */
#start-screen a[href*="Quest Mentoring"]{
  display: inline-block !important;
  margin-bottom: 1.2rem !important;
}


/* === Start screen: ensure breathing room under the bottom link === */
#start-screen{
  padding-bottom: 1.5rem !important;
}
#start-screen .company-credit,
#start-screen .footer-link,
#start-screen .start-footer,
#start-screen .cta-footer,
#start-screen a[href*="Quest"]{
  display: inline-block !important;
  margin-bottom: 1.25rem !important;
}


/* Make the monster RPS sequence icons slightly smaller than the portrait */
.encounter-action{
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain;
}


@media (max-width: 560px){
  /* Add breathing room above monster RPS icons / encounter area on mobile */
  #encounter-graphic{ margin-top: clamp(8px, 2.5vh, 16px); }
}


@media (max-width: 560px){
  /* Make player RPS icons fill the squares more on mobile */
  .rps-action-image{ width:92%; height:92%; }
}


/* Added consistent gap above monster image container */
#monster-container {
    margin-top: 20px; /* Matches RPS symbol container gap */
}


/* Ensure a consistent gap above the monster image container (desktop & up) */
#encounter-graphic { margin-top: clamp(8px, 2.5vh, 16px); }