/* MStackingHero account, character-select and character-create screens. Original art: CSS and simple shapes only. */
:root {
  --msh-crimson-a: #7a1618;
  --msh-crimson-b: #4a0b0d;
  --msh-gold: #d9b45a;
  --msh-gold-text: #f2c86a;
  --msh-panel: rgba(20, 16, 12, 0.9);
  --msh-bronze: #8a6a3a;
  --msh-ink: #f2e6cf;
  --msh-muted: #a89c86;
}
.msh-wow { position: fixed; inset: 0; z-index: 11000; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; font: 16px Georgia, 'Times New Roman', serif; color: var(--msh-ink); background: #0a0806; }
.msh-wow *, .msh-wow *::before, .msh-wow *::after { box-sizing: border-box; }
.msh-wow h1, .msh-wow h2, .msh-wow p { margin: 0; }
.msh-bg { position: absolute; inset: 0; pointer-events: none; }
.msh-btn { min-width: 44px; min-height: 44px; padding: 8px 16px; font: inherit; font-weight: 700; color: var(--msh-gold-text); background: linear-gradient(var(--msh-crimson-a), var(--msh-crimson-b)); border: 2px solid var(--msh-gold); border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 220, 160, 0.25); text-shadow: 0 1px 0 #000; cursor: pointer; }
.msh-btn:hover { filter: brightness(1.15); }
.msh-btn:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.msh-btn-primary { min-width: 160px; padding: 10px 28px; font-size: 18px; }
.msh-btn-wide { display: block; width: 100%; min-width: 0; }
.msh-btn-small { padding: 8px 12px; font-size: 14px; }
.msh-arrow { min-width: 44px; font-size: 20px; line-height: 1; }
.msh-panel { background: var(--msh-panel); border: 2px solid var(--msh-bronze); border-radius: 8px; box-shadow: inset 0 0 0 1px #000, 0 8px 24px rgba(0, 0, 0, 0.8); padding: 16px; }
.msh-panel-title { color: var(--msh-gold-text); font-size: 18px; margin: 12px 0 8px; letter-spacing: 0.04em; }
.msh-status { min-height: 22px; color: #ffd98a; font-size: 14px; }
.msh-hint, .msh-login-note, .msh-login-foot { color: var(--msh-muted); font-size: 14px; }
.msh-select-input, .msh-name-input { width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; color: #f4f8ff; background: #0d1828; border: 2px solid var(--msh-bronze); border-radius: 6px; }

/* Title / login */
.msh-login-bg { background: linear-gradient(#141026 0%, #3a2140 34%, #8a4a3e 62%, #d78a4a 80%, #2a1608 100%); overflow: hidden; }
.msh-gate { position: absolute; left: 50%; bottom: 12%; width: min(520px, 70vw); height: min(560px, 74vh); transform: translateX(-50%); background: linear-gradient(#0d0a09, #040302); border-radius: 260px 260px 0 0 / 240px 240px 0 0; box-shadow: inset 0 0 60px #000, 0 0 40px rgba(0, 0, 0, 0.6); }
.msh-gate::after { content: ''; position: absolute; left: 22%; right: 22%; top: 30%; bottom: 0; border-radius: 200px 200px 0 0 / 180px 180px 0 0; background: radial-gradient(ellipse at 50% 70%, #ffc27a 0%, #e0722f 34%, rgba(120, 30, 10, 0.4) 62%, transparent 72%); opacity: 0.85; animation: msh-glow 4s ease-in-out infinite alternate; }
.msh-statue { position: absolute; bottom: 10%; width: min(110px, 14vw); height: min(260px, 40vh); background: linear-gradient(#050403, #120d0a); border-radius: 50% 50% 8% 8% / 36% 36% 10% 10%; }
.msh-statue::before { content: ''; position: absolute; left: 22%; right: 22%; top: -2%; height: 28%; border-radius: 50%; background: #0b0807; }
.msh-statue-left { left: 6%; }
.msh-statue-right { right: 6%; }
.msh-embers { position: absolute; inset: 0; }
.msh-ember { position: absolute; bottom: 6%; width: 4px; height: 4px; border-radius: 50%; background: #ffb35a; box-shadow: 0 0 8px #ff8a3a; animation: msh-ember 7s linear infinite; opacity: 0; }
.msh-ember:nth-child(1) { left: 18%; animation-delay: 0s; }
.msh-ember:nth-child(2) { left: 30%; animation-delay: 1.4s; }
.msh-ember:nth-child(3) { left: 44%; animation-delay: 2.8s; }
.msh-ember:nth-child(4) { left: 58%; animation-delay: 0.7s; }
.msh-ember:nth-child(5) { left: 70%; animation-delay: 3.5s; }
.msh-ember:nth-child(6) { left: 82%; animation-delay: 2.1s; }
.msh-ember:nth-child(7) { left: 36%; animation-delay: 4.9s; }
.msh-ember:nth-child(8) { left: 64%; animation-delay: 5.6s; }
.msh-logo { position: absolute; top: 22px; left: 28px; margin: 0; font: 700 clamp(26px, 4vw, 50px)/1.05 Georgia, 'Times New Roman', serif; color: var(--msh-gold-text); letter-spacing: 0.03em; text-shadow: 0 2px 0 #6b3d0a, 0 3px 0 #4a2606, 0 6px 14px #000; }
.msh-login-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, 90vw); text-align: center; display: flex; flex-direction: column; gap: 12px; }
.msh-login-bl, .msh-login-br { position: absolute; display: flex; flex-direction: column; gap: 10px; }
.msh-login-bl { left: 24px; bottom: 44px; width: 210px; }
.msh-login-br { right: 24px; bottom: 44px; width: 180px; }
.msh-login-foot { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; }
.msh-login .msh-file-btn { display: block; text-align: center; }
.msh-login .msh-file-btn input { display: none; }

/* Character select */
.msh-scene { background: linear-gradient(#263f63 0%, #5b86ad 36%, #cbb98a 58%, #5d7a3c 60%, #2b4020 100%); }
.msh-scene::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: 36%; height: 30%; background: radial-gradient(ellipse at 22% 100%, #3d5e33 0 52%, transparent 53%), radial-gradient(ellipse at 74% 100%, #34532c 0 48%, transparent 49%); }
.msh-scene::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.35)); }
.msh-forge { background: radial-gradient(ellipse at 50% 30%, #3a2a1c 0%, #140e0a 70%), #0d0a08; }
.msh-select-main, .msh-create-main { position: relative; display: grid; gap: 16px; padding: 16px 16px 8px; min-height: calc(100% - 96px); }
.msh-select-main { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
.msh-select-stage, .msh-create-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.msh-hero-title { color: var(--msh-gold-text); font-size: clamp(24px, 3.4vw, 36px); text-shadow: 0 2px 0 #000; }
.msh-hero-sub { color: #fff; font-size: 17px; text-shadow: 0 1px 2px #000; }
.msh-hero-zone { color: #cfc6b5; font-size: 14px; text-shadow: 0 1px 2px #000; }
.msh-select-side { display: flex; flex-direction: column; gap: 8px; align-self: start; max-height: calc(100vh - 150px); overflow: auto; }
.msh-hero-list { display: flex; flex-direction: column; gap: 8px; }
.msh-hero-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 60px; padding: 8px 12px; color: var(--msh-ink); text-align: left; background: rgba(0, 0, 0, 0.45); border: 2px solid #4a3a20; border-radius: 4px; cursor: pointer; font: inherit; }
.msh-hero-row:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.msh-hero-row.msh-selected { border-color: var(--msh-gold); box-shadow: inset 0 0 0 1px var(--msh-gold), 0 0 12px rgba(217, 180, 90, 0.5); }
.msh-hero-row .msh-hero-name { color: var(--msh-gold-text); font-weight: 700; font-size: 17px; }
.msh-hero-row .msh-hero-meta { color: #fff; font-size: 14px; }
.msh-hero-row .msh-hero-zone { color: #9c9488; font-size: 13px; text-shadow: none; }
.msh-select-bar, .msh-create-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px 16px; }
.msh-bar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.msh-bar-centre { justify-content: center; flex: 1 1 auto; }
.msh-select-bar .msh-status { flex-basis: 100%; }

/* Figure (simple low-poly hero) */
.msh-figure { position: relative; width: 150px; height: 250px; margin: 0 auto; --hero: #7fa8c9; --skin: #e0b98f; --hair: #4a2c18; }
.msh-figure > div { position: absolute; }
.msh-style-sword { --hero: #7fa8c9; }
.msh-style-spear { --hero: #6fae6a; }
.msh-style-gun { --hero: #b5793c; }
.msh-skin-0 { --skin: #f0cfa8; }
.msh-skin-1 { --skin: #e0b98f; }
.msh-skin-2 { --skin: #b98560; }
.msh-skin-3 { --skin: #7a5034; }
.msh-hair-0 { --hair: #2a1b10; }
.msh-hair-1 { --hair: #4a2c18; }
.msh-hair-2 { --hair: #b9912f; }
.msh-hair-3 { --hair: #8d3a22; }
.msh-fig-hair { top: -4px; left: 50%; width: 62px; height: 30px; margin-left: -31px; border-radius: 31px 31px 6px 6px; background: var(--hair); }
.msh-fig-head { top: 2px; left: 50%; width: 52px; height: 56px; margin-left: -26px; border-radius: 50%; background: var(--skin); box-shadow: inset -6px -4px 0 rgba(0, 0, 0, 0.18); }
.msh-fig-torso { top: 60px; left: 50%; width: 76px; height: 108px; margin-left: -38px; background: var(--hero); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); box-shadow: inset -8px 0 0 rgba(0, 0, 0, 0.2); }
.msh-fig-arm { top: 66px; width: 18px; height: 98px; border-radius: 9px; background: var(--hero); }
.msh-fig-arm-l { left: calc(50% - 56px); }
.msh-fig-arm-r { left: calc(50% + 38px); }
.msh-fig-legs { top: 166px; left: 50%; width: 60px; height: 84px; margin-left: -30px; background: linear-gradient(#2b2a33, #15141a); clip-path: polygon(0 0, 100% 0, 88% 100%, 56% 100%, 50% 42%, 44% 100%, 12% 100%); }
.msh-weapon { border-radius: 2px; }
.msh-weapon-sword { top: 58px; left: calc(50% + 58px); width: 8px; height: 150px; background: linear-gradient(90deg, #eef2f7, #9aa6b4); box-shadow: 0 0 10px rgba(200, 225, 255, 0.5); }
.msh-weapon-spear { top: 0; left: calc(50% + 62px); width: 6px; height: 230px; background: #b89a5a; }
.msh-weapon-gun { top: 124px; left: calc(50% + 48px); width: 52px; height: 14px; background: #2c2a2e; border-radius: 3px 8px 8px 3px; }
.msh-weapon-gun::after { content: ''; position: absolute; left: 36px; top: 3px; width: 10px; height: 16px; background: #2c2a2e; }

/* Create */
.msh-create-main { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
.msh-create-left { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 170px); overflow: auto; }
.msh-race-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.msh-race-btn, .msh-style-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 6px; font: inherit; font-weight: 700; color: var(--msh-gold-text); background: rgba(0, 0, 0, 0.5); border: 2px solid #4a3a20; border-radius: 6px; cursor: pointer; }
.msh-race-btn.msh-selected, .msh-style-btn.msh-selected { border-color: var(--msh-gold); box-shadow: inset 0 0 0 1px var(--msh-gold), 0 0 10px rgba(217, 180, 90, 0.5); }
.msh-style-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.msh-style-btn { min-height: 84px; aspect-ratio: 1 / 1; }
.msh-style-label { font-size: 13px; }
.msh-style-icon { display: block; width: 26px; height: 40px; position: relative; }
.msh-icon-sword { background: linear-gradient(90deg, transparent 44%, #d8dee8 44% 56%, transparent 56%); }
.msh-icon-spear { background: linear-gradient(90deg, transparent 46%, #b89a5a 46% 54%, transparent 54%); }
.msh-icon-gun { width: 34px !important; height: 18px !important; background: #3a3a40; border-radius: 3px 8px 8px 3px; }
.msh-look-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px auto 44px; align-items: center; gap: 6px; min-height: 44px; }
.msh-look-label { font-size: 14px; color: var(--msh-ink); }
.msh-look-value { min-width: 70px; text-align: center; color: #fff; font-size: 14px; }
.msh-name-group { flex: 1 1 320px; justify-content: center; }
.msh-name-label { display: flex; flex-direction: column; gap: 4px; min-width: 240px; color: var(--msh-gold-text); font-size: 14px; }
.msh-create-actions { justify-content: flex-end; }
.msh-create-bar .msh-status { flex-basis: 100%; text-align: center; }
/* Lane 40: the Accept bar stays pinned to the bottom of the screen at any viewport size (1280x720, 390x844). */
.msh-create .msh-create-bar { position: sticky; bottom: 0; z-index: 2; background: linear-gradient(rgba(10, 8, 6, 0), rgba(10, 8, 6, 0.96) 28%); padding-top: 14px; }

/* Options */
.msh-options { display: grid; place-items: center; background: rgba(8, 21, 34, 0.87); }
.msh-options-bg { background: radial-gradient(ellipse at 50% 40%, #2a2030 0%, #0a0806 75%); }
.msh-options-box { position: relative; width: min(460px, calc(100vw - 32px)); padding: 22px 24px 24px; background: linear-gradient(#1c1812, #0f0c09); border: 3px solid var(--msh-bronze); border-radius: 10px; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #3a2a16, 0 12px 30px #000; color: var(--msh-ink); }
.msh-options-title { color: var(--msh-gold-text); font-size: 24px; text-align: center; margin-bottom: 10px; text-shadow: 0 2px 0 #000; }
.msh-options-box label, .msh-options-box small, .msh-options-box p { color: var(--msh-ink); }
.msh-options-box small { color: var(--msh-muted); display: block; margin-bottom: 6px; }
.msh-options-box .msh-btn { margin-top: 12px; }

/* Lane 151: races, body type, idle poses, face/hair/marking details and the 5 s idle + attack preview */
.msh-race-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.msh-race-thimblefolk { --rs: 0.92; } .msh-race-rimeborn { --rs: 1.08; } .msh-race-gloamkin { --rs: 1; } .msh-race-emberkin { --rs: 1.04; }
.msh-body-0 { --bw: 1; --bh: 1; } .msh-body-1 { --bw: 1.1; --bh: 1; } .msh-body-2 { --bw: 1.08; --bh: 0.95; } .msh-body-3 { --bw: 0.94; --bh: 1.03; }
.msh-figure { scale: calc(var(--rs, 1) * var(--bw, 1)) calc(var(--rs, 1) * var(--bh, 1)); transform-origin: 50% 100%; }
.msh-outfit-1 { filter: sepia(0.25) hue-rotate(-20deg); } .msh-outfit-2 { filter: hue-rotate(20deg) saturate(0.9); } .msh-outfit-3 { filter: hue-rotate(80deg) saturate(0.9); }
.msh-pose-relaxed .msh-fig-arm-l { transform: rotate(4deg); } .msh-pose-braced .msh-fig-arm-l, .msh-pose-braced .msh-fig-arm-r { transform: rotate(-6deg); }
.msh-pose-poised .msh-fig-arm-r { transform: rotate(10deg); } .msh-pose-proud .msh-fig-torso { transform: translateY(-3px); }
.msh-face-1 .msh-fig-head { border-radius: 46% 46% 54% 54%; } .msh-face-2 .msh-fig-head { border-radius: 54%; } .msh-face-3 .msh-fig-head { border-radius: 50% 50% 42% 42%; }
.msh-hairstyle-1 .msh-fig-hair { height: 56px; border-radius: 31px 31px 18px 18px; } .msh-hairstyle-2 .msh-fig-hair { height: 40px; width: 70px; margin-left: -35px; }
.msh-hairstyle-3 .msh-fig-hair { top: -14px; height: 40px; width: 40px; margin-left: -20px; border-radius: 50%; }
.msh-mark-1 .msh-fig-head::after { content: ''; position: absolute; left: 14px; top: 30px; width: 24px; height: 6px; background: rgba(120, 60, 30, 0.45); border-radius: 3px; }
.msh-mark-2 .msh-fig-head::after { content: ''; position: absolute; left: 6px; top: 26px; width: 40px; height: 8px; background: rgba(190, 40, 30, 0.7); }
.msh-mark-3 .msh-fig-head::after { content: ''; position: absolute; left: 34px; top: 12px; width: 3px; height: 26px; background: rgba(80, 30, 30, 0.7); transform: rotate(18deg); }
.msh-class-preview { margin-top: 10px; }
.msh-rotation-summary { font-size: 13px; }
.msh-figure.msh-previewing { animation: msh-pv-idle 5s linear 1; }
.msh-figure.msh-previewing .msh-fig-arm-r, .msh-figure.msh-previewing .msh-weapon { transform-origin: 50% 8%; animation: msh-pv-swing 5s linear 1; }
@keyframes msh-pv-idle { 0%, 60% { translate: 0 0; } 15% { translate: 0 -3px; } 30% { translate: 0 0; } 45% { translate: 0 -3px; } 70% { translate: 8px 0; } 80% { translate: 0 0; } 100% { translate: 0 0; } }
@keyframes msh-pv-swing { 0%, 60% { rotate: 0deg; } 70% { rotate: -35deg; } 80% { rotate: 55deg; } 90% { rotate: 20deg; } 100% { rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .msh-figure.msh-previewing, .msh-figure.msh-previewing .msh-fig-arm-r, .msh-figure.msh-previewing .msh-weapon { animation: none; } }

/* Phone and short screens */
@media (max-width: 820px) {
  .msh-select-main, .msh-create-main { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 12px; }
  .msh-select-side, .msh-create-left { max-height: none; overflow: visible; }
  .msh-logo { position: static; padding: 16px 16px 0; }
  .msh-login-panel { position: static; transform: none; margin: 0 auto; }
  .msh-login { display: flex; flex-direction: column; overflow-y: auto; }
  .msh-login-bg { position: fixed; }
  /* lane 434: the fixed backdrop is a positioned layer and painted over these in-flow blocks, so the title text and buttons were invisible on a phone */
  .msh-login > .msh-logo, .msh-login > .msh-login-panel, .msh-login > .msh-login-bl, .msh-login > .msh-login-br, .msh-login > .msh-login-foot { position: relative; z-index: 1; inset: auto; }
  .msh-gate { bottom: 30%; }
  .msh-login-panel { margin-top: 42vh; width: min(360px, calc(100vw - 32px)); }
  .msh-login-bl, .msh-login-br { position: static; width: min(260px, calc(100vw - 32px)); margin: 12px auto 0; }
  .msh-login-foot { position: static; padding: 16px; }
  .msh-select-bar, .msh-create-bar { justify-content: center; }
  .msh-create-actions { width: 100%; justify-content: center; }
  .msh-bar-group { justify-content: center; }
  .msh-figure { width: 120px; height: 200px; transform: scale(0.95); }
}
@media (max-width: 420px) {
  .msh-btn-primary { min-width: 0; width: 100%; }
  .msh-name-label { min-width: 0; width: 100%; }
  .msh-race-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@keyframes msh-glow { from { opacity: 0.65; } to { opacity: 1; } }
@keyframes msh-ember { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translate(24px, -62vh); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .msh-gate::after, .msh-ember { animation: none; } .msh-ember { opacity: 0.5; } }

/* Lane 438: the create screen is a column: a scrolling main area and a footer bar that sits below it (no longer a sticky bar painted over the options and the preview text).
   Race tiles carry the full race name in a 2-wide grid; the bar is one row on a landscape phone and two compact rows on a portrait phone (about 13% of 390x844). Targets are >= 44 px. */
.msh-wow.msh-create { display: flex; flex-direction: column; overflow: hidden; }
.msh-create .msh-create-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; }
.msh-create .msh-create-bar { position: relative; bottom: auto; flex: 0 0 auto; padding: 8px 12px; gap: 8px; background: rgba(10, 8, 6, 0.97); border-top: 1px solid var(--msh-bronze); z-index: 2; }
.msh-create .msh-race-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.msh-create .msh-race-btn { min-height: 48px; padding: 4px 6px; font-size: 15px; }
.msh-create .msh-style-btn { aspect-ratio: auto; min-height: 64px; }
.msh-create .msh-name-group { flex: 1 1 280px; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; }
.msh-create .msh-name-label { flex: 1 1 auto; flex-direction: row; align-items: center; gap: 8px; min-width: 0; width: auto; white-space: nowrap; }
.msh-create .msh-name-label .msh-name-input { flex: 1 1 120px; width: auto; min-width: 96px; }
.msh-create .msh-status:empty { display: none; }
.msh-create .msh-create-actions { flex-wrap: nowrap; gap: 8px; }
.msh-create .msh-btn-primary { min-width: 120px; padding: 8px 24px; font-size: 17px; }
@media (max-width: 820px) {
  .msh-create .msh-create-main { padding: 8px 12px; gap: 8px; }
  .msh-create .msh-create-left { padding: 10px 12px; }
  .msh-create .msh-create-bar { justify-content: center; }
  .msh-create .msh-name-group { flex-basis: 100%; }
  .msh-create .msh-create-actions { width: 100%; }
  .msh-create .msh-create-actions .msh-btn { flex: 1 1 0; width: auto; min-width: 0; }
  .msh-create .msh-create-actions .msh-btn-primary { flex: 2 1 0; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .msh-create .msh-create-bar { padding: 6px 12px; flex-wrap: nowrap; }
  .msh-create .msh-name-group { flex: 1 1 auto; flex-basis: auto; }
  .msh-create .msh-create-actions { width: auto; flex: 0 0 auto; }
  .msh-create .msh-create-actions .msh-btn, .msh-create .msh-create-actions .msh-btn-primary { flex: 0 0 auto; }
  .msh-create .msh-panel-title { margin: 6px 0 4px; font-size: 16px; }
  .msh-create .msh-create-left { max-height: none; overflow: visible; }
}