/* Hero, shop and chronicle share the home screen's midnight / gold materials. */
body:has(:is(#tab-hero,#tab-shop,#tab-history):not(.hidden)){
  background:#05090c;
  color:#eee9de;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}
body:has(:is(#tab-hero,#tab-shop,#tab-history):not(.hidden)) .shell{
  isolation:isolate;
  position:relative;
  background:none;
  padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
}
body:has(:is(#tab-hero,#tab-shop,#tab-history):not(.hidden)) .shell:before{
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:620px;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(#05090c99,#05090cc9 40%,#05090c 100%),url('./assets/quest-forest-v1.png') center top/100% auto no-repeat;
  filter:brightness(.8) blur(3px);
  mask-image:linear-gradient(#000 75%,transparent);
}
:is(#tab-hero,#tab-shop,#tab-history).classic-window{
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  min-width:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}
:is(#tab-hero,#tab-shop,#tab-history).classic-window:before{display:none}
:is(#tab-hero,#tab-shop,#tab-history)>.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 16px;
  padding:5px 0 13px;
  min-height:48px;
  border:0;
  border-bottom:1px solid #c4a04988;
  border-radius:0;
  background:none;
  box-shadow:none;
}
:is(#tab-hero,#tab-shop,#tab-history)>.section-head h1{
  color:#f0e8d5;
  font:400 24px/1.2 Georgia,'Times New Roman',serif;
  text-shadow:0 1px 4px #000;
  margin:0;
}
:is(#tab-hero,#tab-shop,#tab-history)>.section-head .pill{
  border:1px solid #b79b5166;
  border-radius:9px;
  background:linear-gradient(#37311d77,#101712cc);
  padding:5px 8px;
  font-size:11px;
  line-height:1.4;
  color:#e3cc8e;
  white-space:nowrap;
  box-shadow:inset 0 1px 2px #ffe7a318;
  font-variant-numeric:lining-nums tabular-nums;
}
:is(#tab-hero,#tab-shop,#tab-history) .caption{
  display:flex;
  align-items:center;
  gap:8px;
  margin:22px 0 11px;
  color:#d9c58e;
  font-size:12px;
  letter-spacing:.08em;
}
:is(#tab-hero,#tab-shop,#tab-history) .caption:before{content:'◇';color:#e8c465;font-size:14px}
:is(#tab-hero,#tab-shop,#tab-history) :is(.callout,.rest-note,.section-sub){font-size:13px;line-height:1.6;color:#b9b5a6}
:is(#tab-hero,#tab-shop,#tab-history) .callout{
  padding:13px;
  border:1px solid #9d8b544d;
  border-radius:9px;
  background:linear-gradient(125deg,#1a251c99,#0a1115c9);
  box-shadow:inset 0 1px 2px #f4d8910c;
}
:is(#tab-hero,#tab-shop,#tab-history) :is(.primary,.sm-btn,.complete){
  min-width:44px;
  min-height:44px;
  border:1px solid #b3995788;
  border-radius:8px;
  background:linear-gradient(125deg,#4b402466,#141d17);
  color:#eadab0;
  box-shadow:inset 0 1px 3px #e3c26e26,0 0 5px #b7942510;
  font-family:inherit;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
:is(#tab-hero,#tab-shop,#tab-history) :is(.primary,.sm-btn,.complete):active{background:#4c4a2f88;border-color:#e7c868;box-shadow:0 0 9px #ebc44b33}
:is(#tab-hero,#tab-shop,#tab-history) :is(.primary,.sm-btn,.complete):disabled{opacity:.42}
:is(#tab-hero,#tab-shop,#tab-history) .primary{border-color:#dbba59;background:linear-gradient(#6c522c88,#27291a);color:#ffebaa;box-shadow:inset 0 1px 4px #ffe9aa33,0 0 8px #dfae2830}
:is(#tab-hero,#tab-shop,#tab-history) .danger{color:#dfb1a0;border-color:#9b6a5577}
:is(#tab-hero,#tab-shop,#tab-history) :is(.input,input,select){font-size:16px}
:is(#tab-hero,#tab-shop,#tab-history) .input{min-height:48px;background:#09130f;border:1px solid #8b7c4e77;border-radius:8px;color:#eee7d6;box-shadow:inset 0 1px 4px #0008}
:is(#tab-hero,#tab-shop,#tab-history) :is(.input,input,select):focus-visible{outline:2px solid #efd786;outline-offset:2px}

/* Hero: keep the game's paper-doll layout and the existing 1:2 sprite ratio. */
#tab-hero .reference-inventory.hero{
  padding:8px;
  border:1px solid #b79b5d;
  border-radius:13px;
  background:radial-gradient(ellipse at 5% 0,#cbb16e13,transparent 65%),linear-gradient(120deg,#0e181bf2,#080f13f2);
  box-shadow:inset 0 1px 5px #f5d98e2b,0 0 10px #c5a34020;
}
#tab-hero .reference-inventory.hero:before{display:none}
#tab-hero .reference-inventory .inventory-title{
  height:38px;
  border:0;
  border-bottom:1px solid #b59b514a;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#eee5ce;
  font:400 17px/1.3 Georgia,'Times New Roman',serif;
  gap:12px;
}
#tab-hero .reference-inventory .inventory-title:before{display:none}
#tab-hero .frame-flourish{font-size:18px;color:#bfa259;text-shadow:0 0 5px #e3b84f33}
#tab-hero .reference-inventory .inventory-body{padding:10px 0 0;gap:10px;grid-template-columns:45% minmax(0,1fr)}
#tab-hero .reference-inventory .character-stage{
  border-radius:9px;
  background:radial-gradient(ellipse at 50% 80%,#8f743a22,transparent 65%),linear-gradient(90deg,#081214,#152221 50%,#081214);
  box-shadow:inset 0 0 18px #02070888;
}
#tab-hero .reference-inventory .character-stage:after{box-shadow:inset 0 0 15px #02090a99}
#tab-hero .hall-backdrop{opacity:.25;background:linear-gradient(90deg,transparent 10%,#d1c6870d 50%,transparent 90%)}
#tab-hero .reference-inventory .warrior-art{filter:drop-shadow(0 0 2px #f4cf7844)}
#tab-hero .paperdoll-slot{border:1px solid #a28c4d55;border-radius:5px;background:linear-gradient(120deg,#151f1b,#091213);box-shadow:inset 0 1px 1px #e8d39311;color:#9b9f84}
#tab-hero .paperdoll-slot.occupied{border-color:#c3a456aa;background:linear-gradient(#3b3924bb,#132019);color:#d5c282;box-shadow:inset 0 1px 3px #e5c36b22,0 0 5px #b1912620}
#tab-hero .reference-inventory .character-ground{color:#ddbd6c;opacity:.5;filter:drop-shadow(0 0 3px #d7ab3240)}
#tab-hero .reference-inventory .character-heading{padding:10px 0 4px}
#tab-hero .reference-inventory .hero-title{font:400 19px/1.25 Georgia,serif;color:#f0e1bb;margin:4px 0}
#tab-hero .reference-inventory .eyebrow{font-size:10px;color:#b4aa86;letter-spacing:.05em}
#tab-hero .reference-inventory .sub{font:12px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;color:#bcb9a9}
#tab-hero .inventory-tabs{gap:5px;min-height:46px}
#tab-hero .inventory-tabs button{min-height:44px;border:1px solid #97834b77;border-radius:7px;background:linear-gradient(#222a20,#0c1616);font-family:inherit;font-size:14px;line-height:1.3;color:#bdb69e;box-shadow:inset 0 1px 2px #dfc78412;padding:8px 5px}
#tab-hero .inventory-tabs button[aria-selected=true]{border-color:#d5b35b;color:#f3dfa2;background:linear-gradient(#50462c88,#1b251a);box-shadow:inset 0 1px 3px #eed58a33,0 0 6px #d8af3130}
#tab-hero .inventory-count{color:#aaa58e;font-size:11px}
#tab-hero .inventory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid #a28b4d88;border-radius:7px;background:#060f12aa;box-shadow:inset 0 1px 5px #0007;scrollbar-color:#8b7a45 #0b1414}
#tab-hero .bag-slot{border:1px solid #817b5255;border-radius:5px;background:linear-gradient(130deg,#1b2723,#0c1516);box-shadow:inset 0 1px 2px #e9d68c0d}
#tab-hero .bag-slot.selected{border-color:#e4c169;box-shadow:inset 0 0 10px #e0b75a22,0 0 5px #e7bd4a44}
#tab-hero .reference-item-icon{border-color:#b49d5866;border-radius:3px}
#tab-hero .inventory-detail{border-top:1px solid #a18c4b33;padding-top:8px}
#tab-hero .inventory-detail strong{font:14px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;color:#e9dbb5}
#tab-hero .inventory-detail>span{font-size:12px;line-height:1.4;color:#b1b5a4}
#tab-hero .bag-wallet{color:#dfbf67;font:14px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-variant-numeric:tabular-nums}
#tab-hero .bag-wallet>span:last-child{border-color:#9c854555;border-radius:6px;background:#071214;color:#ebdfb6}
#tab-hero .reference-inventory .inventory-footer{margin-top:10px;padding:10px 4px 4px;border-color:#af96533d}
#tab-hero .reference-inventory .level-line strong{font:600 13px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;color:#e8d496;font-variant-numeric:tabular-nums}
#tab-hero .reference-inventory .level-line .xpval{color:#c6c7b6;font-size:12px;font-variant-numeric:tabular-nums}
#tab-hero .completed-count{color:#bdb58f}
#tab-hero .reference-inventory .track{border:1px solid #a1905666;border-radius:8px;background:linear-gradient(#363e32,#18241e);box-shadow:inset 0 1px 2px #0008;height:9px}
#tab-hero .reference-inventory .track div{border-radius:inherit;background:linear-gradient(90deg,#dbc57c,#edcd63);box-shadow:0 0 8px #d8b33c77}
#tab-hero>.gear-collection,#tab-hero>.ranks-detail{margin-left:0;margin-right:0}
#tab-hero .gear-card{min-height:76px;padding:12px;border:1px solid #99844e77;border-radius:10px;background:radial-gradient(ellipse at 10% 30%,#baa55613,transparent 75%),linear-gradient(125deg,#14221f,#0a1216);box-shadow:inset 0 1px 3px #ebd49013;color:#d9ddce}
#tab-hero .gear-card.equipped{border-color:#d1ae5c;box-shadow:inset 0 1px 4px #f0d6862b,0 0 8px #cfa53d33}
#tab-hero .gear-icon{color:#d5bd77;filter:drop-shadow(0 0 4px #b8963044)}
#tab-hero .gear-card strong{font-size:14px;font-weight:500;color:#ece4cf}
#tab-hero .gear-card>span:last-child{font-size:12px;color:#d1be89}
#tab-hero .gear-card:disabled{opacity:.43}
#tab-hero .ranks-detail{border:1px solid #9f874a66;border-radius:11px;background:#0d1716bb;padding:0 12px;margin-top:17px}
#tab-hero .ranks-detail>summary{min-height:48px;display:list-item;padding:12px 0;color:#dbcdab;font-size:15px}
#tab-hero :is(.rank.card,.achievement.card){border:1px solid #8f804c66;border-radius:9px;background:linear-gradient(120deg,#172820bb,#0c1616);box-shadow:inset 0 1px 3px #dcc67410;padding:13px}
#tab-hero .rank.unlocked{border-color:#c2a25299;box-shadow:inset 0 1px 3px #e1c25f22,0 0 5px #ba962126}
#tab-hero :is(.rank h3,.achievement strong){color:#e4dfcd;font-size:15px}
#tab-hero :is(.rank p,.achievement p){color:#aeb5a5;font-size:13px;line-height:1.5}
#tab-hero .rank-symbol,#tab-hero .achievement .symbol{color:#d3b566}
#tab-hero .rank .status{font-size:11px;color:#a8ac9c}
#tab-hero .rank.unlocked .status{color:#e3cf87}
#tab-hero .inventory-grid.quest-journal{background:#0a1414;border-color:#9c854d88;padding:9px}
#tab-hero .pocket-journal-heading{color:#e3d5ad;border-color:#bda05b55}
#tab-hero .pocket-quest{border-color:#9c8e5433}
#tab-hero .pocket-quest strong{color:#e7e4d6}
#tab-hero .pocket-quest p{color:#adb9ac}
#tab-hero .pocket-reward{color:#dfc47a}

/* Shop: cards and the selected reward are distinct luminous panels. */
#tab-shop .merchant-window.card{padding:0;border:1px solid #bba05b;border-radius:13px;background:linear-gradient(125deg,#11201c,#091216);box-shadow:inset 0 1px 4px #f2d28126,0 0 9px #b28c2822;overflow:hidden}
#tab-shop .merchant-window>.window-title{min-height:39px;padding:8px 13px;border:0;border-bottom:1px solid #ad94524d;background:linear-gradient(#4a402133,#101c17);color:#dec88e;font:15px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;box-shadow:inset 0 1px #edd78b20}
#tab-shop .merchant-layout{display:block}
#tab-shop .merchant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:11px;gap:9px;background:none}
#tab-shop .merchant-item{min-height:141px;gap:8px;padding:11px 7px;border:1px solid #9b8b5066;border-radius:9px;background:radial-gradient(ellipse at top,#a3934017,transparent 76%),linear-gradient(130deg,#182923,#0b1517);color:#e3e4d5;box-shadow:inset 0 1px 3px #e1cf8c12}
#tab-shop .merchant-item.selected{border-color:#e5c36c;background:radial-gradient(ellipse at top,#d4b45522,transparent 80%),linear-gradient(135deg,#263325,#101c17);box-shadow:inset 0 1px 4px #ffe8ab33,0 0 8px #dfb74833}
#tab-shop :is(.item-art,.preview-icon){border:1px solid #c5a75b88;border-radius:10px;background:radial-gradient(ellipse at 50% 25%,#aa8e4029,#15231a);box-shadow:inset 0 1px 3px #e1cb7e18,0 0 6px #b9942522;color:#e2c675}
#tab-shop .item-name{font-size:14px;line-height:1.35;color:#e5e5d7}
#tab-shop .item-price{font-size:13px;color:#d9be73;font-variant-numeric:tabular-nums}
#tab-shop .merchant-preview{padding:16px 13px;gap:8px 12px;border:0;border-top:1px solid #c2a45e77;background:radial-gradient(ellipse at 0 20%,#d6bb5820,transparent 60%),linear-gradient(#1b281d,#0c1616);box-shadow:inset 0 1px 3px #e9cd7922}
#tab-shop .merchant-preview h2{color:#efe3c3;font-size:18px;font-weight:500;line-height:1.35}
#tab-shop .merchant-preview p{font-size:14px;line-height:1.5;color:#b2bdaf}
#tab-shop .merchant-cost{font-size:17px;font-variant-numeric:tabular-nums;color:#e7c970}
#tab-shop .merchant-tools{gap:8px;border-color:#ac925055}
#tab-shop .merchant-tools .sm-btn{width:46px;min-height:44px}
#tab-shop .reward-editor{margin-top:18px;border:1px solid #a68d4e66;border-radius:11px;background:#101b17b3;padding:0 12px}
#tab-shop .reward-editor summary{min-height:48px;padding:12px 0;color:#decba1;font-size:14px}
#tab-shop .reward-editor .add{padding:0 0 14px;border:0;background:none;box-shadow:none}
#tab-shop .reward-editor .card-title{color:#d9c68f}
#tab-shop .reward-editor .input{margin:8px 0}
#tab-shop #saveReward{width:100%;margin-top:8px}
#tab-shop .purchase-row{display:flex;align-items:center;gap:10px;min-height:66px;padding:10px 12px;margin:8px 0;border:1px solid #9f8a4a66;border-radius:9px;background:linear-gradient(115deg,#1c281c,#0b1515);color:#d9decf;font-size:14px;line-height:1.4;box-shadow:inset 0 1px 2px #e2ca6b10}
#tab-shop .purchase-row>span:first-child{color:#d6b85c}
#tab-shop .purchase-row>span:nth-child(2){flex:1;min-width:0}
#tab-shop .purchase-row .sm-btn{font-size:13px;padding:8px;min-height:44px}
#tab-shop .used-mark{color:#b8c89d}
#tab-shop .rest-note{text-align:center;font-size:12px;margin:16px 0 0;color:#929e91}

/* Chronicle: a readable timeline rather than a heavy nested game window. */
#tab-history>.section-sub{font-size:13px;line-height:1.6;margin:0 0 16px;color:#aaa997}
#tab-history #historyList{padding:3px 14px!important;border:1px solid #b49a575c;border-radius:12px;background:linear-gradient(120deg,#14201ce8,#091215e8);box-shadow:inset 0 1px 4px #e4c66a18,0 0 8px #bd97231a}
#tab-history .event{position:relative;gap:12px;padding:16px 0;border-color:#a9945930}
#tab-history .event:last-child{border-bottom:0}
#tab-history .event .dot{margin-top:7px;width:7px;height:7px;flex-shrink:0;background:#dec372;box-shadow:0 0 7px #edbf4766;border:1px solid #f7de91}
#tab-history .event .body{font-size:14px;line-height:1.55;color:#dddccd;overflow-wrap:anywhere}
#tab-history .event .date{margin-top:5px;font-size:11px;line-height:1.4;color:#b3a781;font-variant-numeric:tabular-nums}
#tab-history .controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:17px 0}
#tab-history .controls .sm-btn{width:100%;font-size:13px;line-height:1.4;padding:10px 7px;min-height:52px;white-space:normal}
#tab-history #undoBtn{grid-column:1/-1;min-height:46px}
#tab-history #resetBtn{grid-column:1/-1;min-height:44px;background:#321f171f;color:#c89582;border-color:#8f655044;box-shadow:none}
#tab-history .empty{padding:22px 6px!important;color:#b3b5a4;font-size:14px;line-height:1.6}
@media(max-width:380px){
  #tab-hero .reference-inventory .inventory-body{grid-template-columns:44% minmax(0,1fr);gap:7px}
  #tab-hero .reference-inventory .character-stage{height:282px}
  #tab-hero .reference-inventory .hero-title{font-size:17px}
  #tab-hero .inventory-grid{gap:3px}
  #tab-hero .gear-card{grid-template-columns:38px minmax(0,1fr) auto;gap:8px;padding:10px}
  #tab-hero .gear-card strong{font-size:13px}
  #tab-hero .gear-card>span:last-child{font-size:11px}
}