/* v0.72 · the Gloaming Shore's keepers, Orrin's forge, the seasons, the Crownshard Exchange, Biome relics and the
   new vitals. Same ink, brass and lantern-light as the rest of the Ruin. */
:root{--r0:#b1bdc9;--r1:#74dfaa;--r2:#79b9ff;--r3:#edc675;--r4:#dba7ff;--rb:#ff8f70;--v7ink:#0e0b17;--v7panel:#13202a;--v7line:#2c3c42}

/* ------------------------------------------------------------------ the vitals (health · ability · draughts) */
.vitalRow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;margin-top:7px;font:10px/1 var(--pixel);letter-spacing:.6px;color:#b9c5c2}
.vitalLabel{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.vitalLabel b{font-weight:400;overflow:hidden;text-overflow:ellipsis;color:#dfe6dc}
.vitalRow kbd{display:inline-grid;place-items:center;min-width:16px;height:15px;padding:0 3px;border:1px solid #5a6b68;border-bottom-width:2px;border-radius:3px;background:#18242a;color:#e7dcb8;font:9px var(--pixel)}
.vitalValue{font-variant-numeric:tabular-nums;color:#c9d4cf;text-align:right}
#playerHud .bar.ability{grid-column:1/-1;height:6px;margin:0;border-radius:2px;background:#0c1418;box-shadow:inset 0 0 0 1px #2a3a40;overflow:hidden;position:relative;display:block}
#playerHud .bar.ability i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2f5f9a,#5fa2e8 70%,#a9d6ff);transition:width .12s linear;position:relative}
.potionRow{grid-template-columns:auto 1fr auto}
.potionRow .flasks{justify-self:end}
#playerHud .abilityRow[data-state="ready"] .bar.ability i{background:linear-gradient(90deg,#4f8fd0,#8fd0ff 60%,#e4f6ff);box-shadow:0 0 8px #7cc4ff88}
#playerHud .abilityRow[data-state="ready"] .bar.ability i::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff88 45%,transparent 60%);background-size:220% 100%;animation:v7sheen 2.4s linear infinite}
.abilityRow[data-state="ready"] .vitalValue{color:#bfe4ff}
.abilityRow[data-state="charging"] .vitalValue{color:#8fa4b4}
#playerHud .abilityRow[data-state="none"] .bar.ability i,#playerHud .abilityRow[data-state="dead"] .bar.ability i{width:0!important}
.abilityRow[data-state="none"] .vitalValue{color:#e0a26b;min-width:0;font-size:9px}
@keyframes v7sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.flasks{display:flex;gap:3px;align-items:center}
.flasks i{width:9px;height:12px;display:block;position:relative;clip-path:polygon(30% 0,70% 0,70% 25%,100% 45%,100% 100%,0 100%,0 45%,30% 25%)}
.flasks i.full{background:linear-gradient(180deg,#f5d2d0 0 22%,#e2525e 22% 70%,#a32d3c 70%);box-shadow:0 0 6px #e2525e66}
.flasks i.empty{background:linear-gradient(180deg,#3a4448 0 22%,#1c2428 22%);opacity:.75}
.potionRow[data-state="none"] .vitalValue{color:#e2525e}
.potionRow.drank .flasks{animation:v7drink .45s ease-out}
@keyframes v7drink{0%{transform:scale(1.25);filter:brightness(1.8)}100%{transform:none;filter:none}}

/* ------------------------------------------------------------------ Biome rarity and shinies on every tile */
.itemCard[data-tier="b"],.packSlot[data-tier="b"],.vaultTile[data-tier="b"]{background:radial-gradient(ellipse at 50% 45%,#7a3a2c55,#251c25 75%);border-color:#d77a5d}
#packPanel .packSlot[data-tier="b"].filled{border-color:#e8876a!important;background:radial-gradient(ellipse at 50% 42%,#6e3526,#211b23 72%)!important;box-shadow:inset 0 0 14px #0007,0 0 9px #ff8f7030!important}
.packSlot[data-tier="b"] .raritySigil{width:14px;height:14px;box-shadow:0 0 6px #ff8f7055,0 1px 2px #000a}
:is(#packPanel .packSlot.filled,.vaultTile.hasItem,.itemCard)[data-tier="b"]::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,#ffc4a833 48%,transparent 60%);background-size:260% 100%;animation:v7sheen 5.5s linear infinite}
#lootFanfare[data-tier="b"] .fanfareFlash{background:radial-gradient(ellipse at 50% 24%,#ffc4a888,#ff8f7033 35%,transparent 70%)}
#lootFanfare[data-tier="s"] .fanfareFlash{background:radial-gradient(ellipse at 50% 24%,#ffd6f588,#9cc8ff44 35%,transparent 70%)}
@media(prefers-reduced-motion:reduce){:is(#packPanel .packSlot.filled,.vaultTile.hasItem,.itemCard)[data-tier="b"]::after,.abilityRow[data-state="ready"] .bar.ability i::after{animation:none}}

/* ------------------------------------------------------------------ the world dock: Pass and Crownshards */
#passDock b,#shardDock b{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#e2525e;color:#fff;font:9px/16px var(--pixel);box-shadow:0 0 0 2px #0e0b17}
#passDock,#shardDock{position:relative}
#shardDock .shardIcon{width:16px;height:16px;image-rendering:pixelated;filter:drop-shadow(0 0 3px #b9a2ff88)}
#shardDock span{color:#d8c8ff;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ v0.73 · the keeper windows
   The angler, the kitchen, the forge and the pass live in the journal's docked window, beside the storage keepers.
   Everything inside wears the Ruin's own pixel frames: panels and cards are frame-button slates, a lit card is
   frame-hot, tiles are vault tiles. Titles in Ruin Gothic, labels in Ruin Script, names in Georgia. */
#app[data-win]{min-height:min(860px,var(--journal-max,90vh))}
#app[data-win] #keeperWin{display:block}
#keeperWin:not(.active){display:none}
.v7Win{color:#e9e4d8;--line:#ffffff14}
.v7WinBar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:4px 0 14px;padding-bottom:8px;border-bottom:2px solid #0e0b17;box-shadow:0 1px 0 #ffffff0d}
.v7Body{min-height:420px;animation:v7in .18s ease-out}
@keyframes v7in{from{opacity:.4;transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.v7Body{animation:none}}
body.v7Busy .v7Win button{cursor:progress}
.v7Icon{image-rendering:pixelated;vertical-align:middle;flex:none}
.v7Icon.s32{width:32px;height:32px}.v7Icon.s16{width:16px;height:16px}
/* tabs: the codex's own frame buttons; the open tab is lit */
.v7Tabs{display:flex;gap:6px;flex-wrap:wrap}
#app .v7Tabs button{display:inline-flex;align-items:center;gap:7px;padding:3px 10px!important;font:11px var(--pixel)!important;letter-spacing:.6px;color:#c9c2d8!important}
#app .v7Tabs button.on{border-image:var(--frame-hot) 8 fill / 8px / 0 stretch!important;color:#fde89a!important}
#app .v7Tabs button b{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;background:#e2525e;color:#fff;font:9px/16px var(--pixel);box-shadow:0 0 0 1px #0e0b17}
/* chips */
.v7Chips{display:flex;gap:6px;flex-wrap:wrap}
.v7Chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;background:#0e0b17;border:1px solid #5c4a2a;font:12px var(--pixel)}
.v7Chip b{font-weight:400;color:#fde89a;font-variant-numeric:tabular-nums}.v7Chip small{font-size:9px;color:#9a93a0;letter-spacing:.6px}
.v7Chip.shard b{color:#d8c8ff}.v7Chip.ess b{color:#f6d27a}.v7Chip.cin b{color:#ff9d6b}.v7Chip.rod b:empty{display:none}
/* cards and panels */
.v7Card{position:relative;border:8px solid transparent;border-image:var(--frame-btn) 8 fill / 8px / 0 stretch;image-rendering:pixelated;padding:6px 8px}
.v7Card.hot,.v7Card.ready{border-image:var(--frame-hot) 8 fill / 8px / 0 stretch}
.v7Card.claimed,.v7Card.owned{filter:saturate(.55) brightness(.85)}
.v7Win h2{font:24px/1.15 var(--gothic);letter-spacing:.02em;color:#f0e5ca;text-shadow:0 2px 0 #0e0b17;margin:2px 0 4px}
.v7Win h3{font:18px/1.2 Georgia,serif;color:#f2e7c9;margin:0}
.v7Win p{font-size:12px;line-height:1.55;color:#cfc7d8;margin:0}
.v7Win .eyebrow{display:block;font:9px var(--pixel);letter-spacing:2px;color:#ecc25a;margin:0 0 6px}
.v7Win .eyebrow.r{color:var(--rarity)}
.v7Lead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin:0 0 14px}
.v7Lead>div:first-child{max-width:680px}
.v7LeadMeter{display:grid;gap:4px;justify-items:end;min-width:220px}.v7LeadMeter small{font:10px var(--pixel);color:#fde89a}
.v7Chapter{margin:18px 0 8px}
.v7Chapter h3{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font:16px var(--gothic);letter-spacing:.06em;color:var(--t,#a8dcec)}
.v7Chapter h3 small{font:9px var(--pixel);color:#9a93a0;letter-spacing:1px}
.v7Empty{color:#9a93a0;font-style:italic;font-size:12px}
.v7EmptyCard{display:grid;justify-items:center;gap:10px;padding:28px 16px;text-align:center}.v7EmptyCard p{max-width:440px}
.v7Hint{display:block;color:#9a93a0;font-size:11px;line-height:1.6;margin:8px 0 0}
.v7Foot{margin-top:12px;font-size:12px;color:#9fb3b1}
.v7Tag2{font:9px var(--pixel);letter-spacing:1px;color:#79d3c2}
.v7Win .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
#app .v7Win button{font-size:12px}
#app .v7Win button.primary{font-size:15px!important}
#app .v7Win button:disabled{filter:grayscale(.6) brightness(.7);cursor:not-allowed}
#app .v7Win select{background:#0e0b17;color:#e9e4d8;border:1px solid #5c4a2a;padding:6px 8px;font:12px var(--pixel)}
/* bars */
.v7Bar{display:block;height:8px;width:100%;background:#0e0b17;border:1px solid #0e0b17;box-shadow:inset 0 0 0 1px #2a2444;overflow:hidden}
.v7Bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,#86b35f 0 6px,#558c4a 6px 7px);transition:width .35s}
.v7Bar.gold i{background:repeating-linear-gradient(90deg,#ecc25a 0 6px,#cc9235 6px 7px)}
.v7Bar.pet i{background:repeating-linear-gradient(90deg,#f0aecb 0 6px,#c86a8e 6px 7px)}
.v7Bar.pass i{background:repeating-linear-gradient(90deg,var(--accent,#fde89a) 0 6px,var(--season,#79d3c2) 6px 7px)}
.v7Progress{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-top:6px}.v7Progress em{font:9px var(--pixel);font-style:normal;color:#9fb3b1;white-space:nowrap}
/* tiles: the vault's own, at fixed sizes so nothing reflows */
#app .v7Win .vaultTile.v7Tile{width:56px;height:56px;min-height:0!important;min-width:0!important;max-height:none;padding:4px!important;flex:0 0 auto;display:grid;place-items:center;aspect-ratio:auto}
#app .v7Win .vaultTile.v7Tile img{width:40px;height:40px;max-width:none;max-height:none}
#app .v7Win .vaultTile.v7Tile.small{width:42px;height:42px}#app .v7Win .vaultTile.v7Tile.small img{width:32px;height:32px}
#app .v7Win .vaultTile.v7Tile.sel{outline:2px solid #fde89a;outline-offset:1px;box-shadow:0 0 12px #fde89a66,inset 0 -2px 0 var(--rarity)}
#app .v7Win .vaultTile.v7Tile.lock img{filter:brightness(0) opacity(.42)!important}
#app .v7Win button.vaultTile.v7Tile:not(:disabled):hover{border-color:var(--rarity);filter:brightness(1.12)}
#app .v7Win button.vaultTile.v7Tile:disabled{opacity:.38}
.v7Tile.shiny::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffd6f566 42%,#c8f0ff55 50%,transparent 62%);background-size:250% 100%;animation:v7sheen 3.2s linear infinite;pointer-events:none}
.v7Count{position:absolute;right:3px;bottom:2px;z-index:3;font:9px var(--pixel);color:#fffaea;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000}
.v7Glyphs{position:absolute;left:3px;top:2px;z-index:3;display:flex;gap:1px;font-style:normal}
.v7Glyphs em{font-style:normal;font-size:9px;color:var(--g);text-shadow:0 0 3px var(--g),0 1px 0 #000}
.v7TileGrid{display:flex;flex-wrap:wrap;gap:6px}
.v7TileGrid.big{gap:6px;max-height:440px;overflow:auto;padding:2px;align-content:flex-start}
.v7GlyphRow{display:flex;align-items:center;gap:4px;margin:6px 0 2px}.v7GlyphRow small{margin-left:4px;font:9px var(--pixel)}
.v7Glyph{display:inline-grid;place-items:center;width:20px;height:20px;border:1px dashed #56666a;color:#56666a;font-size:11px;position:relative}
.v7Glyph.on{border:1px solid var(--g);color:var(--g);box-shadow:0 0 6px color-mix(in srgb,var(--g) 50%,transparent);background:#0e0b17}
.v7Glyph small{position:absolute;bottom:-7px;right:-6px;font:8px var(--pixel);color:#e7dcb8}
.v7GlyphText{display:block;color:var(--g)!important;font-size:11px}
.v7Obtain{display:flex;align-items:center;gap:6px;color:#b8b0c8!important;font-size:11px;margin-top:6px}
.v7Spark{position:fixed;width:4px;height:4px;background:var(--c);z-index:99999;pointer-events:none;animation:v7spark .9s ease-out forwards}
@keyframes v7spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.v7Stamp{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:2px solid #86b35f;color:#a6d37f;font:10px var(--pixel);transform:rotate(-4deg);background:#0e0b17}
.v7Stats{display:grid;grid-template-columns:repeat(4,auto);gap:4px 14px;margin:8px 0 2px;justify-content:start}.v7Stats div{display:grid;gap:1px}
.v7Stats dt{font:8px var(--pixel);letter-spacing:1px;color:#9a93a0}.v7Stats dd{margin:0;font:13px var(--pixel);color:#fde89a}

/* ------------------------------------------------------------------ the angler */
.v7Mission{display:grid;grid-template-columns:48px minmax(0,1fr) 290px;gap:14px;align-items:center;margin-bottom:6px}
.v7MissionIcon{display:grid;place-items:center}
.v7MissionText b{display:block;font:15px Georgia,serif;color:#f2e7c9}.v7MissionText small{display:block;margin-top:2px;font-size:11px;color:#b8b0c8}
.v7MissionReward{display:grid;justify-items:end;gap:6px}
.v7RewardList{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 10px}
.v7RewardList span{display:inline-flex;align-items:center;gap:4px;font:10px var(--pixel);color:#e7dcb8;white-space:nowrap}
.v7Mastery{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin-top:16px}
.v7Mastery.won{border-image:var(--frame-hot) 8 fill / 8px / 0 stretch}
.v7MasteryIcons{display:flex;gap:10px}
.v7MasteryIcons span{display:grid;justify-items:center;gap:4px;width:84px;padding:8px 4px;background:#0e0b17;border:1px solid color-mix(in srgb,var(--c) 60%,#000);text-align:center}
.v7MasteryIcons small{font:8px/1.3 var(--pixel);color:#e9e4d8}
.v7MasteryIcons.big{justify-content:center;margin:18px 0}.v7MasteryIcons.big span{width:120px}
.v7RodGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:8px}
.v7Rod{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start}
.v7Rod h3{color:var(--rarity)}.v7Rod p{font-size:11px;margin:3px 0 0}
.v7Rod button{margin-top:8px}
.v7FishGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:6px}
.v7Fish{display:grid;justify-items:center;gap:2px;text-align:center;padding:4px 4px 6px}
.v7FishArt{display:grid;place-items:center;height:64px;width:100%}
.v7FishArt img{image-rendering:pixelated;max-width:100%;max-height:60px}
.v7Fish.unknown img{filter:brightness(0) opacity(.5)}
.v7Fish b{font:12px Georgia,serif;color:var(--t)}.v7Fish.unknown b{color:#6c667a}.v7Fish small{font:8px var(--pixel);letter-spacing:.5px;color:#9a93a0}

/* ------------------------------------------------------------------ the kitchen */
.v7Pot{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:10px;align-items:start}
.v7Pantry header{margin-bottom:10px}
.v7PantryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px 6px}
.v7Ing{display:grid;justify-items:center;gap:3px;text-align:center}
.v7Ing small{font:9px/1.25 var(--pixel);color:#d9d2e4}
.v7Ing.none small{color:#6c667a}
.v7PotSide{display:grid;justify-items:center;gap:10px;padding:10px}
.v7PotCanvas{width:288px;height:208px;image-rendering:pixelated;display:block}
.v7PotInfo{display:grid;justify-items:center;gap:10px;width:100%}
.v7PotSlots{display:flex;gap:10px}
.v7PotSlot{display:grid;place-items:center;width:50px;height:50px;color:#b8b0c8;font:14px var(--pixel);background:#0e0b17;border:1px dashed #5c4a2a}
#app .v7Win button.v7PotSlot{border:1px solid #ecc25a!important;border-image:none!important;padding:0!important;background:#1d1830!important}
.v7PotSlot .vaultTile.v7Tile{border:0!important;background:none!important;box-shadow:none!important}
.v7Predict{text-align:center;font-size:12px;color:#e9e4d8;min-height:36px}
.v7Cook{width:100%}
.v7Hatch{display:grid;gap:6px}
.v7Hatch article{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center}
.v7Hatch b,.v7Book b{font:15px Georgia,serif;color:#f2e7c9}.v7Hatch small,.v7Book small{display:block;font:9px var(--pixel);color:#ecc25a;letter-spacing:1px;margin:2px 0}
.v7Hatch em,.v7Book em{display:block;font-size:11px;color:#b8b0c8;font-style:italic}
.v7HatchActions{display:flex;gap:6px;align-items:center}
.v7Book{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:6px}
.v7Book article{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}
.v7Book article.unknown b{color:#8a8098}
.v7Recipe{display:flex;gap:3px;align-items:center;margin-top:4px}.v7Recipe img{width:20px;height:20px;image-rendering:pixelated}.v7Recipe i{font-style:normal;color:#9a93a0}
.v7PetGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(390px,1fr));gap:8px}
.v7Pet{display:grid;grid-template-columns:104px 1fr;gap:10px}
.v7PetArt{position:relative;display:grid;place-items:end center;height:112px;background:radial-gradient(ellipse at 50% 78%,color-mix(in srgb,var(--pet) 26%,#0e0b17),#0e0b17 70%);border:1px solid #0e0b17}
.v7PetArt canvas{width:96px;height:88px;image-rendering:pixelated;margin-bottom:10px}
.v7Rank{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);padding:2px 8px;background:#0e0b17;border:1px solid var(--pet);font:8px var(--pixel);color:var(--pet);white-space:nowrap;letter-spacing:1px}
.v7Pet.rank-awakened .v7PetArt{box-shadow:0 0 18px color-mix(in srgb,var(--pet) 40%,transparent)}
.v7PetBody .v7Head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.v7PetBody h3{color:var(--pet)}.v7Was{display:block;font:9px var(--pixel);color:#9a93a0;letter-spacing:.5px}
.v7Lv{font:11px var(--pixel);color:#f0aecb;white-space:nowrap}
.v7Evo{display:flex;align-items:center;gap:4px;margin:8px 0 4px}
.v7EvoStep{display:grid;justify-items:center;gap:1px;padding:2px 4px;background:#0e0b17;border:1px solid #2a2444;min-width:66px}
.v7EvoStep canvas{width:40px;height:40px;image-rendering:pixelated}
.v7EvoStep small{font:8px var(--pixel);color:#6c667a;text-align:center;max-width:76px}
.v7EvoStep.on small{color:#d9d2e4}.v7EvoStep.now{border-color:var(--pet)}.v7EvoStep.now small{color:var(--pet)}
.v7Evo>i{font-style:normal;color:#5c4a2a;font:14px var(--pixel)}
.v7Powers{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.v7Powers li{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:start;font-size:11px;color:#cfc7d8}
.v7Powers li b{color:#f2e7c9;font-weight:600}.v7Powers li em{font:8px var(--pixel);font-style:normal;color:#ecc25a;letter-spacing:1px}
.v7Powers li small{display:block;color:#b8b0c8;line-height:1.45}
.v7Powers li.locked{opacity:.5}
.v7Passive b{color:#fde89a!important}
.v7Fav{margin-top:8px!important;font-size:11px!important;color:#f0aecb!important}
.v7PetActions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.v7Missing{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px}
.v7Missing article{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center}.v7Missing canvas{width:40px;height:40px;image-rendering:pixelated}
.v7Missing b{font:14px Georgia,serif;color:#cfc7d8}.v7Missing small{display:block;font-size:11px;color:#9a93a0}
.v7FoodGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
#app .v7Win button.v7Food{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;text-align:left;padding:6px 8px!important}
.v7Food b{display:block;font:14px Georgia,serif;color:#f2e7c9}.v7Food small{font:8px var(--pixel);letter-spacing:.6px;color:#ecc25a}
.v7RiteRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.v7RiteEvo{display:flex;align-items:center;justify-content:center;gap:8px}.v7RiteEvo canvas{width:96px;height:88px;image-rendering:pixelated}.v7RiteEvo i{font:22px var(--pixel);color:#ecc25a;font-style:normal}
.v7Gold{display:flex;align-items:center;gap:8px;font:22px var(--pixel);color:#fde89a;margin:6px 0 2px}.v7Gold.short{color:#e2525e}
/* the scene by the fire */
#potOverlay{position:fixed;inset:0;z-index:95;display:grid;place-items:center;align-content:center;gap:12px;background:#07060cf2;animation:v7fade .3s}
#potOverlay.out{opacity:0;transition:opacity .2s}
.potFrame{position:relative;border:16px solid transparent;border-image:var(--frame) 8 fill / 16px / 0 stretch;image-rendering:pixelated}
#potOverlay canvas{display:block;image-rendering:pixelated;cursor:pointer;touch-action:none}
.potHud{display:grid;justify-items:center;gap:10px;max-width:720px;text-align:center;min-height:86px}
.potLine{color:#e9e4d8;font-size:14px;line-height:1.6;min-height:24px}.potLine b{color:#fde89a}
.potNew{display:inline-block;padding:1px 8px;margin-right:4px;background:#ecc25a;color:#1a0f08!important;font:10px/1.6 var(--pixel)}
.potMeter{display:inline-block;width:160px;height:10px;margin-left:8px;vertical-align:middle;background:#0e0b17;box-shadow:inset 0 0 0 1px #5c4a2a;overflow:hidden}.potMeter i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#fde89a 0 6px,#f39b45 6px 7px)}
.potActions{display:flex;gap:8px}
.potSkip{font:9px var(--pixel);color:#6c667a;letter-spacing:1px}
.potBond{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:grid;grid-template-columns:auto 200px auto;gap:10px;align-items:center;padding:5px 10px;background:#0e0b17e6;border:1px solid #5c4a2a;font:11px var(--pixel);color:#f0aecb}
.potBond span{height:8px;background:#1a1224;box-shadow:inset 0 0 0 1px #5a3a5a;overflow:hidden}.potBond i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#f0aecb 0 6px,#c86a8e 6px 7px)}
.potBond em{font-style:normal;color:#fffaea;min-width:36px}
@keyframes v7fade{from{opacity:0}}
/* the Companion Shrine shows each echo's form and bond */
.petCard canvas{width:80px!important;height:80px!important}
.petBondTag{font:8px var(--pixel);font-style:normal;letter-spacing:1px;color:var(--pet)}

/* ------------------------------------------------------------------ the forge */
.v7Split{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:10px;align-items:start}
.v7Summary{position:sticky;top:0}
.v7Big{display:flex;align-items:center;gap:8px;font:24px var(--pixel);color:#fde89a;margin:4px 0}.v7Big small{font:10px var(--pixel);color:#b8b0c8}
.v7Summary button{width:100%;margin:10px 0 4px}
.v7Values{display:grid;grid-template-columns:auto auto;gap:3px 10px;font-size:11px;margin:10px 0 0}.v7Values dt{color:#9a93a0}.v7Values dd{margin:0;text-align:right;color:#e7dcb8}
.warning{color:#ffb27a}
.v7Btns{display:flex;gap:6px;flex:none}.v7Btns button{white-space:nowrap}
.v7Split .v7Lead{flex-wrap:wrap}.v7Split .v7Lead>div:first-child{flex:1 1 300px}
.v7Filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
.v7Seg{display:inline-flex;gap:4px;flex-wrap:wrap}
#app .v7Seg button{padding:2px 8px!important;font:10px var(--pixel)!important;color:#c9c2d8!important}
#app .v7Seg button.on{border-image:var(--frame-hot) 8 fill / 8px / 0 stretch!important;color:var(--rc,#fde89a)!important}
.v7CraftList{display:grid;gap:4px}
.v7Craft{display:grid;grid-template-columns:56px 1fr auto auto;gap:14px;align-items:center}
.v7Craft b{font:15px Georgia,serif;color:var(--rarity)}.v7Craft small{display:block;font:9px var(--pixel);color:#b8b0c8;letter-spacing:.6px;margin-top:2px}
.v7Cost{display:flex;gap:10px;font:12px var(--pixel);font-variant-numeric:tabular-nums}.v7Cost em{display:inline-flex;align-items:center;gap:4px;font-style:normal;color:#e7dcb8}.v7Cost em.short{color:#e2525e}
.v7Craft button{min-width:84px}
.v7PlanCard{max-width:760px;margin:0 auto}
.v7PlanHead{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;margin:8px 0 12px}.v7PlanHead small{display:block;font:9px var(--pixel);color:#b8b0c8;letter-spacing:.6px}
.v7Checklist{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px;font-size:13px}
.v7Checklist li{display:flex;align-items:center;gap:6px}
.v7Checklist li::before{display:inline-block;width:16px;font:12px var(--pixel)}
.v7Checklist li.ok::before{content:'✓';color:#86d7a5}.v7Checklist li.no::before{content:'✗';color:#e2525e}.v7Checklist li.warn::before{content:'!';color:#ffb27a}
.v7Plan{padding:10px 12px;border:1px dashed #b9773e;background:#0e0b17;font-size:12px;line-height:1.6}.v7Plan .v7TileGrid{margin-top:8px}.v7Plan.short{border-color:#e2525e66;color:#e2a29a}
.v7Reveal{display:grid;justify-items:center;gap:8px;text-align:center;max-width:620px;margin:20px auto;padding:20px}
.v7Anvil{position:relative;width:160px;height:150px;display:grid;place-items:center;margin:4px auto}
.v7AnvilArt{position:absolute;bottom:0;width:96px;height:96px;image-rendering:pixelated;animation:v7anvil .5s ease-in 2 alternate}
@keyframes v7anvil{to{transform:translateY(3px)}}
.v7Anvil .v7Tile{position:relative;z-index:2;transform:scale(1.5);animation:v7slam .7s cubic-bezier(.2,1.6,.4,1) .45s both;margin-bottom:58px}
@keyframes v7slam{0%{transform:scale(0) rotate(-20deg);filter:brightness(4)}100%{transform:scale(1.5);filter:none}}
.v7Spray{position:absolute;inset:0;background:radial-gradient(circle,color-mix(in srgb,var(--rarity) 55%,transparent),transparent 62%);animation:v7pulse 1.6s ease-out .5s both}
@keyframes v7pulse{0%{transform:scale(.2);opacity:0}40%{opacity:1}100%{transform:scale(1.6);opacity:0}}
.v7PickList{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px}
#app .v7Win button.v7PickRow{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;text-align:left;padding:4px 6px!important}
.v7PickRow b{display:block;font:14px Georgia,serif;color:var(--rarity)}.v7PickRow small{font:8px var(--pixel);letter-spacing:.6px;color:#b8b0c8}
.v7Pips{display:flex;gap:3px;font-style:normal}.v7Pips em{width:8px;height:8px;border:1px solid #6c667a;transform:rotate(45deg)}.v7Pips em.on{background:#ecc25a;border-color:#fde89a}
.v7Slots{display:grid;gap:6px;margin:10px 0}
.v7Slot{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center}
.v7Slot.locked{opacity:.4}.v7Slot.fresh{animation:v7glow 1.4s ease-out}
@keyframes v7glow{0%{filter:none}30%{filter:brightness(1.6) drop-shadow(0 0 10px var(--g))}100%{filter:none}}
.v7SlotGlyph{display:grid;place-items:center;width:40px;height:40px;background:#0e0b17;border:1px solid var(--g);color:var(--g);font-size:20px;text-shadow:0 0 6px var(--g)}
.v7Slot b{font:14px Georgia,serif}.v7Slot small{display:block;font-size:11px;color:#b8b0c8}
.v7Offers{margin-top:14px}.v7Offers>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
#app .v7Win button.v7Offer{display:grid;justify-items:center;gap:4px;padding:16px 10px!important;text-align:center;animation:v7rise .5s both}
.v7Offer:nth-child(2){animation-delay:.12s!important}.v7Offer:nth-child(3){animation-delay:.24s!important}
.v7Offer span{font-size:30px;color:var(--g);text-shadow:0 0 12px var(--g)}.v7Offer b{font:14px Georgia,serif;color:var(--g)}.v7Offer small{font-size:11px;color:#cfc7d8}.v7Offer em{font:8px var(--pixel);color:#ecc25a;font-style:normal;letter-spacing:1px}
#app .v7Win button.v7Offer.g3{border-image:var(--frame-hot) 8 fill / 8px / 0 stretch!important}
@keyframes v7rise{from{opacity:0;transform:translateY(12px)}}
.v7Lexicon{margin-top:14px;font-size:12px}.v7Lexicon summary{font:10px var(--pixel);color:#ecc25a;cursor:pointer}.v7Lexicon ul{columns:2;padding-left:16px}.v7Lexicon li{color:var(--g);margin-bottom:3px}
.v7Masters{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:8px}
.v7Master{display:grid;gap:8px;align-content:start}
.v7Master .v7Head{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}.v7Master p{font-size:11px}
.v7MIcon{display:grid;place-items:center;width:56px;height:56px;background:#0e0b17;border:1px solid #2a2444}

/* ------------------------------------------------------------------ the pass */
.v7SeasonHead{display:grid;grid-template-columns:84px 1fr auto;gap:18px;align-items:center;margin-bottom:12px}
.v7Crest{width:84px;height:84px;image-rendering:pixelated}
.v7SeasonHead h2{color:var(--accent)!important;font-size:30px!important}.v7Clock{display:block;margin-top:4px;font:9px var(--pixel);letter-spacing:1px;color:var(--season)}
.v7TierBox{display:grid;justify-items:center;gap:2px;min-width:150px}.v7TierBox img{width:48px;height:48px;image-rendering:pixelated}
.v7TierBox b{font:30px/1 var(--gothic);color:var(--accent)}.v7TierBox small{font:9px var(--pixel);color:#9a93a0}.v7TierBox em{font:9px var(--pixel);color:#9a93a0;font-style:normal}
.v7PassPitch{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin-bottom:10px}
.v7PassPitch small{display:block;font-size:11px;line-height:1.6;color:#d9d2e4}.v7PassPitch b{color:#fde89a}
.v7TrackWrap{display:grid;grid-template-columns:40px 1fr;gap:6px}
.v7Track{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;scroll-behavior:smooth;scrollbar-color:#5c4a2a #0e0b17}
.v7TrackLabels{display:grid;grid-template-rows:20px 1fr 1fr;gap:6px;padding-bottom:10px;font:9px var(--pixel);color:#9a93a0}
.v7TrackLabels::before{content:''}
.v7TrackLabels span{display:grid;place-items:center;writing-mode:vertical-rl;transform:rotate(180deg);background:#0e0b17;border:1px solid #2a2444;letter-spacing:2px}
.v7TrackLabels span:last-child{color:#d8c8ff;border-color:#4a3e7a}.v7TrackLabels span.locked{color:#6c667a}
.v7TierCol{flex:0 0 100px;display:grid;grid-template-rows:20px 1fr 1fr;gap:6px}
.v7TierN{text-align:center;font:10px/20px var(--pixel);color:#6c667a;border-bottom:2px solid #2a2444}
.v7TierCol.reached .v7TierN{color:var(--accent);border-color:var(--season)}
.v7TierCol.current .v7TierN{color:#0e0b17;background:var(--accent)}
.v7Cell{display:grid;justify-items:center;align-content:center;gap:4px;padding:6px 2px;min-height:122px;border:8px solid transparent;border-image:var(--frame-btn) 8 fill / 8px / 0 stretch;image-rendering:pixelated}
.v7Cell.prem{border-image:var(--frame) 8 fill / 8px / 0 stretch}
.v7TierCol.milestone .v7Cell{border-image:var(--frame-hot) 8 fill / 8px / 0 stretch}
#app .v7Cell button{padding:1px 8px!important;font-size:12px!important}
.v7Reward{position:relative;display:grid;justify-items:center;gap:4px;text-align:center}
.v7Reward small{font:8px/1.3 var(--pixel);color:#d9d2e4;max-width:84px}
.v7Reward.lock{opacity:.5}.v7Reward.claimed{opacity:.5}
.v7Tick,.v7Lock{position:absolute;top:-6px;right:0}
.v7RIcon{display:grid;place-items:center;width:42px;height:42px;background:#0e0b17;border:1px solid #2a2444}
.v7RIcon img{width:32px;height:32px;image-rendering:pixelated}
.v7RIcon.cos{border-color:color-mix(in srgb,var(--c) 60%,#000);background:radial-gradient(circle,color-mix(in srgb,var(--c) 30%,#0e0b17),#0e0b17 70%)}
.v7RIcon.shinyPick{border-color:#ffb8ec;animation:v7spin 6s linear infinite}
@keyframes v7spin{to{filter:hue-rotate(360deg)}}
.v7PassFoot{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin-top:10px}.v7PassFoot p{font-size:11px}
.v7ShinyPart{margin:12px 0}.v7ShinyPart h3 small{font:9px var(--pixel);color:var(--season);margin-left:8px}.v7ShinyPart.asleep{opacity:.6}
.v7ShinyRow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.v7ShinyRow article{display:grid;justify-items:center;gap:4px;text-align:center}
.v7ShinyRow b{font:12px/1.3 Georgia,serif}.v7ShinyRow small{font:8px var(--pixel);color:#9a93a0}
.v7ShinyPick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
#app .v7Win .v7ShinyPick button{display:grid;justify-items:center;gap:4px;padding:10px 6px!important}.v7ShinyPick b{font:13px Georgia,serif}.v7ShinyPick small{font:8px var(--pixel)}
.v7Trials{display:grid;gap:6px}
.v7Trials article{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center}
.v7Trials b{font:15px Georgia,serif}.v7Trials small{display:block;margin:2px 0 4px;font-size:11px;color:#b8b0c8}.v7Trials em{font:9px var(--pixel);font-style:normal;color:#9fb3b1}.v7Trials span{font:11px var(--pixel);color:var(--accent)}
.v7PkgRow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.v7Pkg{display:grid;justify-items:center;gap:4px;padding:14px 6px 8px;text-align:center}
.v7Pkg img{width:48px;height:48px;image-rendering:pixelated}
.v7Pkg b{font:24px/1 var(--gothic);color:#e4d8ff}.v7Pkg small{font:8px/1.4 var(--pixel);color:#b8b0c8;min-height:24px}
.v7Pkg button{width:100%}
.v7Tag{position:absolute;top:-12px;padding:1px 8px;background:#d8c8ff;color:#1a1036;font:9px var(--pixel)}
.v7StoreCat{margin-top:14px}.v7StoreCat h3{font:16px var(--gothic);letter-spacing:.06em;color:#d8c8ff;margin-bottom:8px}
.v7Offers2{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:6px}
.v7Offer2{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center}
.v7Offer2 b{font:14px Georgia,serif}.v7Offer2 small{display:block;font-size:11px;line-height:1.45;color:#b8b0c8}.v7Offer2 button{white-space:nowrap}

@media(max-width:900px){
 .v7Pot,.v7Split{grid-template-columns:1fr}.v7PetGrid,.v7Masters,.v7Book,.v7Offers2,.v7RodGrid{grid-template-columns:1fr}.v7Pet{grid-template-columns:84px 1fr}
 .v7Mission{grid-template-columns:44px 1fr}.v7MissionReward{grid-column:1/-1;justify-items:start}.v7RewardList{justify-content:flex-start}
 .v7SeasonHead{grid-template-columns:56px 1fr}.v7Crest{width:56px;height:56px}.v7TierBox{grid-column:1/-1;grid-template-columns:auto auto 1fr;justify-items:start;align-items:center}
 .v7PkgRow{grid-template-columns:repeat(2,1fr)}.v7ShinyRow{grid-template-columns:repeat(3,1fr)}.v7Offers>div{grid-template-columns:1fr}
 .v7Craft{grid-template-columns:56px 1fr}.v7Craft .v7Cost,.v7Craft button{grid-column:2}
 .v7PassPitch,.v7PassFoot,.v7Mastery{grid-template-columns:1fr}.v7Lead{flex-direction:column;align-items:stretch}
 .v7PotCanvas{width:216px;height:156px}
}
/* the ability charge wears its own colour, apart from the health bar (beats #packPanel .playerHud .bar i) */
#packPanel .playerHud .bar.ability{height:5px!important;margin:0!important;background:#0b1424!important;box-shadow:inset 0 0 0 1px #1e2c40}
#packPanel .playerHud .bar.ability i{background:linear-gradient(90deg,#2f5f9a,#5fa2e8 70%,#a9d6ff)!important}
#packPanel .playerHud .abilityRow[data-state="ready"] .bar.ability i{background:linear-gradient(90deg,#4f8fd0,#8fd0ff 60%,#e4f6ff)!important;box-shadow:0 0 8px #7cc4ff88}
#gameScreen.hudDesktop #packVitals .playerHud .bar.ability{height:4px!important}