/* Painterly 2D test: artwork occupies the screen; UI is a small action overlay. */
.hero-name .loot-counter{display:inline;font-size:11px;letter-spacing:0;color:#e4d6ad;margin-left:8px;white-space:nowrap}
.loot-counter b{font-weight:500;font-variant-numeric:tabular-nums;color:#fff0bc}
#loot-feed{position:absolute;top:122px;left:25px;width:275px;display:grid;gap:7px;pointer-events:none}
.loot-notice{display:flex;align-items:center;gap:10px;padding:9px 11px;border-left:2px solid #dec583;background:#173b36ed;color:#fff0c8;min-width:0}
.loot-notice img{width:36px;height:36px;object-fit:contain;flex:none;border:1px solid #d0c18855;border-radius:3px}
.loot-notice strong{display:block;font-size:14px;line-height:1.5;font-weight:500}
.loot-notice span{display:block;font-size:12px;line-height:1.6;color:#cce8d7;margin-top:2px}
#chapter-rewards{display:grid;gap:8px;max-width:295px;margin:0 0 20px}
#chapter-rewards .loot-notice{background:#1f453c;border:1px solid #d3c78f55}
#reward-history{display:grid;gap:6px}.receipt-heading{font-size:15px;font-weight:500;color:#e8d4a1;margin:24px 0 10px}
#reward-history .loot-notice{background:#15322ed9}
:root{--paper:#f7f0da;--gold:#e1c78b;--jade:#a4dbc6}
.vignette{background:linear-gradient(180deg,#102b3166 0,transparent 24%,transparent 76%,#132e3244 100%);box-shadow:none}
.menu{background:linear-gradient(90deg,#102b31ef,#102b319f 34%,#102b3112 75%)}
.menu-content{width:min(390px,90vw);margin-left:7vw}
.menu .eyebrow{color:#e1c992;letter-spacing:5px}
.menu h1{text-shadow:0 3px 20px #07242c;letter-spacing:12px}
.gold-rule{width:110px;background:linear-gradient(90deg,#e1c78b,transparent)}
.primary{background:linear-gradient(105deg,#e8dbb2,#bfcfb0);border-color:#f2dfa7;color:#213d39}
.secondary{background:#173a3bab;border-color:#bacdb04d}
.compare-link{color:#e7d7ac;font-size:13px;display:inline-flex;align-items:center;min-height:44px;margin-top:4px;text-underline-offset:5px}
.compare-link:focus-visible{outline:2px solid #f0d494;outline-offset:3px}
.vitals{width:260px;background:linear-gradient(90deg,#153739de,#15373900);padding:8px 14px 9px 8px;border-left:2px solid #e1c78b77;top:22px;left:25px;gap:12px}
.portrait{width:48px;height:52px;border-radius:4px;border:1px solid #d3c794;box-shadow:none}
.hero-name{font-size:14px;margin-bottom:7px}.hero-name span{font-size:11px}
.bar{height:13px;transform:none;border-color:#b9c6b37a}.bar span{font:11px/12px Arial,sans-serif;transform:none}
.health i{background:linear-gradient(90deg,#539981,#c0d7a0)}
.bar span{text-shadow:0 1px 2px #163b32,1px 0 #163b32}
.top-tools{top:26px;right:25px;gap:9px}.tool{width:40px;height:40px;border-radius:4px;background:#193d39d9;border:1px solid #cfceac55}
.quest{top:25px;max-width:410px;min-width:280px;background:linear-gradient(90deg,transparent,#163936dc 20%,#163936d9 80%,transparent);padding:6px 18px;align-items:center}
.quest small{font-size:11px;letter-spacing:2px;color:#e4d6ad;margin-bottom:4px}.quest strong{font-size:16px}#direction{font-size:12px;color:#e8d391}
#journal{flex-basis:40px;height:40px;border-radius:50%;border-color:#cbb786;color:#f3dfb0;background:#22483ff0}
#guidance{left:50%;top:128px;bottom:auto;padding:6px 12px;max-width:420px;border-left:0;background:#173c39d9;text-align:center;border-radius:2px}
#guide-category{display:none}#guide-text{margin:0;font-size:13px;line-height:1.6}
body[data-stage=clear] #guidance,body[data-stage=boss] #guidance,body[data-stage=restore] #guidance,body[data-stage=clue] #guidance{display:none}
#boss-hud{top:124px;max-width:340px;background:#12302eab;padding:7px 14px 10px;border-radius:3px}#boss-hud span{font-size:18px;letter-spacing:4px}
#route-pin{font-size:13px;width:120px;margin-left:-60px;background:#173c38ca;line-height:27px}
.skillbar{bottom:52px;gap:20px}.skill{background:radial-gradient(circle at 35% 25%,#427b70f0,#193c3bed);border-color:#d1d8b594;box-shadow:0 3px 8px #09242c66;outline-color:#d1d8b538}
.skill.attack{background:radial-gradient(circle at 35% 25%,#b39d68,#49614a);border-color:#eddb9c}
.skill span{font-size:12px;color:#f5ebcf}.skill.suggested{outline-width:2px;outline-color:#f6dca4}
.skill .cooldown{font-family:system-ui,sans-serif;font-size:18px}.skill.unlearned .cooldown{font-size:10px}
.location{bottom:34px;left:27px}.location strong{font-size:25px}.location span{font-size:11px}.location small{font-size:12px}
.controls-hint{font-size:11px;color:#e3e5cf;letter-spacing:0}
#toast{top:auto;bottom:161px;max-width:480px;white-space:normal;text-align:center;font-size:13px;background:#153d38d9;line-height:1.6;letter-spacing:0;padding:5px 12px}#toast:empty{padding:0}
.interact{bottom:183px;left:50%;right:auto;transform:translateX(-50%);min-height:46px;border-radius:3px;background:#e4d6aa;color:#1d423d}
.enemy-label{font-size:12px;width:90px;margin-left:-45px;color:#fff1cc}.enemy-label i{height:4px}.damage-number{font-size:25px;text-shadow:0 2px 3px #183b39,1px 0 #183b39,-1px 0 #183b39}
.story-panel{background:#0b242858}.story-card{background:#173937f5;border-color:#bdbb8a99;box-shadow:0 14px 50px #0b242866}
.story-panel[data-panel=dialogue]{align-items:end;padding-bottom:max(34px,env(safe-area-inset-bottom))}
[data-panel=dialogue] .story-card{width:min(740px,100%);padding:22px 28px;max-height:60vh}
[data-panel=dialogue] .story-card h2{font-size:26px;margin-bottom:7px}
[data-panel=dialogue] .story-card p{font-size:15px;line-height:1.7;margin:6px 0 10px}
[data-panel=dialogue] #story-choices{display:flex;gap:12px}[data-panel=dialogue] .choice{margin-top:5px}
[data-panel=dialogue] #story-back{margin-top:8px;height:40px;min-height:40px}
[data-panel=dialogue] #story-copy{min-height:60px}
.choice{background:#31584bed}.equipment-item{background:#163931}
#loading{background:#1b3938;color:#eadbb1}
@media(pointer:coarse),(max-width:900px){
  #loot-feed{left:max(15px,env(safe-area-inset-left));top:95px;width:235px;gap:0}
  #loot-feed .loot-notice:not(:last-child){display:none}
  #loot-feed .loot-notice{padding:7px 9px;gap:8px}#loot-feed .loot-notice strong{font-size:13px}
  .vitals{width:205px;padding:5px 8px;left:max(15px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top))}.portrait{width:39px;height:43px}.hero-name{font-size:13px}
  .top-tools{right:max(15px,env(safe-area-inset-right));top:max(17px,env(safe-area-inset-top));gap:6px}
  .quest{left:51%;top:15px;min-width:0;max-width:calc(100vw - 420px);padding:5px 10px}.quest strong{font-size:14px}.quest small{font-size:10px;letter-spacing:1px}
  #guidance{top:98px;left:50%;transform:translateX(-50%);max-width:330px;width:max-content;padding:5px 10px}#guide-text{font-size:12px}
  .skillbar{left:auto;right:max(21px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));transform:none;width:182px;height:161px}.skill{width:54px;height:54px}.skill.attack{width:73px;height:73px;bottom:5px;right:0}.skill.nova{left:37px;top:0}.skill.wave{left:0;bottom:26px}.skill.dash{right:0;top:10px}
  #joystick{left:max(25px,env(safe-area-inset-left));bottom:max(34px,env(safe-area-inset-bottom));width:108px;height:108px;background:#183c3650;border-color:#d3e6c082}
  .skill span{font-size:11px}#joystick span{font-size:11px;color:#e7edd8}
  .interact{bottom:205px;left:auto;right:24px;transform:none}
  #toast{bottom:207px;left:25px;transform:none;max-width:calc(100vw - 215px);font-size:12px;padding:5px 8px}
  #boss-hud{top:101px;width:270px;left:53%}
}
@media(max-width:600px) and (orientation:portrait){
  #loot-feed{top:212px;left:15px;width:235px;max-width:calc(100vw - 30px)}
  .vitals{width:200px;left:14px;top:max(15px,env(safe-area-inset-top));padding:5px 7px}.portrait{width:35px;height:41px}.hero-name{font-size:12px}
  .tool{width:38px;height:38px}.top-tools{right:12px;gap:5px}.top-tools svg{width:22px;height:22px}
  .quest{top:86px;left:15px;transform:none;max-width:calc(100vw - 30px);width:calc(100vw - 30px);min-height:61px;padding:5px 10px;background:linear-gradient(90deg,#173b36ec,#173b3670);justify-content:flex-start;gap:10px}
  .quest small{display:none}.quest strong{font-size:14px}#direction{font-size:12px;margin-top:3px}#journal{height:39px;flex-basis:39px}
  #guidance{top:155px;left:15px;transform:none;width:calc(100vw - 30px);max-width:none;background:#173b36d9;text-align:left;padding:5px 10px}
  #boss-hud{top:156px;left:50%;width:calc(100vw - 50px);max-width:340px;padding:6px 12px}#boss-hud span{font-size:15px}
  .menu-content{margin:0 25px;width:calc(100% - 50px);padding:24px 0}.menu h1{font-size:68px}.menu .eyebrow{font-size:11px}.menu .prototype-note{font-size:11px;line-height:1.7}
  .menu{background:linear-gradient(90deg,#112e32ed,#163a3594 75%,#163a3520)}
  [data-panel=dialogue] .story-card{padding:20px;max-height:68dvh}.story-panel[data-panel=dialogue]{padding:16px 14px max(20px,env(safe-area-inset-bottom))}
  [data-panel=dialogue] .story-card h2{font-size:24px}[data-panel=dialogue] .story-card p{font-size:14px}[data-panel=dialogue] #story-choices{display:block}
  [data-panel=dialogue] .choice{min-height:46px;padding:10px 12px}.interact{bottom:205px;right:22px}
  #toast{max-width:calc(100vw - 192px);bottom:205px;left:18px}
}
@media(max-width:360px) and (orientation:portrait){
  .vitals{width:163px}.portrait{display:none}.top-tools{right:10px;gap:4px}
  #joystick{left:20px;width:88px;height:88px;bottom:43px}.joystick-ring{width:65px;height:65px}#stick{width:40px;height:40px}
  .skillbar{right:15px;width:166px;height:153px}.skill{width:48px;height:48px}.skill.attack{width:66px;height:66px}.skill.nova{left:34px}.skill.wave{left:0;bottom:28px}
}
@media(max-height:520px) and (orientation:landscape){
  #loot-feed{top:91px;left:25px;width:230px}
  .vitals{width:194px;top:12px}.top-tools{top:14px}.quest{top:12px;left:51%;max-width:285px}.quest small{display:none}.quest strong{font-size:13px}#direction{font-size:11px}
  #guidance{top:82px;max-width:315px}.skillbar{bottom:20px;width:174px;height:148px}.skill{width:48px;height:48px}.skill.attack{width:67px;height:67px}.skill.nova{left:38px}.skill.dash{top:8px}
  #joystick{width:91px;height:91px;bottom:30px}.joystick-ring{width:64px;height:64px}#stick{width:39px;height:39px}
  #boss-hud{top:82px;left:51%;width:260px}.interact{bottom:181px;right:24px;min-height:42px}#toast{bottom:30px;left:50%;transform:translateX(-50%);max-width:300px}
  .menu-content{width:520px;margin-left:6vw;padding:15px 0}.menu h1{font-size:48px}.menu h1 span{display:inline;margin:0;padding:0}.menu .eyebrow{margin-bottom:14px}
  .menu .secondary{height:40px}.menu .gold-rule{margin:14px 0}.menu .compare-link{margin-top:0}
  .story-panel[data-panel=dialogue]{padding:12px}[data-panel=dialogue] .story-card{padding:15px 22px;max-height:calc(100dvh - 24px);width:680px}
  [data-panel=dialogue] .story-card h2{font-size:23px}[data-panel=dialogue] .story-card p{font-size:13px}[data-panel=dialogue] #story-choices{display:flex}
}