/* July 2026 information-hierarchy pass. Kept external so new UI work no
   longer expands the legacy inline stylesheet. */
.touchHint{display:none}
.modeGroup{margin-bottom:18px}
.modeGroup:last-child{margin-bottom:0}
.modeGroupH{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 2px 8px}
.modeGroupH strong{font-family:var(--font-head);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.modeGroupH span{font-size:12px;color:var(--muted)}
.modeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mcard{display:flex;flex-direction:column;min-height:126px}
.mcard .mcd{flex:1}
.mmeta{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.mtag{font-family:var(--font-head);font-size:9.5px;letter-spacing:.04em;color:var(--muted-cool);border:1px solid var(--edge-dim);border-radius:999px;padding:3px 7px;background:rgba(12,14,22,.45)}
#modeCards{width:min(820px,94vw)}
.heroTools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.heroFilter{pointer-events:auto;cursor:pointer;border:1px solid var(--edge-dim);background:rgba(24,28,42,.82);color:var(--muted-cool);border-radius:999px;padding:6px 9px;font-family:var(--font-head);font-size:9.5px;letter-spacing:.04em}
.heroFilter.sel{color:var(--ink-on-gold);border-color:var(--accent-edge);background:linear-gradient(180deg,var(--accent-bright),var(--accent-deep))}
.heroCount{font:10px var(--font-head);color:var(--muted);white-space:nowrap}
.helpDisclosure{margin-top:14px;border:1px solid var(--edge-dim);border-radius:10px;background:rgba(18,21,31,.65);overflow:hidden}
.helpDisclosure summary{pointer-events:auto;cursor:pointer;list-style:none;padding:12px 14px;font-family:var(--font-head);font-weight:700;color:var(--accent-bright)}
.helpDisclosure summary::after{content:'+';float:right;color:var(--accent)}
.helpDisclosure[open] summary::after{content:'−'}
.helpDisclosure .helpRef{padding:0 14px 14px}
.riftChoice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:stretch}
.riftBanish,.riftReroll{pointer-events:auto;cursor:pointer;font-family:var(--font-head);font-weight:700;border:1px solid var(--edge-dim);border-radius:8px;background:rgba(24,28,42,.9);color:var(--muted-cool);padding:8px 10px}
.riftBanish:hover,.riftReroll:hover{border-color:var(--accent);color:var(--accent-bright)}
.riftReroll{width:100%;margin-top:9px;min-height:40px}
.rcCat[data-cat="EVOLUTION"]{color:#ffe9a8}
@media(max-width:999px){
  .modeGrid{grid-template-columns:1fr}
  .mcard{min-height:0}
  #modeCards{width:min(520px,94vw)}
  .heroTools{padding:0 6px}
  .riftChoice{grid-template-columns:minmax(0,1fr) 70px}
  #title .kbdRow,.desktopHint{display:none}
  .touchHint{display:inline}
  #selActions .selGo{white-space:nowrap;font-size:14px;padding:11px 12px}
}

@media(max-height:480px) and (orientation:landscape){
  #title{padding:2px 12px;justify-content:center}
  #title .gt{font-size:34px;line-height:1}
  #title .sub{font-size:11px;line-height:1.1;margin-top:4px;padding-bottom:10px;background-size:auto 8px}
  #title>.gbtn{margin-top:6px;padding:8px 28px;font-size:15px;min-height:38px}
  #title .titleRow{margin-top:6px;gap:5px 8px;max-width:480px}
  #title .titleRow .gbtn.ghost{min-height:34px;padding:6px 12px;font-size:11px}
  #title .titleStats{margin-top:6px;padding-top:7px;background-size:auto 7px;font-size:10px}
  #title .titleRelease{margin-top:1px;gap:5px}
  #title .continueBtn{margin-top:1px;padding:4px 10px;font-size:11px}
}
@media(pointer:coarse){
  #title .kbdRow,.desktopHint{display:none}
  .touchHint{display:inline}
  .heroFilter{min-height:38px;padding-inline:11px}
}

/* July 2026 desktop clarity pass: keep the title focused on its actions and
   make the build identity discoverable without competing with Quick Play. */
.titleRelease{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;
  font:600 10px var(--font-head);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.titleRelease button{pointer-events:auto;border:0;background:none;padding:5px 7px;color:var(--accent-bright);
  font:700 10px var(--font-head);letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.titleRelease button:hover,.titleRelease button:focus-visible{color:#fff0bc}

/* Detail typography is never globally shrunk. The dense secondary profile
   and the four skills share two readable columns on desktop; phones retain
   their established one-column, skills-first order. */
#heroDetail{overflow:hidden}
.dHead canvas{width:calc(136px/var(--uiz,1));height:calc(136px/var(--uiz,1))}
.dDetailCols{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
.dProfileCol,.dSkillsCol{min-width:0}
.dProfileCol{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.42fr);gap:10px;align-items:start}
.dProfileCol .dPassive{margin-bottom:0}
/* rows are min-82px but AUTO-GROW: a wrapped description makes its whole grid
   row taller (the side-by-side pair stays aligned) instead of painting over
   the row beneath — fixed heights overlapped at narrow panes / large UI scale */
.dSkillsCol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-items:start;grid-auto-rows:minmax(calc(82px/var(--uiz,1)),auto)}
.dSkillsCol>.dSecLab{grid-column:1/-1;margin-bottom:0}
.dSkillsCol>.dSkill{position:relative;margin-bottom:0;padding:7px;min-height:calc(82px/var(--uiz,1));overflow:visible}
@media(min-width:1000px){
  /* safety valve: #heroDetail clips overflow, so an unusually tall drawer
     near the pane's bottom edge caps and scrolls instead of getting cut —
     in normal use drawers are ~100-160px and the cap never engages */
  .dSkillsCol .dSkFx{display:none;position:absolute;z-index:8;left:8px;right:8px;top:calc(100% - 8px);
    max-height:calc(34vh/var(--uiz,1));overflow-y:auto;opacity:1;margin:0;padding:9px 10px;border:1px solid var(--edge-mid);border-radius:7px;
    background:rgba(13,16,25,.98);box-shadow:0 10px 24px rgba(0,0,0,.5)}
  .dSkillsCol .dSkill:hover .dSkFx,.dSkillsCol .dSkill:focus-within .dSkFx{display:block;max-height:none;opacity:1;margin:0}
  .dSkillsCol>.dSkill:nth-child(n+4) .dSkFx{top:auto;bottom:calc(100% - 8px)}
}
.dMore{margin-top:8px;border:1px solid var(--edge-dim);border-radius:8px;background:rgba(18,21,31,.45)}
.dMore summary{pointer-events:auto;cursor:pointer;padding:8px 10px;color:var(--accent-bright);font:700 11px var(--font-head)}
.dMoreBody{padding:0 10px 9px}

/* Settings use one calm reading column instead of newspaper-style columns.
   (The old two-column rule was removed at its source in index.html, so this
   plain declaration needs no !important gymnastics.) */
@media(min-width:980px){
  .setPanel{max-width:660px}
  #setBody{column-count:1}
}
.setPanel{background:linear-gradient(180deg,rgba(25,29,44,.99),rgba(11,14,22,.995))}
#setBody{padding:14px 20px}
.setGroup{margin-top:18px}
.setRow{margin-bottom:10px}
.setKeyGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 8px;min-width:0}
.setKeyRow{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:10px;min-width:0;min-height:52px;
  padding:7px 8px 7px 11px;border:1px solid rgba(216,180,90,.28);border-radius:7px;
  background:linear-gradient(180deg,rgba(45,48,64,.62),rgba(21,24,35,.78));box-shadow:inset 0 1px rgba(255,255,255,.035)}
.setKeyRow span{min-width:0;font:700 12px var(--font-head);color:var(--ink-hi);white-space:nowrap}
.setKeyBtn{pointer-events:auto;width:48px;height:36px;padding:0;border:1px solid var(--edge-mid);border-radius:6px;
  background:linear-gradient(180deg,rgba(46,50,66,.98),rgba(24,27,40,.98));color:var(--accent-bright);
  box-shadow:inset 0 0 0 2px rgba(216,180,90,.08),0 2px 5px rgba(0,0,0,.28);
  font:800 13px var(--font-head);line-height:34px;text-align:center;cursor:pointer}
.setKeyBtn.listening{border-color:var(--accent);box-shadow:0 0 0 2px rgba(216,180,90,.16);color:#fff0bc}
.setBindNote{grid-column:1/-1;font-size:11.5px;color:var(--muted);line-height:1.35;padding:2px 1px 4px}

/* Chronicle: ink first, texture second. The parchment remains visible while
   secondary labels and table rows meet the same contrast target as body copy. */
#statsBody{background:linear-gradient(rgba(248,238,211,.91),rgba(235,219,181,.93)),url('../ui/mythrift-texture-parchment.png') repeat;color:#24170c}
#statsBody .stEmpty,#statsBody .stHeadline .sub,#statsBody .stCard .k,#statsBody .stFav .fl,
#statsBody .stFav .fd,#statsBody .stModeRow .mr,#statsBody .stChamp.head{color:#49351c}
#statsBody .stCard,#statsBody .stFav,#statsBody .stModeRow{background:rgba(255,250,235,.78);border-color:rgba(74,48,12,.52)}
#statsBody .stChamp{color:#2f2112;border-top-color:rgba(74,48,12,.32)}
#statsBody .stSecLab{color:#68470b;border-bottom-color:rgba(74,48,12,.48)}

#releaseUI{background:radial-gradient(ellipse at 50% 30%,rgba(24,28,44,.96),rgba(7,9,14,.99));z-index:47}
.releasePanel{max-width:660px}
#releaseBody{overflow:hidden;padding:18px 22px;color:var(--ink-soft)}
.releaseVersion{font:900 24px var(--font-head);color:var(--accent-bright)}
.releaseDate{margin-top:2px;color:var(--muted);font:600 11px var(--font-head);letter-spacing:.08em;text-transform:uppercase}
.releaseList{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;font-size:15px;line-height:1.38}
.releaseList li{position:relative;min-width:0;padding-left:18px;overflow-wrap:anywhere}
.releaseList li::before{content:'\25C6';position:absolute;left:2px;top:.55em;color:var(--accent);font-size:7px;line-height:1}

@media(max-width:999px){
  .dHead canvas{width:150px;height:150px}
  .dDetailCols{display:contents}
  .dProfileCol,.dSkillsCol{display:block}
  .dSkillsCol>.dSkill{height:auto;min-height:0;overflow:hidden}
  .dMore{margin-bottom:10px}
  .setKeyGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .setKeyGrid{grid-template-columns:1fr}
}

/* keycap chips (moved from the inline stylesheet; used by the title
   controls row) */
.kbdRow{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-family:var(--font-head);font-size:12px;color:var(--muted);letter-spacing:.04em}
.kbdRow span{white-space:nowrap}
.kbd{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:11px;color:var(--ink-hi);
 background:rgba(255,255,255,.06);border:1px solid var(--edge-mid);border-bottom-width:2px;border-radius:5px;padding:1px 7px;margin-right:4px}
.kbd{border:5px solid transparent;border-image:url('../ui/mythrift-keycap.png') 20 fill/5px stretch;border-radius:0;background:none;padding:0 4px}

/* achievements panel (moved from the inline stylesheet) */
#achUI{background:radial-gradient(ellipse at 50% 30%,rgba(24,28,44,.95),rgba(7,9,14,.98));z-index:46}
#achBody{overflow-y:auto;overflow-x:hidden;padding:12px 16px}
.achCount{font-family:var(--font-head);font-size:12px;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;text-align:center;margin-bottom:10px}
.achRow{display:flex;gap:11px;align-items:center;background:rgba(40,46,68,.4);border:1px solid var(--edge-dim);border-radius:9px;padding:9px 11px;margin-bottom:7px;opacity:.6}
.achRow.got{opacity:1;border-color:rgba(216,180,90,.5);background:rgba(216,180,90,.09)}
.achIc{flex:none;font-size:20px;color:var(--muted);display:flex;align-items:center}
.achRow.got .achIc{color:var(--reward)}
.achBar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);margin:0 0 12px;overflow:hidden}
.achBar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent-deep),var(--accent-bright))}
.achN{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ink-hi)}
.achD{font-size:12.5px;color:var(--ink-dim);margin-top:1px}

