:root {
  color-scheme: dark;
  --ink: #211a14;
  --paper: #d5bd8e;
  --paper-light: #e6d5ae;
  --rust: #bd5536;
  --rust-dark: #7b3425;
  --gold: #d9ae5e;
  --sage: #87966f;
  --muted: #847965;
  --panel: rgba(28, 24, 20, 0.92);
  font-family: Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #191612; }
button { font: inherit; }
#game-shell { position: relative; width: 100%; height: 100%; overflow: hidden; background: #191612; }
#game-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; cursor: crosshair; }

.screen, .overlay-screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.screen[hidden], .overlay-screen[hidden], .hud[hidden], [hidden] { display: none !important; }
.menu-screen {
  align-content: center;
  justify-items: start;
  padding-left: clamp(24px, 9vw, 150px);
  background: linear-gradient(90deg, rgba(16, 14, 12, .83), rgba(16, 14, 12, .54) 35%, rgba(16, 14, 12, .04) 77%);
}
.menu-card { width: min(430px, 94vw); color: var(--paper-light); }
.eyebrow { margin: 0 0 12px; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .22em; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: "Barlow Condensed", Impact, sans-serif; text-transform: uppercase; }
h1 { margin: 0; color: #f2dfb4; font-size: clamp(64px, 9vw, 106px); line-height: .82; letter-spacing: .015em; text-shadow: 4px 5px 0 #3d2118, 0 0 28px rgba(0,0,0,.45); }
h1 span { color: #cc5b3b; }
.subtitle { margin: 17px 0 19px; color: #d5c5a5; font-size: 13px; letter-spacing: .05em; }
.menu-rule { width: 100%; height: 2px; margin: 20px 0 16px; background: linear-gradient(90deg, var(--rust), rgba(189,85,54,0)); }
.menu-copy { max-width: 310px; margin-bottom: 22px; color: #c2b397; font-size: 12px; line-height: 1.7; }
.primary-button, .secondary-button {
  display: block; width: 100%; min-height: 47px; margin: 10px 0; border: 2px solid #d0ae6f;
  color: #221912; background: #d4b575; font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 20px; font-weight: 800; letter-spacing: .08em; cursor: pointer; transition: transform .12s, filter .12s, background .12s;
  box-shadow: 4px 4px 0 rgba(0,0,0,.38);
}
.primary-button:hover, .secondary-button:hover { filter: brightness(1.14); transform: translate(-1px,-1px); }
.primary-button:active, .secondary-button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(0,0,0,.38); }
.secondary-button { border-color: rgba(211,188,146,.55); color: #e0d1b1; background: rgba(40,33,26,.83); font-size: 16px; }
.menu-foot { display: flex; gap: 20px; margin-top: 24px; color: #e0c68e; font-size: 10px; }
.menu-foot span { display: grid; gap: 3px; }
.menu-foot i { color: #a99a7d; font-size: 9px; font-style: normal; }
.map-stamp { position: absolute; right: clamp(18px, 4vw, 58px); top: 28px; display: grid; gap: 4px; text-align: right; color: #e4d1a7; text-shadow: 1px 2px #281a13; }
.map-stamp span { color: #dca95f; font-size: 10px; letter-spacing: .2em; }
.map-stamp strong { font-family: "Arial Narrow", Impact, sans-serif; font-size: 20px; letter-spacing: .08em; }
.map-stamp em { color: rgba(232,211,170,.75); font-size: 8px; font-style: normal; letter-spacing: .1em; }
.version-button { position: absolute; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 5px 9px 5px 5px; border: 1px solid rgba(226,198,143,.42); color: rgba(236,219,181,.8); background: rgba(27,22,17,.58); font: inherit; font-size: 9px; letter-spacing: .08em; cursor: pointer; transition: .16s; }
.version-button:hover { color: #fff0c9; border-color: var(--gold); background: rgba(45,34,24,.94); transform: translateY(-2px); }
.version-button strong { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #211a14; background: var(--gold); font: 800 15px/1 Arial, sans-serif; }
.version-panel { position: absolute; z-index: 5; right: 18px; bottom: 54px; width: min(410px, calc(100vw - 36px)); max-height: min(72vh, 620px); overflow-y: auto; padding: 20px 22px 18px; border: 1px solid rgba(224,185,112,.76); color: #ebddbd; background: linear-gradient(145deg, rgba(39,31,23,.98), rgba(20,18,15,.98)); box-shadow: 0 10px 36px #000a, inset 0 0 0 3px rgba(220,179,105,.07); animation: panel-rise .2s ease-out both; }
.version-panel[hidden] { display: none; }
.version-panel h2 { margin: 0 24px 4px 0; color: #f3e1b9; font-size: 27px; }
.version-panel h2 span { color: #e0b467; font-size: 18px; }
.version-intro { margin: 0 0 10px; color: #b9a98a; font-size: 10px; }
.version-panel ul { display: grid; gap: 8px; margin: 0; padding-left: 16px; color: #d5c4a1; font-size: 10px; line-height: 1.45; }
.version-panel li::marker { color: #d29552; }
.version-close { position: absolute; top: 7px; right: 9px; border: 0; color: #cbb891; background: transparent; font-size: 23px; cursor: pointer; }
.version-history { display: grid; gap: 13px; }
.version-entry { padding-top: 11px; border-top: 1px solid rgba(220,179,105,.2); }
.version-entry h3 { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 7px; color: #e5bc70; font: 700 16px/1.1 "Barlow Condensed",Impact,sans-serif; letter-spacing: .05em; }
.version-entry h3 time { color: #97876c; font: 9px/1.4 Consolas,"Courier New",monospace; letter-spacing: .04em; }
.version-entry ul { display: grid; gap: 6px; margin: 0; padding-left: 15px; color: #d0c0a1; font-size: 9px; line-height: 1.45; }
.version-entry li::marker { color: #d29552; }
@keyframes panel-rise { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.overlay-screen { background: rgba(14,12,10,.7); backdrop-filter: blur(2px); }
.dialog-card { position: relative; width: min(570px, 96vw); padding: 30px; border: 2px solid #9f7745; color: var(--paper-light); background: linear-gradient(145deg, rgba(47,38,29,.97), rgba(26,23,19,.97)); box-shadow: 8px 9px 0 rgba(0,0,0,.42), inset 0 0 0 4px rgba(223,190,125,.06); }
.dialog-card h2 { margin: 0 0 18px; color: #f1dfbb; font-size: 42px; letter-spacing: .04em; }
.dialog-card p:not(.eyebrow):not(.dialog-hint) { color: #bfb092; font-size: 12px; line-height: 1.65; }
.character-card { text-align: center; }
.character-card canvas { display: block; width: 150px; height: 150px; margin: 0 auto 14px; image-rendering: pixelated; }
.character-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 22px 0; }
.character-stats span { display: grid; gap: 6px; padding: 10px 5px; color: #aa9a7d; background: rgba(0,0,0,.22); font-size: 9px; }
.character-stats b { color: #e5c47b; font-size: 10px; }

.hud { position: absolute; inset: 0; pointer-events: none; color: #f0dfba; }
.hud-top { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 16px 22px 23px; background: linear-gradient(180deg, rgba(24,19,15,.88), rgba(24,19,15,.24), transparent); }
.hud-block { min-width: 135px; text-shadow: 1px 2px #211710; }
.hud-left { justify-self: start; padding-top: 4px; }
.hud-label { display: block; margin-bottom: 4px; color: #d8b367; font-size: 9px; letter-spacing: .16em; }
.hud-block strong { color: #f5e5c5; font-size: 20px; }
.hud-center { min-width: unset; text-align: center; justify-self: center; }
.hud-center .hud-label { margin-bottom: 1px; font-size: 9px; }
.hud-center strong { display: block; color: #fff0cc; font-size: clamp(28px, 3.4vw, 42px); line-height: 1; letter-spacing: .08em; text-shadow: 0 2px 0 #42291a, 0 0 20px rgba(244,198,111,.25); }
.hud-center small { color: #c6b594; font-size: 9px; font-weight: 500; }
.hud-actions { display: flex; gap: 8px; justify-self: end; pointer-events: auto; }
.hud-button { border: 1px solid rgba(226,198,143,.55); padding: 8px 10px; color: #ead8b4; background: rgba(28,23,18,.7); font-size: 10px; cursor: pointer; }
.hud-button:hover { background: rgba(91,61,37,.92); }
kbd { margin-left: 4px; color: #b19b74; font: inherit; font-size: 8px; }
.hud-bottom { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(200px,1fr) minmax(260px,2fr) minmax(150px,1fr); align-items: end; gap: 22px; padding: 34px 22px 18px; background: linear-gradient(0deg, rgba(22,18,14,.94), rgba(22,18,14,.48), transparent); }
.health-wrap { display: flex; align-items: center; gap: 10px; }
#health-icon { color: #e7795b; font-size: 23px; filter: drop-shadow(0 2px 2px #28110d) drop-shadow(0 0 6px #ad452d55); }
.health-stack { flex: 1; min-width: 110px; max-width: 230px; }
.health-caption { display: flex; justify-content: space-between; margin-bottom: 5px; color: #efdcc0; font-size: 9px; letter-spacing: .1em; }
.health-caption b { color: #dc876b; font-size: 8px; }
.health-track, .xp-track { position: relative; height: 13px; overflow: hidden; border: 1px solid rgba(239,220,178,.67); background: linear-gradient(#17120f,#30231a); box-shadow: inset 0 2px 4px #000b, 0 1px 0 rgba(255,240,195,.12); }
.health-track { width: 100%; border-color: rgba(210,126,91,.62); }
#health-fill { position: relative; width: 100%; height: 100%; background: linear-gradient(180deg,#ec9873 0%,#d05b45 40%,#9d382e 100%); box-shadow: inset 0 1px 0 #ffc49b88, 0 0 10px #d95d4588; transition: width .18s; }
#health-fill::after, #xp-fill::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,rgba(255,255,255,.29),transparent 50%); }
#health-label { color: #e6d8ba; font-size: 9px; white-space: nowrap; }
.xp-wrap { width: 100%; }
.xp-caption { display: flex; justify-content: space-between; margin-bottom: 6px; color: #f4dda2; font-size: 9px; font-weight: 700; letter-spacing: .065em; text-shadow: 0 1px 3px #000; }
.xp-caption span:last-child { color: #f4e5bd; font-variant-numeric: tabular-nums; }
.xp-track { height: 13px; border-color: rgba(237,194,95,.8); box-shadow: inset 0 2px 5px #000b, 0 0 10px rgba(238,174,56,.16); }
.xp-track::before { position: absolute; inset: 2px; z-index: 1; content: ""; opacity: .3; background: repeating-linear-gradient(115deg,transparent 0 10px,rgba(255,255,230,.2) 10px 12px); pointer-events: none; }
#xp-fill { position: relative; height: 100%; width: 0; background: linear-gradient(180deg,#fff2a6 0%,#f0c452 36%,#cf842c 100%); box-shadow: inset 0 1px 0 #fff7c8, 0 0 12px #efbd4e; transition: width .22s cubic-bezier(.2,.75,.3,1); }
.loadout-wrap { display: flex; justify-content: end; gap: 6px; flex-wrap: wrap; }
.loadout-chip { padding: 7px 9px; border: 1px solid rgba(234,209,157,.4); color: #f0dcad; background: rgba(30,24,18,.78); font-size: 9px; }
.loadout-chip b { font-weight: 600; }
.revolver-chip { border-color: #c47b4e; }
.weapon-chip { border-color: rgba(229,190,116,.54); background: linear-gradient(145deg,rgba(50,38,25,.91),rgba(25,21,17,.9)); }
.shield-ready { border-color: rgba(159,226,205,.8); color: #c7f0df; box-shadow: inset 0 0 12px rgba(116,197,174,.12), 0 0 8px rgba(116,197,174,.13); }
.shield-cooling { border-color: rgba(127,148,139,.56); color: #aebdb2; opacity: .83; font-variant-numeric: tabular-nums; }
.unlock-toast { position: absolute; top: 84px; left: 50%; width: min(450px,90vw); padding: 13px 18px; transform: translateX(-50%); border: 2px solid #d3ae61; color: #f6e6c3; background: rgba(34,28,20,.94); text-align: center; font-size: 11px; box-shadow: 0 5px 18px #0008; }
.unlock-toast strong { display: block; margin-bottom: 4px; color: #f2cb72; font-family: "Barlow Condensed", Impact, sans-serif; font-size: 24px; }
.wave-toast { position: absolute; top: 105px; left: 50%; min-width: min(340px,90vw); padding: 9px 18px; transform: translateX(-50%); border: 1px solid rgba(223,185,112,.67); color: #e6d4ad; background: linear-gradient(90deg,transparent,rgba(35,26,18,.9) 16%,rgba(35,26,18,.9) 84%,transparent); text-align: center; font: 700 12px/1.2 "Barlow Condensed",Impact,sans-serif; letter-spacing: .19em; text-shadow: 0 2px 5px #000; animation: wave-enter .38s ease-out both; pointer-events: none; }
@keyframes wave-enter { from { opacity: 0; transform: translate(-50%,-8px) scale(.96); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }
.level-toast { position: absolute; z-index: 3; top: 145px; left: 50%; transform: translateX(-50%); color: #ffe6a2; font: 800 21px/1 "Barlow Condensed",Impact,sans-serif; letter-spacing: .16em; text-shadow: 0 2px 0 #713e24, 0 0 18px rgba(255,191,81,.75); pointer-events: none; }
.level-toast-active { animation: level-pop 1.45s cubic-bezier(.18,.74,.25,1) both; }
@keyframes level-pop { 0% { opacity: 0; transform: translate(-50%,10px) scale(.75); } 18% { opacity: 1; transform: translate(-50%,0) scale(1.08); } 34% { transform: translate(-50%,0) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-12px) scale(.98); } }

.upgrade-dialog { width: min(950px, 96vw); text-align: center; border-color: #a47b47; box-shadow: 0 18px 70px #000b, inset 0 0 0 4px rgba(223,190,125,.08); }
.upgrade-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; perspective: 900px; }
.upgrade-actions { display:flex; justify-content:center; margin:16px 0 0; }
.reroll-upgrade-button { display:flex; align-items:center; gap:11px; min-width:236px; padding:9px 14px; border:1px solid #c7a45e; color:#f6e6bc; background:linear-gradient(145deg,#49351e,#241a13); box-shadow:inset 0 0 0 2px #f4d58c0b,0 5px 15px #0005; cursor:pointer; transition:filter .15s,transform .15s,border-color .15s; }
.reroll-upgrade-button:hover:not(:disabled) { transform:translateY(-2px); border-color:#ffe19a; filter:brightness(1.16); }
.reroll-upgrade-button:disabled { opacity:.52; cursor:not-allowed; filter:saturate(.55); }
.reroll-mark { display:grid; width:29px; height:29px; place-items:center; border:1px solid #e6c57a77; border-radius:50%; color:#f5cf73; font-size:20px; line-height:1; }
.reroll-copy { display:grid; gap:3px; text-align:left; }
.reroll-copy b { font:700 11px "Barlow Condensed",Impact,sans-serif; letter-spacing:.09em; }
.reroll-copy small { color:#ae9b76; font-size:8px; letter-spacing:.08em; }
.reroll-upgrade-button > strong { margin-left:auto; color:#f4cc69; font:700 11px Consolas,monospace; white-space:nowrap; }
.upgrade-card { --rarity:#a5a184; --rarity-glow:rgba(165,161,132,.18); position: relative; display: flex; min-height: 300px; flex-direction: column; align-items: stretch; overflow: hidden; padding: 11px; border: 1px solid var(--rarity); color: #ebddb9; background: linear-gradient(155deg,rgba(55,45,34,.98),rgba(22,20,17,.99)); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 3px rgba(235,218,181,.05), 0 8px 20px #0006, 0 0 24px var(--rarity-glow); opacity: 0; transform: translateY(22px) rotateX(9deg) scale(.96); animation: card-reveal .46s cubic-bezier(.18,.82,.24,1.18) forwards; animation-delay: var(--delay,0ms); transition: transform .17s, border-color .17s, box-shadow .17s, filter .17s; }
.upgrade-card::before { position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--rarity) 40%, transparent); content: ""; pointer-events: none; }
.upgrade-card::after { position: absolute; top: -70%; left: -38%; width: 45%; height: 240%; background: linear-gradient(90deg,transparent,rgba(255,244,210,.11),transparent); content: ""; transform: rotate(22deg); transition: left .35s; pointer-events: none; }
.upgrade-card:hover { z-index: 1; border-color: #fff0bf; filter: brightness(1.12); transform: translateY(-6px) scale(1.025); box-shadow: inset 0 0 0 3px rgba(255,240,191,.12), 0 12px 28px #0009, 0 0 30px var(--rarity-glow); }
.upgrade-card:hover::after { left: 110%; }
.rarity-uncommon { --rarity:#75b79b; --rarity-glow:rgba(91,201,155,.24); }
.rarity-rare { --rarity:#6eabe4; --rarity-glow:rgba(89,164,241,.29); }
.rarity-epic { --rarity:#c187f0; --rarity-glow:rgba(179,102,243,.32); }
.rarity-legendary { --rarity:#efba5e; --rarity-glow:rgba(255,185,64,.37); }
.rarity-label { position: absolute; top: 17px; right: 17px; z-index: 1; color: var(--rarity); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-shadow: 0 1px 5px #000; }
.upgrade-category { align-self: center; margin: -4px 0 5px; color: #d3c29f; font-size: 8px; font-weight: 700; letter-spacing: .2em; text-align: center; text-shadow: 0 1px 4px #000; }
.upgrade-art { position: relative; display: grid; height: 127px; place-items: center; overflow: hidden; margin: 1px 1px 13px; border: 1px solid color-mix(in srgb, var(--rarity) 48%, #4a3928); background: radial-gradient(ellipse at 50% 68%, color-mix(in srgb, var(--rarity) 28%, transparent), transparent 70%), linear-gradient(145deg,#392d21,#181613); }
.upgrade-art::after { position: absolute; inset: auto 0 0; height: 33px; background: linear-gradient(transparent,rgba(0,0,0,.42)); content: ""; }
.upgrade-art canvas { width: 116px; height: 116px; image-rendering: pixelated; filter: drop-shadow(0 5px 5px #0008); animation: art-float 2.6s ease-in-out infinite; }
.upgrade-icon { display: none; }
.upgrade-name { display: block; min-height: 37px; margin: 0 3px 5px; color: #f5e4be; font-family: "Barlow Condensed",Impact,sans-serif; font-size: clamp(17px,2vw,21px); letter-spacing: .035em; line-height: 1.02; }
.upgrade-description { display: block; min-height: 42px; margin: 0 3px; color: #bdad8c; font-size: 9px; line-height: 1.5; }
.upgrade-rank { display: flex; justify-content: space-between; margin: auto 3px 2px; padding-top: 9px; border-top: 1px solid rgba(232,209,163,.14); color: var(--rarity); font-size: 8px; letter-spacing: .1em; }
.upgrade-rank b { color: #d9c69e; font-weight: 500; }
@keyframes card-reveal { to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); } }
@keyframes art-float { 0%,100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
.dialog-hint { margin: 12px 0 0; color: #96876d; font-size: 9px; }
.stats-dialog { width: min(740px,96vw); border-color: #90734e; }
.close-button { position: absolute; top: 10px; right: 13px; border: 0; color: #d8c7a4; background: none; font-size: 28px; cursor: pointer; }
.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.stat-card { position: relative; min-height: 74px; padding: 12px 13px 10px; border: 1px solid rgba(224,191,131,.18); background: linear-gradient(145deg,rgba(94,73,48,.34),rgba(13,12,10,.27)); box-shadow: inset 2px 0 #b77c44; }
.stat-card span { display: block; margin-bottom: 7px; color: #a99a7d; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.stat-card b { display: block; color: #f2dfb3; font-family: "Barlow Condensed",Impact,sans-serif; font-size: 22px; font-weight: 700; line-height: 1; }
.stat-card i { display: block; margin-top: 5px; color: #bd8c54; font-size: 8px; font-style: normal; }
.pause-dialog, .gameover-dialog { width: min(440px,96vw); text-align: center; }
.pause-dialog .primary-button, .pause-dialog .secondary-button, .gameover-dialog .primary-button, .gameover-dialog .secondary-button { max-width: 320px; margin: 12px auto; }
.run-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 24px; }
.run-summary div { padding: 12px; color: #ac9d7d; background: rgba(0,0,0,.22); font-size: 9px; }
.run-summary strong { display: block; margin-top: 6px; color: #f0d78d; font-family: "Barlow Condensed",Impact,sans-serif; font-size: 26px; }
.collision-hint { position: absolute; top: 70px; right: 22px; padding: 6px 8px; color: #fff; background: rgba(90,30,20,.8); font-size: 9px; pointer-events: none; }

.shop-menu-button { display:flex; justify-content:space-between; align-items:center; }
.shop-menu-button span { color:#f4d375; font-size:13px; }
.shop-menu-button b { color:#f4d375; font:700 13px Consolas,monospace; }
.shop-dialog { width:min(900px,96vw); max-height:92vh; overflow:auto; border-color:#a47b47; box-shadow:0 20px 70px #000c,inset 0 0 0 4px #dfbe7d0d; }
.shop-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-right:32px; }
.shop-heading h2 { margin-bottom:16px; }
.coin-wallet { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:8px; padding:10px 13px; border:1px solid #d2a95766; background:linear-gradient(145deg,#44331f,#201b15); }
.coin-wallet span { grid-row:span 2; color:#f5d174; font-size:24px; text-shadow:0 0 12px #e9ac36; }
.coin-wallet strong { color:#f6e1a9; font:800 19px Consolas,monospace; }
.coin-wallet small { color:#9e8b68; font-size:7px; letter-spacing:.14em; }
.shop-tabs { display:flex; gap:6px; margin:0 0 16px; padding-bottom:8px; border-bottom:1px solid #d5b57438; }
.shop-tab { flex:1; padding:11px 8px; border:1px solid #ae875545; color:#b8a681; background:#171410a8; font:700 13px "Barlow Condensed",Impact,sans-serif; letter-spacing:.09em; cursor:pointer; }
.shop-tab.active { border-color:#d5ae68; color:#f2d79c; background:linear-gradient(145deg,#62462777,#2d2418); box-shadow:inset 0 -2px #d5ae68; }
.shop-intro { margin:0 0 13px; color:#aa9a7c; font-size:10px; }
.permanent-upgrades { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.permanent-card { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:11px; min-height:87px; padding:12px; border:1px solid #d1b37d2c; background:linear-gradient(140deg,#4133229c,#191613db); box-shadow:inset 2px 0 #bb8650; }
.permanent-icon { display:grid; width:42px; height:42px; place-items:center; border:1px solid #d5b57460; color:#f2d18a; background:radial-gradient(circle,#a4763e50,#17130f); font-size:21px; }
.permanent-info h3 { margin:0 0 4px; color:#efdfbf; font:700 17px "Barlow Condensed",Impact,sans-serif; letter-spacing:.04em; }
.permanent-info p { margin:0 0 7px; color:#9f9074; font-size:8px; line-height:1.35; }
.rank-bars { display:flex; gap:3px; }
.rank-bars i { flex:1; height:4px; background:#514633; }
.rank-bars i.filled { background:linear-gradient(90deg,#b86d3f,#f0c86c); box-shadow:0 0 5px #dfaa4d70; }
.permanent-buy { min-width:95px; padding:8px 9px; border:1px solid #d6af68a6; color:#f2dcae; background:#594025; font:700 11px "Barlow Condensed",Impact,sans-serif; cursor:pointer; }
.permanent-buy:hover:not(:disabled) { filter:brightness(1.2); }
.permanent-buy:disabled { border-color:#534735; color:#77705e; background:#29251f; cursor:default; }
.permanent-max { color:#9fcca2; font-size:9px; letter-spacing:.09em; }
.case-feature { display:grid; grid-template-columns:160px 1fr; gap:19px; align-items:center; padding:18px; border:1px solid #d3a95c66; background:radial-gradient(ellipse at 17% 45%,#c48a3b32,transparent 56%),linear-gradient(135deg,#3c2c1b,#171512); }
.case-art { display:grid; place-content:center; gap:5px; width:145px; height:133px; border:1px solid #ddbd7777; outline:1px solid #d7ad5d37; outline-offset:4px; color:#edcf8e; text-align:center; background:linear-gradient(145deg,#5e3c23,#241a13); box-shadow:0 9px 22px #0008,inset 0 0 30px #e6ae4a1c; }
.case-art span { font-size:24px; text-shadow:0 0 14px #ffcf6e; }
.case-art b { font:800 18px/1 "Barlow Condensed",Impact,sans-serif; letter-spacing:.12em; }
.case-feature h3 { margin:0 0 7px; color:#f1dfba; font:700 24px "Barlow Condensed",Impact,sans-serif; }
.case-feature p:not(.eyebrow) { max-width:500px; margin:0 0 10px; color:#b7a686; font-size:9px; line-height:1.55; }
.case-feature .eyebrow { margin-bottom:5px; font-size:8px; }
.case-feature .primary-button { width:auto; min-height:39px; margin:0; padding:0 16px; font-size:16px; }
.roulette-shell { position:relative; margin:22px 0 12px; padding:12px; border:1px solid #d7b66d55; background:#16120f; }
.roulette-window { overflow:hidden; height:88px; border:1px solid #9e7c4766; background:linear-gradient(90deg,#17130f,#292118,#17130f); }
.roulette-track { display:flex; align-items:center; gap:8px; height:100%; width:max-content; transform:translateX(0); }
.roulette-slot { display:grid; flex:0 0 124px; place-content:center; gap:5px; width:124px; height:69px; border:1px solid #8e79544d; color:#93866d; background:linear-gradient(145deg,#393127,#1d1a16); text-align:center; }
.roulette-slot b { color:#d5c4a0; font:700 12px "Barlow Condensed",Impact,sans-serif; }
.roulette-slot small { color:#8b7b60; font-size:7px; letter-spacing:.14em; }
.roulette-slot.legendary { border-color:#d9a744; background:linear-gradient(145deg,#785023,#2c2115); box-shadow:inset 0 0 18px #ffc34e17; }
.roulette-slot.legendary b { color:#ffe1a0; }
.roulette-pointer { position:absolute; z-index:1; top:2px; left:50%; width:2px; height:104px; background:#f6ce72; box-shadow:0 0 9px #f6ce72; }
.roulette-pointer::before,.roulette-pointer::after { position:absolute; left:-5px; content:""; border-left:6px solid transparent; border-right:6px solid transparent; }
.roulette-pointer::before { top:0; border-top:8px solid #f6ce72; }
.roulette-pointer::after { bottom:0; border-bottom:8px solid #f6ce72; }
.roulette-result { margin:11px 0 0; color:#e2c487; font:700 13px "Barlow Condensed",Impact,sans-serif; letter-spacing:.14em; text-align:center; }
.collection-title { margin:18px 0 9px; color:#c6b38b; font:700 16px "Barlow Condensed",Impact,sans-serif; letter-spacing:.1em; }
.skin-collection { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.skin-card { position:relative; display:grid; min-height:78px; place-content:center; gap:4px; padding:9px; border:1px solid #b59b6836; color:#837861; background:linear-gradient(145deg,#393127,#191714); text-align:center; }
.skin-card.unlocked { border-color:#c2944d99; color:#edd8aa; background:linear-gradient(145deg,#594125,#241d16); }
.skin-card.equipped { border-color:#8ac2a2; box-shadow:inset 0 0 0 1px #8ac2a244; }
.skin-card b { font:700 13px "Barlow Condensed",Impact,sans-serif; }
.skin-preview { display:block; width:34px; height:38px; object-fit:contain; margin:0 auto; image-rendering:pixelated; filter:drop-shadow(0 2px 3px #0009); }
.skin-symbol { display:block; color:#d8bb77; font-size:22px; }
.skin-card:not(.unlocked) .skin-symbol { color:#706754; }
.skin-lock { color:#85785f; font-size:7px; letter-spacing:.1em; }
.roulette-result.legendary-result { color:#ffe09b; text-shadow:0 0 12px #eca94199; }
.skin-card small { color:#96886b; font-size:7px; letter-spacing:.1em; }
.skin-card button { margin-top:3px; border:1px solid #bda16b66; color:#e2d0a7; background:#252018; font:700 9px "Barlow Condensed",Impact,sans-serif; cursor:pointer; }
.boss-health-wrap { position:absolute; top:78px; left:50%; width:min(430px,65vw); padding:8px 12px 10px; transform:translateX(-50%); border:1px solid #c0674e80; background:linear-gradient(90deg,#251814e8,#3b211beF,#251814e8); box-shadow:0 5px 20px #0008,inset 0 0 14px #d450351c; }
.boss-name-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; color:#f0c6ac; font:700 12px "Barlow Condensed",Impact,sans-serif; letter-spacing:.15em; text-shadow:0 1px 4px #000; }
.boss-name-row span:first-child { color:#e67c57; font-size:16px; }
.boss-name-row span:last-child { color:#d7b5a0; font:10px Consolas,monospace; }
.boss-health-track { height:10px; overflow:hidden; border:1px solid #bd7c646e; background:#160e0d; box-shadow:inset 0 2px 4px #000; }
#boss-health-fill { width:100%; height:100%; background:linear-gradient(180deg,#ffae7b,#d94b36 55%,#8e251f); box-shadow:0 0 11px #eb523a99; transition:width .18s; }
.run-currency { position:absolute; top:75px; left:22px; padding:5px 10px; border:1px solid #dab55c55; color:#f5d272; background:#211a14c9; font:12px Consolas,monospace; text-shadow:0 1px 3px #000; }
.victory-dialog { border-color:#c8a354; box-shadow:0 18px 70px #000b,inset 0 0 26px #d3a95516; }
.victory-dialog h2 { color:#f5dda4; text-shadow:0 0 16px #d39b3d55; }

/* v0.9 western store, run setup, achievements and readable combat HUD */
.shop-screen { overflow:hidden; isolation:isolate; background:#1b140f; }
.shop-screen::before { position:absolute; z-index:0; inset:-18px; content:""; background-image:linear-gradient(90deg,rgba(17,12,9,.48),rgba(17,12,9,.12) 28%,rgba(17,12,9,.55)),linear-gradient(0deg,rgba(14,10,8,.5),transparent 32%,rgba(14,10,8,.3)),var(--shop-backdrop); background-size:cover; background-position:center 58%; filter:saturate(.88) brightness(.76); transform:scale(1.025); }
.shop-dialog { z-index:1; width:min(1000px,96vw); max-height:94vh; padding:clamp(18px,3vw,34px); border-color:#d0a45b; background:linear-gradient(145deg,rgba(36,26,18,.93),rgba(22,17,13,.94)); box-shadow:0 20px 90px #000d,inset 0 0 0 4px rgba(228,190,111,.1),inset 0 0 48px #9c63251c; backdrop-filter:blur(4px); }
.shop-dialog::before { position:absolute; inset:7px; border:1px solid #c79b5a55; content:""; pointer-events:none; }
.shop-heading { position:relative; padding:0 14px 12px 17px; border-left:4px solid #c88343; background:linear-gradient(90deg,#4a301b66,transparent 78%); }
.shop-heading h2 { margin:0 0 5px; color:#f3dfb2; font-size:clamp(29px,4vw,45px); text-shadow:2px 3px #29190f; }
.shop-heading .eyebrow { color:#e6b868; }
.shopkeeper-line { margin:0; color:#c7ad82; font-size:9px; letter-spacing:.03em; }
.coin-wallet { border-color:#e0bd7288; background:linear-gradient(135deg,#79512cdd,#2e2015ee); box-shadow:inset 0 0 0 2px #f5d68a12,0 7px 16px #0007; }
.shop-tabs { position:relative; gap:9px; margin:15px 0 14px; padding:0 0 10px; }
.shop-tab { min-height:42px; border-color:#c0945a55; background:linear-gradient(180deg,#31251add,#1d1712f2); }
.shop-tab.active { border-color:#ecc877; color:#fff0c4; background:linear-gradient(180deg,#83572ecc,#46301e); box-shadow:inset 0 -3px #e7bd69,0 4px 14px #0005; }
.shop-intro { padding:9px 12px; border:1px solid #c59a5540; color:#d2bd96; background:#261c14b8; }
.permanent-upgrades { gap:11px; }
.permanent-card { min-height:100px; border-color:#c59a5548; background:linear-gradient(120deg,#49331fdc,#211811ed); box-shadow:inset 3px 0 #d39955,0 6px 15px #0004; }
.permanent-card:hover { border-color:#e5bb70; background:linear-gradient(120deg,#5c4026e8,#281c14f2); }
.permanent-icon { border-color:#dfb86f9c; background:radial-gradient(circle,#d7a24b4d,#21170f); box-shadow:0 0 15px #d79e3928; }
.permanent-buy { border-color:#e4bc70; color:#fff0c2; background:linear-gradient(180deg,#80572f,#4a301a); box-shadow:inset 0 1px #ffd98b77,0 3px 6px #0005; }
.slot-capacity-note { display:block; margin-top:6px; color:#edc574; font-size:8px; letter-spacing:.1em; }
.case-feature { border-color:#ddb3688c; background:linear-gradient(130deg,#664320cc,#241910f2); box-shadow:inset 0 0 22px #f1c35b0b,0 8px 25px #0004; }
.case-art { background:linear-gradient(145deg,#966131,#3b2415); box-shadow:0 9px 22px #0009,inset 0 0 30px #f8ca6b29; }
.skin-card { min-height:132px; border-color:#c29c5a50; background:linear-gradient(145deg,#493522e8,#211811f2); }
.skin-card.unlocked { background:linear-gradient(145deg,#704a28f0,#2a1d14f4); }
.skin-preview { width:48px; height:62px; object-fit:contain; image-rendering:pixelated; }
.skin-card:not(.unlocked) .skin-preview { filter:brightness(0)!important; opacity:.8; }
.skin-lock { color:#d0b57d; }
.hud-top { grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr); align-items:start; }
.hud-left .health-wrap { width:min(250px,26vw); margin-top:9px; padding:7px 9px; border:1px solid #d27e5b55; background:linear-gradient(100deg,#201710d9,#20171088); box-shadow:0 4px 12px #0004; }
.hud-left .health-stack { min-width:0; }
.hud-left #health-icon { font-size:19px; }
.hud-left .health-track { height:10px; }
.hud-bottom { display:block; padding:0 22px 18px; background:none; pointer-events:none; }
.xp-wrap { position:relative; width:min(790px,72vw); margin:0 auto; padding:11px 15px 12px; border:1px solid #d7b45e77; background:linear-gradient(90deg,transparent,#21190fe8 12%,#21190fe8 88%,transparent); box-shadow:0 5px 20px #0006,inset 0 0 14px #dcae3912; }
.shield-status { display:flex; align-items:center; gap:8px; min-height:24px; margin:-5px 0 7px; color:#c6dfd4; font-size:8px; letter-spacing:.1em; }
.shield-status-icon { color:#b5e3d4; font-size:17px; text-shadow:0 0 9px #a3efda; }
.shield-status b { color:#d4e8db; }
.shield-status > span:nth-of-type(2) { min-width:90px; font-variant-numeric:tabular-nums; }
.shield-status > i { flex:1; height:5px; overflow:hidden; border:1px solid #a8c3aa65; background:#151410; }
.shield-status > i em { display:block; height:100%; background:linear-gradient(90deg,#6caa9b,#d4efca); box-shadow:0 0 8px #a5e4c3; }
.shield-status.cooling { color:#a99d82; }
.shield-status.cooling .shield-status-icon { color:#8b988d; text-shadow:none; }
.shield-status.cooling > i em { background:linear-gradient(90deg,#8a5635,#d8aa5d); }
.loadout-wrap { position:absolute; top:158px; right:16px; display:grid; justify-content:stretch; gap:5px; width:min(225px,24vw); max-height:calc(100% - 260px); overflow:auto; padding:5px; scrollbar-width:thin; scrollbar-color:#997348 #20170f99; }
.ability-hud-card { display:flex; align-items:center; gap:8px; min-height:48px; padding:4px 8px 4px 4px; border:1px solid #c5a16b8c; background:linear-gradient(100deg,#342619e8,#1a1511e8); box-shadow:0 3px 12px #0007,inset 2px 0 #bf8e50; }
.ability-hud-card.cooling { border-color:#8e8a7782; filter:saturate(.72); }
.ability-hud-icon { flex:0 0 42px; width:42px; height:42px; image-rendering:pixelated; background:radial-gradient(circle,#d29b4b2b,transparent 70%); }
.ability-hud-copy { min-width:0; display:grid; gap:4px; }
.ability-hud-copy b { overflow:hidden; color:#ead9b8; font:700 11px/1.05 "Barlow Condensed",Impact,sans-serif; letter-spacing:.04em; text-overflow:ellipsis; white-space:nowrap; }
.ability-hud-copy small { color:#d5b779; font-size:8px; letter-spacing:.08em; }
.unlock-toast { top:104px; padding:13px 22px; border:2px solid #d4ac62; outline:1px solid #65431f; outline-offset:4px; color:#f0dfb9; background:linear-gradient(135deg,rgba(48,33,21,.97),rgba(28,20,15,.97)); box-shadow:0 8px 28px #000b,inset 0 0 20px #b87b301c; }
.unlock-toast::before { position:absolute; inset:4px; border:1px solid #deb56848; content:""; pointer-events:none; }
.unlock-toast strong { color:#ffd77d; font-size:clamp(23px,3vw,30px); text-shadow:0 2px #56331b; }
.wave-toast { top:120px; padding:14px 24px; border-color:#c99d5d; color:#f0dbb4; background:linear-gradient(90deg,transparent,rgba(38,27,19,.95) 14%,rgba(38,27,19,.95) 86%,transparent); box-shadow:0 4px 14px #0005; }
.level-toast { top:155px; min-width:260px; padding:13px 24px; border:1px solid #edcd83; outline:1px solid #815524; outline-offset:4px; color:#fff0bf; background:linear-gradient(90deg,transparent,#382719f0 14%,#382719f0 86%,transparent); font-size:clamp(28px,4vw,42px); letter-spacing:.12em; text-shadow:0 3px #75411d,0 0 22px #ffd06c; }
.slot-count { display:inline-block; margin-left:12px; color:#edca80; font-size:9px; letter-spacing:.12em; }
.map-select-dialog { width:min(920px,96vw); max-height:94vh; overflow:auto; border-color:#c19659; }
.map-select-dialog h2,.achievements-dialog h2 { margin-bottom:13px; }
.map-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:0 0 18px; }
.map-choice { display:grid; min-height:96px; grid-template-columns:38px 1fr; grid-template-rows:1fr auto; align-items:center; gap:5px 10px; padding:11px; border:1px solid #d2ac6a7a; color:#ead9b7; background:linear-gradient(135deg,#553b23,#241a13); text-align:left; cursor:pointer; }
.map-choice:hover:not(:disabled),.map-choice.selected { border-color:#f0ca75; box-shadow:inset 0 0 0 2px #dfb25c40,0 0 16px #e7bd5b26; }
.map-choice-mark { grid-row:1/3; display:grid; width:36px; height:36px; place-items:center; border:1px solid #d6ad65; color:#f5d98e; background:#201810; font:700 16px "Barlow Condensed",Impact,sans-serif; }
.map-choice b { font:800 16px/1 "Barlow Condensed",Impact,sans-serif; }
.map-choice small { color:#d1b985; font-size:7px; letter-spacing:.08em; }
.map-choice.locked { filter:grayscale(1) brightness(.44); cursor:default; }
.map-choice.upcoming { border-color:#78917b80; background:linear-gradient(135deg,#344033,#1b1b15); }
.map-choice.upcoming .map-choice-mark { color:#b6d0a4; border-color:#78917b; }
.difficulty-heading { display:flex; justify-content:space-between; margin-bottom:8px; color:#e5ca91; font-size:9px; letter-spacing:.14em; }
.difficulty-heading small { color:#9f9071; font-size:8px; }
.difficulty-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.difficulty-choice { display:grid; gap:5px; min-height:82px; padding:10px; border:1px solid #a98c5c66; color:#e5d6b7; background:#211a14e8; text-align:left; cursor:pointer; }
.difficulty-choice b { color:#f0d59a; font:800 17px "Barlow Condensed",Impact,sans-serif; }
.difficulty-choice span { color:#d5b66d; font-size:8px; letter-spacing:.08em; }
.difficulty-choice small { color:#a79a7f; font-size:8px; }
.difficulty-choice.selected { border-color:#edc467; background:linear-gradient(145deg,#624426,#2a1e15); box-shadow:inset 0 -3px #d9ae5e; }
.difficulty-choice.locked { filter:grayscale(1) brightness(.52); cursor:default; }
.adapt-toggle { display:flex; align-items:center; gap:11px; margin:14px 0; padding:11px 12px; border:1px solid #b5956150; color:#d8c7a1; background:#201912c9; cursor:pointer; }
.adapt-toggle input { position:absolute; opacity:0; }
.toggle-mark { display:grid; flex:0 0 34px; width:34px; height:18px; align-items:center; padding:2px; border:1px solid #a88855; background:#18130f; }
.toggle-mark::after { width:12px; height:12px; content:""; background:#8a7b64; transition:transform .16s,background .16s; }
.adapt-toggle input:checked + .toggle-mark::after { transform:translateX(16px); background:#e0b964; box-shadow:0 0 8px #e4bb5f; }
.adapt-toggle b,.adapt-toggle small { display:block; }
.adapt-toggle b { margin-bottom:4px; color:#f0ddaf; font-size:9px; letter-spacing:.1em; }
.adapt-toggle small { color:#a99a7d; font-size:8px; }
.map-select-dialog .primary-button { margin:12px 0 0; }
.map-select-dialog .primary-button:disabled { filter:grayscale(1); opacity:.5; cursor:default; }
.achievements-dialog { width:min(740px,96vw); max-height:92vh; overflow:auto; border-color:#bf985b; }
.achievement-summary { display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; margin-bottom:13px; color:#b9a47b; font-size:8px; letter-spacing:.1em; }
.achievement-summary b { color:#f0d394; font:700 14px Consolas,monospace; }
.achievement-progress { grid-column:1/-1; height:7px; overflow:hidden; border:1px solid #b8995c66; background:#17130f; }
.achievement-progress i { display:block; height:100%; background:linear-gradient(90deg,#9a5736,#e7c266); box-shadow:0 0 8px #e1b75a; transition:width .25s; }
.achievement-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.achievement-card { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:9px; min-height:74px; padding:8px; border:1px solid #a98c5b4d; background:linear-gradient(130deg,#36291d,#1c1712); }
.achievement-card.unlocked { border-color:#c9a1579c; background:linear-gradient(130deg,#594126,#241a13); box-shadow:inset 2px 0 #d9ae5e; }
.achievement-medallion { display:grid; width:38px; height:38px; place-items:center; border:1px solid #776447; border-radius:50%; color:#746d5d; background:radial-gradient(circle,#514632,#191611); font-size:19px; }
.achievement-card.unlocked .achievement-medallion { border-color:#e3bd6d; color:#ffe8a4; background:radial-gradient(circle,#a77937,#382517); box-shadow:0 0 12px #dfb45637; }
.achievement-copy { min-width:0; }
.achievement-copy b,.achievement-copy small { display:block; }
.achievement-copy b { margin-bottom:4px; color:#e8d7b2; font:700 14px "Barlow Condensed",Impact,sans-serif; }
.achievement-copy small { min-height:20px; color:#a89a7e; font-size:7px; line-height:1.35; }
.achievement-track { display:block; height:3px; overflow:hidden; margin-top:5px; background:#17130f; }
.achievement-track i { display:block; height:100%; background:#c89b50; }
.achievement-count { color:#c2a86f; font-size:7px; white-space:nowrap; }
.boss-intro-screen { position:absolute; z-index:12; inset:0; display:grid; place-items:center; background:radial-gradient(ellipse at center,rgba(85,30,19,.4),rgba(15,11,9,.82)); animation:intro-fade .55s ease-out both; }
.boss-intro-frame { width:min(760px,90vw); padding:36px 24px; border-top:2px solid #d59c58; border-bottom:2px solid #d59c58; background:linear-gradient(90deg,transparent,#261812ec 10%,#261812f4 90%,transparent); text-align:center; box-shadow:0 0 70px #0009; }
.boss-intro-kicker { color:#d5b77c; font-size:9px; letter-spacing:.28em; }
.boss-intro-frame h2 { margin:12px 0 8px; color:#f0d3a3; font:900 clamp(34px,7vw,68px)/.95 "Barlow Condensed",Impact,sans-serif; text-shadow:0 4px #4b261a,0 0 25px #c2523566; }
.boss-intro-frame p { margin:0; color:#c8b293; font-size:11px; }
.boss-intro-rule { width:88px; height:2px; margin:18px auto 0; background:#d9a75b; box-shadow:0 0 12px #e9ba65; }
@keyframes intro-fade { from { opacity:0; } to { opacity:1; } }

@media (max-width:700px) {
  .shop-screen { padding:8px; }
  .shop-screen::before { background-position:center; }
  .shop-dialog { max-height:98vh; padding:19px 14px; }
  .shop-heading { gap:7px; padding-right:18px; }
  .shop-heading h2 { font-size:25px; }
  .shopkeeper-line { font-size:7px; }
  .hud-top { grid-template-columns:minmax(120px,1fr) auto minmax(80px,1fr); padding:8px; }
  .hud-left .health-wrap { width:min(190px,38vw); gap:5px; margin-top:5px; padding:5px; }
  .hud-left .health-caption { font-size:7px; }
  .hud-left #health-label { font-size:7px; }
  .hud-bottom { padding:0 7px 9px; }
  .xp-wrap { width:min(96vw,700px); padding:7px 9px; }
  .xp-caption { font-size:7px; }
  .shield-status { gap:5px; font-size:6px; }
  .shield-status > span:nth-of-type(2) { min-width:76px; }
  .loadout-wrap { top:142px; right:4px; width:min(158px,32vw); max-height:calc(100% - 215px); gap:3px; padding:2px; }
  .ability-hud-card { min-height:39px; gap:4px; padding:2px 4px 2px 2px; }
  .ability-hud-icon { flex-basis:34px; width:34px; height:34px; }
  .ability-hud-copy b { font-size:9px; }
  .ability-hud-copy small { font-size:7px; }
  .unlock-toast { top:88px; }
  .map-card-grid { grid-template-columns:1fr; gap:6px; }
  .map-choice { min-height:62px; }
  .difficulty-options { gap:5px; }
  .difficulty-choice { min-height:80px; padding:7px; }
  .difficulty-choice b { font-size:13px; }
  .difficulty-choice span,.difficulty-choice small { font-size:6px; }
  .achievement-list { grid-template-columns:1fr; }
  .achievement-card { min-height:64px; }
  .slot-count { display:block; margin:6px 0 0; }
}

/* v0.12.0: shared skin framing, illustrated case reel and readable field manual */
#shop-screen .skin-card { align-content:start; }
#shop-screen .skin-card.rarity-legendary { border-color:#edc45e; box-shadow:inset 0 0 25px #f5c65519,0 0 15px #e0a63835; }
#shop-screen .skin-card.rarity-epic { border-color:#b89ac4; }
#shop-screen .skin-card.rarity-common { border-color:#c39a61; }
#shop-screen .skin-description { min-height:31px; margin:0; color:#c9b895; font:9px/1.35 Consolas,monospace; }
#shop-screen .skin-card:not(.unlocked) .skin-description { color:#81765f; }
.roulette-slot { position:relative; }
.roulette-slot canvas { image-rendering:pixelated; }
.roulette-result.revealed { animation:prize-reveal .58s cubic-bezier(.18,.8,.24,1) both; }
.case-art.opening::before { transform:translateY(-30px) rotateX(31deg); }
.case-art.opening > span { animation:case-spark .32s ease-in-out infinite alternate; }
@keyframes case-spark { from { transform:scale(.85); text-shadow:0 0 5px #ffcf6e; } to { transform:scale(1.2); text-shadow:0 0 22px #fff1a0,0 0 38px #e4a53f; } }
.fieldbook-dialog { min-height:min(710px,90vh); }
.field-entry-copy { display:grid; align-content:center; gap:2px; }
.field-entry-copy p { line-height:1.3; }
.field-entry-copy small { margin-top:2px; }
.field-entry-copy .field-entry-rarity { margin-top:2px; }
@media (max-width:700px) {
  .fieldbook-dialog { width:96vw; min-height:0; max-height:96vh; overflow-y:auto; padding:14px 11px; }
  .fieldbook-cover { grid-template-columns:42px minmax(0,1fr); gap:9px; margin-bottom:9px; padding:9px; }
  .book-emblem { width:38px; height:38px; font-size:19px; }
  .fieldbook-cover h2 { font-size:20px; }
  .fieldbook-cover .eyebrow { font-size:7px; }
  .fieldbook-cover p:last-child { font-size:8px; line-height:1.3; }
  .book-completion { grid-column:1 / -1; grid-template-columns:auto 1fr; align-items:center; text-align:left; }
  .book-completion i { grid-column:1 / -1; }
  .fieldbook-pages { flex:none; max-height:64vh; overflow-y:auto; padding:10px; background:linear-gradient(90deg,#d6c59d,#e6d8b3 49%,#59442b 50%,#e0d1aa 51%,#cfbd92); }
  .fieldbook-spine { display:none; }
  .fieldbook-entries { grid-template-columns:1fr; grid-auto-rows:auto; gap:7px; height:auto; }
  .field-entry { grid-template-columns:54px minmax(0,1fr); min-height:88px; padding:5px 7px; }
  .field-entry-art { width:50px; height:58px; }
  .field-entry-copy b { font-size:12px; }
  .field-entry-copy p { font-size:8px; }
  .field-entry-copy small,.field-entry-rarity { font-size:6px; }
  .fieldbook-navigation { grid-template-columns:1fr auto 1fr; gap:5px; padding-top:9px; }
  .fieldbook-navigation button { min-height:34px; padding:4px; font-size:8px; }
  .fieldbook-navigation span { font-size:7px; }
  #shop-screen .skin-description { font-size:8px; }
}

@media (max-width: 700px) {
  .menu-screen { padding-left: 22px; background: linear-gradient(90deg, rgba(16,14,12,.9), rgba(16,14,12,.5) 68%, rgba(16,14,12,.1)); }
  .menu-card { width: min(360px,93vw); }
  .map-stamp { top: 14px; right: 12px; }
  .map-stamp strong { font-size: 15px; }
  .version-button { right: 10px; bottom: 10px; }
  .version-panel { right: 10px; bottom: 48px; }
  .menu-foot { gap: 12px; }
  .hud-top { grid-template-columns: 1fr auto 1fr; padding: 11px; }
  .hud-block { min-width: unset; }
  .hud-block strong { font-size: 16px; }
  .hud-center { display: block; }
  .hud-center strong { font-size: 28px; }
  .hud-center .hud-label { font-size: 7px; }
  .hud-button { padding: 7px; font-size: 9px; }
  .hud-bottom { grid-template-columns: 1fr 1.5fr; gap: 10px; padding: 24px 11px 11px; }
  .loadout-wrap { grid-column: 1 / -1; justify-content: center; }
  .health-wrap { gap: 5px; }
  .health-stack { min-width: 0; }
  #health-label { font-size: 8px; }
  .upgrade-dialog { max-height: 92vh; overflow: auto; }
  .upgrade-grid { grid-template-columns: 1fr; max-height: 66vh; overflow: auto; }
  .upgrade-actions { margin-top:11px; }
  .reroll-upgrade-button { width:min(100%,320px); justify-content:flex-start; }
  .upgrade-card { min-height: 128px; display: grid; grid-template-columns: 90px 1fr; grid-template-rows: auto auto 1fr; column-gap: 10px; align-content: center; padding: 8px; }
  .upgrade-art { grid-row: 1 / 4; height: 108px; margin: 0; }
  .upgrade-art canvas { width: 94px; height: 94px; }
  .rarity-label { top: 13px; right: 13px; }
  .upgrade-name { min-height: unset; margin: 6px 0 2px; }
  .upgrade-description { min-height: unset; margin: 0; }
  .upgrade-rank { margin: 5px 0 0; padding-top: 5px; }
  .dialog-card { padding: 22px 18px; }
  .dialog-card h2 { font-size: 34px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 7px; }
  .shop-dialog { max-height:94vh; padding:19px 14px; }
  .shop-heading { padding-right:24px; }
  .shop-heading h2 { font-size:28px; }
  .permanent-upgrades { grid-template-columns:1fr; }
  .permanent-card { grid-template-columns:36px 1fr auto; gap:8px; padding:9px; }
  .permanent-icon { width:34px; height:34px; font-size:17px; }
  .permanent-buy { min-width:75px; font-size:10px; }
  .case-feature { grid-template-columns:92px 1fr; gap:12px; padding:12px; }
  .case-art { width:82px; height:91px; }
  .case-art b { font-size:13px; }
  .case-feature h3 { font-size:19px; }
  .skin-collection { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roulette-slot { flex-basis:100px; width:100px; }
  .boss-health-wrap { top:75px; width:55vw; }
  .run-currency { top:69px; left:11px; }
}

/* v0.10.2: survival HUD, western shop showcase, damage vignette and DEV tools */
#shop-screen { overflow:hidden; isolation:isolate; padding:12px; background:#1b140f; }
#shop-screen::before { position:absolute; z-index:0; inset:-18px; content:""; background-image:linear-gradient(90deg,rgba(17,12,9,.48),rgba(17,12,9,.12) 28%,rgba(17,12,9,.55)),linear-gradient(0deg,rgba(14,10,8,.5),transparent 32%,rgba(14,10,8,.3)),var(--shop-backdrop); background-size:cover; background-position:center 58%; filter:saturate(.94) brightness(.8); transform:scale(1.025); }
#shop-screen .shop-dialog { z-index:1; width:min(1120px,96vw); max-height:94vh; background:linear-gradient(145deg,rgba(42,29,18,.91),rgba(24,18,13,.94)); backdrop-filter:blur(2px); }
#shop-screen .shop-dialog::before { border-color:#e1bd7777; }
#shop-screen .shop-tabs { margin-top:18px; }
#shop-screen .collection-title { padding:10px 12px; border-left:3px solid #c98e4d; background:linear-gradient(90deg,#6b472640,transparent); font-size:20px; }
#shop-screen .skin-collection { gap:10px; }
#shop-screen .skin-card { min-height:200px; align-content:start; justify-items:center; gap:6px; padding:13px 9px 10px; border-color:#b59b6855; background:linear-gradient(145deg,#493522ed,#20170ff2); box-shadow:inset 0 0 0 3px #e8cd8b08,0 6px 15px #0007; }
#shop-screen .skin-card::before { position:absolute; inset:4px; border:1px solid #c8a36b35; content:""; pointer-events:none; }
#shop-screen .skin-card.unlocked { border-color:#d5ac62; background:linear-gradient(145deg,#684628f2,#26190ff5); }
#shop-screen .skin-card.equipped { border-color:#91c8a4; box-shadow:inset 0 0 0 2px #8ac2a255,0 0 20px #75b88b26; }
#shop-screen .skin-card b { min-height:31px; font:700 15px/1.05 "Barlow Condensed",Impact,sans-serif; }
#shop-screen .skin-preview { width:84px; height:98px; filter:drop-shadow(0 5px 5px #0009); }
#shop-screen .skin-card:not(.unlocked) .skin-preview { filter:brightness(0)!important; opacity:.92; }
#shop-screen .skin-lock { color:#d3b276; font-weight:700; }
#shop-screen .skin-card button { position:relative; z-index:1; min-width:94px; min-height:28px; padding:4px 9px; color:#f4dfad; background:linear-gradient(#654628,#352316); }
#shop-screen .skin-card.equipped::after { position:absolute; top:8px; right:8px; padding:3px 5px; border:1px solid #a9d1a7; color:#c9e6c4; background:#1b281bd9; content:"EQUIPADO"; font-size:7px; letter-spacing:.08em; }

#shop-screen .shop-dialog { overflow-y:auto; scrollbar-color:#92683d #211810; }
#shop-screen .skin-collection { grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
#shop-screen .skin-card { min-height:238px; padding:13px 12px 11px; }
#shop-screen .skin-card b { min-height:34px; max-width:100%; font-size:17px; }
#shop-screen .skin-preview { width:104px; height:126px; padding:3px; border:1px solid #d6b77a48; background:radial-gradient(ellipse at 50% 60%,#b28a4a3a,transparent 70%); }
#shop-screen .skin-card.rarity-legendary { border-color:#e2b44e; box-shadow:inset 0 0 24px #e5a93a16,0 0 13px #d79a3520; }
#shop-screen .skin-card.rarity-epic { border-color:#a988ad; }
#shop-screen .skin-card.rarity-rare { border-color:#7c9e9a; }

.case-feature { grid-template-columns:190px 1fr; min-height:192px; gap:27px; padding:21px 25px; }
.case-art { position:relative; overflow:hidden; width:174px; height:152px; gap:4px; transform-style:preserve-3d; }
.case-art::before { position:absolute; z-index:1; top:0; left:7px; right:7px; height:37px; border:1px solid #e1bc71; background:repeating-linear-gradient(90deg,#95613a 0 14px,#b78348 14px 19px); box-shadow:0 4px 7px #120c08; content:""; transition:transform .42s cubic-bezier(.2,.8,.2,1); }
.case-art::after { position:absolute; inset:45px 19px 23px; border:2px solid #b17a3f; background:repeating-linear-gradient(0deg,#684225 0 13px,#a36c36 14px 18px); box-shadow:inset 0 0 0 2px #2a1b12; content:""; }
.case-art > span,.case-art > b,.case-art > i { position:relative; z-index:2; }
.case-art > span { margin-top:35px; font-size:31px; }
.case-art > b { font-size:17px; text-shadow:0 2px #1d130c; }
.case-art > i { margin-top:3px; color:#e4c07b; font:700 7px Consolas,monospace; letter-spacing:.12em; }
.case-art.opening { animation:case-rattle .14s linear 8; }
.case-art.opening::before { transform:translateY(-30px) rotateX(31deg); }
.case-art.opening::after { box-shadow:0 0 30px 9px #ffcf6966,inset 0 0 20px #ffc96c88; }
@keyframes case-rattle { 0%,100% { transform:translateX(0) rotate(0); } 25% { transform:translateX(-3px) rotate(-1deg); } 75% { transform:translateX(3px) rotate(1deg); } }
.roulette-shell { padding:17px 18px 13px; border-color:#e1bd7788; background:radial-gradient(ellipse at 50% 20%,#6747214a,transparent 62%),linear-gradient(145deg,#251a12,#110e0c); box-shadow:inset 0 0 24px #d9a94c12,0 8px 22px #0007; }
.roulette-window { height:128px; border-color:#c8a05b88; background:linear-gradient(90deg,#120e0b,#40301e 48%,#120e0b); box-shadow:inset 0 0 20px #000b; }
.roulette-slot { flex-basis:120px; width:120px; height:108px; gap:4px; border-color:#a78c5f; background:linear-gradient(145deg,#50402a,#241b13); }
.roulette-slot canvas { width:51px; height:60px; margin:0 auto; filter:drop-shadow(0 2px 3px #0009); }
.roulette-slot.legendary { border-color:#f1c75d; background:radial-gradient(circle at 50% 45%,#9b6c2f,#392316 80%); box-shadow:inset 0 0 20px #ffc84b29,0 0 9px #f4c65555; }
.roulette-slot b { max-width:114px; line-height:1.05; font-size:12px; }
.roulette-slot small { font-size:8px; }
.roulette-pointer { top:2px; height:145px; }
.roulette-result { min-height:18px; font-size:15px; }
.roulette-result.reveal { animation:prize-reveal .6s ease-out; }
@keyframes prize-reveal { 0% { opacity:0; transform:scale(.82); } 65% { opacity:1; transform:scale(1.08); } 100% { transform:scale(1); } }

.fieldbook-dialog { display:flex; flex-direction:column; width:min(1120px,96vw); max-height:94vh; overflow:hidden; padding:22px; border:2px solid #b1844c; background:linear-gradient(145deg,#33251a,#17130f); box-shadow:0 20px 70px #000d,inset 0 0 0 4px #d5ad6920; }
.fieldbook-dialog::before { position:absolute; inset:7px; border:1px solid #d2aa6c61; content:""; pointer-events:none; }
.fieldbook-cover { display:grid; grid-template-columns:64px 1fr 175px; align-items:center; gap:17px; margin-bottom:13px; padding:12px 20px; border:1px solid #d0a65c77; background:linear-gradient(120deg,#53371e,#2e2016 60%,#3d2918); box-shadow:inset 0 0 24px #f1c2610e,0 5px 12px #0006; }
.book-emblem { display:grid; width:54px; height:54px; place-items:center; border:1px solid #e0ba70; border-radius:50%; color:#f2d397; font-size:26px; box-shadow:0 0 17px #e3ad4e2b,inset 0 0 15px #d9a45122; }
.fieldbook-cover .eyebrow { margin:0 0 4px; color:#e0b869; font-size:8px; letter-spacing:.16em; }
.fieldbook-cover h2 { margin:0 0 3px; color:#f2dfba; font:800 28px/1 "Barlow Condensed",Impact,sans-serif; letter-spacing:.04em; }
.fieldbook-cover p:last-child { margin:0; color:#b4a183; font-size:9px; }
.book-completion { display:grid; gap:4px; text-align:right; }
.book-completion b { color:#f2d18a; font:700 18px Consolas,monospace; }
.book-completion span { color:#b4a181; font:700 7px Consolas,monospace; letter-spacing:.13em; }
.book-completion i { height:5px; overflow:hidden; border:1px solid #a0824b; background:#211810; }
.book-completion em { display:block; width:0; height:100%; background:linear-gradient(90deg,#a36634,#f0cb73); transition:width .25s; }
.fieldbook-pages { position:relative; flex:1; min-height:250px; overflow:hidden; padding:14px 19px; border:1px solid #b99a68; background:linear-gradient(90deg,#d6c59d 0%,#e6d8b3 48.5%,#796244 49.8%,#59442b 50%,#e0d1aa 51.5%,#cfbd92 100%); box-shadow:inset 0 0 24px #38261766,0 5px 14px #0005; }
.fieldbook-pages::before { position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 34px,#735d3a13 35px 36px); content:""; pointer-events:none; }
.fieldbook-spine { position:absolute; z-index:1; top:0; bottom:0; left:50%; width:24px; transform:translateX(-50%); background:linear-gradient(90deg,#4a3826a8,#8e7450aa 40%,#60472ca8); box-shadow:0 0 13px #2d201a77; pointer-events:none; }
.fieldbook-entries { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(112px,1fr); gap:8px 31px; height:100%; }
.field-entry { display:grid; grid-template-columns:70px 1fr; align-items:center; gap:8px; min-width:0; padding:6px 9px; border:1px solid #7c644451; color:#3c2d1f; background:linear-gradient(145deg,#f0e4c2e8,#d6c397e8); box-shadow:0 2px 5px #38271920,inset 0 0 0 2px #fff7; }
.field-entry-art { width:65px; height:72px; border:1px solid #91764c70; background:radial-gradient(ellipse,#f8ebc6,#cbbb91); image-rendering:pixelated; }
.field-entry-copy { min-width:0; }
.field-entry-category { display:block; margin-bottom:3px; color:#8a6735; font:700 7px Consolas,monospace; letter-spacing:.12em; }
.field-entry-copy b { display:block; margin:0 0 4px; color:#3c291a; font:800 14px/1 "Barlow Condensed",Impact,sans-serif; }
.field-entry-copy p { margin:0; color:#594734; font:9px/1.35 Consolas,monospace; }
.field-entry-copy small { display:block; margin-top:4px; color:#806844; font:700 7px/1.25 Consolas,monospace; }
.field-entry-rarity { display:block; margin-top:3px; color:#886631; font:700 7px Consolas,monospace; letter-spacing:.08em; }
.field-entry.rarity-legendary { border-color:#a77934; background:linear-gradient(145deg,#f6e1ad,#d4b26f); }
.field-entry.rarity-epic { border-color:#88708f; }
.field-entry.rarity-rare { border-color:#587b78; }
.field-entry.locked { color:#645a48; filter:saturate(.35); }
.field-entry.locked .field-entry-art { filter:brightness(0); opacity:.78; }
.field-entry.locked .field-entry-copy b { color:#50493e; letter-spacing:.12em; }
.field-entry.locked .field-entry-copy p { color:#766e5d; font-style:italic; }
.fieldbook-navigation { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding-top:13px; }
.fieldbook-navigation button { min-height:34px; padding:5px 10px; border:1px solid #b28a53; color:#e2c792; background:linear-gradient(#4c3521,#261a12); font:700 10px "Barlow Condensed",Impact,sans-serif; letter-spacing:.08em; cursor:pointer; }
.fieldbook-navigation button:last-child { justify-self:end; }
.fieldbook-navigation button:disabled { opacity:.42; cursor:default; }
.fieldbook-navigation span { color:#bda578; font:700 9px Consolas,monospace; letter-spacing:.1em; }

#hud .hud-bottom { display:grid; grid-template-columns:1fr; justify-items:center; gap:4px; padding:0 22px 16px; background:linear-gradient(0deg,rgba(22,18,14,.68),transparent 82%); }
#hud .hud-bottom > .health-wrap { width:min(790px,72vw); max-width:100%; margin:0 auto; padding:5px 12px; gap:9px; border:1px solid #d27e5b55; background:linear-gradient(100deg,rgba(32,23,16,.92),rgba(32,23,16,.72)); box-shadow:0 3px 12px #0005; }
#hud .hud-bottom .health-stack { min-width:0; max-width:none; }
#hud .hud-bottom .health-caption { margin-bottom:3px; }
#hud .hud-bottom .health-track { height:10px; }
#hud .hud-bottom .xp-wrap { width:min(790px,72vw); }

.character-card { width:min(520px,96vw); padding:32px 38px; border-color:#c69a58; background:radial-gradient(ellipse at 50% 30%,#604327d9,#211810f5 68%),linear-gradient(135deg,#3c2a1c,#211810); box-shadow:0 18px 55px #000c,inset 0 0 0 4px #e5c78511; }
.character-card::before { position:absolute; inset:8px; border:1px solid #d0a76055; content:""; pointer-events:none; }
.character-card canvas { width:184px; height:184px; margin:4px auto 16px; border:3px solid #d1a45f; outline:1px solid #79512c; outline-offset:4px; background:radial-gradient(circle,#7d5a36,#271b13 72%); box-shadow:0 10px 25px #0008; }
#character-shop-button { position:relative; z-index:1; max-width:340px; margin:13px auto 8px; font-size:15px; }

.western-death-dialog { overflow:hidden; border-color:#aa7042; background:radial-gradient(ellipse at 50% 0%,#60372188,transparent 52%),linear-gradient(160deg,#382519f7,#1c1713f7); box-shadow:0 18px 72px #000e,inset 0 0 0 4px #d5ac5a10,inset 0 0 38px #9a3d291c; }
.western-death-dialog::before { position:absolute; inset:7px; border:1px solid #b98a5266; content:""; pointer-events:none; }
.death-marker { display:grid; width:42px; height:50px; place-items:center; margin:0 auto 9px; border:1px solid #bd8b52; color:#dfbd7d; background:linear-gradient(#5b3b25,#281b13); font-size:27px; box-shadow:0 5px 14px #0008; }
.western-death-dialog h2 { margin-bottom:8px; color:#e7c59b; font-size:clamp(42px,7vw,62px); letter-spacing:.08em; text-shadow:0 3px #451f18,0 0 22px #a3443540; }
.western-death-dialog .eyebrow { color:#c3915d; }
.western-death-dialog .death-epitaph { margin:0; color:#baa486; font:italic 12px/1.5 Georgia,serif; }
.western-death-dialog .run-summary div { border:1px solid #b48a5730; background:linear-gradient(145deg,#44301f99,#17130fd9); }

.critical-health-overlay { --danger:0; position:absolute; z-index:2; inset:0; pointer-events:none; background:radial-gradient(ellipse at center,transparent 30%,rgba(112,7,5,calc(var(--danger)*.14)) 65%,rgba(139,8,6,calc(var(--danger)*.55)) 100%); box-shadow:inset 0 0 135px 18px rgba(150,12,8,calc(var(--danger)*.5)); transition:--danger .12s linear; }
#hud { z-index:3; }
.screen, .overlay-screen { z-index:5; }
.dev-toggle { border-color:#d28851a0; color:#ffd0a0; background:linear-gradient(#4a2d1c,#251811); }
.dev-toggle.active { color:#24180f; background:linear-gradient(#ffc478,#c77e3d); box-shadow:0 0 12px #ed9b4b85; }
.dev-panel { position:absolute; z-index:16; top:78px; left:16px; width:min(360px,calc(100vw - 32px)); padding:10px; border:1px solid #d5a75c; outline:1px solid #634020; outline-offset:3px; color:#e8d4ad; background:linear-gradient(145deg,#382719f5,#1c1713f5); box-shadow:0 10px 30px #000b,inset 0 0 0 3px #e0b96d13; pointer-events:auto; }
.dev-panel[hidden] { display:none!important; }
.dev-panel-heading { display:flex; justify-content:space-between; margin-bottom:8px; color:#f3d08a; font-size:9px; letter-spacing:.12em; }
.dev-panel-actions { display:flex; flex-wrap:wrap; gap:6px; }
.dev-panel-actions button { padding:7px 9px; border:1px solid #c29c625e; color:#e9d5ad; background:#2a2118; font:700 10px "Barlow Condensed",Impact,sans-serif; cursor:pointer; }
.dev-panel-actions button:hover { border-color:#f2cb76; color:#fff0c5; background:#624328; }
.dev-panel-actions #dev-final-boss { border-color:#ca7152; color:#ffc5a8; background:#51251d; }
.dev-panel-actions [data-dev-levels] { border-color:#e4c16f; color:#fff0b4; background:linear-gradient(#684b25,#342315); }
.dev-panel-actions #dev-add-coins { border-color:#d5a94d; color:#ffe18b; background:linear-gradient(#59431c,#2c2113); }
.shop-reset-zone { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding:12px 14px; border:1px solid #b28b584a; background:linear-gradient(110deg,#17120fdc,#302219cc); }
.shop-reset-zone > div:first-child b { color:#d9b97d; font:700 11px "Barlow Condensed",Impact,sans-serif; letter-spacing:.1em; }
.shop-reset-zone p { margin:4px 0 0; color:#a99675; font-size:9px; }
.shop-reset-button { flex:none; padding:9px 12px; border:1px solid #bd765a; color:#f0c1a3; background:linear-gradient(#4a2b20,#291914); font:700 10px "Barlow Condensed",Impact,sans-serif; letter-spacing:.05em; cursor:pointer; }
.shop-reset-button:hover { border-color:#ed9a70; color:#ffe0c4; background:linear-gradient(#633a29,#382017); }
.shop-reset-button:disabled { opacity:.45; cursor:not-allowed; }
.progress-reset-confirm { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:6px; position:absolute; z-index:3; right:8px; bottom:calc(100% + 7px); max-width:min(420px,92vw); padding:9px; border:1px solid #d3ad6d; background:linear-gradient(145deg,#382719,#1b1511); box-shadow:0 8px 22px #000b; }
.progress-reset-confirm[hidden] { display:none!important; }
.progress-reset-confirm span { margin:0 7px 0 2px; color:#f0dfbc; font-size:10px; }
.progress-reset-confirm button { padding:7px 9px; border:1px solid #b49561; color:#f1dfbc; background:#302216; font:700 9px "Barlow Condensed",Impact,sans-serif; cursor:pointer; }
.progress-reset-confirm #progress-reset-confirm-button { border-color:#c76f51; color:#ffd1b3; background:#51271e; }
@media (max-width:700px) {
  .shop-reset-zone { align-items:flex-start; flex-direction:column; }
  .shop-reset-button { align-self:stretch; }
  .progress-reset-confirm { left:4px; right:4px; max-width:none; justify-content:center; }
  #shop-screen { padding:8px; }
  #shop-screen .shop-dialog { max-height:98vh; }
  #shop-screen .skin-card { min-height:176px; }
  #shop-screen .skin-preview { width:72px; height:83px; }
  #hud .hud-bottom { gap:3px; padding:0 7px 9px; }
  #hud .hud-bottom > .health-wrap, #hud .hud-bottom .xp-wrap { width:min(96vw,700px); }
  #hud .hud-bottom > .health-wrap { padding:4px 8px; }
  .character-card { padding:25px 20px; }
  .character-card canvas { width:160px; height:160px; }
  .dev-panel { top:72px; left:8px; }
  .death-marker { width:35px; height:42px; }
}

/* v0.12.0 interface finish: frontier dispatch menu, collectible upgrade cards and tactical pause */
.overlay-screen { background:radial-gradient(ellipse at 50% 42%,rgba(40,26,16,.55),rgba(11,9,8,.84)); backdrop-filter:blur(4px) saturate(.78); }
#main-menu.menu-screen { padding-left:clamp(18px,8vw,126px); background:linear-gradient(90deg,rgba(12,10,8,.92),rgba(16,12,9,.82) 28%,rgba(17,13,10,.38) 58%,rgba(12,10,8,.12) 100%),linear-gradient(0deg,rgba(15,11,8,.34),transparent 44%,rgba(13,10,8,.22)); }
#main-menu .menu-card { position:relative; isolation:isolate; width:min(464px,92vw); padding:29px 34px 22px; border:1px solid #d9b36e99; outline:1px solid #50351e; outline-offset:5px; color:#f1e0bf; background:linear-gradient(145deg,rgba(45,31,20,.94),rgba(21,17,13,.96)); box-shadow:0 19px 58px #000c,inset 0 0 0 4px #d9b36e12,inset 0 0 34px #d69c4710; backdrop-filter:blur(5px); }
#main-menu .menu-card::before { position:absolute; z-index:-1; inset:7px; border:1px solid #d3b07342; content:""; pointer-events:none; }
#main-menu .menu-card::after { position:absolute; top:17px; right:18px; width:35px; height:35px; border-top:1px solid #d6ad6960; border-right:1px solid #d6ad6960; content:""; opacity:.8; }
.menu-kicker-row { display:flex; justify-content:space-between; gap:8px; margin:0 0 27px; padding-bottom:8px; border-bottom:1px solid #c09a5a44; color:#b8a077; font:700 7px Consolas,monospace; letter-spacing:.12em; }
#main-menu .menu-card .eyebrow { margin-bottom:10px; padding-left:10px; border-left:2px solid #c65d3c; color:#ddb56f; font-size:8px; letter-spacing:.2em; }
#main-menu h1 { font-size:clamp(72px,9vw,102px); letter-spacing:.025em; text-shadow:0 3px #3a2119,0 6px #1b110d,0 0 30px #0009; }
#main-menu .subtitle { margin:15px 0 16px; color:#d8c9a9; font:italic 15px Georgia,serif; letter-spacing:.02em; }
#main-menu .menu-rule { height:1px; margin:17px 0 12px; background:linear-gradient(90deg,#dc9e50,#a94d32 48%,transparent); box-shadow:0 1px #e3c68b21; }
#main-menu .menu-copy { margin-bottom:14px; color:#b3a182; font:10px/1.5 Consolas,monospace; }
#main-menu .menu-card > button { position:relative; display:flex; width:100%; min-height:39px; align-items:center; justify-content:flex-start; gap:10px; margin:6px 0; padding:8px 13px; border:1px solid #b7975c75; color:#eadab7; background:linear-gradient(100deg,#49341fdf,#251b14f2); box-shadow:inset 0 0 0 2px #edd18b08,0 3px 8px #0005; font:700 11px "Barlow Condensed",Impact,sans-serif; letter-spacing:.12em; text-align:left; transition:transform .16s,border-color .16s,filter .16s,box-shadow .16s; }
#main-menu .menu-card > button::before { display:grid; width:22px; height:22px; flex:none; place-items:center; border:1px solid #d1ad6a55; color:#e0bd77; background:#1c1711a8; font:12px Georgia,serif; content:"✦"; }
#main-menu #start-button { min-height:49px; border-color:#f1ce7c; color:#fff0ca; background:linear-gradient(105deg,#9a4e2f,#5e321e 64%,#342117); box-shadow:inset 0 0 0 2px #ffdf8b18,0 5px 15px #0008,0 0 20px #d37b3b22; font-size:14px; }
#main-menu #start-button::before { border-color:#f0d087; color:#fff0b7; content:"▶"; font-size:9px; }
#main-menu #character-button::before { content:"♟"; }
#main-menu #achievements-button::before { content:"★"; }
#main-menu #compendium-button::before { content:"▤"; }
#main-menu #shop-button::before { content:"◉"; }
#main-menu .menu-card > button:hover { transform:translateX(4px); border-color:#f0d28b; filter:brightness(1.16); box-shadow:inset 0 0 0 2px #edd18b15,0 5px 13px #0008; }
#main-menu .menu-card > button span { margin-left:auto; color:#f0ce79; font:700 9px Consolas,monospace; letter-spacing:.06em; }
#main-menu .menu-foot { display:flex; justify-content:space-between; gap:9px; margin-top:18px; padding-top:13px; border-top:1px solid #c09a5a3d; }
#main-menu .menu-foot span { display:flex; align-items:center; gap:6px; color:#f0d38f; font:700 8px Consolas,monospace; }
#main-menu .menu-foot i { color:#a99776; font-size:8px; font-weight:400; }
#main-menu .map-stamp { top:30px; right:clamp(18px,4vw,58px); padding:10px 13px; border-right:2px solid #d2a65c; background:linear-gradient(270deg,#17120cb8,transparent); }
#main-menu .map-stamp span { font-size:8px; }
#main-menu .map-stamp strong { font-size:22px; letter-spacing:.11em; }
#main-menu .map-stamp em { font-size:7px; }
#main-menu .version-button { border-color:#cfaa68; color:#edd7a8; background:linear-gradient(145deg,#39291b,#1b1510); box-shadow:0 5px 17px #0009; }

#upgrade-screen { background:radial-gradient(ellipse at 50% 40%,rgba(26,18,12,.66),rgba(8,7,6,.86)); }
#upgrade-screen .upgrade-dialog { width:min(1080px,96vw); max-height:94vh; overflow-y:auto; padding:28px 32px 22px; border:2px solid #c59a59; outline:1px solid #624326; outline-offset:4px; background:radial-gradient(ellipse at 50% 0%,#73512a45,transparent 55%),linear-gradient(145deg,rgba(43,31,21,.985),rgba(20,17,14,.99)); box-shadow:0 24px 82px #000e,inset 0 0 0 5px #e2c17a10,inset 0 0 45px #b7773310; }
#upgrade-screen .upgrade-dialog::before { position:absolute; inset:7px; border:1px solid #dfbd7852; content:""; pointer-events:none; }
#upgrade-screen .upgrade-dialog > .eyebrow { color:#daba77; font-size:9px; letter-spacing:.2em; }
#upgrade-screen .upgrade-dialog h2 { margin:0 0 19px; color:#f2dfb7; font-size:clamp(36px,5vw,55px); text-shadow:0 3px #21150e,0 0 19px #d29a3b24; }
#upgrade-screen .upgrade-grid { gap:19px; }
#upgrade-screen .upgrade-card { min-height:350px; padding:13px; border-width:2px; border-radius:3px; background:linear-gradient(145deg,rgba(71,54,35,.98),rgba(34,26,19,.99) 52%,rgba(24,20,16,.99)); box-shadow:inset 0 0 0 4px #d9bd7b12,inset 0 0 0 7px #231911,0 12px 28px #0009,0 0 27px var(--rarity-glow); }
#upgrade-screen .upgrade-card::before { inset:6px; border:1px solid color-mix(in srgb,var(--rarity) 60%,#7a5933); }
#upgrade-screen .upgrade-card::after { background:linear-gradient(90deg,transparent,rgba(255,239,188,.18),transparent); }
#upgrade-screen .upgrade-card:hover, #upgrade-screen .upgrade-card:focus-visible { transform:translateY(-7px) scale(1.02); outline:2px solid #fff0c2; outline-offset:3px; }
#upgrade-screen .rarity-label { top:22px; right:23px; padding:5px 7px; border:1px solid color-mix(in srgb,var(--rarity) 70%,transparent); background:#1b1712db; font-size:8px; }
#upgrade-screen .upgrade-art { height:145px; margin:5px 3px 13px; border-width:2px; background:radial-gradient(ellipse at 50% 68%,color-mix(in srgb,var(--rarity) 34%,transparent),transparent 68%),linear-gradient(145deg,#59442c,#201912); box-shadow:inset 0 0 0 4px #21181080,0 5px 13px #0007; }
#upgrade-screen .upgrade-art canvas { width:128px; height:128px; }
#upgrade-screen .upgrade-name { min-height:40px; margin:0 5px 6px; color:#f6e5bf; font-size:clamp(19px,2.1vw,25px); text-shadow:0 2px #1d130e; }
#upgrade-screen .upgrade-description { min-height:55px; margin:0 5px; color:#d1c09e; font-size:10px; line-height:1.5; }
#upgrade-screen .upgrade-rank { margin: auto 5px 3px; padding-top:11px; border-color:#d4b7793d; font-size:9px; }
#upgrade-screen .upgrade-actions { position:relative; z-index:1; margin-top:13px; }
#upgrade-screen .dialog-hint { color:#bea982; font-size:9px; letter-spacing:.06em; }

#pause-screen { background:radial-gradient(ellipse at 50% 42%,rgba(53,36,21,.45),rgba(8,7,6,.83)); }
#pause-screen .pause-dialog { width:min(500px,94vw); padding:31px 38px 24px; border:2px solid #c29a5b; outline:1px solid #56391f; outline-offset:4px; background:radial-gradient(ellipse at 50% 12%,#78502a45,transparent 44%),linear-gradient(150deg,#3e2c1cF5,#1a1511F7); box-shadow:0 24px 75px #000d,inset 0 0 0 5px #d9b8790c,inset 0 0 36px #a8753215; }
#pause-screen .pause-dialog::before { position:absolute; inset:7px; border:1px solid #d4ad6a62; content:""; pointer-events:none; }
.pause-insignia { position:relative; display:grid; width:62px; height:62px; place-items:center; margin:0 auto 14px; border:1px solid #d6b779; border-radius:50%; color:#f4d48a; background:radial-gradient(circle,#72512b,#241a12 69%); box-shadow:0 0 22px #daa64627,inset 0 0 15px #e7c67a24; }
.pause-insignia span { margin-left:3px; font:700 28px Georgia,serif; }
.pause-insignia i { position:absolute; inset:-6px; border:1px solid #d0a75a4a; border-radius:50%; }
#pause-screen .pause-dialog .eyebrow { margin-bottom:8px; color:#d3ae69; font-size:8px; }
#pause-screen .pause-dialog h2 { margin:0 0 9px; color:#f1dfbd; font-size:clamp(34px,5vw,46px); letter-spacing:.07em; text-shadow:0 3px #24170f; }
.pause-copy { margin:0 auto 18px; color:#bca987; font:italic 12px/1.55 Georgia,serif; }
.pause-snapshot { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:0 0 17px; }
.pause-snapshot div { display:grid; gap:5px; padding:9px 6px; border:1px solid #c4a36b45; background:linear-gradient(145deg,#483522a8,#201812e8); }
.pause-snapshot span { color:#a9936c; font:700 7px Consolas,monospace; letter-spacing:.14em; }
.pause-snapshot b { color:#f0d79c; font:700 19px "Barlow Condensed",Impact,sans-serif; }
#pause-screen .pause-dialog .primary-button,#pause-screen .pause-dialog .secondary-button { width:min(340px,100%); max-width:340px; min-height:43px; margin:8px auto; }
#pause-screen .pause-dialog .primary-button { border-color:#efc875; background:linear-gradient(110deg,#965131,#542d1d); box-shadow:0 5px 15px #0007,inset 0 0 0 2px #f4d49214; }
.pause-footer { margin:15px 0 0; padding-top:12px; border-top:1px solid #c2a06338; color:#9f8b67; font:700 7px Consolas,monospace; letter-spacing:.07em; }

#shop-screen .skin-preview { width:100px; height:120px; }
.roulette-slot canvas { width:51px; height:60px; }
@media (max-width:700px) {
  #main-menu.menu-screen { align-content:center; justify-items:center; padding:14px; background:linear-gradient(90deg,rgba(11,9,7,.86),rgba(12,10,8,.54)),linear-gradient(0deg,#120d09aa,transparent); }
  #main-menu .menu-card { width:min(460px,94vw); padding:20px 20px 16px; }
  .menu-kicker-row { margin-bottom:18px; font-size:6px; }
  #main-menu h1 { font-size:clamp(60px,16vw,84px); }
  #main-menu .subtitle { margin:11px 0; }
  #main-menu .menu-copy { margin-bottom:9px; }
  #main-menu .menu-card > button { min-height:34px; margin:4px 0; padding:6px 9px; font-size:10px; }
  #main-menu #start-button { min-height:42px; }
  #main-menu .menu-foot { margin-top:12px; padding-top:9px; }
  #main-menu .menu-foot span { gap:3px; font-size:7px; }
  #main-menu .map-stamp { top:9px; right:7px; padding:5px 7px; }
  #main-menu .map-stamp strong { font-size:13px; }
  #main-menu .map-stamp em { font-size:6px; }
  #upgrade-screen .upgrade-dialog { max-height:96vh; padding:18px 13px 15px; }
  #upgrade-screen .upgrade-dialog h2 { margin-bottom:12px; font-size:32px; }
  #upgrade-screen .upgrade-grid { gap:8px; }
  #upgrade-screen .upgrade-card { display:grid; grid-template-columns:72px minmax(0,1fr); grid-template-rows:auto auto 1fr auto; column-gap:8px; min-height:168px; padding:7px; }
  #upgrade-screen .rarity-label { top:9px; right:8px; padding:3px; font-size:6px; }
  #upgrade-screen .upgrade-art { grid-row:1 / 5; height:112px; margin:0; align-self:center; }
  #upgrade-screen .upgrade-art canvas { width:70px; height:70px; }
  #upgrade-screen .upgrade-category { grid-column:2; justify-self:start; align-self:end; margin:0 0 3px; font-size:6px; }
  #upgrade-screen .upgrade-name { grid-column:2; min-height:0; margin:0 0 5px; font-size:14px; }
  #upgrade-screen .upgrade-description { grid-column:2; min-height:0; margin:0; font-size:7px; line-height:1.3; }
  #upgrade-screen .upgrade-rank { grid-column:2; margin:6px 0 0; padding-top:5px; font-size:6px; }
  #upgrade-screen .upgrade-rank b { font-size:6px; }
  #upgrade-screen .reroll-upgrade-button { min-width:0; }
  #pause-screen .pause-dialog { padding:22px 19px 18px; }
  .pause-insignia { width:50px; height:50px; }
  #pause-screen .pause-dialog h2 { font-size:34px; }
  .pause-footer { font-size:6px; }
  #shop-screen .skin-preview { width:70px; height:84px; }
}
.fieldbook-dialog { min-height:min(710px,90vh); }
.field-entry-copy { display:grid; align-content:center; gap:2px; }
.field-entry-copy p { line-height:1.3; }
@media (max-width:700px) {
  .fieldbook-dialog { width:96vw; min-height:0; max-height:96vh; overflow-y:auto; padding:14px 11px; }
  .fieldbook-cover { grid-template-columns:42px minmax(0,1fr); gap:9px; margin-bottom:9px; padding:9px; }
  .book-emblem { width:38px; height:38px; font-size:19px; }
  .fieldbook-cover h2 { font-size:20px; }
  .fieldbook-cover .eyebrow { font-size:7px; }
  .fieldbook-cover p:last-child { font-size:8px; line-height:1.3; }
  .book-completion { grid-column:1 / -1; grid-template-columns:auto 1fr; align-items:center; text-align:left; }
  .book-completion i { grid-column:1 / -1; }
  .fieldbook-pages { flex:none; max-height:64vh; overflow-y:auto; padding:10px; }
  .fieldbook-spine { display:none; }
  .fieldbook-entries { grid-template-columns:1fr; grid-auto-rows:auto; gap:7px; height:auto; }
  .field-entry { grid-template-columns:54px minmax(0,1fr); min-height:88px; padding:5px 7px; }
  .field-entry-art { width:50px; height:58px; }
  .field-entry-copy b { font-size:12px; }
  .field-entry-copy p { font-size:8px; }
  .field-entry-copy small,.field-entry-rarity { font-size:6px; }
  .fieldbook-navigation { grid-template-columns:1fr auto 1fr; gap:5px; padding-top:9px; }
  .fieldbook-navigation button { min-height:34px; padding:4px; font-size:8px; }
  .fieldbook-navigation span { font-size:7px; }
}

/* v0.13.0 · frontera viva, mapas ilustrados, ficha de equipo y botica arcana */
#main-menu .menu-card { width:min(500px,94vw); padding:30px 38px 24px; }
#main-menu #start-button { min-height:60px; margin-top:10px; padding:11px 16px; border-width:2px; font-size:17px; letter-spacing:.16em; box-shadow:inset 0 0 0 2px #ffe6a12a,0 7px 18px #0009,0 0 28px #d37b3b36; }
#main-menu #start-button::before { width:27px; height:27px; font-size:11px; }
#main-menu #shop-button { min-height:51px; margin-top:9px; padding:10px 15px; border-color:#e0b96f; color:#f7e4b9; background:linear-gradient(100deg,#6b4c28e8,#302116f5); box-shadow:inset 0 0 0 2px #f2d18d13,0 5px 13px #0007; font-size:13px; }
#main-menu #shop-button::before { width:25px; height:25px; border-color:#dfbb71; color:#ffe19a; background:#392719; font-size:15px; }
#main-menu #shop-button span { font-size:11px; }
#main-menu #shop-button b { font-size:14px; }
#main-menu .menu-card > button:not(#start-button):not(#shop-button) { min-height:40px; }

/* The store used to be styled through a class that the screen does not have. */
#shop-screen { overflow:hidden; isolation:isolate; background:#1b140f; }
#shop-screen::before { position:absolute; z-index:0; inset:-18px; content:""; background-image:linear-gradient(90deg,rgba(17,12,9,.55),rgba(17,12,9,.18) 34%,rgba(17,12,9,.57)),linear-gradient(0deg,rgba(14,10,8,.61),transparent 42%,rgba(14,10,8,.32)),var(--shop-backdrop); background-size:cover; background-position:center 58%; filter:saturate(.9) brightness(.72); transform:scale(1.025); }
#shop-screen .shop-dialog { width:min(1260px,97vw); max-height:95vh; padding:clamp(16px,2.4vw,30px); background:linear-gradient(145deg,rgba(42,29,18,.92),rgba(23,17,12,.96)); }
#shop-screen .shop-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; align-items:start; gap:15px; }
#shop-screen .shop-main { min-width:0; }
#shop-screen .shop-tabs { gap:6px; margin:10px 0 12px; padding-bottom:8px; }
#shop-screen .shop-tab { min-width:0; min-height:40px; padding:8px 5px; font-size:clamp(9px,1vw,12px); letter-spacing:.045em; }
#shop-screen .shop-view { min-height:220px; }
#shop-screen .permanent-upgrades { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#shop-screen .permanent-card { grid-template-columns:38px minmax(0,1fr) auto; min-height:89px; gap:8px; padding:9px; }
#shop-screen .permanent-icon { width:36px; height:36px; font-size:18px; }
#shop-screen .permanent-info h3 { font-size:15px; }
#shop-screen .permanent-info p { font-size:7px; }
#shop-screen .permanent-buy { min-width:72px; padding:7px 5px; font-size:9px; }
#shop-screen .shop-loadout-panel { position:sticky; top:0; align-self:start; max-height:min(690px,72vh); overflow:auto; padding:13px 13px 15px; border:1px solid #d7ae6a99; outline:1px solid #634326; outline-offset:3px; color:#efdfbd; background:linear-gradient(155deg,rgba(75,52,31,.96),rgba(28,21,16,.97)); box-shadow:inset 0 0 0 3px #e2bf7510,0 8px 22px #0008; scrollbar-color:#977041 #20170f; }
.shop-loadout-heading { display:flex; justify-content:space-between; align-items:baseline; gap:6px; padding-bottom:7px; border-bottom:1px solid #ceaa684c; color:#f4d28a; font:800 11px "Barlow Condensed",Impact,sans-serif; letter-spacing:.13em; }
.shop-loadout-heading small { color:#b7a17b; font:700 6px Consolas,monospace; letter-spacing:.08em; }
.shop-loadout-portrait-frame { display:grid; place-items:center; width:116px; height:132px; margin:11px auto 6px; padding:4px; border:1px solid #deb971; outline:1px solid #76532e; outline-offset:3px; background:radial-gradient(ellipse,#a37b4b,#2a1c13 75%); box-shadow:0 7px 16px #0008; }
.shop-loadout-portrait-frame canvas { width:106px; height:122px; image-rendering:pixelated; }
#shop-character-name { margin:9px 0 2px; color:#f5e2ba; font:900 19px/1 "Barlow Condensed",Impact,sans-serif; text-align:center; }
.shop-character-skin { margin:0 0 10px; color:#d1ad69; font:700 7px Consolas,monospace; letter-spacing:.1em; text-align:center; }
.shop-loadout-stats { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.shop-loadout-stat { display:grid; gap:3px; min-width:0; padding:6px 7px; border:1px solid #d2aa6740; background:linear-gradient(140deg,#533b2588,#201710dd); }
.shop-loadout-stat span { overflow:hidden; color:#ac9671; font:700 6px Consolas,monospace; letter-spacing:.06em; text-overflow:ellipsis; white-space:nowrap; }
.shop-loadout-stat b { color:#f1d794; font:800 12px "Barlow Condensed",Impact,sans-serif; }
.shop-loadout-skills-heading { display:flex; flex-direction:column; gap:3px; margin:12px 0 6px; padding-top:8px; border-top:1px solid #c8a56643; }
.shop-loadout-skills-heading b { color:#e4c788; font:800 9px "Barlow Condensed",Impact,sans-serif; letter-spacing:.1em; }
.shop-loadout-skills-heading small { color:#9e8b6b; font:6px Consolas,monospace; }
.shop-loadout-skills { display:grid; gap:5px; }
.shop-loadout-skill { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:6px; padding:4px 5px; border:1px solid #c6a06042; background:#1f1711c9; }
.shop-loadout-skill canvas { width:30px; height:30px; border:1px solid #9f7a4e; background:#49331f; image-rendering:pixelated; }
.shop-loadout-skill span { display:grid; gap:2px; min-width:0; }
.shop-loadout-skill b { overflow:hidden; color:#e7d3ae; font:700 9px "Barlow Condensed",Impact,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.shop-loadout-skill small { color:#bb9b61; font:700 6px Consolas,monospace; }
.shop-loadout-empty { margin:8px 0 0; color:#ae9b7a; font:italic 9px/1.55 Georgia,serif; text-align:center; }
.shop-option-card { display:grid; grid-template-columns:54px minmax(0,1fr) auto; align-items:center; gap:13px; margin:13px 0; padding:16px; border:1px solid #d3ad687a; background:linear-gradient(140deg,#674727ba,#211810f4); box-shadow:inset 0 0 20px #eab75212,0 8px 24px #0005; }
.shop-option-seal { display:grid; width:48px; height:48px; place-items:center; border:1px solid #dfba74; border-radius:50%; color:#f4d38e; background:radial-gradient(circle,#77522d,#24180f); font-size:22px; box-shadow:0 0 16px #d39d482a; }
.shop-option-card b { color:#f0dfbd; font:800 15px "Barlow Condensed",Impact,sans-serif; letter-spacing:.07em; }
.shop-option-card p { margin:5px 0 0; color:#b5a17e; font:9px/1.5 Consolas,monospace; }
.shop-option-toggle { display:grid; justify-items:center; gap:6px; color:#e2c88f; font:700 7px Consolas,monospace; text-align:center; }
.shop-option-toggle input { position:absolute; width:1px; height:1px; opacity:0; }
.option-switch { position:relative; width:46px; height:24px; border:1px solid #987448; border-radius:14px; background:#211811; box-shadow:inset 0 2px 5px #0009; cursor:pointer; }
.option-switch::after { position:absolute; top:3px; left:3px; width:16px; height:16px; border:1px solid #85613a; border-radius:50%; background:linear-gradient(#bf9b62,#6e4a29); content:""; transition:transform .18s; }
.shop-option-toggle input:checked + .option-switch { border-color:#8aaf8e; background:#344733; }
.shop-option-toggle input:checked + .option-switch::after { transform:translateX(21px); border-color:#c8e0aa; background:linear-gradient(#d5e2a8,#80935b); }
.shop-option-toggle input:focus-visible + .option-switch { outline:2px solid #f4d38e; outline-offset:3px; }

#map-select-screen { isolation:isolate; }
#map-select-screen::before { position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 50% 12%,#85572f66,transparent 52%),linear-gradient(180deg,#16100dcc,#0b0908ee); content:""; }
#map-select-screen .map-select-dialog { position:relative; z-index:1; width:min(1130px,97vw); max-height:96vh; padding:clamp(17px,2.5vw,30px); border:2px solid #d3a45f; outline:1px solid #593b22; outline-offset:4px; background:radial-gradient(ellipse at 50% 0%,#98632c32,transparent 48%),linear-gradient(145deg,#39281bea,#1b1511f5); box-shadow:0 25px 80px #000d,inset 0 0 0 4px #dfbd7610; }
#map-select-screen .map-select-dialog > .eyebrow { color:#dfb86f; }
#map-select-screen .map-select-dialog > h2 { margin:2px 0 16px; color:#f0dfbc; font-size:clamp(31px,4vw,43px); text-shadow:0 3px #24160f; }
.map-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.map-choice { position:relative; display:block; min-width:0; min-height:0; height:clamp(230px,31vh,290px); overflow:hidden; padding:0; border:1px solid #c49b5a90; color:#f4e2bc; background:#211811; text-align:left; box-shadow:0 7px 20px #0008,inset 0 0 0 3px #f0d18a0a; transition:transform .2s,border-color .2s,box-shadow .2s; }
.map-choice-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 53%; filter:saturate(.82) brightness(.72); transition:transform .35s,filter .25s; }
.map-choice-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:stretch; padding:12px 13px 11px; background:linear-gradient(180deg,#17100c9c,transparent 31%,#130d09b8 59%,#110c09f5 100%); }
.map-choice-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.map-choice-mark { display:grid; width:28px; height:28px; place-items:center; border:1px solid #d8b66f; color:#ffe39c; background:#21160edc; font:800 13px "Barlow Condensed",Impact,sans-serif; }
.map-choice-status { padding:4px 6px; border:1px solid #d6ad6766; color:#eed399; background:#20160dbd; font:700 6px Consolas,monospace; letter-spacing:.08em; }
.map-choice-chapter { margin-top:auto; color:#f0c978; font:700 7px Consolas,monospace; letter-spacing:.14em; }
.map-choice-title { margin:3px 0 4px; color:#fff0cf; font:900 clamp(19px,2.2vw,27px)/.95 "Barlow Condensed",Impact,sans-serif; letter-spacing:.04em; text-shadow:0 2px 5px #000d; }
.map-choice-subtitle { color:#d4c3a3; font:italic 9px/1.35 Georgia,serif; text-shadow:0 1px 3px #000; }
.map-choice-footer { display:flex; justify-content:space-between; align-items:flex-end; gap:8px; margin-top:10px; padding-top:7px; border-top:1px solid #d9b66b52; }
.map-choice-footer small { color:#b6a17d; font:700 6px/1.3 Consolas,monospace; letter-spacing:.04em; }
.map-choice-footer small:last-child { max-width:58%; color:#deca9f; text-align:right; }
.map-choice:not(:disabled):hover,.map-choice.selected { transform:translateY(-4px); border-color:#ffdb85; box-shadow:0 12px 26px #000a,0 0 0 2px #f0c86a52,0 0 24px #e3ad4b32; }
.map-choice:not(:disabled):hover .map-choice-art,.map-choice.selected .map-choice-art { transform:scale(1.045); filter:saturate(1.02) brightness(.88); }
.map-choice.selected .map-choice-overlay { background:linear-gradient(180deg,#17100c76,transparent 27%,#130d099e 55%,#110c09f4 100%); }
.map-choice.locked,.map-choice.upcoming { cursor:not-allowed; filter:none!important; opacity:1; }
.map-choice.locked .map-choice-art { filter:grayscale(1) brightness(.34); }
.map-choice.upcoming .map-choice-art { filter:grayscale(.28) brightness(.52); }
.map-choice.locked .map-choice-status { color:#b8a47f; border-color:#ad895758; }
.difficulty-heading { margin:0 0 7px; color:#d9ba78; }
#map-select-screen .difficulty-choice { min-height:72px; }
#map-select-screen .primary-button { min-height:50px; font-size:17px; box-shadow:inset 0 0 0 2px #f4d49222,0 6px 16px #0008,0 0 22px #d37b3b23; }

/* The field guide now sits inside an amber-lit frontier apothecary. */
#compendium-screen { isolation:isolate; overflow:hidden; background:#19130f; }
#compendium-screen::before { position:absolute; z-index:0; inset:-15px; background-image:linear-gradient(90deg,#100d0be6,#100d0b99 38%,#100d0bc7),linear-gradient(0deg,#130d0b99,transparent 70%),var(--arcane-backdrop); background-size:cover; background-position:center 57%; filter:brightness(.7) saturate(.82); transform:scale(1.025); content:""; }
#compendium-screen .fieldbook-dialog { position:relative; z-index:1; width:min(1140px,97vw); min-height:0; max-height:94vh; padding:18px; border-color:#bd985f; background:linear-gradient(145deg,rgba(40,29,21,.92),rgba(20,16,13,.96)); box-shadow:0 25px 85px #000e,inset 0 0 0 4px #d3af7020; }
#compendium-screen .fieldbook-cover { grid-template-columns:54px minmax(0,1fr) 150px; gap:13px; margin-bottom:9px; padding:9px 15px; border-color:#c7a26680; background:linear-gradient(100deg,#53381fcc,#241a15ef 53%,#34403bdb); }
#compendium-screen .book-emblem { width:45px; height:45px; border-color:#8ab2a0; color:#b8d1b0; background:radial-gradient(circle,#425748,#201913); box-shadow:0 0 20px #8abd9a34,inset 0 0 15px #c7e0c330; }
#compendium-screen .fieldbook-cover .eyebrow { color:#b8ceaa; }
#compendium-screen .fieldbook-cover h2 { font-size:clamp(19px,2.4vw,27px); }
#compendium-screen .fieldbook-pages { min-height:0; padding:10px 16px; border-color:#baa06e; background:linear-gradient(90deg,#dfcfab 0%,#f0e3c1 48.6%,#675239 49.8%,#46351f 50%,#f0e2bf 51.5%,#dac69b 100%); }
#compendium-screen .fieldbook-pages::before { background:repeating-linear-gradient(0deg,transparent 0 26px,#6b553716 27px 28px); }
#compendium-screen .fieldbook-entries { grid-auto-rows:minmax(76px,1fr); gap:6px 27px; }
#compendium-screen .field-entry { grid-template-columns:52px minmax(0,1fr); gap:6px; min-height:0; padding:4px 6px; background:linear-gradient(145deg,#f4e8cceF,#ddcba3f2); }
#compendium-screen .field-entry-art { width:48px; height:55px; border-color:#a98b5f; background:radial-gradient(ellipse,#fbf1d6,#c5b28a); }
#compendium-screen .field-entry-category { margin-bottom:2px; font-size:6px; }
#compendium-screen .field-entry-copy b { margin-bottom:2px; font-size:11px; }
#compendium-screen .field-entry-copy p { font-size:7px; line-height:1.22; }
#compendium-screen .field-entry-copy small { margin-top:2px; font-size:6px; line-height:1.18; }
#compendium-screen .field-entry-rarity { margin-top:2px; font-size:6px; }
#compendium-screen .fieldbook-navigation { padding-top:8px; }
#compendium-screen .fieldbook-navigation button { min-height:32px; }

/* Case roulette becomes a full-screen event, with owned skins clearly marked. */
#roulette-shell[hidden] { display:none !important; }
#roulette-shell { position:fixed; z-index:80; inset:0; display:grid; place-items:center; overflow:auto; padding:clamp(12px,3vw,36px); background:rgba(12,9,7,.84); backdrop-filter:blur(9px) saturate(.75); }
#roulette-shell::before { position:fixed; inset:0; background:radial-gradient(ellipse at 50% 34%,#8b5d3166,transparent 45%),linear-gradient(135deg,#130d0beF,#21170feF 50%,#0d0a09f5); content:""; }
.roulette-presentation { position:relative; z-index:1; width:min(1040px,95vw); max-height:94vh; overflow:auto; padding:clamp(18px,3vw,34px); border:2px solid #d3ad6b; outline:1px solid #654424; outline-offset:4px; color:#f0dfbd; background:radial-gradient(ellipse at 50% 0%,#d49b4d24,transparent 48%),linear-gradient(145deg,#3b291beF,#1b1511f7); box-shadow:0 24px 90px #000e,inset 0 0 0 5px #e5c78412; text-align:center; }
.roulette-presentation > .eyebrow { margin:0 0 5px; color:#dcbc7a; font-size:8px; letter-spacing:.19em; }
.roulette-title { margin:0 0 18px; color:#f1dfbd; font:900 clamp(31px,5vw,48px)/1 "Barlow Condensed",Impact,sans-serif; letter-spacing:.075em; text-shadow:0 3px #25170e,0 0 20px #d9ab5730; }
#roulette-shell .roulette-window { position:relative; width:100%; height:245px; margin:0 auto; overflow:hidden; border:2px solid #b9945b; background:linear-gradient(90deg,#100d0b,#43301f 50%,#100d0b); box-shadow:inset 0 0 36px #000b,0 8px 24px #0009; }
#roulette-shell .roulette-track { gap:10px; height:100%; padding:9px 0; }
#roulette-shell .roulette-slot { flex:0 0 176px; width:176px; height:218px; padding:8px 6px; border-color:#8a7350; background:linear-gradient(145deg,#4b3928,#211812); }
#roulette-shell .roulette-slot canvas { display:block; width:92px; height:108px; margin:0 auto; image-rendering:pixelated; filter:drop-shadow(0 4px 6px #000b); }
#roulette-shell .roulette-slot small { color:#bca77e; font-size:8px; }
#roulette-shell .roulette-slot b { max-width:160px; color:#e6d5b0; font-size:14px; line-height:1.08; }
#roulette-shell .roulette-slot.legendary { border-color:#efc65f; }
#roulette-shell .roulette-slot.owned { border-color:#8bb89a; box-shadow:inset 0 0 0 2px #8bb89a40,0 0 13px #70b88d30; }
#roulette-shell .roulette-slot.newly-unlocked { border-color:#ffe080; box-shadow:inset 0 0 0 2px #ffe0808c,0 0 22px #f4cb5aaa; }
#roulette-shell .roulette-portrait.locked-silhouette { filter:brightness(0)!important; opacity:.9; }
#roulette-shell .roulette-pointer { top:0; bottom:0; left:50%; height:auto; width:3px; background:linear-gradient(180deg,transparent,#ffdf86 18%,#fff2c2 50%,#ffdf86 82%,transparent); box-shadow:0 0 15px #edc66d; }
#roulette-shell .roulette-pointer::before { top:0; border-top:12px solid #ffe28b; }
#roulette-shell .roulette-pointer::after { bottom:0; border-bottom:12px solid #ffe28b; }
#roulette-shell .roulette-result { margin:15px 0 0; color:#d9c394; font-size:15px; }
#roulette-shell .roulette-result.revealed { color:#ffe1a0; font-size:18px; text-shadow:0 0 16px #e7bb5e78; }
#roulette-reward-card[hidden] { display:none !important; }
.roulette-reward-card { position:relative; display:grid; grid-template-columns:minmax(190px,260px) minmax(0,1fr); grid-template-rows:auto auto 1fr auto; align-items:center; gap:5px 20px; width:min(690px,100%); min-height:300px; margin:14px auto 0; padding:18px 23px; border:2px solid #e5c16f; outline:1px solid #76542f; outline-offset:4px; background:radial-gradient(ellipse at 18% 50%,#d9a84f29,transparent 48%),linear-gradient(140deg,#594027,#231a13 67%,#17120f); box-shadow:inset 0 0 0 4px #f2d99319,0 12px 32px #000a,0 0 38px #e4ba5e22; animation:reward-card-land .56s cubic-bezier(.17,.83,.24,1) both; text-align:left; }
.roulette-reward-card::before { position:absolute; width:8px; height:8px; border:1px solid #f4d98e; background:#a87b3c; content:""; }
.roulette-reward-card > span { grid-column:2; color:#e1c179; font:700 8px Consolas,monospace; letter-spacing:.16em; }
.roulette-reward-card canvas { grid-column:1; grid-row:1 / 5; width:min(230px,100%); height:264px; object-fit:contain; justify-self:center; image-rendering:pixelated; filter:drop-shadow(0 8px 12px #000b); }
.roulette-reward-card h3 { grid-column:2; margin:0; color:#f5e3bd; font:900 clamp(24px,4vw,39px)/.98 "Barlow Condensed",Impact,sans-serif; text-shadow:0 2px #21140d; }
.roulette-reward-card p { grid-column:2; margin:0; color:#c7b391; font:10px/1.5 Consolas,monospace; }
.roulette-reward-card > strong { grid-column:2; padding-top:10px; border-top:1px solid #d5b27359; color:#f3d481; font:800 10px/1.4 "Barlow Condensed",Impact,sans-serif; letter-spacing:.1em; }
.roulette-reward-card.duplicate-reward { border-color:#9bc2a1; box-shadow:inset 0 0 0 4px #b7dd9f14,0 12px 32px #000a,0 0 34px #84bd8c25; }
.roulette-reward-card.duplicate-reward > strong { color:#a9d5aa; }
#roulette-dismiss { width:min(300px,100%); min-height:45px; margin:17px auto 0; }
@keyframes reward-card-land { from { opacity:0; transform:translateY(24px) scale(.94) rotate(-1deg); } to { opacity:1; transform:translateY(0) scale(1) rotate(0); } }

@media (max-width:850px) {
  #shop-screen .shop-dialog { max-height:96vh; }
  #shop-screen .shop-layout { grid-template-columns:minmax(0,1fr) 235px; gap:11px; }
  #shop-screen .permanent-upgrades { grid-template-columns:1fr; }
  .shop-loadout-panel { max-height:69vh; }
}
@media (max-width:700px) {
  #main-menu .menu-card { padding:22px 21px 17px; }
  #main-menu #start-button { min-height:52px; font-size:14px; }
  #main-menu #shop-button { min-height:46px; }
  #shop-screen .shop-layout { grid-template-columns:1fr; }
  #shop-screen .shop-dialog { overflow-y:auto; }
  #shop-screen .shop-loadout-panel { position:relative; top:auto; display:grid; grid-template-columns:92px minmax(0,1fr); align-items:center; column-gap:10px; max-height:300px; padding:10px; }
  .shop-loadout-heading { grid-column:1/-1; }
  .shop-loadout-portrait-frame { grid-column:1; grid-row:2/5; width:84px; height:96px; margin:5px auto; }
  .shop-loadout-portrait-frame canvas { width:76px; height:88px; }
  #shop-character-name,.shop-character-skin { grid-column:2; margin:2px 0; text-align:left; }
  .shop-loadout-stats { grid-column:2; }
  .shop-loadout-skills-heading,.shop-loadout-skills,.shop-loadout-empty { grid-column:1/-1; }
  .shop-loadout-skills { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:106px; overflow:auto; }
  #map-select-screen .map-select-dialog { max-height:97vh; overflow-y:auto; }
  .map-card-grid { grid-template-columns:repeat(3,minmax(205px,1fr)); overflow-x:auto; padding:0 2px 6px; scroll-snap-type:x mandatory; }
  .map-choice { height:205px; scroll-snap-align:start; }
  #compendium-screen .fieldbook-dialog { width:96vw; max-height:96vh; overflow-y:auto; padding:12px; }
  #compendium-screen .fieldbook-cover { grid-template-columns:40px minmax(0,1fr); gap:8px; padding:8px; }
  #compendium-screen .book-emblem { width:36px; height:36px; font-size:17px; }
  #compendium-screen .fieldbook-cover h2 { font-size:18px; }
  #compendium-screen .book-completion { grid-column:1/-1; }
  #compendium-screen .fieldbook-pages { flex:none; max-height:64vh; overflow-y:auto; padding:8px; background:linear-gradient(145deg,#ead9b1,#d2bd90); }
  #compendium-screen .fieldbook-spine { display:none; }
  #compendium-screen .fieldbook-entries { grid-template-columns:1fr; grid-auto-rows:minmax(78px,auto); height:auto; }
  #compendium-screen .field-entry { grid-template-columns:50px minmax(0,1fr); }
  #roulette-shell { padding:8px; }
  .roulette-presentation { width:98vw; padding:17px 11px; }
  #roulette-shell .roulette-window { height:200px; }
  #roulette-shell .roulette-slot { flex-basis:145px; width:145px; height:176px; }
  #roulette-shell .roulette-slot canvas { width:74px; height:88px; }
  #roulette-shell .roulette-slot b { font-size:11px; }
  .roulette-reward-card { grid-template-columns:110px minmax(0,1fr); min-height:200px; gap:5px 10px; padding:10px; }
  .roulette-reward-card canvas { width:110px; height:154px; }
  .roulette-reward-card > span { font-size:6px; }
  .roulette-reward-card h3 { font-size:21px; }
  .roulette-reward-card p { font-size:8px; }
  .roulette-reward-card > strong { font-size:8px; }
}

/* Cuenta, sincronización y archivo de frontera */
#main-menu .menu-card > .cloud-menu-button { border-color:#a9c09b70; background:linear-gradient(100deg,#34402cdd,#211c16f2); }
#main-menu .cloud-menu-button::before { content:"◉"; color:#b8d0a5; }
.cloud-panel { position:absolute; z-index:40; inset:0; display:grid; place-items:center; padding:22px; background:radial-gradient(ellipse at 50% 45%,#09080655,#090806d9 73%),linear-gradient(135deg,#6b472b55,#14100de8); backdrop-filter:blur(7px); animation:panel-rise .2s ease-out both; }
.cloud-panel[hidden] { display:none; }
.cloud-card { position:relative; width:min(490px,96vw); max-height:min(92vh,760px); overflow:auto; padding:34px clamp(20px,5vw,42px) 26px; border:1px solid #d9b36e9c; outline:1px solid #50351e; outline-offset:5px; color:#f1e0bf; background:linear-gradient(145deg,#34261ddd,#19140ff7),url("assets/shop-interior-v09.png") center/cover; box-shadow:0 22px 70px #000d,inset 0 0 0 4px #d9b36e12,inset 0 0 48px #0008; }
.cloud-card::before { position:absolute; z-index:0; inset:8px; border:1px solid #d3b07342; content:""; pointer-events:none; }
.cloud-card > * { position:relative; }
.cloud-card .close-button { position:absolute; z-index:2; top:14px; right:17px; }
.cloud-card h2 { margin:0 22px 8px 0; color:#f4e2bd; font:900 clamp(30px,5vw,44px)/.95 "Barlow Condensed",Impact,sans-serif; text-shadow:2px 3px #27180f; }
.cloud-intro { margin:0 0 20px; color:#c7b391; font:11px/1.65 Consolas,monospace; }
.cloud-auth-form { display:grid; gap:12px; }
.cloud-auth-form label { display:grid; gap:6px; color:#e6d3ae; font:700 10px Consolas,monospace; letter-spacing:.06em; }
.cloud-auth-form input { width:100%; min-height:42px; padding:10px 12px; border:1px solid #c7a56b70; color:#f2e5c9; background:#160f0de8; outline:none; font:12px Consolas,monospace; }
.cloud-auth-form input:focus { border-color:#edca7c; box-shadow:0 0 0 2px #edca7c20; }
.cloud-auth-actions,.cloud-session-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.cloud-auth-actions .primary-button,.cloud-session-actions .primary-button,.cloud-auth-actions .secondary-button,.cloud-session-actions .secondary-button { min-height:42px; margin:0; padding:7px 10px; font-size:13px; }
.cloud-auth-form > small { color:#9c8b6d; font:9px/1.5 Consolas,monospace; }
.cloud-notice,.cloud-conflict-panel { display:grid; gap:7px; margin:12px 0; padding:14px; border:1px solid #d7ae6680; color:#d8c39d; background:#261a13eb; font:10px/1.55 Consolas,monospace; }
.cloud-notice b,.cloud-conflict-panel > b { color:#f0cd7d; font:800 13px "Barlow Condensed",Impact,sans-serif; letter-spacing:.08em; }
.cloud-notice span { color:#c7b391; }
.cloud-session-panel { display:grid; gap:13px; }
.cloud-session-user { display:flex; align-items:center; gap:11px; padding:12px; border:1px solid #b8c99855; background:#172017bb; }
.cloud-status-dot { width:11px; height:11px; flex:none; border-radius:50%; background:#a9d18f; box-shadow:0 0 13px #a9d18f8a; }
.cloud-session-user div { display:grid; gap:4px; min-width:0; }
.cloud-session-user small { color:#a6b18d; font:8px Consolas,monospace; letter-spacing:.16em; }
.cloud-session-user b { overflow-wrap:anywhere; color:#e4e5ca; font:700 12px Consolas,monospace; }
.cloud-conflict-panel { border-color:#cf845d; background:#291913f0; }
.cloud-conflict-panel > b { color:#edaa75; }
.cloud-conflict-panel p { margin:0; color:#cbb89b; font:10px/1.55 Consolas,monospace; }
.cloud-conflict-panel > div { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:3px; }
.cloud-conflict-panel button { min-height:43px; margin:0; padding:7px; border-color:#bd8d58; font-size:10px; line-height:1.25; }
.cloud-sync-status { min-height:34px; padding:9px 10px; border-left:2px solid #a8be8a; color:#c9d2ae; background:#10150fc2; font:9px/1.5 Consolas,monospace; }
.cloud-sync-status[data-kind="pending"] { border-color:#ddb767; color:#e6ca8d; }
.cloud-sync-status[data-kind="warning"] { border-color:#d58b5f; color:#efb386; }
.cloud-sync-status[data-kind="error"] { border-color:#c65d3c; color:#f0a08a; }
.cloud-sync-status[data-kind="local"] { border-color:#93836a; color:#bdad8e; }
.cloud-account-message { min-height:18px; margin:12px 0 0; color:#c4b28d; font:9px/1.55 Consolas,monospace; }
.cloud-account-message[data-kind="success"] { color:#bcd4a0; }
.cloud-account-message[data-kind="error"] { color:#e99b82; }
.cloud-account-message[data-kind="warning"] { color:#edb183; }
.cloud-local-note { margin-top:14px; padding-top:11px; border-top:1px solid #c7a56b33; color:#9c8b6d; font:8px/1.5 Consolas,monospace; text-align:center; }
@media (max-width:520px) {
  .cloud-panel { padding:13px; }
  .cloud-card { padding:28px 19px 22px; }
  .cloud-auth-actions,.cloud-session-actions { grid-template-columns:1fr; }
  .cloud-conflict-panel > div { grid-template-columns:1fr; }
}