/* #48 surfaces ease in instead of snapping: display:none -> flex restarts
   these animations, so every open gets the entrance for free (close stays
   instant, which reads as responsiveness). Reduce-motion disables both. */
@keyframes sheetIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes screenIn{from{opacity:0}to{opacity:1}}
.sheetPanel{animation:sheetIn .16s ease-out}
.screen:not(#endUI){animation:screenIn .18s ease-out}
html.rm .sheetPanel,html.rm .screen:not(#endUI){animation:none}

/* #23 end-screen awards + #50 achievements recap */
.endAwards{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 4px}
.endAward{font:600 11px var(--font-head);color:var(--muted-cool);border:1px solid var(--edge-dim);
  border-radius:999px;padding:4px 10px;background:rgba(14,17,26,.6)}
.endAward b{color:var(--accent-bright);font-weight:800;margin-right:4px}
.endAward.me{border-color:var(--accent-edge);color:var(--ink-hi)}
.endAch{text-align:center;font:700 12px var(--font-head);color:var(--reward);margin:4px 0 2px;letter-spacing:.03em}

/* #22 shop search */
.shopFilterGroup.search{flex:1;min-width:150px}
.shopSearch{pointer-events:auto;width:100%;min-height:32px;padding:6px 11px;color:var(--ink-hi);
  font:600 13px var(--font-head);background:rgba(24,28,42,.85);border:1px solid var(--edge-mid);border-radius:7px}
.shopSearch:focus{outline:none;border-color:var(--accent)}
.shopSearch::placeholder{color:var(--muted)}

/* #17 scoreboard gold-lead sparkline */
.scoreSpark{display:block;width:100%;max-width:280px;height:44px;margin:2px auto 8px;opacity:.9}

/* #50 unread-achievements dot */
#btnAch{position:relative}
#btnAch.unread::after{content:'';position:absolute;top:6px;right:8px;width:8px;height:8px;border-radius:50%;
  background:var(--reward);box-shadow:0 0 6px rgba(255,215,106,.8)}

/* #37 title-screen contract: one-line goal above Quick Play */
.titleGoal{margin:2px 0 12px;font:600 13.5px var(--font-body,Cormorant Garamond,serif);color:var(--muted-cool);letter-spacing:.02em}
@media(max-width:999px){.titleGoal{font-size:12px;margin-bottom:8px}}