/* 0.16.29 고정 화면 (user: 「그냥 화면을 완전히 고정시켜버려 … 휴대폰도 동일」, 「휴대폰에 여전히 짤리는 구간이 있다, 전부 찾아내서 …
   앞으로 더 추가시켜도 짤리지 않게 구조를 확실히 지정하자」).
   The game has fixed screens (index.html): html.stage-pc is 1600×900 on a computer (0.16.40; it was 1280×720 drawn larger,
   which made everything look like a phone) and 1280×720 on a tablet, html.stage-phone is 760×352 (an installed phone). Every
   rule here is checked at exactly those sizes, so what tests/test_screen_fit_v01629.mjs
   sees is what every player sees; a screen that grows a scroll bar, a cut word or an "…" fails that test.
   Loaded last; the older responsive rules stay underneath for pages opened outside the frame at other sizes. */

/* A piece another page holds stays out of sight whatever its own display rule says (a hidden row inside a card kept its
   flex and pushed the page past its bottom). */
body.teyvat [data-paged][hidden]{display:none!important}
/* Pages are numbered buttons (user: 「◀▶이거 다 없애버려. 차라리 다른 버튼으로 두던가」): one press to any page. */
body.teyvat .pane-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:auto 0 0;padding:4px 0 0}
body.teyvat :where(#root,#modal) .pane-pager>button.pane-page{width:30px;height:30px;min-width:0;min-height:0;margin:0;padding:0!important;border-radius:50%;font-size:.8rem;font-weight:700;line-height:1;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(211,188,142,.3);color:var(--t-cream,#ece5d8);box-shadow:none}
body.teyvat :where(#root,#modal) .pane-pager>button.pane-page::before{display:none!important}
body.teyvat :where(#root,#modal) .pane-pager>button.pane-page.on{background:var(--t-cream,#ece5d8);color:#2b3140;border-color:var(--t-gold-hi,#f3dfae);box-shadow:0 0 10px rgba(243,223,174,.35)}
html.stage-phone body.teyvat :where(#root,#modal) .pane-pager>button.pane-page{width:24px;height:24px;font-size:.62rem}
/* a facility's bar on the phone: 밖으로 나가기 is the way out (메인 화면으로 does the same there), tab names on one line */
html.stage-phone body.teyvat .shell-page-tools:has(>.shell-leave)>.shell-back{display:none}
html.stage-phone body.teyvat .shell-page-head :is(.shell-worktabs,.shell-subtabs) button{white-space:nowrap}
html.stage-phone body.teyvat .shell-page-head .shell-page-words h1{white-space:nowrap;font-size:.86rem}
/* the preset window shows its own title once */
body.teyvat .preset-window>.shell-presets>h2{display:none}
html.stage-phone body.teyvat .pane-pager{gap:4px;padding:2px 0 0}
body.teyvat .roster-pager.pane-pager{margin:6px 0 0;flex-wrap:nowrap;gap:4px}
body.teyvat .pane-page-gap{font-size:.7rem;color:var(--t-muted);padding:0 1px}
html.stage-phone body.teyvat .roster-pager.pane-pager{gap:2px}
html.stage-phone body.teyvat :where(#root) .roster-pager>button.pane-page{width:20px;height:20px;font-size:.54rem}
/* A facility tile is one button: the cover button is exactly the tile. */
body.teyvat :where(#root) .shell-place-tile>button{top:0;right:0;bottom:0;left:0;width:auto;height:auto;min-width:0!important;min-height:0!important;max-height:none;padding:0!important}
body.teyvat :where(#root) .shell-place-tile>button::before{display:none!important}

/* ---------- 메인 화면 · 컴퓨터 ---------- */
html.stage-pc body.teyvat .panel.shell-loc{grid-template-columns:360px minmax(0,1fr)}
html.stage-pc body.teyvat .shell-loc-side>.shell-tabbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
html.stage-pc body.teyvat .shell-loc-side>.shell-tabbar>.shell-tab{min-width:0;padding:6px 4px;justify-content:center;white-space:nowrap}
/* the place's name, its kind and the wait button share the top rows; the main quest is its name and one line */
html.stage-pc body.teyvat .shell-loc-left{gap:8px}
html.stage-pc body.teyvat .shell-loc-left>.shell-loc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:4px;margin:0}
html.stage-pc body.teyvat .shell-loc-left>.shell-loc-head>h1{grid-column:1;grid-row:1;margin:0;word-break:keep-all}
html.stage-pc body.teyvat .shell-loc-left>.shell-loc-head>.area-level{grid-column:1/-1;grid-row:2;justify-self:start;margin:0}
html.stage-pc body.teyvat .shell-loc-left>.shell-loc-head>.wait-controls{grid-column:2;grid-row:1;margin:0;padding:0;border:0;background:none}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .wait-controls.compact button{min-height:32px;padding:4px 14px;font-size:.8rem;white-space:nowrap}
html.stage-pc body.teyvat .shell-loc-left .main-objective{padding:10px 14px;margin:0}
html.stage-pc body.teyvat .shell-loc-left .main-objective>h2{display:none}
html.stage-pc body.teyvat .shell-loc-side .shell-pane>h2{display:none}
html.stage-pc body.teyvat .shell-loc-side .shell-pane>*{margin:0 0 8px}
html.stage-pc body.teyvat .shell-loc-side .location-places{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
html.stage-pc body.teyvat .shell-loc-side .place-entry.shell-place-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:70px;min-height:0;margin:0;padding:4px;border-radius:12px;text-align:center}
html.stage-pc body.teyvat .shell-loc-side .place-entry.shell-place-tile .place-entry-icon{width:32px;height:32px;margin:0;padding:0;flex:0 0 auto;background:none;border:0}
html.stage-pc body.teyvat .shell-loc-side .place-entry.shell-place-tile .place-entry-copy{display:block;width:100%;min-width:0;padding:0}
html.stage-pc body.teyvat .shell-loc-side .place-entry.shell-place-tile .place-entry-copy>:not(.place-entry-short){display:none}
html.stage-pc body.teyvat .shell-loc-side .place-entry.shell-place-tile .place-entry-copy>small.place-entry-short{display:block;font-size:.7rem;line-height:1.2;word-break:keep-all;color:inherit}
/* the map: its buttons float on it, the bar for a chosen place floats over its bottom, one row of marks under it */
html.stage-pc body.teyvat .shell-loc-main>#journey-map{overflow:hidden}
html.stage-pc body.teyvat .shell-loc-main>#journey-map>.terrain-layout{min-height:0}
html.stage-pc body.teyvat .shell-loc-main .terrain-header{padding:0 0 8px;flex-wrap:nowrap}
html.stage-pc body.teyvat .shell-loc-main .terrain-shortcuts{display:flex;flex-wrap:nowrap;gap:6px}
html.stage-pc body.teyvat .shell-loc-main .terrain-shortcuts button{min-height:32px;padding:4px 12px;font-size:.78rem;white-space:nowrap}
html.stage-pc body.teyvat .shell-loc-main .terrain-layout{grid-template-columns:minmax(0,1fr) 250px;gap:12px}
html.stage-pc body.teyvat .terrain-frame{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
html.stage-pc body.teyvat .terrain-frame>.terrain-viewport{flex:1 1 auto;min-height:0}
html.stage-pc body.teyvat .terrain-frame>.terrain-controls{position:absolute;left:8px;top:8px;z-index:4;display:flex;gap:4px;margin:0;padding:4px;border-radius:12px;background:rgba(8,10,18,.72)}
html.stage-pc body.teyvat .terrain-frame>.terrain-controls button{min-height:30px;padding:2px 10px;font-size:.76rem}
html.stage-pc body.teyvat .terrain-frame>.terrain-controls .terrain-zoom button{width:32px;padding:0}
html.stage-pc body.teyvat .terrain-frame>.terrain-travel-dock{position:absolute;left:8px;right:8px;bottom:8px;z-index:5;margin:0;flex-wrap:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.45)}
html.stage-pc body.teyvat .terrain-frame>.terrain-travel-dock .terrain-route-chain{display:none}
html.stage-pc body.teyvat .shell-loc-main .terrain-key{flex:0 0 auto;flex-wrap:nowrap;gap:4px 10px;margin:2px 0 0;font-size:.66rem;white-space:nowrap}
html.stage-pc body.teyvat .shell-loc-main .terrain-destinations{overflow:hidden;display:flex;flex-direction:column;gap:6px}
html.stage-pc body.teyvat .shell-loc-main .terrain-destinations>h3{flex:0 0 auto;margin:0}
html.stage-pc body.teyvat .shell-loc-main .terrain-destination-list{display:flex;flex-direction:column;gap:6px}
html.stage-pc body.teyvat .shell-loc-main .terrain-destination{margin:0;padding:8px 10px;min-height:0}
html.stage-pc body.teyvat .shell-loc-main .terrain-destination .terrain-card-copy small{line-height:1.3}
/* 0.16.39 (user chose 「지우고 왼쪽 넓히기」): the computer drops 「어디로 갈까」 like the phone — places are chosen on the map (their
   circles and names) and travelled to from the bar over it; the left column and the map share its room. */
html.stage-pc body.teyvat .panel.shell-loc{grid-template-columns:440px minmax(0,1fr)}
html.stage-pc body.teyvat .shell-loc-main .terrain-layout{display:flex!important;flex-direction:column;min-height:0}
html.stage-pc body.teyvat .shell-loc-main .terrain-destinations{display:none}
html.stage-pc body.teyvat .shell-loc-main .terrain-map-column{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

/* ---------- 메인 화면 · 휴대폰: 「어디로 갈까」 없이 지도와 넓은 왼쪽 칸 ---------- */
/* (user: 「어디로 갈까 부분 휴대폰에서는 과감하게 지우고, 왼쪽을 늘려도 될 것 같다. 나도 평소엔 지도를 이용해서 이동하는 편이라」) */
html.stage-phone body.teyvat .panel.shell-loc{grid-template-columns:290px minmax(0,1fr);gap:6px}
html.stage-phone body.teyvat .shell-loc-main .terrain-layout{display:flex!important;flex-direction:column;margin-top:4px}
html.stage-phone body.teyvat .shell-loc-main .terrain-destinations{display:none}
html.stage-phone body.teyvat .shell-loc-main>#journey-map{overflow:hidden}
html.stage-phone body.teyvat .shell-loc-main .terrain-map-column{flex:1 1 auto;min-height:0}
html.stage-phone body.teyvat .terrain-frame{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
html.stage-phone body.teyvat .terrain-frame>.terrain-viewport{flex:1 1 auto;min-height:0}
html.stage-phone body.teyvat .terrain-frame>.terrain-controls{position:absolute;left:4px;bottom:4px;top:auto;z-index:4;display:flex;flex-wrap:nowrap;gap:3px;margin:0;padding:3px;border-radius:10px;background:rgba(8,10,18,.72);overflow:visible}
html.stage-phone body.teyvat .terrain-frame>.terrain-controls button{min-height:26px;padding:1px 8px;font-size:.66rem}
html.stage-phone body.teyvat .terrain-frame>.terrain-controls .terrain-zoom button{width:26px;padding:0}
html.stage-phone body.teyvat .terrain-frame>.terrain-travel-dock{position:absolute;left:4px;right:4px;bottom:4px;z-index:5;margin:0;box-shadow:0 4px 12px rgba(0,0,0,.5)}
html.stage-phone body.teyvat .shell-loc-main .terrain-key{display:none}
html.stage-phone body.teyvat .shell-loc-main .terrain-header h2{font-size:.78rem;white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all}
html.stage-phone body.teyvat .shell-loc-main .terrain-shortcuts button{min-height:26px;padding:1px 9px;font-size:.64rem;white-space:nowrap}
/* the wider left column: the same pieces, letters a size up from the old 8px */
html.stage-phone body.teyvat .shell-loc-side>.shell-tabbar{grid-template-columns:repeat(3,minmax(0,1fr))}
html.stage-phone body.teyvat .shell-loc-side>.shell-tabbar>.shell-tab{flex-direction:row;gap:4px;min-height:28px;font-size:.62rem}
html.stage-phone body.teyvat .shell-loc-side .location-places{grid-template-columns:repeat(4,minmax(0,1fr))}
html.stage-phone body.teyvat .shell-loc-side .place-entry.shell-place-tile{height:50px}
html.stage-phone body.teyvat .shell-loc-side .place-entry.shell-place-tile .place-entry-copy>small.place-entry-short{font-size:.56rem}
html.stage-phone body.teyvat .shell-loc-left>.shell-loc-head>h1{font-size:.92rem}
html.stage-phone body.teyvat .shell-loc-left>.shell-loc-head>.area-level{font-size:.6rem}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .wait-controls.compact button{min-height:24px;font-size:.62rem}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .main-objective button{font-size:.7rem;min-height:28px}
/* the main quest card: its name over its line, never side by side in narrow columns */
html.stage-phone body.teyvat .shell-loc-left .main-objective{flex-direction:column;align-items:stretch;gap:2px;padding:4px 7px}
html.stage-phone body.teyvat .shell-loc-left .main-objective>:is(h3,p,small){margin:0;font-size:.66rem;line-height:1.3;word-break:keep-all}
html.stage-phone body.teyvat .shell-loc-left .main-objective>h3{font-size:.74rem}

/* ---------- 가방: 작은 칸이 쪽으로 넘어가고, 설명은 한 장 ---------- */
/* (user: 「<>버튼 너무 남발하는거같은데 이것도 사실 좀 불편해」): only the list of items turns pages; the card of the chosen
   item is always one card, its picture beside its name, and steps its letters down a little when it is long (fitBox). */
body.teyvat .bag-cols .bag-grid{overflow:hidden;align-content:start;grid-auto-rows:max-content}
/* 0.16.36 (TODO 7) the bag's sort: one joined bar of four picture chips after the trade filter (not round pills). */
body.teyvat .bag-trade-filter>.bag-sort{display:inline-flex;margin-left:14px;border:1px solid rgba(211,188,142,.35);border-radius:10px;overflow:hidden;gap:0}
body.teyvat :where(#root) .bag-trade-filter>.bag-sort>button.bag-sort-chip{display:inline-flex;align-items:center;gap:5px;min-width:0;min-height:30px;padding:2px 11px;margin:0;border:0;border-radius:0;background:rgba(0,0,0,.22);box-shadow:none;font-size:.74rem}
body.teyvat :where(#root) .bag-trade-filter>.bag-sort>button.bag-sort-chip::before{display:none!important}
body.teyvat :where(#root) .bag-trade-filter>.bag-sort>button.bag-sort-chip+button{border-left:1px solid rgba(211,188,142,.25)}
body.teyvat :where(#root) .bag-trade-filter>.bag-sort>button.bag-sort-chip.selected{background:var(--t-cream);color:var(--t-ink)}
body.teyvat .bag-sort-chip>.shell-icon{width:15px;height:15px;flex:0 0 15px}
html.stage-phone body.teyvat .bag-trade-filter>.bag-sort{margin-left:6px;border-radius:8px}
html.stage-phone body.teyvat :where(#root) .bag-trade-filter>.bag-sort>button.bag-sort-chip{min-height:22px;padding:1px 6px;gap:3px;font-size:.56rem}
html.stage-phone body.teyvat .bag-sort-chip>.shell-icon{width:11px;height:11px;flex-basis:11px}
body.teyvat .bag-cols .bag-grid>.pane-pager{grid-column:1/-1;margin:2px 0 0}
body.teyvat .bag-cols .bag-detail{overflow:hidden;max-height:none;display:grid;grid-template-columns:var(--hero,72px) minmax(0,1fr);align-content:start;column-gap:10px}
body.teyvat .bag-cols .bag-detail>*{grid-column:1/-1;min-width:0}
body.teyvat .bag-cols .bag-detail>.shell-item-hero{grid-column:1;grid-row:1/span 3;align-self:start;width:var(--hero,72px);height:var(--hero,72px);min-height:0;aspect-ratio:auto;margin:0;overflow:hidden;display:flex;justify-content:center;align-items:center;border-radius:12px}
body.teyvat .bag-cols .bag-detail>.shell-item-hero>:is(img.item-icon,.item-glyph){width:86%!important;height:86%!important;max-width:none;padding:0;object-fit:contain}
body.teyvat .bag-cols .bag-detail>.shell-item-hero>.shell-item-stars{position:absolute;left:4px;bottom:2px;font-size:.6rem}
body.teyvat .bag-cols .bag-detail>.shell-item-hero~:is(small,h2,p):nth-child(-n+4){grid-column:2;margin:0;align-self:center}
body.teyvat .bag-cols .bag-detail>.item-effect{margin:6px 0 0}
html.stage-pc body.teyvat .bag-cols .bag-layout{grid-template-columns:minmax(0,1fr) 330px;gap:12px}
html.stage-pc body.teyvat .bag-cols .bag-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
html.stage-pc body.teyvat .bag-cols .bag-detail{padding:12px 14px;font-size:.84rem;line-height:1.5;row-gap:4px}
html.stage-pc body.teyvat .bag-detail h2{font-size:1.1rem;margin:0}
html.stage-pc body.teyvat .bag-cols .bag-item>:is(img.item-icon,.item-glyph){height:64px;width:100%;object-fit:contain;padding:6px;box-sizing:border-box}
html.stage-pc body.teyvat .bag-cols .bag-item .item-name{font-size:.68rem;line-height:1.2;padding:3px 4px 4px;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:keep-all}
html.stage-phone body.teyvat .bag-cols .bag-layout{grid-template-columns:minmax(0,1fr) 230px;gap:6px}
html.stage-phone body.teyvat .bag-cols .bag-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:2px}
html.stage-phone body.teyvat .bag-cols .bag-detail{--hero:52px;padding:6px 8px;font-size:.66rem;line-height:1.35;column-gap:7px;row-gap:2px}
html.stage-phone body.teyvat .bag-detail h2{font-size:.8rem}
html.stage-phone body.teyvat .bag-cols .bag-item>:is(img.item-icon,.item-glyph){height:40px;width:100%;object-fit:contain;padding:3px;box-sizing:border-box}
html.stage-phone body.teyvat .bag-cols .bag-item .item-name{font-size:.5rem;line-height:1.15;padding:1px 2px 2px}
html.stage-phone body.teyvat .bag-cols .bag-item .item-count{font-size:.5rem}
/* a box that fits by stepping everything in it down (app_screen_v01629.js fitBox); still too long, it keeps its main lines
   and the rest opens with 「자세히」 */
body.teyvat .fit-box>*{zoom:var(--fit,1)}
body.teyvat .bag-detail.fit-brief>:is(.item-detail-fields,p:not(.muted):not(.item-effect):not(.choice-note)){display:none}
body.teyvat .market-detail.fit-brief>:is(.item-detail-fields,p:not([class]),.market-compare-label,.market-comparison,.item-uses,.item-use-list){display:none}
body.teyvat .shell-forge-scroll.fit-brief .cook-card :is(p:not([class]),.cook-sources,.cook-desc,hr){display:none}
body.teyvat :where(#root) .shell-forge-scroll>button.fit-more{align-self:flex-start;justify-self:start;width:auto;min-width:0;min-height:24px;padding:1px 12px;font-size:.62rem;margin:3px 0 0;border-radius:8px}
html.stage-phone body.teyvat :where(#root) .shell-forge-foot .cook-foot button{min-width:72px;white-space:nowrap}
body.teyvat :is(.shell-place-tabs,.shell-shop-tabs)>.shell-panes>.shell-pane:not([hidden]){height:100%;min-height:0;overflow:hidden}
body.teyvat :is(.shell-place-tabs,.shell-shop-tabs){display:flex;flex-direction:column;min-height:0}
body.teyvat :is(.shell-place-tabs,.shell-shop-tabs)>.shell-panes{flex:1 1 auto;min-height:0;overflow:hidden!important}
body.teyvat .shell-shop-tabs>.shell-panes>.shell-pane:not([hidden])>.shell-col-main{height:100%}
html.stage-phone body.teyvat .traveler-resonance :is(h2,h3){font-size:.86rem}
html.stage-phone body.teyvat .traveler-resonance p{font-size:.68rem;line-height:1.5}
/* 구매 · 판매 and the Mora held stay on one row */
body.teyvat .market-tabs{overflow:visible!important;flex-wrap:nowrap;min-width:0}
html.stage-phone body.teyvat :where(#root) .market-tabs>button{min-width:0;min-height:24px;padding:1px 12px;font-size:.6rem}
html.stage-phone body.teyvat .market-tabs>.shop-balance{font-size:.6rem;white-space:nowrap}
body.teyvat :where(#root) .market-detail>button.fit-more{justify-self:start;min-height:24px;padding:1px 12px;font-size:.66rem;margin:2px 0;border-radius:8px}
body.teyvat :where(#root) .bag-detail>button.fit-more{justify-self:start;min-height:26px;padding:2px 12px;font-size:.7rem;margin:4px 0}
/* the whole card in its window: picture, name and words on the left, every field on the right */
body.teyvat .fit-more-card{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.25fr);column-gap:14px;row-gap:4px;align-content:start;font-size:.82rem;line-height:1.5}
body.teyvat .fit-more-card>*{grid-column:1/3;min-width:0;margin:0}
body.teyvat .fit-more-card>.shell-item-hero{grid-column:1;grid-row:1/span 3;position:relative;width:64px;height:64px;min-height:0;aspect-ratio:auto;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
body.teyvat .fit-more-card>.shell-item-hero>:is(img.item-icon,.item-glyph){width:86%!important;height:86%!important;object-fit:contain;padding:0}
body.teyvat .fit-more-card>.shell-item-hero~:is(small,h2,p):nth-child(-n+4){grid-column:2}
body.teyvat .fit-more-card>.item-detail-fields{grid-column:3;grid-row:1/span 30;align-self:start;display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px}
body.teyvat .fit-more-card .item-detail-fields :is(dt,dd){margin:0;font-size:inherit;line-height:1.45}
body.teyvat .fit-more-card .item-detail-fields dt{color:var(--t-gold);word-break:keep-all}
html.stage-phone body.teyvat .fit-more-card{grid-template-columns:48px minmax(0,1fr) minmax(0,1.35fr);column-gap:10px;font-size:.64rem;line-height:1.35}
html.stage-phone body.teyvat .fit-more-card>.shell-item-hero{width:48px;height:48px}
body.teyvat .fit-more-card :is(p,small,dd,dt,span:not(.shell-item-stars)){font-size:inherit}
body.teyvat .fit-more-card>.shell-item-hero>.shell-item-stars{position:absolute;left:3px;bottom:1px;font-size:.5rem;letter-spacing:-1px;white-space:nowrap}
body.teyvat .bag-cols .bag-detail>.shell-item-hero>.shell-item-stars{letter-spacing:-1px;white-space:nowrap}
html.stage-phone body.teyvat .bag-cols .bag-detail>.shell-item-hero>.shell-item-stars{font-size:.46rem}
html.stage-phone body.teyvat .fit-more-card h2{font-size:.8rem}

/* ---------- 창 (dialog#modal): 화면 안에 다 들어가고, 닫기는 오른쪽 위 ✕ 하나 ---------- */
/* (user: 「닫기 창 찾기도 힘들어」, 「강화 성공했을때 확인이랑 닫기가 두개 다 있으면 뭘 눌러야되냐?」) */
body.teyvat dialog#modal[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 16px);overflow:hidden}
body.teyvat dialog#modal>#modal-body{flex:1 1 auto;min-height:0;overflow:hidden}
body.teyvat dialog#modal>#modal-body>h1:first-child{padding-right:44px}
body.teyvat dialog#modal>button#modal-close.modal-x{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;min-width:0;min-height:0;margin:0;padding:0;border-radius:50%;display:grid;place-items:center;font-size:1rem;line-height:1}
html.stage-phone body.teyvat dialog#modal>button#modal-close.modal-x{top:5px;right:5px;width:28px;height:28px;font-size:.85rem}
html.stage-phone body.teyvat dialog#modal>#modal-body>h1:first-child{padding-right:36px}

/* ---------- 화면 머리: 설명 문단 없이 이름과 버튼만 (user: 글로 때우지 않는다) ---------- */
body.teyvat .shell-page-head .shell-page-intro{display:none}

/* ---------- 캐릭터 · 컴퓨터: 휴대폰처럼 장비 네 칸은 왼쪽에 2×2, 탭은 오른쪽 ---------- */
html.stage-pc body.teyvat .gear-cols .gear-member:not([hidden]){display:grid;grid-template-columns:196px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"head head" "slots tabs" "slots pane";gap:8px 14px}
html.stage-pc body.teyvat .gear-cols .gear-member>.gear-member-head{grid-area:head;margin:0}
html.stage-pc body.teyvat .gear-cols .gear-member>.gear-slots{grid-area:slots;display:grid;grid-template-columns:repeat(2,92px);grid-auto-rows:auto;gap:8px;align-content:start;margin:0}
html.stage-pc body.teyvat .gear-cols .gear-slots>.gear-cell{width:92px;height:auto;min-width:0;min-height:100px;padding:6px 4px}
html.stage-pc body.teyvat .gear-cols .gear-member>.gear-tabs{grid-area:tabs;margin:0}
/* 0.16.37 (TODO 8) 호감도: every companion is listed now (those from wishes too), so each card is a short row — the face
   at its left, the name, the bond bar, the score and the next meeting beside it, the stages folded under — and the cards
   turn pages (app_pages_v0167.js). A card that stood a third of the screen tall gave one row a page. */
body.teyvat .relations-body .relationship-toolbar{display:flex;align-items:center;gap:8px;margin:0 0 6px}
body.teyvat .relations-body .relationship-toolbar>p{flex:1 1 auto;margin:0;font-size:.78rem}
body.teyvat .relations-body .relationship-toggles{display:flex;gap:6px}
body.teyvat :where(#root) .relations-body .relationship-toggles>button{min-height:28px;padding:2px 12px;font-size:.74rem;margin:0}
body.teyvat .relations-body .relationship-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;align-items:start}
body.teyvat .relations-body .relationship-card{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start;padding:10px 12px;margin:0}
body.teyvat .relations-body .relationship-card>.relationship-photo{grid-column:1;grid-row:1/span 6;width:84px;height:84px;object-fit:cover;object-position:top;border-radius:10px;margin:0;aspect-ratio:auto}
body.teyvat .relations-body .relationship-card>:not(.relationship-photo){grid-column:2;margin:0;min-width:0}
body.teyvat .relations-body .relationship-card>h2{font-size:1rem;line-height:1.2}
body.teyvat .relations-body .relationship-card>.bond-bar{margin:2px 0}
body.teyvat .relations-body .relationship-card>:is(.relationship-score,.meeting-place,.muted){font-size:.74rem;line-height:1.35}
body.teyvat .relations-body .relationship-card>.relationship-missions{grid-column:2;margin-top:3px;padding-top:3px}
body.teyvat .relations-body .relationship-card>.relationship-missions>summary{font-size:.76rem}
body.teyvat .relations-body .relationship-card>.relationship-missions .relationship-next{font-size:.7rem}
html.stage-phone body.teyvat .relations-body .relationship-toolbar{margin:0 0 3px}
html.stage-phone body.teyvat .relations-body .relationship-toolbar>p{font-size:.58rem}
html.stage-phone body.teyvat :where(#root) .relations-body .relationship-toggles>button{min-height:22px;padding:1px 9px;font-size:.58rem}
html.stage-phone body.teyvat .relations-body .relationship-grid{gap:5px!important}
html.stage-phone body.teyvat .relations-body .relationship-card{grid-template-columns:48px minmax(0,1fr);column-gap:7px;row-gap:0;padding:3px 6px}
html.stage-phone body.teyvat .relations-body .relationship-card>.bond-bar{margin:1px 0}
html.stage-phone body.teyvat .relations-body .relationship-card>.relationship-photo{width:48px;height:48px;border-radius:8px}
html.stage-phone body.teyvat .relations-body .relationship-card>h2{font-size:.74rem}
html.stage-phone body.teyvat .relations-body .relationship-card>:is(.relationship-score,.meeting-place,.muted){font-size:.54rem;line-height:1.3}
html.stage-phone body.teyvat .relations-body .relationship-card>.relationship-missions{margin-top:1px;padding-top:1px}
html.stage-phone body.teyvat .relations-body .relationship-card>.relationship-missions>summary{font-size:.56rem}
html.stage-phone body.teyvat .relations-body .relationship-card>.relationship-missions .relationship-next{font-size:.52rem}
/* a phone keeps two rows of cards a page: the score is the bar above it, and the next step's reason shows when the stages
   are opened (the next stage carries it) */
html.stage-phone body.teyvat .relations-body .relationship-card>.relationship-score{display:none}
html.stage-phone body.teyvat .relations-body .relationship-card>.relationship-missions:not([open]) .relationship-next{display:none}
/* 0.16.37 (TODO 8): Paimon's menu on a phone keeps five tiles a row (at 748×360 it fell to four and its last row was cut). */
html.stage-phone body.teyvat .pm-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
/* 0.16.37 (TODO 8, found looking at every screen): the 능력치 tab laid four label–value pairs in one row of a narrow pane,
   so each value ran under the next label (「1,219.2력」); two pairs a row. The tabs take their own width, so 「운명의 자리 0/6」
   is not cut at the pane's edge. */
html.stage-pc body.teyvat .gear-cols .gear-pane-stats .gear-stats{grid-template-columns:repeat(2,auto minmax(0,1fr));gap:5px 14px;font-size:.8rem}
html.stage-pc body.teyvat .gear-cols .gear-pane-stats .gear-stats dd{white-space:nowrap}
html.stage-pc body.teyvat :where(#root) .gear-cols .gear-member>.gear-tabs>button.gear-tab{flex:1 1 auto;padding:4px 6px}
/* what the gear adds (+57.6) sits under its value, not beside it, so the value stays in its cell on every screen */
body.teyvat .gear-pane-stats .gear-stats dd>:is(.stat-up,.stat-down){display:block;margin:0;line-height:1.1;font-size:.86em}
html.stage-pc body.teyvat .gear-cols .gear-member>.gear-pane{grid-area:pane;min-width:0;min-height:0}
html.stage-pc body.teyvat .gear-cols .gear-member .gear-bench-note{display:none}
html.stage-pc body.teyvat .gear-cols .gear-member-head .gear-member-copy{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 14px}
html.stage-pc body.teyvat .gear-cols .gear-member-head .gear-member-copy>h2{grid-column:1;grid-row:1/span 3;margin:0}
html.stage-pc body.teyvat .gear-cols .gear-member-head .gear-member-copy>:not(h2){grid-column:2;margin:0}
/* the roster: a grid of faces with their names under them, like the original game's character list */
body.teyvat .gear-cols .shell-col-roster{display:flex;flex-direction:column;overflow:hidden}
body.teyvat .gear-cols .shell-col-roster>.shell-roster{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-content:start;flex:0 0 auto}
body.teyvat :where(#root) .gear-cols .shell-roster>button.shell-roster-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-width:0;min-height:0;margin:0;padding:5px 2px 4px;border-radius:12px;text-align:center;font-size:.68rem;line-height:1.15}
body.teyvat .gear-cols .shell-roster-item>.shell-roster-face{width:44px;height:44px;flex:0 0 auto;margin:0}
body.teyvat .gear-cols .shell-roster-item>span:not(.el-icon):not(.shell-roster-bench){margin:0!important;font-size:inherit}
body.teyvat .gear-cols .shell-roster-item>.shell-roster-bench{position:absolute;top:3px;right:3px;margin:0;padding:0 4px;font-size:.5rem;line-height:1.5;border-radius:999px}
body.teyvat .gear-cols .shell-roster-item>.shell-roster-element{position:absolute;left:4px;top:4px;width:15px;height:15px}
html.stage-phone body.teyvat .gear-cols .shell-col-roster>.shell-roster{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
html.stage-phone body.teyvat :where(#root) .gear-cols .shell-roster>button.shell-roster-item{padding:3px 1px;font-size:.54rem;gap:1px;border-radius:9px}
html.stage-phone body.teyvat .gear-cols .shell-roster-item>.shell-roster-face{width:30px;height:30px}
html.stage-phone body.teyvat .gear-cols .shell-roster-item>.shell-roster-bench{font-size:.42rem;top:1px;right:1px}
html.stage-phone body.teyvat .gear-cols .shell-roster-item>.shell-roster-element{width:11px;height:11px;left:2px;top:2px}
/* the roster: whole names (no 「다이…」) */
body.teyvat .shell-roster-item>span:not(.el-icon):not(.shell-roster-bench){white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all;min-width:0}

/* ---------- 편성: 진형은 이름 칩 다섯, 프리셋은 작은 칩 3×2, 동료 카드는 한 장에 ---------- */
/* (user: 「<> 버튼을 편성 진형에 넣을 필요는 없을 것 같아 … 센스있게좀 해줘」, 「보낸 프리셋 사진같은거 전부 예쁘게 정렬되게끔」) */
body.teyvat .party-cols .shell-col-side>:is(h2,.shell-line-help,p.muted){display:none}
body.teyvat .party-cols .shell-line-help{display:none}
body.teyvat .party-cols .shell-presets-help{display:none}
body.teyvat .shell-presets .shell-preset-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
body.teyvat .shell-presets .shell-preset-chip{min-width:0;min-height:0;margin:0;padding:6px 8px;text-align:left;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 6px}
body.teyvat .shell-presets .shell-preset-chip>small{grid-row:1/span 2}
body.teyvat .shell-presets .shell-preset-chip>strong{white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all;min-width:0}
body.teyvat .shell-preset-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
body.teyvat :where(#root) .shell-preset-actions>button{flex:none;width:100%;min-width:0;margin:0;padding-left:12px!important;padding-right:12px!important;white-space:normal;word-break:keep-all;line-height:1.25}
body.teyvat :where(#root) .shell-preset-actions>button::before{display:none!important}
body.teyvat .formation-choice>h2{margin:0 0 6px}
body.teyvat .formation-options.formation-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
body.teyvat :where(#root) .formation-chips>button.formation-option{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:34px;margin:0;padding:4px 2px;text-align:center}
body.teyvat .formation-chips .formation-option>strong{font-size:.8rem;white-space:nowrap}
body.teyvat .formation-chips .formation-option.selected{background:var(--t-cream,#ece5d8);color:#2b3140;border-color:var(--t-gold-hi,#f3dfae)}
body.teyvat .formation-chips .formation-option:disabled.selected{opacity:1}
body.teyvat .formation-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:rgba(236,229,216,.25)}
body.teyvat .formation-dot.on{background:#7be3a8;box-shadow:0 0 6px rgba(123,227,168,.8)}
body.teyvat .formation-detail{display:grid;gap:2px;margin:8px 0 0;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(211,188,142,.2)}
body.teyvat .formation-detail>strong{font-size:.86rem}
body.teyvat .formation-detail>.formation-effect{font-size:.78rem}
body.teyvat .formation-detail>.formation-synergy{font-size:.72rem;color:var(--t-muted)}
body.teyvat .formation-detail>.formation-synergy.on{color:#8ff0b8}
/* a card's place: pressed, then another card's place, the two trade places; on a phone wide ◀ ▶ beside it trade with
   the neighbour (the computer screen drags instead) */
body.teyvat .formation-slot>.shell-line-head{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-items:stretch}
html.stage-phone body.teyvat .formation-slot>.shell-line-head{grid-template-columns:34px minmax(0,1fr) 34px;gap:3px}
html.stage-pc body.teyvat .formation-slot .shell-line-move{display:none}
body.teyvat :where(#root) .formation-slot button.shell-line-move{width:auto;min-width:0;height:30px;min-height:30px;margin:0;padding:0;border-radius:9px;font-size:.8rem}
body.teyvat :where(#root) .formation-slot button.shell-line-place{min-width:0;min-height:30px;margin:0;padding:2px 6px;border-radius:9px;font-size:.78rem;font-weight:700;color:var(--t-gold);background:rgba(255,255,255,.05);border:1px solid rgba(211,188,142,.3);white-space:normal;word-break:keep-all;line-height:1.2}
body.teyvat :where(#root) .formation-slot button.shell-line-place.back{color:#9fd3ff}
body.teyvat .formation-slot.swap-from{box-shadow:0 0 0 2px var(--t-gold-hi,#f3dfae),0 0 18px rgba(243,223,174,.35)}
body.teyvat :where(#root) .formation-slot.swap-from button.shell-line-place{background:var(--t-cream,#ece5d8);color:#2b3140}
body.teyvat :where(#root) .formation-slot.swap-to button.shell-line-place{border-color:#7be3a8;color:#8ff0b8;animation:swapHint 1.2s ease-in-out infinite}
@keyframes swapHint{50%{box-shadow:0 0 0 2px rgba(123,227,168,.55)}}
html.stage-phone body.teyvat :where(#root) .formation-slot button.shell-line-place{min-height:30px;font-size:.58rem;padding:1px 3px}
/* a companion card: place, picture, name, one row of role chips, one row of two small buttons */
body.teyvat .formation-slot .slot-bonus{display:block;text-align:center;font-size:.66rem;color:var(--t-gold);line-height:1.25}
/* (user: 「이 동글동글한게 왜 이렇게 보기 별로인거같지?」): the five roles are one bar cut into five, with thin lines between and
   only the chosen part filled, not five round pills side by side; the 진형 chips are drawn the same way. */
body.teyvat .formation-slot .role-choice,body.teyvat .formation-options.formation-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:0;border:1px solid rgba(211,188,142,.38);border-radius:8px;overflow:hidden;background:rgba(10,13,21,.45)}
body.teyvat :where(#root) .formation-slot .role-choice>.choice-tile,body.teyvat :where(#root) .formation-chips>button.formation-option{min-width:0;min-height:28px;margin:0;padding:2px 0;border:0;border-left:1px solid rgba(211,188,142,.22);border-radius:0;background:transparent;box-shadow:none;color:var(--t-cream,#ece5d8);font-size:.7rem;font-weight:600;justify-content:center;letter-spacing:0}
body.teyvat :where(#root) .formation-slot .role-choice>.choice-tile:first-child,body.teyvat :where(#root) .formation-chips>button.formation-option:first-child{border-left:0}
body.teyvat :where(#root) .formation-slot .role-choice>.choice-tile.selected,body.teyvat :where(#root) .formation-chips>button.formation-option.selected{background:linear-gradient(180deg,#f3e7c9,#e3d3ad);color:#2b3140;font-weight:700}
body.teyvat :where(#root) .formation-slot .role-choice>.choice-tile:hover:not(.selected):not(:disabled),body.teyvat :where(#root) .formation-chips>button.formation-option:hover:not(.selected):not(:disabled){background:rgba(236,229,216,.1)}
body.teyvat :where(#root) .formation-slot .role-choice>.choice-tile::before,body.teyvat :where(#root) .formation-chips>button.formation-option::before{display:none!important}
body.teyvat .formation-slot .role-effect{display:none}
body.teyvat .formation-slot .formation-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
body.teyvat .formation-slot .formation-controls>:is(.role-choice,.skill-rhythm,.choice-note){grid-column:1/-1}
body.teyvat :where(#root) .formation-slot .formation-controls>button{min-width:0;min-height:28px;margin:0;padding:2px 6px;font-size:.72rem;border-radius:8px}
html.stage-phone body.teyvat .formation-slot .slot-bonus{font-size:.52rem}
html.stage-phone body.teyvat .formation-slot .skill-rhythm{display:none}
html.stage-phone body.teyvat :where(#root) .formation-slot .role-choice>.choice-tile{min-height:20px;font-size:.5rem;padding:1px 0}
html.stage-phone body.teyvat .formation-slot .role-choice{border-radius:6px}
html.stage-phone body.teyvat :where(#root) .formation-slot .formation-controls>button{min-height:22px;font-size:.56rem;padding:1px 3px}
/* the phone card is the face: big, the buttons that change it are in the window the face opens */
html.stage-phone body.teyvat .formation-slot .party-portrait{display:block;width:100%!important;height:122px!important;max-width:none;object-fit:cover;object-position:50% 18%;border-radius:10px;margin:0 auto}
html.stage-phone body.teyvat .formation-slot .member-select{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-height:0;padding:0;margin:0;background:none;border:0}
html.stage-phone body.teyvat .formation-slot .member-select>small,html.stage-phone body.teyvat .formation-slot .slot-bonus{display:none}
html.stage-phone body.teyvat .formation-slot .member-select>strong{font-size:.72rem;text-align:center}
html.stage-phone body.teyvat .formation-slot .formation-controls>button{display:none}
html.stage-phone body.teyvat .formation-slot{gap:3px;padding:4px}
/* ---------- 편성 (party-styled): 네 장의 큰 그림, 이름은 그림 위, 역할 버튼 하나, 진형·프리셋은 창 ---------- */
body.teyvat .party-cols.party-styled{display:flex!important;flex-direction:column}
body.teyvat .party-cols.party-styled>.shell-col-side{display:none!important}
body.teyvat .party-cols.party-styled>.shell-col-main{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}
body.teyvat .party-cols.party-styled .formation-grid{flex:1 1 auto;min-height:0;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:14px;margin:0!important;padding:0;overflow:visible}
body.teyvat .party-cols.party-styled .formation-slot{min-height:0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:18px;background:linear-gradient(180deg,rgba(236,229,216,.09),rgba(236,229,216,.02));border:1px solid rgba(211,188,142,.28);box-shadow:0 10px 26px rgba(0,0,0,.35)}
body.teyvat .party-cols.party-styled .formation-slot>:not(.member-select){flex:0 0 auto}
body.teyvat .party-cols.party-styled .formation-slot>.formation-controls{display:none}
body.teyvat .party-cols.party-styled .formation-slot .slot-bonus{display:none}
body.teyvat :where(#root) .party-cols.party-styled .formation-slot>button.member-select{position:relative;flex:1 1 auto;min-height:0;display:block;width:100%;margin:0;padding:0;border:0;border-radius:14px;overflow:hidden;background:#151a26}
body.teyvat .party-cols.party-styled .member-select>.party-portrait{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto;object-fit:cover;object-position:50% 14%;border-radius:0;margin:0}
body.teyvat .party-cols.party-styled .member-select>.party-portrait.portrait-placeholder{display:grid;place-items:center;font-size:3rem;color:var(--t-gold);background:radial-gradient(circle at 50% 38%,rgba(243,223,174,.18),rgba(21,26,38,1) 65%)}
body.teyvat .party-cols.party-styled .member-select>.slot-plate{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:26px 10px 9px;background:linear-gradient(180deg,transparent,rgba(8,10,16,.88) 55%);color:#fff;text-align:left}
body.teyvat .party-cols.party-styled .slot-plate>.slot-element{width:22px;height:22px;flex:0 0 auto}
body.teyvat .party-cols.party-styled .slot-plate>strong{flex:1 1 auto;min-width:0;font-size:1rem;line-height:1.2;word-break:keep-all;text-shadow:0 1px 3px rgba(0,0,0,.8)}
body.teyvat .party-cols.party-styled .slot-plate>small{flex:0 0 auto;font-size:.74rem;color:var(--t-gold-hi,#f3dfae)}
body.teyvat .party-cols.party-styled .member-select>.slot-worn{position:absolute;top:8px;right:8px;margin:0;padding:1px 8px;border-radius:999px;background:rgba(8,10,16,.7);color:#e9dfc6;font-size:.66rem}
body.teyvat :where(#root) .party-cols.party-styled button.slot-role{display:flex;align-items:baseline;justify-content:center;gap:6px;width:100%;min-width:0;min-height:34px;margin:0;padding:4px 8px;border-radius:12px}
body.teyvat .party-cols.party-styled .slot-role>small{font-size:.68rem;color:var(--t-muted)}
body.teyvat .party-cols.party-styled .slot-role>strong{font-size:.86rem}
body.teyvat :where(#root) .party-cols.party-styled .formation-slot>button.member-add{flex:1 1 auto;min-height:0;width:100%;margin:0;border-radius:14px}
body.teyvat :where(#root) .shell-page-tools>button.party-formation-open,body.teyvat :where(#root) .shell-page-tools>button.party-preset-open{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
html.stage-phone body.teyvat .party-cols.party-styled .formation-grid{gap:6px}
html.stage-phone body.teyvat .party-cols.party-styled .formation-slot{gap:4px;padding:4px;border-radius:12px}
html.stage-phone body.teyvat :where(#root) .party-cols.party-styled .formation-slot>button.member-select{border-radius:10px}
html.stage-phone body.teyvat .party-cols.party-styled .member-select>.slot-plate{gap:4px;padding:16px 6px 5px}
html.stage-phone body.teyvat .party-cols.party-styled .slot-plate>.slot-element{width:15px;height:15px}
html.stage-phone body.teyvat .party-cols.party-styled .slot-plate>strong{font-size:.74rem}
html.stage-phone body.teyvat .party-cols.party-styled .slot-plate>small{font-size:.56rem}
html.stage-phone body.teyvat .party-cols.party-styled .member-select>.slot-worn{top:4px;right:4px;font-size:.5rem;padding:0 5px}
html.stage-phone body.teyvat :where(#root) .party-cols.party-styled button.slot-role{min-height:26px;padding:2px 4px;border-radius:9px}
html.stage-phone body.teyvat .party-cols.party-styled .slot-role>small{font-size:.52rem}
html.stage-phone body.teyvat .party-cols.party-styled .slot-role>strong{font-size:.66rem}
/* the companion picker: the window takes the whole height and its list turns pages (no scroll) */
body.teyvat dialog#modal[open]:has(.member-picker){height:calc(100dvh - 16px);width:min(1180px,calc(100vw - 24px))}
body.teyvat dialog#modal>#modal-body:has(>.member-picker){display:flex;flex-direction:column}
body.teyvat #modal-body>.member-picker{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px}
body.teyvat #modal-body>.member-picker>p.muted{margin:0}
body.teyvat #modal-body .member-pick-grid{flex:1 1 auto;min-height:0;max-height:none!important;overflow:hidden!important;align-content:start;grid-auto-rows:max-content}
body.teyvat #modal-body .member-pick-grid>.pane-pager{grid-column:1/-1}
html.stage-phone body.teyvat #modal-body .member-pick-grid{grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
html.stage-phone body.teyvat #modal-body>.member-picker>p.muted{font-size:.6rem}
html.stage-phone body.teyvat :where(#modal) .member-pick-grid>button.member-pick{min-width:0;min-height:0;margin:0;padding:3px 2px;gap:1px;border-radius:9px}
html.stage-phone body.teyvat .member-pick-grid .member-pick-face{width:40px;height:40px}
html.stage-phone body.teyvat .member-pick-grid .member-pick>strong{font-size:.56rem;line-height:1.15;word-break:keep-all}
html.stage-phone body.teyvat .member-pick-grid .member-pick-meta{font-size:.46rem;display:flex;align-items:center;justify-content:center;gap:2px;white-space:nowrap}
/* 0.16.35: level, element and weapon on one line, so two rows of companions share a page (one row stood over an empty half). */
html.stage-phone body.teyvat .member-pick-grid .member-pick-meta :is(.el-icon,.pick-weapon){margin:0;font-size:.8rem;vertical-align:0}
html.stage-phone body.teyvat .member-pick-grid .member-pick-stars{font-size:.42rem;letter-spacing:-1px}
html.stage-phone body.teyvat .member-pick-grid .member-pick-state{font-size:.44rem;line-height:1.1}
html.stage-phone body.teyvat .member-pick-actions{margin:0 0 2px;gap:4px}
html.stage-phone body.teyvat :where(#root,#modal) .member-pick-actions>button{min-height:24px;padding:1px 10px;font-size:.6rem}
/* 「동료 획득 방법·조건 보기」 belongs to the old recruiting (companions come from wishes now) */
body.teyvat .shell-page-tools .recruitment-link{display:none}
/* the choosing windows (역할 · 진형): big options, one press */
body.teyvat .pick-window{display:grid;gap:10px}
body.teyvat .pick-window-note{margin:0;font-size:.8rem;color:var(--t-muted)}
body.teyvat .pick-window-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
body.teyvat :where(#modal) button.pick-window-option{display:grid;gap:3px;align-content:start;min-width:0;min-height:0;margin:0;padding:10px 12px;text-align:left;border-radius:14px;white-space:normal}
body.teyvat .pick-window-option>strong{font-size:.92rem}
body.teyvat .pick-window-option>span{font-size:.8rem;line-height:1.4}
body.teyvat .pick-window-option>small{font-size:.72rem;color:var(--t-muted);line-height:1.35}
body.teyvat .pick-window-option.synergy>small{color:#8ff0b8}
body.teyvat :where(#modal) button.pick-window-option.selected{background:var(--t-cream,#ece5d8);color:#2b3140;border-color:var(--t-gold-hi,#f3dfae);opacity:1}
body.teyvat :where(#modal) button.pick-window-option.selected>small{color:#3c5a48}
html.stage-phone body.teyvat .pick-window{gap:6px}
html.stage-phone body.teyvat .pick-window-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
html.stage-phone body.teyvat :where(#modal) button.pick-window-option{padding:6px 8px;border-radius:10px}
html.stage-phone body.teyvat .pick-window-option>strong{font-size:.72rem}
html.stage-phone body.teyvat .pick-window-option>span{font-size:.62rem}
html.stage-phone body.teyvat .pick-window-option>small{font-size:.56rem}
html.stage-phone body.teyvat .pick-window-note{font-size:.62rem}
/* the phone's side column: 진형 or 프리셋 by two tabs */
body.teyvat .party-cols .shell-col-side>.side-off{display:none!important}
body.teyvat .party-cols .shell-col-side>.side-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 4px}
body.teyvat :where(#root) .party-cols .side-tabs>button{min-width:0;min-height:26px;margin:0;padding:2px 6px;font-size:.66rem;border-radius:9px}
body.teyvat :where(#root) .party-cols .side-tabs>button.on{background:var(--t-cream,#ece5d8);color:#2b3140;border-color:var(--t-gold-hi,#f3dfae)}
body.teyvat .member-pick-actions{display:flex;gap:6px;margin:0 0 8px}
body.teyvat :where(#root) .member-pick-actions>button{min-height:30px;padding:3px 14px;font-size:.78rem}
html.stage-phone body.teyvat .formation-chips .formation-option>strong{font-size:.6rem}
html.stage-phone body.teyvat :where(#root) .formation-chips>button.formation-option{min-height:26px;padding:2px 1px;gap:2px}
html.stage-phone body.teyvat .formation-dot{width:5px;height:5px}
html.stage-phone body.teyvat .formation-detail{margin:5px 0 0;padding:4px 6px;border-radius:9px}
html.stage-phone body.teyvat .formation-detail>strong{font-size:.66rem}
html.stage-phone body.teyvat .formation-detail>.formation-effect{font-size:.6rem}
html.stage-phone body.teyvat .formation-detail>.formation-synergy{font-size:.56rem}
html.stage-phone body.teyvat .shell-presets .shell-preset-chips{gap:3px}
html.stage-phone body.teyvat .shell-presets .shell-preset-chip{padding:3px 5px;font-size:.58rem}
html.stage-phone body.teyvat .shell-preset-actions{gap:3px}
html.stage-phone body.teyvat :where(#root) .shell-preset-actions>button{min-height:24px;font-size:.58rem;padding:1px 6px!important}

/* ---------- 상점: 작은 상품 칸이 쪽으로 넘어가고, 고른 상품 카드에 − 수량 + 최대와 구매 하나 ---------- */
body.teyvat .shell-col-main:has(>.market-layout),body.teyvat .shell-pane:has(>.market-layout){display:flex;flex-direction:column;overflow:hidden;min-height:0}
body.teyvat :is(.shell-col-main,.shell-pane)>.market-layout{flex:1 1 auto;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);align-items:stretch}
body.teyvat .shell-place-tabs>.shell-panes{overflow:hidden!important;min-height:0}
/* the kitchen and the forge's lists: small tiles with whole names, turning pages; the chosen recipe's card fits */
body.teyvat .shell-forge-list{overflow:hidden!important}
body.teyvat .shell-forge-list>.pane-pager{grid-column:1/-1}
body.teyvat .shell-forge-tile-name{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:keep-all}
body.teyvat .shell-forge-scroll{overflow:hidden!important}
html.stage-pc body.teyvat .shell-forge-list{grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
html.stage-pc body.teyvat .shell-forge-tile-name{font-size:.64rem;padding:3px 3px 4px}
html.stage-phone body.teyvat .shell-forge-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
html.stage-phone body.teyvat .shell-forge-tile-name{font-size:.56rem;padding:2px 3px 3px;line-height:1.15}
html.stage-phone body.teyvat .shell-forge-tile-stars{font-size:.46rem;bottom:1px}
/* on the phone a recipe is a short row: its picture, then its whole name (three rows of five a page) */
html.stage-phone body.teyvat .shell-forge-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
html.stage-phone body.teyvat :where(#root) .shell-forge-list>button.shell-forge-tile{flex-direction:row;align-items:center;gap:5px;min-height:30px;padding:2px 6px 2px 2px;border-radius:8px;text-align:left}
html.stage-phone body.teyvat .shell-forge-list .shell-forge-tile-art{flex:0 0 28px;width:28px;height:28px;aspect-ratio:1;border-radius:6px}
html.stage-phone body.teyvat .shell-forge-list .shell-forge-tile-art :is(img,.item-glyph){width:24px!important;height:24px!important;max-width:none;font-size:.9rem}
html.stage-phone body.teyvat .shell-forge-list .shell-forge-tile-stars{display:none}
html.stage-phone body.teyvat .shell-forge-list .shell-forge-tile-badge{position:static!important;flex:0 0 auto;margin:0 0 0 auto;padding:0 4px;font-size:.48rem;line-height:1.5;transform:none}
html.stage-phone body.teyvat .shell-forge-list .shell-forge-tile-name{flex:1 1 auto;min-width:0;padding:0;font-size:.6rem;line-height:1.2}
/* the chosen recipe's card: its picture row holds 「자세히」, its foot is the time and one button on one line */
body.teyvat .shell-forge-hero{position:relative}
body.teyvat :where(#root) .shell-forge-hero>button.fit-more{margin:0 0 0 auto;align-self:center;flex:0 0 auto;width:auto;min-width:0;min-height:24px;padding:1px 10px;font-size:.62rem;border-radius:8px}
html.stage-phone body.teyvat .shell-forge.dishes{grid-template-columns:minmax(0,1fr) 300px!important;gap:8px}
/* the phone kitchen: its filters on one row, its counts off the bar, the cook button beside the time */
html.stage-phone body.teyvat .shell-page-head:has(.shell-workbar){flex-wrap:nowrap}
html.stage-phone body.teyvat .shell-workbar .cook-stats{display:none}
html.stage-phone body.teyvat .shell-workarea:has(>.cook-tabs){display:grid!important;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);gap:4px 6px;align-items:center}
html.stage-phone body.teyvat .shell-workarea>.cook-tabs{grid-column:1;grid-row:1;flex-wrap:nowrap;gap:3px;margin:0}
html.stage-phone body.teyvat .shell-workarea>.cook-effects{grid-column:2;grid-row:1;flex-wrap:nowrap;gap:3px;margin:0}
html.stage-phone body.teyvat .shell-workarea>.cook-ready{grid-column:4;grid-row:1;margin:0;font-size:.54rem}
html.stage-phone body.teyvat .shell-workarea>.shell-forge{grid-column:1/5!important;grid-row:2;min-height:0;justify-self:stretch!important;width:auto!important;max-width:none!important}
html.stage-phone body.teyvat :where(#root) .shell-workarea>:is(.cook-tabs,.cook-effects)>button{min-width:0;min-height:22px;padding:1px 4px;font-size:.5rem;border-radius:7px;white-space:nowrap;letter-spacing:-.02em}
html.stage-phone body.teyvat .shell-workarea>:is(.cook-tabs,.cook-effects){overflow:visible!important;gap:2px!important;min-width:0}
html.stage-phone body.teyvat .shell-workarea>.cook-ready{font-size:.5rem;gap:3px}
html.stage-phone body.teyvat .shell-forge-foot{padding:3px 6px}
html.stage-phone body.teyvat .shell-forge-foot .cook-foot{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
html.stage-phone body.teyvat .shell-forge-foot .cook-foot>*{margin:0;font-size:.58rem}
html.stage-phone body.teyvat :where(#root) .shell-forge-foot .cook-foot button{min-height:26px;padding:1px 12px;font-size:.62rem;flex:1 1 auto}
body.teyvat .market-filter~p.muted,body.teyvat .market-filter>p.muted{display:none}
body.teyvat .market-filter{display:flex;flex-wrap:wrap;align-items:center;gap:5px;overflow:hidden;flex:0 0 auto}
body.teyvat :where(#root) .market-filter>button{min-width:0;min-height:28px;margin:0;padding:2px 10px;font-size:.74rem;border-radius:8px}
body.teyvat .market-filter>label{display:flex;align-items:center;gap:5px;margin:0 6px 0 0;font-size:.74rem}
body.teyvat .market-layout>.market-grid{overflow:hidden!important;min-height:0;max-height:none;display:grid;grid-auto-rows:max-content;align-content:start}
body.teyvat .market-layout>.market-grid>.pane-pager{grid-column:1/-1}
body.teyvat :where(#root) .market-grid>button.market-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;min-width:0;min-height:0!important;height:auto!important;aspect-ratio:auto!important;margin:0;text-align:center}
body.teyvat .market-grid>.market-item>:is(img.item-icon,.item-glyph){object-fit:contain;flex:0 0 auto}
body.teyvat .market-grid>.market-item>strong{white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all;line-height:1.2}
body.teyvat .market-grid>.market-item>small.market-restriction{display:none}
body.teyvat .market-layout>.market-detail{overflow:hidden!important;min-height:0;max-height:none;display:grid;grid-template-columns:var(--hero,52px) minmax(0,1fr);column-gap:10px;row-gap:3px;align-content:start}
body.teyvat .market-layout>.market-detail>*{grid-column:1/-1;margin:0;min-width:0}
body.teyvat .market-layout>.market-detail>:nth-child(1){grid-column:2;grid-row:1}
body.teyvat .market-layout>.market-detail>:nth-child(2){grid-column:2;grid-row:2}
body.teyvat .market-layout>.market-detail>:nth-child(3):is(img,.item-glyph){grid-column:1;grid-row:1/span 3;width:var(--hero,52px)!important;height:var(--hero,52px)!important;object-fit:contain;align-self:start}
body.teyvat .market-layout>.market-detail>:nth-child(4).tier-badge{grid-column:2;grid-row:3}
body.teyvat .market-detail .market-controls{display:grid;gap:6px;margin-top:6px}
body.teyvat .qty-stepper{display:grid;grid-template-columns:34px minmax(0,1fr) 34px auto;gap:4px;align-items:center}
body.teyvat :where(#root) .qty-stepper>button{min-width:0;min-height:32px;margin:0;padding:0 8px;border-radius:8px;font-size:.9rem;font-weight:700}
body.teyvat :where(#root) .qty-stepper>button::before{display:none!important}
body.teyvat .qty-stepper>.qty-num{text-align:center;font-size:.95rem}
body.teyvat .qty-total{font-size:.82rem;color:var(--t-gold-hi,#f3dfae);text-align:right}
body.teyvat :where(#root) .market-controls>button.qty-go{width:100%;min-width:0;margin:0}
body.teyvat .qty-why:empty{display:none}
html.stage-pc body.teyvat :is(.shell-col-main,.shell-pane)>.market-layout{grid-template-columns:minmax(0,1fr) 300px;gap:12px}
html.stage-pc body.teyvat .market-layout>.market-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
html.stage-pc body.teyvat :where(#root) .market-grid>button.market-item{padding:8px 4px 6px;border-radius:12px}
html.stage-pc body.teyvat .market-grid>.market-item>:is(img.item-icon,.item-glyph){width:44px;height:44px}
html.stage-pc body.teyvat .market-grid>.market-item>strong{font-size:.76rem}
html.stage-pc body.teyvat .market-grid>.market-item>span{font-size:.72rem}
html.stage-pc body.teyvat .market-layout>.market-detail{padding:12px 14px;font-size:.82rem;line-height:1.45}
html.stage-pc body.teyvat .market-detail h2{font-size:1.05rem}
html.stage-phone body.teyvat :is(.shell-col-main,.shell-pane)>.market-layout{grid-template-columns:minmax(0,1fr) 220px;gap:6px}
html.stage-phone body.teyvat .market-layout>.market-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:0}
html.stage-phone body.teyvat :where(#root) .market-grid>button.market-item{padding:3px 2px;border-radius:9px;gap:1px}
html.stage-phone body.teyvat .market-grid>.market-item>:is(img.item-icon,.item-glyph){width:28px;height:28px}
html.stage-phone body.teyvat .market-grid>.market-item>strong{font-size:.54rem}
html.stage-phone body.teyvat .market-grid>.market-item>span{font-size:.5rem}
html.stage-phone body.teyvat .market-layout>.market-detail{--hero:40px;padding:6px 8px;font-size:.62rem;line-height:1.35;column-gap:7px;row-gap:1px}
html.stage-phone body.teyvat .market-detail h2{font-size:.78rem}
html.stage-phone body.teyvat :where(#root) .market-filter>button{min-height:22px;padding:1px 7px;font-size:.58rem}
html.stage-phone body.teyvat .market-filter>label{font-size:.58rem}
html.stage-phone body.teyvat .qty-stepper{grid-template-columns:26px minmax(0,1fr) 26px auto;gap:3px}
html.stage-phone body.teyvat :where(#root) .qty-stepper>button{min-height:24px;font-size:.7rem;padding:0 5px}
html.stage-phone body.teyvat .qty-stepper>.qty-num{font-size:.7rem}
html.stage-phone body.teyvat .qty-total{font-size:.62rem}
html.stage-phone body.teyvat :where(#root) .market-controls>button.qty-go{min-height:26px;font-size:.66rem}
html.stage-phone body.teyvat .market-detail .market-controls{gap:3px;margin-top:3px}

/* ---------- 전투 ---------- */
/* 전투 정보 floats over the screen instead of keeping an empty column; the enemies stand in one row up to six */
html.stage-pc body.teyvat .panel.combat-panel.with-info{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "order" "duo" "log"}
html.stage-pc body.teyvat .panel.combat-panel.with-info>.shell-battle-info{position:absolute;top:0;right:0;z-index:6;width:min(360px,90%);align-items:flex-end}
html.stage-pc body.teyvat .combat-panel .shell-enemies:is([data-count="1"],[data-count="2"],[data-count="3"],[data-count="4"],[data-count="5"],[data-count="6"]){grid-template-columns:repeat(var(--count,3),minmax(0,190px));justify-content:center;align-content:center;--enemy-h:150px}
html.stage-pc body.teyvat .combat-panel .shell-enemies[data-count="1"]{--count:1}
html.stage-pc body.teyvat .combat-panel .shell-enemies[data-count="2"]{--count:2}
html.stage-pc body.teyvat .combat-panel .shell-enemies[data-count="3"]{--count:3}
html.stage-pc body.teyvat .combat-panel .shell-enemies[data-count="4"]{--count:4}
html.stage-pc body.teyvat .combat-panel .shell-enemies[data-count="5"]{--count:5;--enemy-h:140px}
html.stage-pc body.teyvat .combat-panel .shell-enemies[data-count="6"]{--count:6;--enemy-h:126px}
html.stage-pc body.teyvat .combat-panel .shell-enemies[data-rows="2"]:not([data-count="5"]):not([data-count="6"]){--enemy-h:84px;align-content:start}
/* before the first turn the bar is the start button and the speed, without the paragraph about turn order */
body.teyvat .battle-command>p{display:none}
/* the phone's command row: whose turn (no face), four actions with a small ⓘ on their corner, a narrower run button */
html.stage-phone body.teyvat .battle-cards{overflow:visible!important;flex-wrap:nowrap;gap:5px;flex:1 1 auto;min-width:0}
html.stage-phone body.teyvat .battle-cards .battle-card-choice{position:relative;flex:1 1 0;min-width:0}
html.stage-phone body.teyvat .battle-cards button[data-card-id] small{display:none}
html.stage-phone body.teyvat :where(#root) .battle-cards button[data-card-id]{width:100%;min-width:0;padding:2px 6px 2px 2px;gap:3px}
html.stage-phone body.teyvat :where(#root) .battle-cards .battle-card-choice>button:not([data-card-id]){position:absolute;top:-5px;right:-4px;z-index:2;width:16px;height:16px;min-width:0;min-height:0;padding:0;font-size:.5rem;border-radius:50%}
html.stage-phone body.teyvat .battle-turn-banner .battle-turn-face{display:none}
html.stage-phone body.teyvat .battle-turn-banner{flex:0 0 auto;max-width:96px;padding:2px 8px}
html.stage-phone body.teyvat .battle-turn-banner .battle-turn-copy{font-size:.62rem;line-height:1.2}
html.stage-phone body.teyvat .battle-execute{flex:0 0 118px}
html.stage-phone body.teyvat :where(#root) .battle-execute>button{width:118px;min-width:0;padding-left:30px!important;font-size:.78rem}
body.teyvat .combat-panel .combatant-copy strong:has(>.shell-level){overflow:visible}
body.teyvat .battle-command .battle-turn strong,body.teyvat .battle-command strong,body.teyvat .battle-turn-copy :is(strong,b,span){white-space:normal!important;text-overflow:clip!important;overflow:visible!important;word-break:keep-all}

/* ---------- 모험가 핸드북: 탭마다 쪽 번호 (스크롤 없음) ---------- */
.hb-body{overflow:hidden!important;display:flex;flex-direction:column}
.hb-body>*{flex:0 0 auto}
.hb-body>.pane-pager{margin-top:auto}
.hb-body .pane-pager>button.pane-page{width:30px!important;height:30px!important;min-width:0!important;min-height:0!important;padding:0!important;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700}
.hb-body .pane-pager>button.pane-page.on{background:#39404f;color:#f4ecdc}
html.stage-phone .hb-body .pane-pager>button.pane-page{width:24px!important;height:24px!important;font-size:.62rem}

/* ---------- 지도: 이름 글씨도 누르면 고르고, 레벨 높은 곳은 빨갛게 ---------- */
body.teyvat .terrain-label.pressable{pointer-events:auto;cursor:pointer}
body.teyvat .terrain-label.danger,body.teyvat .terrain-label.danger .terrain-label-name{color:#ff8a7a}
body.teyvat .terrain-label.danger{border-color:rgba(255,110,96,.65);box-shadow:0 0 0 1px rgba(255,110,96,.25)}
body.teyvat .terrain-node.danger:not(.current){box-shadow:0 0 0 2px rgba(255,96,80,.85),0 0 10px rgba(255,96,80,.45)}
/* 0.16.36 (TODO 7): where the pinned material is found wears a gold ring (over the red of a dangerous place too). */
body.teyvat .terrain-node.tracked:not(.current){box-shadow:0 0 0 3px rgba(255,212,104,.95),0 0 12px 3px rgba(255,196,80,.6);z-index:3}
body.teyvat .terrain-node.tracked.faded{opacity:.95}
@media (prefers-reduced-motion:no-preference){html:not(.reduce-motion) body.teyvat .terrain-node.tracked:not(.current){animation:trackGlow 2.4s ease-in-out infinite}}
@keyframes trackGlow{0%,100%{box-shadow:0 0 0 3px rgba(255,212,104,.95),0 0 8px 2px rgba(255,196,80,.45)}50%{box-shadow:0 0 0 3px rgba(255,222,130,1),0 0 16px 5px rgba(255,200,90,.75)}}
body.teyvat .terrain-destination.danger strong{color:#ff9c8c}
body.teyvat .terrain-destination.danger .terrain-card-state{color:#ff9c8c;border-color:rgba(255,110,96,.55)}
body.teyvat .terrain-key-item.danger::before{background:#ff6a5a;box-shadow:0 0 0 2px rgba(255,110,96,.4)}
/* 0.16.30 개인 이야기: owned companions only, one row each (big face, name and story, one button), no recruiting list. */
.personal-story-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;margin:0}
.card.personal-story{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px;margin:0;min-height:80px}
.personal-story-face{width:64px;height:64px;border-radius:10px;object-fit:cover;object-position:top;background:rgba(0,0,0,.25);border:1px solid rgba(211,188,142,.35)}
.personal-story-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.personal-story-copy strong{font-size:1rem;word-break:keep-all}
.personal-story-copy small{font-size:.82rem;opacity:.8;word-break:keep-all;overflow-wrap:anywhere}
.personal-story-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:170px}
.personal-story-side button{margin:0;min-height:40px;white-space:normal;word-break:keep-all}
.personal-story-side small{text-align:right;word-break:keep-all}
.card.personal-story.done{opacity:.78}
.card.personal-story.done .personal-story-face{border-color:#d3bc8e}
.stage-phone .personal-story-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.stage-phone .card.personal-story{grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;min-height:0;column-gap:7px;row-gap:2px;padding:4px 6px;border-radius:10px}
.stage-phone .personal-story-face{width:44px;height:44px;grid-row:1/span 2;border-radius:8px}
.stage-phone .personal-story-copy{gap:1px}
.stage-phone .personal-story-copy strong{font-size:.74rem}
.stage-phone .personal-story-copy small{font-size:.6rem}
.stage-phone .personal-story-side{grid-column:2;align-items:flex-start;max-width:none;gap:2px}
.stage-phone .personal-story-side small{font-size:.6rem;text-align:left}
.stage-phone .personal-story-side :is(button,.objective-location){min-height:24px;font-size:.62rem;padding:1px 10px}
.stage-phone .personal-story-side .objective-location{display:none}
.stage-phone .hb-companions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.stage-phone .hb-companion.owned{gap:8px;padding:5px 8px}
.stage-phone .hb-companion-face{width:48px;height:48px;flex-basis:48px}
.stage-phone .hb-companion-copy{gap:1px}
.stage-phone .hb-companion strong{font-size:.74rem}
.stage-phone .hb-companion small{font-size:.6rem}
.stage-phone .hb-companion-copy>small{display:none}
.stage-phone .hb-companion-face{width:44px;height:44px;flex-basis:44px}
.stage-phone .hb-meter{grid-template-columns:62px minmax(0,1fr) auto;gap:4px}
.stage-phone .hb-meter small{font-size:.58rem}
.stage-phone .hb-meter b{font-size:.6rem}
.stage-phone .hb-meter-bar{height:6px}
/* 바위 눈동자: one tile per zone, square corners (no round pills side by side). */
.geo-trail-zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:8px 0}
.geo-trail-chip{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:6px;border:1px solid rgba(211,188,142,.25);background:rgba(0,0,0,.18);font-size:.84rem;word-break:keep-all}
.geo-trail-chip.complete{border-color:#d3bc8e;background:rgba(211,188,142,.18);color:#f1dfb4}
/* 핸드북 동료 이야기: big faces and segmented bars. */
.hb-companions{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.hb-companion.owned{flex-direction:row;align-items:center;gap:12px;padding:10px 12px}
.hb-companion-face{width:72px;height:72px;flex:0 0 72px;border-radius:10px;object-fit:cover;object-position:top;background:#e9dfc9;border:1px solid #d3bc8e}
.hb-companion-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.hb-meter{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:6px}
.hb-meter small{font-size:.74rem;color:#6b6f7c;white-space:nowrap}
.hb-meter b{font-size:.76rem;color:#39404f;font-weight:600}
.hb-meter-bar{display:flex;gap:3px;height:8px}
.hb-meter-bar i{flex:1;border-radius:2px;background:rgba(57,64,79,.14)}
.hb-meter-bar i.on{background:linear-gradient(90deg,#c9a560,#e3c47e)}
.hb-meter.full b{color:#9a7428}
.heart-row.bond-bar{display:flex;gap:4px;height:8px;max-width:180px;margin:4px 0}
.heart-row.bond-bar i{flex:1;border-radius:2px;background:rgba(211,188,142,.2)}
.heart-row.bond-bar i.on{background:linear-gradient(90deg,#c9a560,#e3c47e)}
/* 0.16.30 원소 부착: a stronger glow while attached, and a burst the moment it attaches. */
body.teyvat .combat-panel .combatant-row>.aura-fx{animation:fxAuraGlow 2.4s ease-in-out infinite}
body.teyvat .combat-panel .combatant-row>.aura-fx.aura-new::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,var(--aura) 0,transparent 68%);opacity:0;animation:fxAuraBurst .7s ease-out 1}
@keyframes fxAuraGlow{0%,100%{box-shadow:inset 0 0 18px -4px var(--aura)}50%{box-shadow:inset 0 0 34px -2px var(--aura)}}
@keyframes fxAuraBurst{0%{opacity:.9;transform:scale(.35)}60%{opacity:.45}100%{opacity:0;transform:scale(1.5)}}
html.reduce-motion body.teyvat .combat-panel .combatant-row>.aura-fx.aura-new::before{display:none}
/* 0.16.30: a big round still shows every fighter in the order bar — faces only (the one acting keeps its name). */
.stage-phone body.teyvat .combat-panel>.battle-order:has(>li:nth-child(7))>li:not(.current)>span,.stage-pc body.teyvat .combat-panel>.battle-order:has(>li:nth-child(11))>li:not(.current)>span{display:none}
.stage-phone body.teyvat .combat-panel>.battle-order:has(>li:nth-child(7))>li:not(.current),.stage-pc body.teyvat .combat-panel>.battle-order:has(>li:nth-child(11))>li:not(.current){padding-right:4px}
/* 0.16.30: the buy row no longer sticks to the card's foot (it slid over 「남은 재고」 on a phone); the card fits it or opens 「자세히」. */
body.teyvat .fit-box .market-controls{position:static!important}
/* On a phone the total sits beside the buy button (one row less). */
html.stage-phone body.teyvat .market-detail .market-controls{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:6px}
html.stage-phone body.teyvat .market-detail .market-controls>:is(.qty-stepper,.qty-why){grid-column:1/-1}
html.stage-phone body.teyvat .market-detail .market-controls>.qty-total{grid-column:1;text-align:left}
html.stage-phone body.teyvat .market-detail .market-controls>.qty-go{grid-column:2}
html.stage-phone body.teyvat .market-detail.fit-brief>.item-effect{display:none}
/* 0.16.31 장비 고르기: the window never scrolls; its list of gear turns pages. Who wears a piece now is red. */
body.teyvat dialog#modal>#modal-body:has(>.gear-picker){display:flex;flex-direction:column}
body.teyvat #modal-body>.gear-picker{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px;overflow:hidden}
body.teyvat #modal-body>.gear-picker>p{margin:0}
body.teyvat #modal-body .gear-options{flex:1 1 auto;min-height:0;max-height:none!important;overflow:hidden!important;align-content:start;grid-auto-rows:max-content}
body.teyvat #modal-body .gear-options>.pane-pager{grid-column:1/-1}
body.teyvat .gear-owner{color:#ff6b5e;font-weight:700}
body.teyvat .shell-forge-kind.gear-owner{color:#ff6b5e}
body.teyvat .gear-owner-line{margin:2px 0 6px}
/* 강화 결과: on top of the same window, one line (what happened, the new level, what it used). */
body.teyvat .enhance-confirm>.enhance-banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:8px 12px;margin:0 0 8px;border-radius:10px;border:1px solid rgba(211,188,142,.35);background:rgba(0,0,0,.22)}
body.teyvat .enhance-banner>strong{font-size:1.05rem}
body.teyvat .enhance-banner.success>strong,body.teyvat .enhance-banner.ascended>strong{color:#9be38f}
body.teyvat .enhance-banner.hold>strong{color:#f3dfae}
body.teyvat .enhance-banner.down>strong{color:#ff8a7a}
body.teyvat .enhance-banner>.enhance-level{font-weight:700}
body.teyvat .enhance-banner>small{flex-basis:100%}
body.teyvat :where(#modal) .enhance-confirm>button.enhance-go{width:100%;margin-top:6px}
/* 0.16.35 (user: 「이런 보기에 애매해보이는것도 바꿔도 돼」): the confirm window in two columns — the odds left, the stats that
   change and the cost right, each a short row of its own; the button beside the time it takes, not a bar across the window. */
body.teyvat .enhance-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start;margin:4px 0 0}
body.teyvat .enhance-cols>div{display:flex;flex-direction:column;gap:6px;min-width:0}
body.teyvat .enhance-cols .enhance-probabilities{margin:0}
body.teyvat .enhance-cols p{margin:0}
body.teyvat .enhance-sub{display:block;font-size:.72rem;letter-spacing:.04em;color:var(--t-muted,#a9b0bd)}
body.teyvat .enhance-stats,body.teyvat .enhance-cols .enhance-cost{display:flex;flex-direction:column;gap:4px;margin:0}
body.teyvat .enhance-stat,body.teyvat .enhance-cols .enhance-material{display:flex;align-items:center;gap:8px;min-height:34px;padding:4px 10px;border-radius:8px;background:rgba(0,0,0,.2);border:1px solid rgba(211,188,142,.14);flex-wrap:nowrap}
body.teyvat .enhance-stat>span{flex:1 1 auto;font-weight:700}
body.teyvat .enhance-stat>b{font-variant-numeric:tabular-nums;min-width:3ch;text-align:right;font-size:.95rem}
body.teyvat .enhance-stat>b.stat-up{color:#9be38f}
body.teyvat .enhance-stat>i{font-style:normal;opacity:.6}
body.teyvat .enhance-cols .enhance-material>span{flex:1 1 auto;font-weight:700}
body.teyvat .enhance-cols .enhance-material>small{margin:0;opacity:.8;white-space:nowrap}
body.teyvat .enhance-cols .enhance-material :is(img.enhance-mora-icon,.item-glyph,img.item-icon){width:26px;height:26px;min-width:26px;object-fit:contain}
body.teyvat :where(#modal) .enhance-cols .enhance-material>button.enhance-pin{flex:0 0 auto;min-width:0;min-height:0;width:30px;height:28px;margin:0;padding:0;border-radius:8px;font-size:.86rem;line-height:1}
body.teyvat :where(#modal) .enhance-cols .enhance-material>button.enhance-pin::before{display:none!important}
html.stage-phone body.teyvat :where(#modal) .enhance-cols .enhance-material>button.enhance-pin{width:24px;height:20px;font-size:.66rem}
body.teyvat .enhance-foot{display:flex;align-items:center;gap:14px;margin-top:10px}
body.teyvat .enhance-foot>p{margin:0;flex:1 1 auto;min-width:0}
body.teyvat :where(#modal) .enhance-foot>button.enhance-go{width:auto;flex:0 0 auto;margin:0;padding:0 24px}
html.stage-phone body.teyvat .enhance-cols{gap:8px;margin:2px 0 0}
html.stage-phone body.teyvat .enhance-cols>div{gap:3px}
html.stage-phone body.teyvat .enhance-left>p.muted{display:none}
html.stage-phone body.teyvat .enhance-cols .enhance-probabilities{grid-template-columns:1fr;gap:3px}
html.stage-phone body.teyvat .enhance-cols .enhance-prob{flex-direction:row;min-height:24px;padding:2px 8px;border-radius:7px;align-items:center}
html.stage-phone body.teyvat .enhance-cols .enhance-prob>span{font-size:.62rem}
html.stage-phone body.teyvat .enhance-cols .enhance-material>small{font-size:.58rem}
html.stage-phone body.teyvat .enhance-sub{font-size:.54rem}
html.stage-phone body.teyvat .enhance-stat,html.stage-phone body.teyvat .enhance-cols .enhance-material{min-height:24px;padding:2px 8px;gap:6px;border-radius:7px}
html.stage-phone body.teyvat .enhance-stat>b{font-size:.7rem}
html.stage-phone body.teyvat .enhance-cols .enhance-material :is(img.enhance-mora-icon,.item-glyph,img.item-icon){width:18px;height:18px;min-width:18px}
html.stage-phone body.teyvat .enhance-cols .enhance-material>:first-child{flex:0 0 18px;width:18px;height:18px;min-height:0;padding:0;margin:0;overflow:hidden}
html.stage-phone body.teyvat .enhance-foot{gap:8px;margin-top:5px}
html.stage-phone body.teyvat .enhance-foot>p{font-size:.56rem}
html.stage-phone body.teyvat :where(#modal) .enhance-foot>button.enhance-go{min-height:28px;font-size:.66rem;padding:0 14px}
/* A gear piece's hover note never stands in the way of the page buttons or another piece. */
body.teyvat .gear-tip{pointer-events:none}
/* 0.16.36 (TODO 7) a domain or boss result: 「다시 도전」 beside 「메인 화면으로」; a shut retry says when it opens. */
body.teyvat .shell-result-actions>.result-retry-why{flex-basis:100%;text-align:center;font-size:.74rem;color:var(--t-muted,#a9b0bd);margin:2px 0 0}
html.stage-phone body.teyvat .shell-result-actions>.result-retry-why{font-size:.56rem;margin:0}
/* 0.16.31 빠른 식사 (after a fight) and the HP bar on whom a dish is for. */
body.teyvat .quick-meal{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 12px;max-width:720px;margin:14px auto 0;padding:10px 14px;border-radius:12px;border:1px solid rgba(211,188,142,.25);background:rgba(0,0,0,.25)}
body.teyvat .quick-meal>.qm-title{grid-row:1/span 2;font-size:.85rem;color:#f3dfae;writing-mode:horizontal-tb}
body.teyvat .qm-foods,body.teyvat .qm-people{display:flex;flex-wrap:wrap;gap:6px}
body.teyvat :where(#root) .qm-food{position:relative;min-width:0;min-height:0;width:52px;height:52px;padding:4px;margin:0;border-radius:10px;display:grid;place-items:center}
body.teyvat :where(#root) .qm-food::before{display:none!important}
body.teyvat .qm-food :is(img,.item-glyph){width:36px;height:36px;object-fit:contain}
body.teyvat .qm-food.selected{outline:2px solid #f3dfae;outline-offset:1px}
body.teyvat .qm-food>.qm-count{position:absolute;right:3px;bottom:1px;font-size:.62rem;text-shadow:0 1px 2px #000}
body.teyvat :where(#root) .qm-person{display:flex;align-items:center;gap:6px;min-width:0;min-height:0;width:140px;padding:4px 8px 4px 4px;margin:0;border-radius:10px;text-align:left}
body.teyvat :where(#root) .qm-person::before{display:none!important}
body.teyvat .qm-face{width:40px;height:40px;border-radius:8px;object-fit:cover;object-position:top;flex:0 0 40px}
body.teyvat .qm-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
body.teyvat .qm-copy>small{font-size:.7rem;line-height:1.1}
body.teyvat .qm-hp{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
body.teyvat .qm-hp>i{display:block;height:100%;background:linear-gradient(90deg,#6fd36a,#a8e86b)}
body.teyvat .qm-hp.low>i{background:linear-gradient(90deg,#e0573f,#f08a5d)}
body.teyvat .item-use-target>.qm-hp{width:100%;margin-top:2px}
/* 0.16.54: the bag's 「누구에게」 buttons — the name and its HP bar stacked beside the face, two buttons a row, the same size. */
body.teyvat :where(#root,#modal) button.item-use-target{flex:1 1 calc(50% - 6px);min-width:0;justify-content:flex-start}
body.teyvat .item-use-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
body.teyvat .item-use-name{white-space:nowrap;line-height:1.15;text-align:left}
body.teyvat .item-use-copy>.qm-hp{width:100%}
html.stage-phone body.teyvat .quick-meal{max-width:none;margin:4px auto 0;padding:4px 8px;gap:6px;grid-template-columns:auto auto auto;justify-content:center}
html.stage-phone body.teyvat .quick-meal>.qm-title{grid-row:auto;font-size:.66rem}
html.stage-phone body.teyvat .qm-foods,html.stage-phone body.teyvat .qm-people{flex-wrap:nowrap;gap:4px}
html.stage-phone body.teyvat .qm-food:nth-child(n+4){display:none}
html.stage-phone body.teyvat :where(#root) .qm-food{width:38px;height:38px}
html.stage-phone body.teyvat .qm-food :is(img,.item-glyph){width:26px;height:26px}
html.stage-phone body.teyvat :where(#root) .qm-person{width:112px;padding:2px 5px 2px 2px;gap:4px}
html.stage-phone body.teyvat .qm-face{width:30px;height:30px;flex-basis:30px}
html.stage-phone body.teyvat .qm-copy>small{font-size:.58rem}
body.teyvat .qm-name{display:flex;justify-content:space-between;gap:4px}
body.teyvat .qm-gain{color:#9be38f;font-weight:700}
body.teyvat .qm-title{display:flex;flex-direction:column;gap:2px;max-width:110px}
body.teyvat .qm-title>strong{font-size:.85rem;color:#f3dfae}
body.teyvat .qm-title>.qm-dish{font-size:.7rem;opacity:.85;word-break:keep-all}
html.stage-phone body.teyvat .qm-title{max-width:64px}
html.stage-phone body.teyvat .qm-title>strong{font-size:.66rem}
html.stage-phone body.teyvat .qm-title>.qm-dish{font-size:.55rem}
/* 0.16.31 the official food effect icon in a dish tile's corner. */
body.teyvat :is(.bag-item,.market-item,.shell-forge-tile-art,.qm-food){position:relative}
body.teyvat .food-effect-mark{position:absolute;top:3px;left:3px;width:18px;height:18px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));z-index:2}
html.stage-phone body.teyvat .food-effect-mark{width:14px;height:14px;top:2px;left:2px}
/* The lock (거래 불가) keeps the top-left corner; 「장착」 and the food mark sit beside it, never under it. */
body.teyvat .bag-item:has(>.item-bound)>:is(.item-worn,.food-effect-mark){left:26px!important}
html.stage-phone body.teyvat .bag-item:has(>.item-bound)>:is(.item-worn,.food-effect-mark){left:22px!important}
body.teyvat :is(.shell-forge-tile-art,.bag-item,.market-item,.qm-food)>img.food-effect-mark{position:absolute!important;inset:auto!important;top:3px!important;left:3px!important;width:18px!important;height:18px!important;max-width:none!important;margin:0!important;padding:0!important;transform:none!important;border:0!important;background:none!important;object-fit:contain}
html.stage-phone body.teyvat :is(.shell-forge-tile-art,.bag-item,.market-item,.qm-food)>img.food-effect-mark{width:14px!important;height:14px!important;top:2px!important;left:2px!important}
body.teyvat .bag-item:has(>.item-bound)>img.food-effect-mark{left:26px!important}
html.stage-phone body.teyvat .bag-item:has(>.item-bound)>img.food-effect-mark{left:22px!important}
body.teyvat .shell-forge-list .shell-forge-tile-art>img.food-effect-mark.food-effect-mark{width:18px!important;height:18px!important}
html.stage-phone body.teyvat .shell-forge-list .shell-forge-tile-art>img.food-effect-mark.food-effect-mark{width:13px!important;height:13px!important;top:auto!important;left:auto!important;right:-5px!important;bottom:-3px!important}
/* 0.16.31 강화 window on a phone: one screen — the odds in one short row, the fine print left out. */
html.stage-phone body.teyvat .enhance-confirm{font-size:.62rem;line-height:1.3}
html.stage-phone body.teyvat .enhance-confirm>h2{font-size:.82rem;margin:0 0 2px}
html.stage-phone body.teyvat .enhance-confirm>p{margin:1px 0}
html.stage-phone body.teyvat .enhance-confirm>p.muted:not(.gear-owner-line){display:none}
html.stage-phone body.teyvat .enhance-confirm .enhance-probabilities{gap:4px;margin:2px 0}
html.stage-phone body.teyvat .enhance-confirm .enhance-prob{padding:2px 6px;display:flex;justify-content:space-between;align-items:baseline;gap:6px}
html.stage-phone body.teyvat .enhance-confirm .enhance-prob strong{font-size:.78rem}
html.stage-phone body.teyvat .enhance-confirm .enhance-comparison :is(th,td){padding:1px 6px;font-size:.62rem}
html.stage-phone body.teyvat .enhance-confirm .enhance-cost{padding:2px 0;gap:2px}
html.stage-phone body.teyvat .enhance-confirm .enhance-material :is(img,.item-glyph){width:20px;height:20px}
html.stage-phone body.teyvat :where(#modal) .enhance-confirm>button.enhance-go{min-height:28px;font-size:.66rem;margin-top:3px}
html.stage-phone body.teyvat .enhance-confirm>.enhance-banner{padding:3px 8px;margin:0 0 3px}
/* the forge's two filters stay inside their row on a phone */
html.stage-phone body.teyvat .forge-filters{gap:6px;margin:0}
html.stage-phone body.teyvat .forge-toggle{font-size:.58rem;min-height:0;gap:3px;padding:0}
html.stage-phone body.teyvat .forge-toggle>input{width:12px;height:12px;margin:0}
html.stage-phone body.teyvat .enhance-banner>:is(strong,.enhance-level){font-size:.74rem}
html.stage-phone body.teyvat .enhance-banner>small{flex-basis:auto;font-size:.56rem}
body.teyvat .enhance-banner>.enhance-level{font-size:1rem}
/* 0.16.32 (user: 「개판인데? UI좀 잘 좀 보라고」): the map's head on a phone — the place's name on one line, short words on the shortcuts. */
body.teyvat .terrain-shortcuts .nav-short{display:none}
html.stage-phone body.teyvat .terrain-shortcuts .nav-long{display:none}
html.stage-phone body.teyvat .terrain-shortcuts .nav-short{display:inline}
body.teyvat .terrain-header>.terrain-title{flex:0 1 auto;min-width:0}
body.teyvat .terrain-header>.terrain-title>h2{white-space:nowrap}
html.stage-phone body.teyvat .terrain-header{gap:6px;flex-wrap:nowrap}
html.stage-phone body.teyvat .terrain-header>.terrain-title>small{white-space:nowrap}
html.stage-phone body.teyvat .terrain-shortcuts{flex-wrap:nowrap;gap:4px;margin-left:auto}
html.stage-phone body.teyvat :where(#root) .terrain-shortcuts>button{min-height:24px;padding:2px 9px;font-size:.62rem;white-space:nowrap}
/* The story's next step on a phone: the place on one line, its two buttons side by side. */
html.stage-phone body.teyvat .shell-loc-left .journey-objective{display:grid;grid-template-columns:1fr 1fr;gap:3px 5px;align-items:center}
html.stage-phone body.teyvat .shell-loc-left .journey-objective>*{grid-column:1/-1;margin:0}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .journey-objective>button{grid-column:auto;min-height:26px;padding:2px 8px;font-size:.62rem;white-space:normal;word-break:keep-all;line-height:1.15}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .journey-objective>button:only-of-type{grid-column:1/-1}
/* A region event on a phone: one compact card — its name, a line of words, the choices in a row. */
html.stage-phone body.teyvat .region-event{padding:5px 8px;gap:3px}
html.stage-phone body.teyvat .region-event .re-head{gap:6px}
html.stage-phone body.teyvat .region-event .re-icon{width:16px;height:16px}
html.stage-phone body.teyvat .region-event .re-words h2{font-size:.78rem;margin:0}
html.stage-phone body.teyvat .region-event .re-eyebrow{font-size:.54rem}
html.stage-phone body.teyvat .region-event .re-text{font-size:.62rem;line-height:1.35;margin:2px 0}
html.stage-phone body.teyvat .region-event .re-choices{display:flex;flex-direction:row;flex-wrap:wrap;gap:3px 6px}
html.stage-phone body.teyvat .region-event .re-choice{display:flex;flex-direction:column;gap:1px;flex:1 1 30%;min-width:120px;height:auto}
html.stage-phone body.teyvat :where(#root) .region-event .re-choice>button{min-height:24px;padding:2px 8px;font-size:.62rem}
html.stage-phone body.teyvat .region-event :is(.re-reward,.re-primo,.choice-note){font-size:.54rem;margin:0}
/* The phone's left column gives its list the room: the place's name and level on one line, slimmer tabs. */
html.stage-phone body.teyvat .shell-loc-left>.shell-loc-head{display:flex!important;align-items:center;gap:6px;flex-wrap:nowrap;min-height:0}
html.stage-phone body.teyvat .shell-loc-left>.shell-loc-head>h1{margin:0;white-space:nowrap;font-size:.92rem;line-height:1.2}
html.stage-phone body.teyvat .shell-loc-left>.shell-loc-head>.area-level{margin:0;white-space:nowrap;font-size:.54rem;padding:1px 6px}
html.stage-phone body.teyvat .shell-loc-left>.shell-loc-head>.wait-controls{margin:0 0 0 auto;position:static!important}
html.stage-phone body.teyvat .shell-loc-left .shell-loc-side>.shell-tabbar{padding:2px;gap:3px}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .shell-loc-side>.shell-tabbar>.shell-tab{min-height:23px;padding:1px 6px;font-size:.6rem}
html.stage-phone body.teyvat .shell-loc-left .shell-loc-side>.shell-tabbar>.shell-tab svg{width:11px;height:11px}
/* The merchant's goods in their window: two columns of one-line rows. */
body.teyvat #modal-body .re-shop-window{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px}
html.stage-phone body.teyvat #modal-body .re-shop-window .re-shop-row{padding:3px 6px;gap:6px;font-size:.62rem}
html.stage-phone body.teyvat #modal-body :is(.re-shop-window,.re-gift-window) .re-gift-icon{width:26px;height:26px}
html.stage-phone body.teyvat :where(#modal) .re-shop-window button{min-height:24px;padding:2px 10px;font-size:.62rem}
body.teyvat #modal-body .re-gift-window{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px}
html.stage-phone body.teyvat .region-event .re-head>svg{width:18px!important;height:18px!important;flex:0 0 18px}
body.teyvat .region-event .re-head>svg{flex:0 0 auto}
html.stage-phone body.teyvat .shell-loc-left .shell-loc-side>.shell-tabbar{flex-wrap:nowrap!important;display:flex!important}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .shell-loc-side>.shell-tabbar>.shell-tab{flex:1 1 0;min-width:0;gap:3px;white-space:nowrap}
html.stage-phone body.teyvat .shell-loc-left .shell-loc-side>.shell-tabbar>.shell-tab>.shell-tab-badge,html.stage-phone body.teyvat .shell-loc-left .shell-loc-side>.shell-tabbar>.shell-tab>small{font-size:.5rem}
html.stage-phone body.teyvat .shell-loc-left>.shell-loc-head{flex-wrap:wrap!important;row-gap:1px}
html.stage-phone body.teyvat .shell-loc-left>.shell-loc-head>h1{flex:0 1 auto;min-width:0}
html.stage-phone body.teyvat .shell-loc-left>.shell-loc-head>.wait-controls{order:2}
html.stage-phone body.teyvat .shell-loc-left>.shell-loc-head>.area-level{order:3}
html.stage-phone body.teyvat :where(#root) .region-event .re-choices>button{min-height:24px;padding:2px 10px;font-size:.62rem;flex:0 0 auto}
html.stage-phone body.teyvat .shell-loc-left>.shell-loc-head{height:auto!important;align-content:flex-start}
html.stage-phone body.teyvat .shell-loc-left>.shell-loc-head>h1{font-size:.84rem}
html.stage-phone body.teyvat .shell-loc-left>.shell-loc-head>.area-level{font-size:.5rem}
html.stage-phone body.teyvat :where(#root) .shell-loc-left>.shell-loc-head>.wait-controls>button{min-height:20px;padding:1px 8px;font-size:.54rem}
html.stage-phone body.teyvat .region-event .re-eyebrow{display:none}
html.stage-phone body.teyvat .region-event .re-text{font-size:.58rem;line-height:1.3}
html.stage-phone body.teyvat .region-event .re-choice{flex:1 1 100%;flex-direction:row;align-items:center;gap:6px}
html.stage-phone body.teyvat .region-event .re-choice>.re-reward{flex:1;min-width:0;line-height:1.2}
/* On a phone the event's card is brief (name, words, the choices in a row); 「자세히」 opens it whole with the rewards. */
html.stage-phone body.teyvat .region-event.phone-brief :is(.re-reward,.re-primo,.re-choice>.choice-note){display:none}
html.stage-phone body.teyvat .region-event.phone-brief .re-choice{flex:0 1 auto;min-width:0}
html.stage-phone body.teyvat .region-event.phone-brief .re-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:visible}
html.stage-phone body.teyvat .region-event .re-head>.re-more{margin-left:auto;min-height:20px;padding:1px 8px;font-size:.54rem}
body.teyvat #modal-body>.region-event{border:0;background:none;padding:0}
/* Level-ups after a fight: a row of chips (face, name, Lv. a → b), the note once. */
body.teyvat .loot-summary .level-up-title{margin:8px 0 4px;font-size:.9rem;color:#f3dfae}
body.teyvat .loot-summary .level-ups{display:flex;flex-wrap:wrap;gap:6px}
body.teyvat .loot-summary .level-up-chip{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:10px;border:1px solid rgba(211,188,142,.35);background:rgba(0,0,0,.22)}
body.teyvat .loot-summary .level-up-face{width:34px;height:34px;border-radius:8px;object-fit:cover;object-position:top;flex:0 0 34px}
body.teyvat .loot-summary .level-up-copy{display:flex;flex-direction:column;line-height:1.15}
body.teyvat .loot-summary .level-up-copy>strong{font-size:.78rem}
body.teyvat .loot-summary .level-up-copy>small{font-size:.7rem;color:#9be38f}
body.teyvat .loot-summary .level-up-note{margin:4px 0 0;font-size:.7rem}
html.stage-phone body.teyvat .loot-summary .level-up-face{width:26px;height:26px;flex-basis:26px}
html.stage-phone body.teyvat .loot-summary .level-up-copy>strong{font-size:.64rem}
html.stage-phone body.teyvat .loot-summary .level-up-copy>small{font-size:.58rem}
html.stage-phone body.teyvat .loot-summary .level-up-title{font-size:.72rem;margin:4px 0 2px}
html.stage-phone body.teyvat .loot-summary .level-up-note{font-size:.56rem}
/* 지역 정보 on a phone: small lines, the encounters one row each. */
html.stage-phone body.teyvat .mond-region-guide{padding:5px 8px}
html.stage-phone body.teyvat .mond-region-guide .region-guide-summary{font-size:.7rem}
html.stage-phone body.teyvat .mond-region-guide :is(p,small){font-size:.58rem;line-height:1.3;margin:1px 0}
html.stage-phone body.teyvat .mond-region-guide .region-encounters>summary{font-size:.62rem}
html.stage-phone body.teyvat .mond-region-guide .region-encounter-line{display:flex;flex-wrap:wrap;gap:0 6px;margin:2px 0}
html.stage-phone body.teyvat .mond-region-guide .region-encounter-line>strong{font-size:.6rem}
html.stage-phone body.teyvat .mond-region-guide summary{min-height:0!important;padding:2px 4px!important;line-height:1.25;margin:0!important}
html.stage-phone body.teyvat .mond-region-guide .region-encounters{margin:2px 0;padding:0}
html.stage-phone body.teyvat .shell-loc-left .journey-objective{padding:4px 7px}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .journey-objective>button{min-height:22px}
html.stage-phone body.teyvat .shell-loc-left .journey-objective>.objective-location{font-size:.58rem;line-height:1.2}
html.stage-phone body.teyvat .region-event{padding:4px 7px}
html.stage-phone body.teyvat :where(#root) .region-event :is(.re-choice>button,.re-choices>button){min-height:22px}
/* A gathering · fishing card on a phone: one row — the name and today's count, the pictures, the button. */
html.stage-phone body.teyvat .shell-loc-left .life-card{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 8px;padding:4px 7px;min-height:0}
html.stage-phone body.teyvat .shell-loc-left .life-card>.life-card-head{display:flex;flex-direction:column;align-items:flex-start;gap:1px;margin:0}
html.stage-phone body.teyvat .shell-loc-left .life-card .life-card-name{font-size:.68rem}
html.stage-phone body.teyvat .shell-loc-left .life-card .life-chip{font-size:.5rem;padding:0 5px;min-height:0}
html.stage-phone body.teyvat .shell-loc-left .life-card>.life-card-items{display:flex;flex-wrap:wrap;gap:3px;margin:0;min-width:0}
html.stage-phone body.teyvat .shell-loc-left .life-card .life-item{width:26px;height:26px;padding:1px}
html.stage-phone body.teyvat .shell-loc-left .life-card .life-icon{width:22px;height:22px}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .life-card>button.life-go{min-height:24px;padding:2px 10px;font-size:.6rem;margin:0;width:auto}
html.stage-phone body.teyvat .shell-loc-left .life-cards{gap:4px}
html.stage-phone body.teyvat .region-event.phone-brief .re-choices{flex-direction:row;flex-wrap:wrap;gap:3px 5px}
html.stage-phone body.teyvat .region-event.phone-brief .re-choices>.re-choice{flex:0 1 auto;min-width:0;flex-direction:row}
html.stage-phone body.teyvat .shell-loc-left p.no-places{display:none}
html.stage-phone body.teyvat .shell-loc-left .pane-pager{min-height:0;padding:1px 0;gap:4px}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .pane-pager>.pane-page{width:20px;height:20px;min-width:20px;min-height:20px;font-size:.56rem}
html.stage-phone body.teyvat .region-event .re-words h2{font-size:.72rem;line-height:1.2}
html.stage-phone body.teyvat .region-event .re-text{line-height:1.25;margin:1px 0}
html.stage-phone body.teyvat .region-event .re-head{min-height:0}
html.stage-phone body.teyvat :where(#root) .region-event .re-head>.re-more{min-height:18px;padding:0 7px}
html.stage-phone body.teyvat .shell-loc-left .task-mini{padding:4px 7px}
html.stage-phone body.teyvat .shell-loc-left .life-card>.life-card-head{grid-column:1;grid-row:1/span 2}
html.stage-phone body.teyvat .shell-loc-left .life-card>.life-card-items{grid-column:2;grid-row:1}
html.stage-phone body.teyvat .shell-loc-left .life-card>.life-card-gear{grid-column:2;grid-row:2;display:flex;gap:3px;margin:0}
html.stage-phone body.teyvat .shell-loc-left .life-card>.life-card-gear .life-item{width:24px;height:24px}
html.stage-phone body.teyvat .shell-loc-left .life-card>.life-card-why{grid-column:3;grid-row:1;font-size:.5rem;text-align:center;margin:0}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .life-card>button.life-go{grid-column:3;grid-row:1/span 2}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .life-card:has(>.life-card-why)>button.life-go{grid-row:2}
html.stage-phone body.teyvat .shell-loc-left .life-card>.life-card-where{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin:0;font-size:.52rem}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .life-card>.life-card-where button{min-height:20px;padding:1px 8px;font-size:.54rem}
/* 0.16.35: a phone's life card that still needs its gear: the gear beside the pictures, and where to get it (with the way
   there) in the place of the locked button — two short lines, so the card stays whole on one page (it was cut into nine). */
html.stage-phone body.teyvat .shell-loc-left .life-card:has(>.life-card-where){grid-template-columns:auto auto minmax(0,1fr) auto}
html.stage-phone body.teyvat .shell-loc-left .life-card:has(>.life-card-where){gap:3px 6px}
html.stage-phone body.teyvat .shell-loc-left .life-card:has(>.life-card-where)>.life-card-head{grid-row:1;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:3px}
html.stage-phone body.teyvat .shell-loc-left .life-card:has(>.life-card-where)>.life-card-gear{grid-column:3;grid-row:1}
html.stage-phone body.teyvat .shell-loc-left .life-card:has(>.life-card-where)>.life-card-why{grid-column:4;grid-row:1}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .life-card:has(>.life-card-where)>button.life-go{display:none}
html.stage-phone body.teyvat .shell-loc-left .life-card:has(>.life-card-where)>.life-card-where{grid-column:1/-1;grid-row:2;flex-wrap:nowrap;justify-content:space-between}
html.stage-phone body.teyvat .shell-loc-left .life-card>.life-card-where .material-source{font-size:.52rem;line-height:1.2;min-width:0}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .life-card>.life-card-where button{flex:0 0 auto}
/* 0.16.35 the oculus offering card: its title and count on one row, the reward with the button beside it on the next. */
body.teyvat .oculus-offer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:4px}
body.teyvat .oculus-offer>:is(.oo-head,.oo-text){grid-column:1/-1;margin:0}
body.teyvat .oculus-offer>.oo-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
body.teyvat .oculus-offer>.oo-head>h2{margin:0}
body.teyvat .oculus-offer>.oo-head>.oo-count{font-size:.8rem;color:#bfe6f5;white-space:nowrap}
body.teyvat .oculus-offer>.reward-preview{margin:0;min-width:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 6px;align-items:center}
body.teyvat .oculus-offer>.reward-preview>*{margin:0}
body.teyvat .oculus-offer>.oo-foot{grid-column:2;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
body.teyvat .oculus-offer>.oo-foot>small{margin:0;text-align:right}
body.teyvat :where(#root) .oculus-offer>.oo-foot>button{margin:0}
html.stage-phone body.teyvat .shell-loc-left .oculus-offer{padding:4px 7px;row-gap:2px;column-gap:6px}
html.stage-phone body.teyvat .shell-loc-left .oculus-offer>.oo-head>h2{font-size:.68rem}
html.stage-phone body.teyvat .shell-loc-left .oculus-offer>.oo-head>.oo-count{font-size:.54rem}
html.stage-phone body.teyvat .shell-loc-left .oculus-offer>.oo-text{display:none}
html.stage-phone body.teyvat .shell-loc-left .oculus-offer>.oo-foot>small{font-size:.5rem}
html.stage-phone body.teyvat .shell-loc-left .oculus-offer>.reward-preview{display:flex;flex-wrap:wrap;gap:2px 4px}
html.stage-phone body.teyvat .shell-loc-left .oculus-offer>.reward-preview>*{font-size:.54rem;padding:1px 6px;margin:0;min-height:0;line-height:1.3}
html.stage-phone body.teyvat .shell-loc-left .oculus-offer>.reward-preview img{width:12px;height:12px}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .oculus-offer>.oo-foot>button{min-height:22px;padding:1px 9px;font-size:.58rem}
/* 0.16.32 「공명」: the oculus mark in the map's corner — faint, near, nearer, here (a button that pulses). */
body.teyvat .shell-loc-main .terrain-frame{position:relative}
body.teyvat .resonance-mark{position:absolute;left:8px;bottom:56px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 6px;border-radius:12px;border:1px solid rgba(160,230,220,.25);background:rgba(10,24,30,.62);color:#dff6f2;pointer-events:none}
body.teyvat button.resonance-mark{pointer-events:auto;cursor:pointer;min-width:0;min-height:0;margin:0;font:inherit}
body.teyvat :where(#root) button.resonance-mark::before{display:none!important}
body.teyvat .resonance-mark .resonance-icon{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 2px rgba(150,240,220,.4));opacity:.55}
body.teyvat .resonance-mark>small{font-size:.6rem;white-space:nowrap}
body.teyvat .resonance-mark.lv1 .resonance-icon{opacity:.75;filter:drop-shadow(0 0 5px rgba(150,240,220,.6))}
body.teyvat .resonance-mark.lv2 .resonance-icon{opacity:.9;filter:drop-shadow(0 0 9px rgba(160,250,230,.85));animation:resonanceBreath 2.2s ease-in-out infinite}
body.teyvat .resonance-mark.lv3{border-color:#f3dfae;background:rgba(40,32,12,.78);color:#f3dfae;animation:resonancePulse 1.2s ease-in-out infinite}
body.teyvat .resonance-mark.lv3 .resonance-icon{opacity:1;filter:drop-shadow(0 0 12px rgba(255,230,150,.95))}
@keyframes resonanceBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes resonancePulse{0%,100%{box-shadow:0 0 0 0 rgba(243,223,174,.6)}50%{box-shadow:0 0 0 8px rgba(243,223,174,0)}}
html.stage-phone body.teyvat .resonance-mark{left:6px;bottom:44px;padding:2px 4px}
html.stage-phone body.teyvat .resonance-mark .resonance-icon{width:22px;height:22px}
html.stage-phone body.teyvat .resonance-mark>small{font-size:.5rem}
/* The catch game */
body.teyvat .resonance-game{display:flex;flex-direction:column;gap:6px;align-items:stretch}
body.teyvat .resonance-game .resonance-note{margin:0;text-align:center;font-size:.8rem}
body.teyvat .resonance-field{position:relative;height:220px;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(120,210,200,.18),rgba(0,0,0,.35));border:1px solid rgba(160,230,220,.25)}
body.teyvat :where(#modal) .resonance-orb{position:absolute;width:54px;height:54px;min-width:0;min-height:0;padding:0;margin:0;border-radius:50%;border:0;background:radial-gradient(circle,rgba(200,255,240,.35),rgba(0,0,0,0) 70%);transition:left .35s ease-out,top .35s ease-out;cursor:pointer}
body.teyvat :where(#modal) .resonance-orb::before{display:none!important}
body.teyvat .resonance-orb .resonance-icon{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(180,255,235,.9))}
body.teyvat .resonance-dots{display:flex;justify-content:center;gap:6px}
body.teyvat .resonance-dots>span{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.15)}
body.teyvat .resonance-dots>span.on{background:#f3dfae}
body.teyvat .resonance-time{height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
body.teyvat .resonance-time>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8fe0d2,#f3dfae)}
html.stage-phone body.teyvat .resonance-field{height:170px}
html.stage-phone body.teyvat .resonance-game .resonance-note{font-size:.62rem}
/* 0.16.32 (TODO 4-6): a timed search shows over the screen's top edge instead of pushing everything down. */
body.teyvat #world-work-status.world-work-status{position:fixed;left:50%;top:52px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:8px;padding:5px 12px;margin:0;border-radius:12px;background:rgba(14,20,30,.92);border:1px solid rgba(211,188,142,.4);box-shadow:0 6px 20px rgba(0,0,0,.4);max-width:min(560px,92vw)}
body.teyvat #world-work-status progress{width:140px}
html.stage-phone body.teyvat #world-work-status.world-work-status{top:40px;padding:3px 8px;font-size:.62rem;gap:6px}
html.stage-phone body.teyvat #world-work-status progress{width:90px}
html.stage-phone body.teyvat :where(#root) #world-work-status button{min-height:22px;padding:1px 8px;font-size:.58rem}
body.teyvat .mond-region-guide>.region-guide-summary{margin:0 0 4px;font-size:.92rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
body.teyvat .mond-region-guide .region-encounters>h4{margin:8px 0 3px;font-size:.8rem;color:#f3dfae}
html.stage-phone body.teyvat .mond-region-guide>.region-guide-summary{font-size:.7rem;margin:0 0 2px}
html.stage-phone body.teyvat .mond-region-guide .region-encounters>h4{font-size:.62rem;margin:3px 0 1px}
/* The brief event card on a computer too (long choices with notes overflowed the column): words, choices, 「자세히」. */
body.teyvat .shell-loc-left .region-event.phone-brief :is(.re-reward,.re-primo,.re-choice>.choice-note){display:none}
body.teyvat .shell-loc-left .region-event.phone-brief .re-choices{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 6px}
body.teyvat .shell-loc-left .region-event.phone-brief .re-choices>.re-choice{flex:0 1 auto;min-width:0}
body.teyvat .shell-loc-left .region-event .re-head>.re-more{margin-left:auto}
/* The story's next step on a computer too: what to do, where, and the two buttons side by side; the repeated lines go. */
html.stage-pc body.teyvat .shell-loc-left .journey-objective{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;align-items:center;padding:8px 12px}
html.stage-pc body.teyvat .shell-loc-left .journey-objective>*{grid-column:1/-1;margin:0}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .journey-objective>button{grid-column:auto;min-height:34px;padding:4px 12px;font-size:.78rem;white-space:normal;word-break:keep-all;line-height:1.2}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .journey-objective>button:only-of-type{grid-column:1/-1}
body.teyvat .shell-loc-left .journey-objective>p.muted,body.teyvat .shell-loc-left .journey-objective>small.muted{display:none}
html.stage-pc body.teyvat .shell-loc-left .journey-objective>p:not(.objective-location){font-size:.8rem;line-height:1.35}
html.stage-pc body.teyvat .shell-loc-left .region-event{padding:8px 12px;gap:4px}
html.stage-pc body.teyvat .shell-loc-left .region-event .re-head{gap:8px;align-items:center}
html.stage-pc body.teyvat .shell-loc-left .region-event .re-head>svg{width:22px!important;height:22px!important;flex:0 0 22px}
html.stage-pc body.teyvat .shell-loc-left .region-event .re-words h2{font-size:.92rem;margin:0}
html.stage-pc body.teyvat .shell-loc-left .region-event .re-eyebrow{font-size:.62rem}
html.stage-pc body.teyvat .shell-loc-left .region-event .re-text{font-size:.76rem;line-height:1.4;margin:2px 0}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .region-event .re-head>.re-more{min-height:26px;padding:2px 12px;font-size:.7rem;white-space:nowrap;flex:0 0 auto}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .region-event :is(.re-choice>button,.re-choices>button){min-height:30px;padding:3px 12px;font-size:.76rem}
/* An oculus clue in the list: its name, the clue, 살펴보기 (the steps open in a window). */
body.teyvat .discovery-card.discovery-brief{padding:6px 10px;gap:2px}
body.teyvat .discovery-brief>.discovery-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
body.teyvat .discovery-brief>.discovery-head>h3{margin:0;font-size:.86rem}
body.teyvat :where(#root) .discovery-brief>.discovery-head>button{min-height:26px;padding:2px 12px;font-size:.7rem;margin:0;flex:0 0 auto}
body.teyvat .discovery-brief>p{margin:0;font-size:.72rem;line-height:1.35}
body.teyvat .world-discoveries>h2{font-size:.82rem;margin:4px 0}
html.stage-phone body.teyvat .discovery-brief>.discovery-head>h3{font-size:.68rem}
html.stage-phone body.teyvat :where(#root) .discovery-brief>.discovery-head>button{min-height:20px;padding:1px 8px;font-size:.56rem}
html.stage-phone body.teyvat .discovery-brief>p{font-size:.58rem}
html.stage-phone body.teyvat .world-discoveries>h2{font-size:.66rem;margin:2px 0}
html.stage-phone body.teyvat .shell-loc-left :is(.map-breadcrumb,.map-description){display:none}
html.stage-phone body.teyvat .shell-loc-left .region-event.phone-brief .re-text{display:none}
/* A narrow star chart keeps every star whole inside it (a star at 10% of a narrow chart stood half outside). */
body.teyvat :where(#root) .cons-chart>button.cons-node{left:clamp(24px,var(--x),calc(100% - 24px));top:clamp(24px,var(--y),calc(100% - 24px))}
html.stage-phone body.teyvat :where(#root) .cons-chart>button.cons-node{left:clamp(16px,var(--x),calc(100% - 16px));top:clamp(16px,var(--y),calc(100% - 16px))}
html.stage-phone body.teyvat .shell-loc-left .region-event.phone-brief .re-choices{gap:3px 4px}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .region-event.phone-brief :is(.re-choice>button,.re-choices>button){min-height:20px;padding:1px 7px;font-size:.56rem;gap:4px}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .region-event.phone-brief :is(.re-choice>button,.re-choices>button)::before{display:none!important}
html.stage-phone body.teyvat .shell-loc-left .world-discoveries{margin:0!important;padding:0!important;gap:3px}
html.stage-phone body.teyvat .shell-loc-left .world-discoveries>h2{margin:0 0 2px!important;line-height:1.2}
html.stage-phone body.teyvat .shell-loc-left .discovery-card.discovery-brief{padding:4px 7px;margin:0}
/* The handbook on a phone: smaller rows, so three rows fill a page instead of one row over empty room. */
html.stage-phone body.teyvat .hb-body{padding:6px 10px 8px}
html.stage-phone body.teyvat .hb-section{gap:4px}
html.stage-phone body.teyvat .hb-section>h3{font-size:.74rem;margin:0}
html.stage-phone body.teyvat .hb-section>.hb-note{font-size:.56rem;line-height:1.3;margin:0}
html.stage-phone body.teyvat .hb-row{padding:5px 8px;gap:6px;min-height:0}
html.stage-phone body.teyvat .hb-row .hb-copy>strong{font-size:.7rem}
html.stage-phone body.teyvat .hb-row .hb-copy>small{font-size:.56rem;line-height:1.25}
html.stage-phone body.teyvat .hb-row .hb-chip{font-size:.5rem;padding:0 5px}
html.stage-phone body.teyvat :where(.handbook) .hb-row button{min-height:22px;padding:1px 9px;font-size:.58rem}
html.stage-phone body.teyvat :where(.handbook) .hb-guide svg{width:12px;height:12px}
html.stage-phone body.teyvat .hb-row{padding:3px 7px;gap:5px}
html.stage-phone body.teyvat .hb-row .hb-copy{gap:0;line-height:1.18}
html.stage-phone body.teyvat .hb-row .hb-copy>strong{font-size:.66rem;line-height:1.2}
html.stage-phone body.teyvat .hb-row .hb-copy>small{font-size:.52rem;line-height:1.2}
html.stage-phone body.teyvat .hb-row .hb-copy>.hb-chip,html.stage-phone body.teyvat .hb-row .hb-copy>span{font-size:.48rem;line-height:1.3}
html.stage-phone body.teyvat .hb-section{row-gap:4px;column-gap:6px}
/* Achievements: square category buttons (not round pills side by side); on a phone two columns of slim rows. */
body.teyvat .ac-cat,body.teyvat .ac-btn,body.teyvat .ac-filter{border-radius:8px}
html.stage-phone body.teyvat .ac-summary{gap:4px;margin:0 0 6px}
html.stage-phone body.teyvat .ac-facts{gap:4px}
html.stage-phone body.teyvat .ac-fact{padding:3px 8px}
html.stage-phone body.teyvat .ac-fact small{font-size:.52rem}
html.stage-phone body.teyvat .ac-fact strong{font-size:.8rem}
html.stage-phone body.teyvat .ac-btn{min-height:22px;padding:1px 10px;font-size:.58rem}
html.stage-phone body.teyvat .ac-cats{gap:3px;margin:0 0 4px}
html.stage-phone body.teyvat .ac-cat{padding:2px 7px;font-size:.58rem;gap:4px}
html.stage-phone body.teyvat .ac-cat small{font-size:.5rem}
html.stage-phone body.teyvat .ac-filters{gap:3px;margin:0 0 4px}
html.stage-phone body.teyvat .ac-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
html.stage-phone body.teyvat .ac-item{padding:3px 7px;gap:6px;min-height:0}
html.stage-phone body.teyvat .ac-item :is(img,.ac-medal,.ac-icon,[class*=trophy]){width:24px;height:24px;flex:0 0 24px}
html.stage-phone body.teyvat .ac-copy{gap:0}
html.stage-phone body.teyvat .ac-copy strong{font-size:.64rem}
html.stage-phone body.teyvat .ac-copy small{font-size:.52rem}
html.stage-phone body.teyvat .ac-side{gap:2px}
html.stage-phone body.teyvat .ac-reward{font-size:.5rem}
html.stage-phone body.teyvat .ac-side .ac-btn{min-height:20px;padding:0 8px}
body.teyvat .ac-cat>.ac-dot{position:absolute;top:-7px;right:-6px;min-width:16px;height:16px;padding:0 4px;font-size:.58rem;line-height:16px;border-radius:8px}
body.teyvat .ac-cat:has(>.ac-dot){margin-right:6px}
html.stage-phone body.teyvat .ac-cat>.ac-dot{top:-6px;right:-5px;min-width:13px;height:13px;line-height:13px;font-size:.48rem}
/* 0.16.32: the brief event card on the phone's left column is two slim lines (name row, choice row), so it shares a page with the task card. */
html.stage-phone body.teyvat .shell-loc-left .region-event.phone-brief{padding:3px 7px;gap:2px}
html.stage-phone body.teyvat .shell-loc-left .region-event.phone-brief .re-head{min-height:0;align-items:center;gap:5px}
html.stage-phone body.teyvat .shell-loc-left .region-event.phone-brief .re-head>svg{width:15px!important;height:15px!important;flex:0 0 15px}
html.stage-phone body.teyvat .shell-loc-left .region-event.phone-brief .re-choices>.re-choice{display:contents}
html.stage-phone body.teyvat .shell-loc-left .region-event.phone-brief .re-choices{align-items:center}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .region-event.phone-brief :is(.re-choice>button,.re-choices>button){width:auto;flex:0 1 auto;max-width:100%;min-width:0}
/* 0.16.32: the guide's title line was 16px bold and rode along on every page of the 지역 정보 tab; one small line keeps the tab to a page or two. */
html.stage-phone body.teyvat .mond-region-guide>.region-guide-summary>strong{font-size:.8rem;line-height:1.2}
html.stage-phone body.teyvat .mond-region-guide>.region-guide-summary{line-height:1.2}
html.stage-phone body.teyvat .mond-region-guide .region-encounters>h4{line-height:1.2;padding:0}
/* 0.16.32: a place with facilities has four tabs; they stay on one row (the fourth wrapped and took a row from the list). */
html.stage-pc body.teyvat .shell-loc-side>.shell-tabbar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
html.stage-pc body.teyvat .shell-loc-side>.shell-tabbar:has(>.shell-tab:nth-child(4))>.shell-tab{padding:6px 2px;gap:3px;font-size:.8rem}
html.stage-pc body.teyvat .shell-loc-side>.shell-tabbar:has(>.shell-tab:nth-child(4))>.shell-tab svg{width:13px;height:13px;flex:0 0 13px}
/* the ley card's one help line is a block, so the card can be paged row by row */
body.teyvat .ley-line-card>.ley-line-help{display:block}
/* 0.16.32 (user: 「글씨 크기를 줄이고 길이를 줄이고 … 자리는 많은데」): the computer's left column gives its list the room too.
   The place's name, level and the wait button on one row; the main quest in four short lines; slim tabs; one-row life cards; small guide lines. */
html.stage-pc body.teyvat .shell-loc-left>.shell-loc-head{grid-template-columns:auto minmax(0,1fr) auto;row-gap:2px;padding:0 4px}
html.stage-pc body.teyvat .shell-loc-left>.shell-loc-head>h1{font-size:1.32rem;line-height:1.2;grid-column:1;grid-row:1}
html.stage-pc body.teyvat .shell-loc-left>.shell-loc-head>.area-level{grid-column:2;grid-row:1;justify-self:start;font-size:.7rem;padding:1px 8px;white-space:nowrap}
html.stage-pc body.teyvat .shell-loc-left>.shell-loc-head>.wait-controls{grid-column:3;grid-row:1}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .wait-controls.compact button{min-height:28px;padding:2px 12px;font-size:.74rem}
html.stage-pc body.teyvat .shell-loc-left .main-objective{padding:7px 12px;display:flex;flex-direction:column;gap:2px}
html.stage-pc body.teyvat .shell-loc-left .main-objective>.eyebrow{display:none}
html.stage-pc body.teyvat .shell-loc-left .main-objective>h3{font-size:.95rem;line-height:1.25;margin:0}
html.stage-pc body.teyvat .shell-loc-left .main-objective>p{font-size:.78rem;line-height:1.3;margin:0}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .main-objective>button{min-height:30px;padding:3px 12px;font-size:.8rem;margin-top:3px}
html.stage-pc body.teyvat .shell-loc-left .shell-loc-side>.shell-tabbar{padding:6px 8px 4px}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .shell-loc-side>.shell-tabbar>.shell-tab{min-height:30px}
html.stage-pc body.teyvat .shell-loc-left .shell-panes{padding:4px 10px 10px}
html.stage-pc body.teyvat .shell-loc-left .task-mini{padding:6px 10px}
html.stage-pc body.teyvat .shell-loc-left .life-cards{gap:6px}
html.stage-pc body.teyvat .shell-loc-left .life-card{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:6px 10px;min-height:0}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-head{grid-column:1;grid-row:1/span 2;display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0}
html.stage-pc body.teyvat .shell-loc-left .life-card .life-card-name{font-size:.86rem}
html.stage-pc body.teyvat .shell-loc-left .life-card .life-chip{font-size:.62rem;padding:0 6px;min-height:0}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-items{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;gap:4px;margin:0;min-width:0}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-gear{grid-column:2;grid-row:2;display:flex;gap:4px;margin:0}
html.stage-pc body.teyvat .shell-loc-left .life-card .life-item{width:34px;height:34px;padding:2px}
html.stage-pc body.teyvat .shell-loc-left .life-card .life-icon{width:30px;height:30px}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-gear .life-item{width:30px;height:30px}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-gear .life-icon{width:24px;height:24px}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-why{grid-column:3;grid-row:1;font-size:.66rem;text-align:center;margin:0}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .life-card>button.life-go{grid-column:3;grid-row:1/span 2;min-height:30px;padding:3px 12px;font-size:.78rem;margin:0;width:auto}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .life-card:has(>.life-card-why)>button.life-go{grid-row:2}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-where{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:0}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-where .material-source{font-size:.68rem}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .life-card>.life-card-where button{min-height:26px;padding:2px 10px;font-size:.72rem}
html.stage-pc body.teyvat .mond-region-guide{padding:8px 12px}
html.stage-pc body.teyvat .mond-region-guide>.region-guide-summary{font-size:.8rem;margin:0 0 2px;line-height:1.25}
html.stage-pc body.teyvat .mond-region-guide>.region-guide-summary>strong{font-size:.95rem}
html.stage-pc body.teyvat .mond-region-guide :is(p,small){font-size:.72rem;line-height:1.35;margin:1px 0}
html.stage-pc body.teyvat .mond-region-guide .region-encounters{margin:2px 0;padding:0}
html.stage-pc body.teyvat .mond-region-guide .region-encounters>h4{font-size:.74rem;margin:4px 0 1px;line-height:1.2}
html.stage-pc body.teyvat .mond-region-guide .region-encounter-line{display:flex;flex-wrap:wrap;gap:0 8px;margin:2px 0}
html.stage-pc body.teyvat .mond-region-guide .region-encounter-line>strong{font-size:.76rem}
/* a long place name: the level chip and the wait button go to a second row instead of running into each other */
html.stage-pc body.teyvat .shell-loc-left>.shell-loc-head{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
html.stage-pc body.teyvat .shell-loc-left>.shell-loc-head>h1{flex:0 1 auto;min-width:0}
html.stage-pc body.teyvat .shell-loc-left>.shell-loc-head>.area-level{flex:0 0 auto}
html.stage-pc body.teyvat .shell-loc-left>.shell-loc-head>.wait-controls{margin-left:auto}
/* the place's name is already the column's title; the empty-facilities line says nothing a missing tab would not */
html.stage-pc body.teyvat .shell-loc-left :is(p.map-breadcrumb,p.no-places){display:none}
/* 0.16.33 보물상자: the challenge device and the element stones in the scenery, their windows, a challenge's result. */
.scenery-chest.device{display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(30,40,60,.85) 0 52%,rgba(30,40,60,0) 70%);animation:chestBob 2.8s ease-in-out infinite}
.scenery-chest.device .scenery-device-icon{width:46%;height:46%;color:#f3dfae;filter:drop-shadow(0 0 6px rgba(255,214,120,.8))}
.scenery-chest.device .scenery-device-note{position:absolute;left:50%;top:100%;margin-top:1px;padding:1px 8px;border-radius:9px;transform:translateX(-50%);background:rgba(16,24,38,.9);color:#f3dfae;font:700 11px/16px system-ui,sans-serif;font-style:normal;white-space:nowrap;pointer-events:none}
.scenery-chest.totem{background:none;border-radius:12px}
.scenery-chest.totem::before{background:radial-gradient(circle,rgba(170,230,255,.45),transparent 62%)}
.scenery-totems{display:flex;gap:2px;align-items:flex-end;justify-content:center;width:100%;height:100%}
.scenery-totems .scenery-totem{width:30%;aspect-ratio:1/1.5;object-fit:contain;padding:3px 2px;border-radius:40% 40% 6px 6px;background:linear-gradient(180deg,#5d6170,#2f323c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.scenery-totems .scenery-totem.text{display:grid;place-items:center;color:#f3dfae;font:700 11px/1 system-ui,sans-serif}
.ch-challenge{display:flex;align-items:center;gap:16px;margin:4px 0 10px}
.ch-challenge-rounds{display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:96px;flex:0 0 96px;border-radius:50%;border:2px solid #f3dfae;background:radial-gradient(circle,rgba(243,223,174,.18),rgba(0,0,0,.2));color:#f3dfae}
.ch-challenge-rounds>strong{font-size:2.2rem;line-height:1}
.ch-challenge-rounds>small{font-size:.7rem}
.ch-challenge-goal{display:flex;align-items:center;gap:10px;min-width:0}
.ch-challenge-goal>img{width:64px;height:64px;object-fit:contain;flex:0 0 64px}
.ch-challenge-goal>p{margin:0;font-size:.82rem;line-height:1.45}
.ch-totems{display:grid;grid-template-columns:repeat(var(--n),minmax(0,88px));gap:12px;justify-content:center;margin:2px auto 8px}
.ch-totems .totem{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:112px;padding:8px 6px;border-radius:44% 44% 10px 10px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(180deg,#4b4f5c,#262932);color:#d8dbe4;cursor:pointer}
.ch-totems .totem .totem-icon{width:42px;height:42px;object-fit:contain;opacity:.35;filter:grayscale(.8)}
.ch-totems .totem .totem-name{font-size:.72rem}
.ch-totems .totem.picked{outline:2px solid #f3dfae;outline-offset:2px}
.ch-totems .totem.lit{border-color:#f3dfae;box-shadow:0 0 18px rgba(255,226,150,.65),inset 0 0 22px rgba(255,226,150,.35)}
.ch-totems .totem.lit .totem-icon{opacity:1;filter:drop-shadow(0 0 8px rgba(255,236,170,.9))}
.ch-totems .totem .totem-face{position:absolute;top:8px;width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid #f3dfae}
.ch-totems .totem.shake{animation:totemShake .35s}
.ch-totems .totem.pulse{animation:totemPulse .6s}
@keyframes totemShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes totemPulse{50%{transform:scale(1.06)}}
.ch-totem-party{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ch-totem-party .totem-member{position:relative;width:56px;height:56px;padding:0;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);overflow:visible;cursor:pointer}
.ch-totem-party .totem-member-face{width:100%;height:100%;border-radius:12px;object-fit:cover;object-position:top}
.ch-totem-party .totem-member-el{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 0 2px #000)}
.ch-totem-party .totem-member.none{opacity:.45}
.reward-preview .chest-challenge-result,.chest-challenge-result{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;margin:0;border-radius:10px;border:1px solid rgba(211,188,142,.35);background:rgba(0,0,0,.25);color:#e8e2d2;text-align:left;font:inherit;min-height:0;vertical-align:middle}
button.chest-challenge-result{cursor:pointer;border-color:#f3dfae;box-shadow:0 0 12px rgba(255,226,150,.45)}
:where(#root) button.chest-challenge-result::before{display:none!important}
.chest-challenge-result .ch-result-chest{width:34px;height:34px;object-fit:contain;flex:0 0 34px}
.chest-challenge-result:not(.won) .ch-result-chest{filter:grayscale(1) brightness(.6)}
.chest-challenge-result .ch-result-copy{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.chest-challenge-result .ch-result-copy>strong{font-size:.82rem;color:#f3dfae}
.chest-challenge-result .ch-result-copy>small{font-size:.68rem;color:#c9c2b2}
/* in the row of what the fight brought it is one more cream tile, like the Mora and the drops */
body.teyvat .shell-result-body .reward-preview>.chest-challenge-result{display:inline-flex;padding:4px 12px 4px 6px;background:var(--t-cream);color:var(--t-ink);border:2px solid transparent}
body.teyvat .shell-result-body .reward-preview>button.chest-challenge-result{border-color:#e0b85a;box-shadow:0 0 14px rgba(255,214,120,.7),0 6px 18px rgba(0,0,0,.35)}
body.teyvat .shell-result-body .reward-preview>.chest-challenge-result .ch-result-copy>strong{color:var(--t-ink)}
body.teyvat .shell-result-body .reward-preview>.chest-challenge-result .ch-result-copy>small{color:#6b5b44;font-weight:600}
body.teyvat .shell-result-body .reward-preview>.chest-challenge-result:not(.won){opacity:.85}html.stage-phone body.teyvat .chest-challenge-result{padding:2px 8px 2px 2px;gap:5px}
html.stage-phone body.teyvat .chest-challenge-result .ch-result-chest{width:26px;height:26px;flex-basis:26px}
html.stage-phone body.teyvat .chest-challenge-result .ch-result-copy>strong{font-size:.64rem}
html.stage-phone body.teyvat .shell-result-body .reward-preview>.chest-challenge-result .ch-result-copy>small{display:none}html.stage-phone body.teyvat .ch-challenge-rounds{width:64px;height:64px;flex-basis:64px}
html.stage-phone body.teyvat .ch-challenge-rounds>strong{font-size:1.5rem}
html.stage-phone body.teyvat .ch-challenge-goal>img{width:44px;height:44px;flex-basis:44px}
html.stage-phone body.teyvat .ch-challenge-goal>p{font-size:.64rem}
html.stage-phone body.teyvat .ch-totems{gap:8px;margin:2px auto 6px;grid-template-columns:repeat(var(--n),minmax(0,64px))}
html.stage-phone body.teyvat .ch-totems .totem{height:70px;padding:4px}
html.stage-phone body.teyvat .ch-totems .totem .totem-icon{width:24px;height:24px}
html.stage-phone body.teyvat .ch-totems .totem .totem-face{width:24px;height:24px;top:5px}
html.stage-phone body.teyvat .ch-totem-party .totem-member{width:40px;height:40px}
html.stage-phone body.teyvat .ch-totem-party .totem-member-el{width:18px;height:18px}
/* 0.16.33 handbook 보물: six counts in one row and square tier tiles (no round pills side by side); a region fits one page on a phone. */
body.teyvat .ch-journal-tiers .ch-journal-tier{border-radius:8px}
body.teyvat .ch-journal-facts{grid-template-columns:repeat(6,minmax(0,1fr))}
html.stage-phone body.teyvat .ch-journal{padding:6px 10px}
html.stage-phone body.teyvat .ch-journal>h3{font-size:.8rem;margin:0 0 3px}
html.stage-phone body.teyvat .ch-journal-bar{height:5px;margin:0 0 5px}
html.stage-phone body.teyvat .ch-journal-facts{gap:4px;margin-bottom:5px}
html.stage-phone body.teyvat .ch-journal-fact{padding:3px 6px;border-radius:6px}
html.stage-phone body.teyvat .ch-journal-fact>small{font-size:.48rem;white-space:nowrap}
html.stage-phone body.teyvat .ch-journal-fact>strong{font-size:.7rem}
html.stage-phone body.teyvat .ch-journal-tiers{gap:4px;flex-wrap:nowrap}
html.stage-phone body.teyvat .ch-journal-tiers .ch-journal-tier{padding:2px 6px 2px 2px;gap:3px;font-size:.52rem;white-space:nowrap}
html.stage-phone body.teyvat .ch-journal-tiers .ch-journal-tier>img{width:18px;height:18px}
/* 0.16.34 의뢰: the conditions as chips under a commission's name; who asks and why on its card. */
body.teyvat .cm-chips{display:flex;flex-wrap:wrap;gap:3px 4px;margin-top:2px;min-width:0}
body.teyvat .cm-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 6px 1px 3px;border-radius:5px;background:rgba(255,255,255,.07);border:1px solid rgba(211,188,142,.22);font-size:.66rem;line-height:1.35;color:#e8e2d2;white-space:nowrap}
body.teyvat .cm-chip>b{font-weight:600}
body.teyvat .cm-chip.k-req>b{color:#f3dfae}
body.teyvat .cm-chip.k-goal>b{color:#fff}
body.teyvat .cm-chip.k-member{padding:1px}
body.teyvat .cm-chip .cm-chip-icon{width:16px;height:16px;object-fit:contain;display:inline-grid;place-items:center}
body.teyvat .cm-chip .cm-chip-icon img{width:14px;height:14px;object-fit:contain}
body.teyvat .cm-chip .cm-chip-face{width:18px;height:18px;border-radius:50%;object-fit:cover;object-position:top}
body.teyvat .cm-chip .cm-chip-glyph{width:11px;height:11px;opacity:.8}
body.teyvat .cm-chip.more{color:#c9c2b2}
body.teyvat .commission-card>.cm-chips{margin:2px 0 6px}
body.teyvat .commission-request{margin:2px 0 6px;font-size:.86rem;line-height:1.45}
body.teyvat .commission-request>strong{color:#c08a2c;margin-right:4px}
html.stage-phone body.teyvat .cm-chip{font-size:.52rem;padding:0 4px 0 2px;gap:2px}
html.stage-phone body.teyvat .cm-chip .cm-chip-icon{width:12px;height:12px}
html.stage-phone body.teyvat .cm-chip .cm-chip-icon img{width:11px;height:11px}
html.stage-phone body.teyvat .cm-chip .cm-chip-face{width:14px;height:14px}
html.stage-phone body.teyvat .cm-chip .cm-chip-glyph{width:9px;height:9px}
html.stage-phone body.teyvat .commission-request{font-size:.64rem;margin:1px 0 4px}
/* 0.16.36 (TODO 7) the main screen's 오늘의 임무 line also counts the week and the commissions to report. */
body.teyvat .task-mini-head>.task-mini-chip{font-size:.68rem;line-height:1.3;padding:0 6px;border-radius:5px;background:rgba(255,255,255,.08);color:var(--t-muted,#a9b0bd);white-space:nowrap}
body.teyvat .task-mini-head>.task-mini-chip.ready{background:rgba(240,196,106,.2);color:#f3dfae;font-weight:700}
body.teyvat .task-mini-head>.task-mini-open{margin-left:auto}
html.stage-phone body.teyvat .task-mini-head>.task-mini-chip{font-size:.5rem;padding:0 4px}
/* 0.16.36 (TODO 7) 의뢰 모두 보고: one bar above Catherine's list. */
body.teyvat .cm-all{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:4px 8px;margin:0 0 6px;border-radius:10px;border:1px solid rgba(240,196,106,.45);background:rgba(240,196,106,.1)}
body.teyvat .cm-all>small{flex:1 1 auto;color:#f3dfae;font-weight:700}
body.teyvat :where(#root) .cm-all>button{margin:0;min-height:32px;padding:2px 16px}
html.stage-phone body.teyvat .cm-all{padding:2px 6px;margin:0 0 3px;gap:6px}
html.stage-phone body.teyvat .cm-all>small{font-size:.6rem}
html.stage-phone body.teyvat :where(#root) .cm-all>button{min-height:24px;padding:1px 10px;font-size:.62rem}
/* 0.16.34 의뢰 포기. 0.16.35 (user: 「이런 보기에 애매해보이는것도 바꿔도 돼」): the window's buttons stand on one row — 현장 진행
   and 고정 first, 의뢰 포기 quiet at the right end; pressed, its question is a framed row of its own with two full-size buttons
   (it stood small between the other buttons). */
body.teyvat #modal .commission-card{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
body.teyvat #modal .commission-card>*{flex:1 1 100%;min-width:0;margin-top:0;margin-bottom:0}
body.teyvat #modal .commission-card>:is(button,.objective-pin-actions){flex:0 0 auto;order:1;margin:6px 0 0}
body.teyvat #modal .commission-card>.objective-pin-actions{display:flex;gap:8px;align-self:stretch;align-items:center}
body.teyvat :where(#modal) .commission-card>.objective-pin-actions>button{margin:0}
body.teyvat :where(#modal) .commission-card>.commission-abandon-ask{order:2;margin-left:auto;background:transparent;border:1px solid rgba(220,120,110,.55);color:#e7a39b;box-shadow:none}
body.teyvat #modal .commission-card>.commission-abandon{order:3;margin-top:6px}
body.teyvat .commission-abandon{display:flex;flex-wrap:nowrap;align-items:center;gap:8px 10px;padding:8px 12px;border-radius:10px;border:1px solid rgba(220,120,110,.5);background:rgba(120,30,30,.2)}
body.teyvat .commission-abandon>.choice-note{flex:1 1 auto;margin:0;min-width:0;color:#f3d6d0}
body.teyvat :where(#modal) .commission-abandon>button{flex:0 0 auto;margin:0}
body.teyvat :where(#modal) .commission-abandon>button[data-action="COMMISSION_ABANDON"]{border:1px solid rgba(220,120,110,.75);color:#ffd2cb;background:rgba(150,40,35,.55)}
html.stage-phone body.teyvat #modal .commission-card>:is(button,.objective-pin-actions){margin-top:3px}
html.stage-phone body.teyvat .commission-abandon{padding:4px 8px;gap:6px}
html.stage-phone body.teyvat .commission-abandon>.choice-note{font-size:.62rem}
html.stage-phone body.teyvat :where(#modal) .commission-abandon>button{min-height:30px;padding:2px 14px;font-size:.66rem}
/* 0.16.35 (TODO 6-3): a daily boss fight's board glows at its edge in the boss's element (Andrius 얼음, Dvalin 바람, …). */
body.teyvat .boss-aura{position:relative}
body.teyvat .boss-aura::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;box-shadow:inset 0 0 22px 5px var(--aura-c),inset 0 0 3px 1px var(--aura-c);animation:bossAura 2.6s ease-in-out infinite}
body.teyvat .boss-aura[data-aura="cryo"]{--aura-c:rgba(150,225,255,.6)}
body.teyvat .boss-aura[data-aura="anemo"]{--aura-c:rgba(110,235,200,.6)}
body.teyvat .boss-aura[data-aura="hydro"]{--aura-c:rgba(70,170,255,.6)}
body.teyvat .boss-aura[data-aura="geo"]{--aura-c:rgba(245,195,80,.6)}
body.teyvat .boss-aura[data-aura="pyro"]{--aura-c:rgba(255,120,70,.6)}
body.teyvat .boss-aura[data-aura="electro"]{--aura-c:rgba(185,125,255,.6)}
body.teyvat .boss-aura[data-aura="dendro"]{--aura-c:rgba(140,215,75,.6)}
@keyframes bossAura{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){body.teyvat .boss-aura::after{animation:none}}
html.reduce-motion body.teyvat .boss-aura::after{animation:none}
/* 0.16.35 (TODO 6-5): the keys beside the battle's buttons and targets, on a computer only. */
body.teyvat .key-hint{display:inline-block;margin-left:6px;padding:0 4px;border:1px solid rgba(255,255,255,.35);border-radius:4px;background:rgba(0,0,0,.25);font:600 .6rem/1.45 system-ui,sans-serif;color:inherit;opacity:.8;vertical-align:middle}
body.teyvat .combatant-row>.key-hint.target-key{position:absolute;left:4px;top:4px;margin:0;z-index:3;pointer-events:none;color:#f3dfae;border-color:rgba(243,223,174,.5)}
html.stage-phone body.teyvat .key-hint{display:none}
/* the HUD's phase note (a recovery countdown) on a phone: its bold seconds were cut by 2px */
html.stage-phone body.teyvat .hud-phase{line-height:1.5;padding:1px 6px}
html.stage-phone body.teyvat .hud-phase strong{line-height:1.2}
/* 0.16.35 (TODO 6-6): buying several: − / the count / + / 최대 in one row. */
body.teyvat .purchase-quantity .qty-stepper{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:2px 0 8px}
body.teyvat :where(#modal) .purchase-quantity .qty-stepper>button{flex:0 0 auto;width:auto;min-width:44px;min-height:38px;padding:4px 12px;font-size:1rem;margin:0}
body.teyvat :where(#modal) .purchase-quantity .qty-stepper>button:last-child{min-width:64px;font-size:.86rem}
body.teyvat :where(#modal) .purchase-quantity .qty-stepper>button::before{display:none!important}
body.teyvat .purchase-quantity .qty-count{min-width:64px;text-align:center;font-size:1.15rem;color:#f3dfae}
html.stage-phone body.teyvat :where(#modal) .purchase-quantity .qty-stepper>button{min-width:36px;min-height:30px;padding:2px 10px;font-size:.8rem}
html.stage-phone body.teyvat .purchase-quantity .qty-count{min-width:48px;font-size:.9rem}
/* 0.16.35: the good's picture beside the count and the total; what you have and the button on one row under them. */
body.teyvat .purchase-head{display:flex;align-items:center;gap:14px}
body.teyvat .purchase-head>:is(img,.item-glyph,.item-icon){width:72px;height:72px;flex:0 0 72px;object-fit:contain;border-radius:12px;background:rgba(0,0,0,.22);padding:6px;box-sizing:border-box}
body.teyvat .purchase-side{display:flex;flex-direction:column;gap:2px;min-width:0}
body.teyvat .purchase-side>.qty-stepper{margin:0!important}
body.teyvat .purchase-side>.purchase-total{margin:0;font-size:1rem;font-weight:700;color:#f3dfae}
body.teyvat .purchase-quantity>.choice-note:empty{display:none}
body.teyvat .purchase-foot{display:flex;align-items:center;gap:14px;margin-top:10px}
body.teyvat .purchase-foot>p{flex:1 1 auto;margin:0;min-width:0}
body.teyvat :where(#modal) .purchase-foot>button{flex:0 0 auto;margin:0}
html.stage-phone body.teyvat .purchase-head{gap:10px}
html.stage-phone body.teyvat .purchase-head>:is(img,.item-glyph,.item-icon){width:52px;height:52px;flex-basis:52px;padding:4px}
html.stage-phone body.teyvat .purchase-side>.purchase-total{font-size:.74rem}
html.stage-phone body.teyvat .purchase-foot{gap:8px;margin-top:6px}
html.stage-phone body.teyvat .purchase-foot>p{font-size:.62rem}
body.teyvat .mk-preview.warn{color:#f0a49a}
/* 0.16.35 (user: 「화면 저렇게 빈공간 있는거 보기 좀 별론데 … 아니면 창을 줄이던가」): a window is as wide as what it shows,
   within its old limit, instead of always the full 720px (a small buy window stood half empty). */
body.teyvat dialog#modal{width:fit-content;min-width:min(380px,calc(100vw - 24px));max-width:min(720px,calc(100vw - 24px))}
html.stage-phone body.teyvat dialog#modal{min-width:min(320px,calc(100vw - 16px))}
/* the window of what a fight brought shrinks to its cards too (its grid stretched it to the full width) */
body.teyvat #modal-body .loot-grid{display:flex;flex-wrap:wrap;gap:8px}
body.teyvat #modal-body .loot-grid>*{flex:0 0 auto;width:104px}
html.stage-phone body.teyvat #modal-body .loot-grid>*{width:66px}
/* 0.16.35: the mailbox with nothing in it is a small window (it stood as a big empty two-column box). */
body.teyvat .ml-box.empty{width:min(440px,100%);height:auto}
body.teyvat .ml-box.empty .ml-body{display:block;flex:0 0 auto}
body.teyvat .ml-box.empty .ml-detail{display:none}
body.teyvat .ml-box.empty .ml-list{border:0}
/* the map while the hero recovers: shown, a little dimmed */
body.teyvat .recovering .terrain-frame{filter:saturate(.55) brightness(.8)}
/* 0.16.35 the inn: one card in the middle of its page (it stood low under an empty band) — the party's HP, then the price
   beside the button. */
body.teyvat .shell-page-body.shop-cols:has(>.inn-service){display:flex;flex-direction:column;align-items:center;justify-content:center}
body.teyvat .shell-page-body.shop-cols:has(>.inn-service)>p.muted{display:none}
body.teyvat .shell-page-body>.inn-service{width:min(680px,100%);margin:0}
body.teyvat .inn-service>h2{margin:0 0 4px}
body.teyvat .inn-service>p{margin:0}
body.teyvat .inn-foot{display:flex;align-items:center;gap:12px;margin-top:12px}
body.teyvat .inn-foot>p{flex:1 1 auto;margin:0;min-width:0}
body.teyvat :where(#root) .inn-foot>button{flex:0 0 auto;margin:0}
html.stage-phone body.teyvat .shell-page-body>.inn-service{width:min(560px,100%);padding:8px 12px}
html.stage-phone body.teyvat .inn-service>h2{font-size:.9rem}
html.stage-phone body.teyvat .inn-service>p,html.stage-phone body.teyvat .inn-foot>p{font-size:.64rem}
html.stage-phone body.teyvat .inn-foot{margin-top:6px}
html.stage-phone body.teyvat :where(#root) .inn-foot>button{min-height:32px;padding:2px 16px;font-size:.7rem}
body.teyvat .recovery-party{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px}
body.teyvat .recovery-member{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(211,188,142,.2)}
body.teyvat .recovery-member.down{border-color:rgba(230,110,100,.45)}
body.teyvat .recovery-member .recovery-face{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top;flex:0 0 38px}
body.teyvat .recovery-member.down .recovery-face{filter:grayscale(1) brightness(.7)}
body.teyvat .recovery-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
body.teyvat .recovery-copy>strong{font-size:.78rem}
body.teyvat .recovery-copy>small{font-size:.66rem;color:#c9c2b2}
body.teyvat .recovery-member.down .recovery-copy>small{color:#f0a49a}
body.teyvat .recovery-bar{height:5px;border-radius:3px;background:linear-gradient(90deg,#8fd16a var(--p),rgba(255,255,255,.12) var(--p))}
html.stage-phone body.teyvat .recovery-party{gap:4px;margin-top:6px}
html.stage-phone body.teyvat .recovery-member{padding:3px 6px;gap:5px}
html.stage-phone body.teyvat .recovery-member .recovery-face{width:26px;height:26px;flex-basis:26px}
html.stage-phone body.teyvat .recovery-copy>strong{font-size:.6rem}
html.stage-phone body.teyvat .recovery-copy>small{font-size:.52rem}
html.stage-phone body.teyvat .shell-loc-left .recovery-card{padding:6px 10px}
html.stage-phone body.teyvat .shell-loc-left .recovery-card>h2{font-size:.78rem;margin:0 0 2px}
html.stage-phone body.teyvat .shell-loc-left .recovery-card>p{font-size:.6rem;line-height:1.3;margin:0 0 4px}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .recovery-card>button{min-height:28px;padding:2px 12px;font-size:.66rem}
/* knocked out on another screen: one bar floating at the bottom, the screen itself stays as it is */
body.teyvat .recovery-float{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;border-radius:12px;background:rgba(40,16,18,.94);border:1px solid rgba(230,110,100,.6);box-shadow:0 10px 30px rgba(0,0,0,.5);white-space:nowrap}
body.teyvat .recovery-float>strong{color:#f0a49a;font-size:.86rem}
body.teyvat .recovery-float>span{font-size:.76rem;color:#e8e2d2}
body.teyvat :where(#root) .recovery-float>button{min-height:32px;padding:3px 14px;font-size:.78rem;margin:0}
html.stage-phone body.teyvat .recovery-float{bottom:8px;gap:6px;padding:4px 6px 4px 10px}
html.stage-phone body.teyvat .recovery-float>strong{font-size:.66rem}
html.stage-phone body.teyvat .recovery-float>span{font-size:.56rem}
html.stage-phone body.teyvat :where(#root) .recovery-float>button{min-height:24px;padding:1px 10px;font-size:.6rem}
/* the story page while a journey or a story break waits (「결전 준비」): on a phone it overflowed its page */
html.stage-phone body.teyvat .shell-page-body .journey-objective{padding:8px 12px;gap:3px}
html.stage-phone body.teyvat .shell-page-body .journey-objective>.eyebrow{font-size:.56rem;margin:0}
html.stage-phone body.teyvat .shell-page-body .journey-objective>h2{font-size:.95rem;margin:0}
html.stage-phone body.teyvat .shell-page-body .journey-objective>p{font-size:.64rem;line-height:1.35;margin:0}
html.stage-phone body.teyvat .shell-page-body .journey-objective small{font-size:.6rem;line-height:1.3}
html.stage-phone body.teyvat :where(#root) .shell-page-body .journey-objective button{min-height:28px;padding:2px 12px;font-size:.64rem}
html.stage-phone body.teyvat :where(#root) .shell-page-body>button[data-action="MENU"]{min-height:28px;padding:2px 12px;font-size:.64rem}

/* ====================================================================================================================
   0.16.39 컴퓨터 화면 디자인 (user: 「컴퓨터쪽 화면은 뭔가.. 핸드폰같은 느낌이 됐는데...?」, 「저렇게 동글동글만 하니까 너무 이상한건가...?
   아니면 크기가 너무 커서 비대해보이는 문제인가?」, 「버튼은 존나 큰데 나머지가 작아서 느낌 이상하지?」): the computer gets its own
   panel look instead of the phone's touch pills — corners of 7px, buttons a size that matches their words, a small gold
   diamond instead of the round dot on the main buttons. The battle screen, the HUD's icon circles and the map's circles
   keep their own shapes. Phone rules are untouched.
   ==================================================================================================================== */
:where(html.stage-pc) body.teyvat :where(#root,#modal,.hud-guide-pop,.combat-playback) button{border-radius:7px}
html.stage-pc body.teyvat :where(#root,#modal) :is(.shell-back,.shell-leave,.shell-tab,.shell-subtabs button,.terrain-view,.terrain-controls button,.terrain-shortcuts button,.task-mini-open,.cm-go,.fit-more,.wait-controls button,.terrain-travel,.main-objective button,.journal-tabs button,.bag-tabs button,.bag-trade-filter button,.task-claim,.re-choice>button,.re-choices>button,.re-more,.life-go,.domain-go,.qty-stepper>button,.enhance-go,.relationship-toggles>button,.objective-pin-actions>button,.commission-abandon-ask,.commission-abandon>button,.task-scope,.premium-cons-open,.premium-talent,.party-gear,.shell-preset-chip,.material-source+button,.life-card-where button,.inn-foot>button,.purchase-foot>button,.cm-all>button,.result-retry>button,.shell-result-actions>button,.enhance-pin){border-radius:7px}
html.stage-pc body.teyvat :where(#root,#modal) button.primary:not(.terrain-node):not(.cons-node):not(.hud-tool):not(.member-select){border-radius:7px}
body.teyvat .pm-foot-button,html.stage-pc body.teyvat .hb-filter-button{border-radius:7px}
html.stage-pc body.teyvat .pm-tile{border-radius:12px}
html.stage-pc body.teyvat :where(#root,#modal,.hb-body,.handbook) button.pane-page{width:26px;height:26px;min-width:26px;min-height:26px;border-radius:6px;font-size:.72rem}
/* the main button's mark: a small gold diamond, not a round dot */
html.stage-pc body.teyvat :where(#root,#modal,.hud-guide-pop,.combat-playback) button.primary:not(.terrain-destination):not(.choice):not(.bag-item):not(.gear-slot):not(.member-select):not(.formation-option):not(.shell-back):not([data-card-id]){padding-left:30px}
html.stage-pc body.teyvat :where(#root,#modal,.hud-guide-pop,.combat-playback) button.primary:not(.terrain-destination):not(.choice):not(.bag-item):not(.gear-slot):not(.member-select):not(.formation-option):not(.shell-back):not([data-card-id])::before{left:13px;width:8px;height:8px;margin-top:-4px;border-radius:1px;transform:rotate(45deg);background:linear-gradient(135deg,#f6d77e,#b8862f);box-shadow:0 0 0 1px rgba(57,64,79,.35)}
/* sizes that match the words: the page head's buttons, the place page's, the results' and the travel bar's */
html.stage-pc body.teyvat :where(#root) .shell-page-tools button{min-height:32px;padding:3px 14px;font-size:.8rem}
html.stage-pc body.teyvat :where(#root) .shell-result-actions>button{min-height:38px;padding:4px 22px;font-size:.88rem}
html.stage-pc body.teyvat :where(#root) .shell-result-actions>button.primary{padding-left:32px}
html.stage-pc body.teyvat :where(#root) .shell-place-hero button,html.stage-pc body.teyvat :where(#root) .shell-place-actions button{min-height:32px;padding:3px 14px;font-size:.8rem}
html.stage-pc body.teyvat :where(#root) .terrain-frame>.terrain-travel-dock .terrain-travel{min-height:32px;padding:3px 14px 3px 30px;font-size:.8rem;white-space:nowrap;flex:0 0 auto}
html.stage-pc body.teyvat :where(#root) .terrain-frame>.terrain-travel-dock>button:not(.terrain-travel){min-height:30px;padding:2px 12px;font-size:.76rem}
/* the left column's tabs: one joined bar, the chosen one filled */
html.stage-pc body.teyvat .shell-loc-side>.shell-tabbar{gap:0;padding:3px;border-radius:9px;background:rgba(0,0,0,.25);border:1px solid rgba(211,188,142,.18)}
html.stage-pc body.teyvat :where(#root) .shell-loc-side>.shell-tabbar>.shell-tab{min-height:30px;padding:3px 6px;font-size:.8rem;border:0;border-radius:6px;background:transparent;box-shadow:none}
html.stage-pc body.teyvat :where(#root) .shell-loc-side>.shell-tabbar>.shell-tab.active{background:var(--t-cream);color:var(--t-ink)}
/* little count chips are labels, not pills */
html.stage-pc body.teyvat :is(.life-chip,.shell-tab-badge,.task-mini-chip,.cm-chip,.re-eyebrow){border-radius:4px}
/* the map's −/+ : the sign in the middle of its box (it sat at the left edge and looked cut) */
body.teyvat :where(#root) .terrain-frame>.terrain-controls .terrain-zoom button{display:grid!important;place-items:center;justify-content:center;text-align:center;padding:0!important;line-height:1;font-size:1rem;font-weight:700}
/* 0.16.39 the 「공명」 chip rides in the map's button row (not over the map's corner) */
body.teyvat .terrain-controls>.resonance-mark{position:static;flex-direction:row;align-items:center;gap:6px;padding:2px 10px 2px 4px;border-radius:7px;margin-left:4px;min-height:30px;box-sizing:border-box}
body.teyvat .terrain-controls>.resonance-mark .resonance-icon{width:24px;height:24px}
body.teyvat .terrain-controls>.resonance-mark .resonance-words{display:flex;flex-direction:column;line-height:1.1;text-align:left}
body.teyvat .terrain-controls>.resonance-mark .resonance-name{font-size:.62rem;opacity:.8;font-weight:700;letter-spacing:.02em}
body.teyvat .terrain-controls>.resonance-mark small{font-size:.74rem;white-space:nowrap}
body.teyvat .terrain-controls>.resonance-mark.lv3 small{font-weight:800}
html.stage-phone body.teyvat .terrain-controls>.resonance-mark{min-height:26px;padding:1px 6px 1px 2px;gap:3px;margin-left:2px}
html.stage-phone body.teyvat .terrain-controls>.resonance-mark .resonance-icon{width:18px;height:18px}
html.stage-phone body.teyvat .terrain-controls>.resonance-mark .resonance-name{display:none}
html.stage-phone body.teyvat .terrain-controls>.resonance-mark small{font-size:.56rem}
/* 0.16.39 (user: 「낚시하기 이것도 뭔가 배열이 디자인적으로 좀 별로야」) a gathering · fishing card on the computer: its name with
   today's count and the time as one line of words; under it what it brings, then the gear it uses after a thin line; the
   button at the right, centred on both rows; what is missing and where to get it on a quiet strip below. */
html.stage-pc body.teyvat .shell-loc-left .life-card{grid-template-columns:auto auto minmax(0,1fr) auto!important;grid-template-rows:auto auto;column-gap:10px;row-gap:6px;padding:8px 12px}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-head{grid-column:1/4;grid-row:1;flex-direction:row;align-items:baseline;gap:8px}
html.stage-pc body.teyvat .shell-loc-left .life-card .life-card-name{font-size:.92rem}
html.stage-pc body.teyvat .shell-loc-left .life-card .life-card-head>.life-chip{border:0;background:none;padding:0;font-size:.72rem;color:var(--t-muted,#a9b0bd);display:inline-flex;gap:3px;align-items:baseline}
html.stage-pc body.teyvat .shell-loc-left .life-card .life-card-head>.life-chip>b{color:#f3dfae}
html.stage-pc body.teyvat .shell-loc-left .life-card .life-card-head>.life-chip+.life-chip::before{content:'·';margin-right:5px;opacity:.6}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-items{grid-column:1;grid-row:2;flex-wrap:nowrap}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-gear{grid-column:2;grid-row:2;padding-left:10px;border-left:1px solid rgba(211,188,142,.25);align-items:center}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-gear .life-item{width:34px;height:34px}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-gear .life-icon{width:28px;height:28px}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-why{grid-column:3;grid-row:2;justify-self:end;text-align:right;font-size:.72rem}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .life-card>button.life-go,html.stage-pc body.teyvat :where(#root) .shell-loc-left .life-card:has(>.life-card-why)>button.life-go{grid-column:4;grid-row:1/span 2;align-self:center}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-where{grid-column:1/-1;grid-row:3;justify-content:space-between;flex-wrap:nowrap;padding:5px 8px;border-radius:7px;background:rgba(0,0,0,.22)}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-where .material-source{min-width:0}
html.stage-pc body.teyvat .shell-loc-left .life-card>.life-card-head{justify-content:flex-start}
/* a region event's choices on the computer: buttons the size of their words (the merchant's 「사기」 stood 46px tall) */
html.stage-pc body.teyvat :where(#root) .shell-loc-left .region-event button{min-height:30px;padding:3px 12px;font-size:.8rem;width:auto}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .region-event button.primary{padding-left:28px}
/* 0.16.39 특성 강화 · 캐릭터 돌파 windows: one screen each. The costs are rows — the picture, the name (never cut), have/need,
   and under them where it is found with its 📌; the three talents stand side by side. */
body.teyvat dialog#modal[open]:has(.talent-dialog){width:min(900px,calc(100vw - 24px));max-width:min(900px,calc(100vw - 24px))}
body.teyvat dialog#modal[open]:has(.ascend-dialog){width:min(640px,calc(100vw - 24px))}
body.teyvat #modal .growth-dialog.talent-dialog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
body.teyvat #modal .talent-dialog>.card{display:flex;flex-direction:column;gap:6px;margin:0;padding:10px 12px;min-width:0}
body.teyvat #modal .talent-dialog>.card>h3{margin:0;font-size:.92rem;line-height:1.3}
body.teyvat #modal .talent-dialog>.card>.choice-note{margin:auto 0 0;font-size:.74rem}
body.teyvat :where(#modal) .talent-dialog>.card>button{margin:4px 0 0;width:100%}
body.teyvat #modal .talent-dialog>.card>.growth-costs+button{margin-top:auto}
body.teyvat #modal .growth-dialog .growth-costs{display:flex;flex-direction:column;flex-wrap:nowrap;gap:5px;margin:0}
body.teyvat #modal .ascend-dialog .growth-costs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:8px 0}
body.teyvat #modal .growth-dialog .growth-cost{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"icon name count" "icon src src";align-items:center;justify-items:start;column-gap:8px;row-gap:1px;width:auto;padding:5px 8px;text-align:left;border-radius:8px}
body.teyvat #modal .growth-dialog .growth-cost>.growth-cost-icon{grid-area:icon;width:34px;height:34px;align-self:center}
body.teyvat #modal .growth-dialog .growth-cost>small{grid-area:name;max-width:none;overflow:visible;white-space:normal;text-overflow:clip;font-size:.76rem;line-height:1.25;color:#ece4cf;word-break:keep-all}
body.teyvat #modal .growth-dialog .growth-cost>b{grid-area:count;justify-self:end;font-size:.82rem}
body.teyvat #modal .growth-dialog .growth-cost>.growth-cost-src{grid-area:src;width:100%;justify-content:space-between;margin:0}
body.teyvat #modal .growth-dialog .growth-cost-src small{white-space:normal;overflow:visible;text-overflow:clip;font-size:.68rem;line-height:1.25;text-align:left}
body.teyvat :where(#modal) .growth-dialog button.growth-cost-pin{width:24px;min-height:20px;border-radius:6px;font-size:.7rem}
body.teyvat #modal .ascend-dialog>p,body.teyvat #modal .ascend-dialog>h3{margin:0 0 3px}
html.stage-phone body.teyvat #modal .growth-dialog.talent-dialog{gap:6px}
html.stage-phone body.teyvat #modal .talent-dialog>.card{padding:5px 7px;gap:3px}
html.stage-phone body.teyvat #modal .talent-dialog>.card>h3{font-size:.7rem}
html.stage-phone body.teyvat #modal .growth-dialog .growth-cost{grid-template-columns:24px minmax(0,1fr) auto;column-gap:5px;padding:2px 5px}
html.stage-phone body.teyvat #modal .growth-dialog .growth-cost>.growth-cost-icon{width:24px;height:24px}
html.stage-phone body.teyvat #modal .growth-dialog .growth-cost>small{font-size:.58rem}
html.stage-phone body.teyvat #modal .growth-dialog .growth-cost>b{font-size:.62rem}
html.stage-phone body.teyvat #modal .growth-dialog .growth-cost-src small{font-size:.52rem}
html.stage-phone body.teyvat #modal .talent-dialog>.card>.choice-note{font-size:.56rem}
html.stage-phone body.teyvat :where(#modal) .talent-dialog>.card>button{min-height:26px;font-size:.62rem}
body.teyvat #modal .growth-dialog .growth-cost-src small{flex:1 1 auto;min-width:0}
html.stage-pc body.teyvat :where(#modal) .growth-dialog button:not(.growth-cost-pin){min-height:34px;padding-top:3px;padding-bottom:3px;font-size:.84rem}
/* 0.16.39 (user: 「운명의 자리도 이전에 옆으로 나열된거 이뻐서 좋았는데」): the computer shows the constellation as the wide strip again —
   its name and the button on one row, the six stars side by side across the pane, what the chosen one does under them. */
html.stage-pc body.teyvat .gear-pane-cons>.premium-cons{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head open" "chart chart" "detail detail" "note note";gap:8px 10px}
html.stage-pc body.teyvat .gear-pane-cons .cons-chart{height:120px}
html.stage-pc body.teyvat .gear-pane-cons .cons-detail{min-height:0;padding:8px 12px}
html.stage-pc body.teyvat .gear-pane-cons .cons-detail p{font-size:.82rem;line-height:1.45}
html.stage-pc body.teyvat .gear-pane-cons .premium-cons>small{font-size:.72rem;color:var(--t-muted,#a9b0bd)}
html.stage-pc body.teyvat :where(#root) .gear-pane-cons .premium-cons-open{align-self:center;min-height:30px;padding:2px 12px;font-size:.76rem}
/* 0.16.39 (user: 「음식 먹을 때 길이도 좀 맞추는게 좋을 것 같아」): 빠른 식사's people stand in one even row of four (they wrapped 3 + 1),
   the dishes above them on the same width */
html.stage-pc body.teyvat .quick-meal{max-width:760px;grid-template-columns:110px minmax(0,1fr)}
html.stage-pc body.teyvat .qm-people{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
html.stage-pc body.teyvat :where(#root) .qm-person{width:auto;min-width:0}
html.stage-pc body.teyvat .qm-foods{gap:6px}
/* 0.16.39 편성 on the computer: each card says what its role does, and the side column lists all five */
html.stage-pc body.teyvat .formation-slot .role-effect{display:block;margin:3px 0 0;font-size:.66rem;line-height:1.3;color:#cfc4a8;grid-column:1/-1}
html.stage-pc body.teyvat .role-legend{margin:0;padding:10px 12px}
html.stage-pc body.teyvat .role-legend>h2{margin:0 0 6px;font-size:.92rem}
html.stage-pc body.teyvat .role-legend-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
html.stage-pc body.teyvat .role-legend-list>li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:baseline;gap:6px;padding:3px 6px;border-radius:6px;font-size:.72rem;line-height:1.35}
html.stage-pc body.teyvat .role-legend-list>li>b{color:#f3dfae;font-size:.76rem}
html.stage-pc body.teyvat .role-legend-list>li>span{color:#cfd3dc}
html.stage-pc body.teyvat .role-legend-list>li.on{background:rgba(243,223,174,.1);box-shadow:inset 2px 0 0 #f3dfae}
html.stage-pc body.teyvat .role-legend-count{color:#f3dfae;font-weight:700}
html.stage-pc body.teyvat .party-cols .formation-slot .party-portrait{height:150px!important;width:auto;max-width:100%;object-fit:cover;object-position:top}
html.stage-pc body.teyvat :where(#root) .party-cols .formation-slot .member-select{height:auto!important;min-height:0!important;padding-bottom:8px}
html.stage-pc body.teyvat .party-cols .shell-col-side>.card{padding:10px 12px}
html.stage-pc body.teyvat .party-cols .shell-col-side>.card>h2{margin:0 0 6px;font-size:.92rem}
html.stage-pc body.teyvat .role-legend-list>li{padding:2px 6px;font-size:.7rem}
/* 0.16.39 (user: 「비경도 지금 버튼 아래 없어서 지맥이 가려져」): a domain's gate on the computer is compact enough to share the column
   with the ley lines — the name row, the double in one line, the levels as one slim bar, the eight elements in one row of
   small tiles, and the enemies, the rewards and 「도전」 together on the last row. */
html.stage-pc body.teyvat .shell-loc-left .domain-gate{display:flex;flex-direction:column;gap:6px;padding:10px 12px}
html.stage-pc body.teyvat .shell-loc-left .domain-gate-head{gap:8px}
html.stage-pc body.teyvat .shell-loc-left .domain-gate-head .domain-trial-icon{width:30px;height:30px;flex:0 0 30px}
html.stage-pc body.teyvat .shell-loc-left .domain-gate-name h2{font-size:1rem;line-height:1.2}
html.stage-pc body.teyvat .shell-loc-left .domain-gate-name small{font-size:.7rem}
html.stage-pc body.teyvat .shell-loc-left .domain-gate-double{margin:0;padding:3px 8px;font-size:.72rem;border-radius:6px}
html.stage-pc body.teyvat .shell-loc-left .domain-gate-double .dg-short{display:none}
html.stage-pc body.teyvat .shell-loc-left .domain-gate-lock{margin:0;font-size:.72rem}
html.stage-pc body.teyvat .shell-loc-left .domain-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:0;padding:2px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid rgba(211,188,142,.2)}
html.stage-pc body.teyvat :where(#root) .shell-loc-left button.domain-stage{min-height:30px;padding:2px 4px;border-radius:6px;border:0;background:transparent;box-shadow:none;flex-direction:row;gap:5px}
html.stage-pc body.teyvat :where(#root) .shell-loc-left button.domain-stage.selected{background:var(--t-cream);color:var(--t-ink);box-shadow:none}
html.stage-pc body.teyvat .shell-loc-left .domain-stage b{font-size:.84rem}
html.stage-pc body.teyvat .shell-loc-left .domain-stage small{font-size:.58rem}
html.stage-pc body.teyvat .shell-loc-left .domain-elements{display:flex;flex-wrap:nowrap;gap:4px}
html.stage-pc body.teyvat :where(#root) .shell-loc-left button.domain-element{width:34px;height:30px;min-height:30px;border-radius:7px;flex:1 1 0}
html.stage-pc body.teyvat .shell-loc-left .domain-element-icon{width:20px;height:20px}
html.stage-pc body.teyvat .shell-loc-left .domain-gate-body{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
html.stage-pc body.teyvat .shell-loc-left .domain-gate-body>.domain-foes{gap:6px;flex-wrap:nowrap}
html.stage-pc body.teyvat .shell-loc-left .domain-gate-body>.domain-rewards{gap:6px;flex-wrap:nowrap;padding-left:10px;border-left:1px solid rgba(211,188,142,.25)}
html.stage-pc body.teyvat .shell-loc-left .domain-foe-face{width:34px;height:34px}
html.stage-pc body.teyvat .shell-loc-left .domain-reward{width:36px;height:36px}
html.stage-pc body.teyvat .shell-loc-left .domain-reward-icon{width:27px;height:27px}
html.stage-pc body.teyvat .shell-loc-left .domain-reward.xp{width:auto;padding:0 8px 0 4px;display:inline-flex;gap:3px}
html.stage-pc body.teyvat .shell-loc-left .domain-reward.xp>b{position:static;background:none;border:0;padding:0;font-size:.78rem}
html.stage-pc body.teyvat :where(#root) .shell-loc-left .domain-gate-body>button.domain-go{margin-left:auto;width:auto;min-height:32px;padding:3px 18px 3px 30px;font-size:.84rem;flex:0 0 auto}
/* 0.16.39 (user: 「버튼은 존나 큰데 나머지가 작아서 느낌 이상하지?」): a way to go inside a card is a slim button the size of its words */
html.stage-pc body.teyvat :where(#root,#modal) :is(.relationship-card,.quest-card,.card,.journal-card,.task-board) button[data-action="MOVE"]{min-height:28px;padding:2px 12px;font-size:.76rem;width:auto;max-width:100%;align-self:flex-start}
html.stage-phone body.teyvat :where(#root,#modal) .relationship-card button[data-action="MOVE"]{min-height:22px;padding:1px 9px;font-size:.58rem;width:auto}
html.stage-pc body.teyvat .relations-body .relationship-card>button[data-action="MOVE"]{grid-column:2;justify-self:start}
/* … and if the map has no button row, the chip sits at its top right, never over the travel bar */
body.teyvat .terrain-frame>.resonance-mark{left:auto;right:8px;top:8px;bottom:auto;flex-direction:row;align-items:center;gap:6px;padding:2px 10px 2px 4px;border-radius:7px}
body.teyvat .terrain-frame>.resonance-mark .resonance-icon{width:24px;height:24px}
body.teyvat .terrain-frame>.resonance-mark .resonance-words{display:flex;flex-direction:column;line-height:1.1;text-align:left}
body.teyvat .terrain-frame>.resonance-mark .resonance-name{font-size:.62rem;opacity:.8;font-weight:700}
/* the chest windows' buttons on the computer match the rest */
html.stage-pc body.teyvat :is(.ch-overlay,.ch-box) button:not(.ch-close):not([class*="stone"]):not([class*="totem"]):not(.resonance-orb){border-radius:7px}
body.teyvat #modal .growth-dialog .growth-cost-src small{max-width:none}
html.stage-phone body.teyvat :where(#modal) .talent-dialog>.card>button{min-height:26px!important;padding-top:1px!important;padding-bottom:1px!important}
/* the character list's page numbers stay inside its column at every size */
html.stage-pc body.teyvat .shell-col-roster .roster-pager.pane-pager{gap:3px;justify-content:center}
html.stage-pc body.teyvat :where(#root) .shell-col-roster .roster-pager>button.pane-page{width:24px;height:24px;min-width:24px;min-height:24px}

/* 0.16.40 (user: 「이거 아주 잠깐 나오는것도 좀 없애던가 로딩 칸을 표출하던가...」): the moment a life activity (채집·채광·사냥) is being
   saved before its scene opens showed a wide 「채광 중 … 30초」 bar over the page head for a blink. It is now a small loading
   box in the middle of the screen with a turning ring, and it only shows when the wait is long enough to notice (0.35s). */
body.teyvat .life-work-status.pending-activity{position:fixed!important;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;display:flex;align-items:center;gap:12px;width:auto;min-width:0;max-width:min(360px,80vw);margin:0;padding:12px 20px;border-radius:12px;border:1px solid rgba(211,188,142,.45);background:rgba(12,16,26,.94);box-shadow:0 10px 40px rgba(0,0,0,.6);opacity:0;pointer-events:none;animation:pendingShow .2s ease .35s forwards}
body.teyvat .life-work-status.pending-activity>:is(progress,small,span:not(.travel-mark)){display:none!important}
body.teyvat .life-work-status.pending-activity>.travel-mark{font-size:0;width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:3px solid rgba(243,223,174,.25);border-top-color:#f3dfae;animation:pendingSpin .8s linear infinite}
body.teyvat .life-work-status.pending-activity>strong{font-size:.92rem;color:#f3dfae;white-space:nowrap}
@keyframes pendingShow{to{opacity:1}}
@keyframes pendingSpin{to{transform:rotate(360deg)}}
html.stage-phone body.teyvat .life-work-status.pending-activity{padding:8px 14px;gap:8px}
html.stage-phone body.teyvat .life-work-status.pending-activity>strong{font-size:.72rem}

/* 0.16.40 (user's picture of the Liyue map: the bar for a chosen place covered a third of the map, see-through over the
   places' names): the bar is one dark line over the map's bottom — the place's name and what it is, then the way there
   and its time, the travel button and 목적지 해제 at the right. */
body.teyvat .terrain-frame>.terrain-travel-dock[hidden]{display:none!important}/* 0.16.41: with nothing chosen there is no bar */
body.teyvat .terrain-frame>.terrain-travel-dock:not([hidden]){display:flex!important;align-items:center;flex-wrap:nowrap!important;gap:10px;padding:6px 8px 6px 12px!important;border-radius:9px;background:rgba(9,12,20,.94)!important;border:1px solid rgba(211,188,142,.35);max-height:none!important;overflow:visible!important}
body.teyvat[data-region=liyue] .terrain-frame>.terrain-travel-dock{background:rgba(22,14,8,.95)!important}
body.teyvat .terrain-frame>.terrain-travel-dock>.terrain-selection{display:flex!important;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:0;flex:1 1 auto;min-width:0;margin:0;padding:0;background:none;border:0;white-space:normal!important;overflow:visible!important}
body.teyvat .terrain-frame>.terrain-travel-dock>.terrain-selection>small:first-child{display:none!important}
body.teyvat .terrain-frame>.terrain-travel-dock>.terrain-selection>strong{display:inline!important;font-size:.86rem;line-height:1.3;white-space:nowrap}
body.teyvat .terrain-frame>.terrain-travel-dock>.terrain-selection>:is(span,p){display:inline!important;margin:0;font-size:.7rem;line-height:1.3;color:#cfd3dc}
body.teyvat .terrain-frame>.terrain-travel-dock>.terrain-selection>span+span::before{content:none!important}
body.teyvat .terrain-frame>.terrain-travel-dock>.terrain-selection>.terrain-lock-reason{color:#f3a99c}
body.teyvat .terrain-frame>.terrain-travel-dock>.terrain-route-chain{display:none!important}
body.teyvat :where(#root) .terrain-frame>.terrain-travel-dock>button{flex:0 0 auto;max-width:none!important;white-space:nowrap;overflow:visible!important;margin:0}
html.stage-phone body.teyvat .terrain-frame>.terrain-travel-dock{gap:5px;padding:3px 4px 3px 7px!important;border-radius:7px}
html.stage-phone body.teyvat .terrain-frame>.terrain-travel-dock>.terrain-selection>strong{font-size:.64rem}
html.stage-phone body.teyvat .terrain-frame>.terrain-travel-dock>.terrain-selection>:is(span,p){font-size:.5rem}
html.stage-phone body.teyvat .terrain-frame>.terrain-travel-dock>.terrain-selection>:is(span,p):not(:nth-child(-n+3)):not(.terrain-lock-reason){display:none!important}
html.stage-phone body.teyvat :where(#root) .terrain-frame>.terrain-travel-dock>button{min-height:24px!important;padding:1px 8px!important;font-size:.58rem!important}
html.stage-phone body.teyvat :where(#root) .terrain-frame>.terrain-travel-dock>button.terrain-travel{padding-left:22px!important}

/* 0.16.40 the map's head: the place's name never squeezes (it fell into a column of single letters beside the buttons);
   when the head is narrow the buttons say their short words. The pinned material's chip rides on the map's top right. */
body.teyvat .shell-loc-main .terrain-header{display:flex;align-items:center;flex-wrap:nowrap;gap:10px}
body.teyvat .shell-loc-main .terrain-header>.terrain-title{flex:0 0 auto;min-width:0;max-width:45%}
body.teyvat .shell-loc-main .terrain-header>.terrain-title>small{display:block;white-space:nowrap}
body.teyvat .shell-loc-main .terrain-header>.terrain-title>h2{white-space:nowrap}
body.teyvat .shell-loc-main .terrain-header>.terrain-shortcuts{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:6px}
html.stage-pc body.teyvat .shell-loc-main{container-type:inline-size;container-name:locmain}
@container locmain (max-width: 980px){
 body.teyvat .shell-loc-main .terrain-shortcuts .nav-long{display:none}
 body.teyvat .shell-loc-main .terrain-shortcuts .nav-short{display:inline}
}
body.teyvat .terrain-frame>.track-chip{position:absolute;top:8px;right:8px;z-index:6;background:rgba(9,12,20,.92);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.45)}
body.teyvat[data-region=liyue] .terrain-frame>.track-chip{background:rgba(22,14,8,.94)}
body.teyvat .terrain-frame>.track-chip .track-go small{max-width:none;overflow:visible;white-space:nowrap}
html.stage-phone body.teyvat .terrain-frame>.track-chip{top:4px;right:4px}
html.stage-phone body.teyvat :where(#root) .terrain-frame>.track-chip button.track-go{min-height:22px;padding:1px 6px 1px 2px;gap:3px}
html.stage-phone body.teyvat .terrain-frame>.track-chip .track-icon{width:18px;height:18px}
html.stage-phone body.teyvat .terrain-frame>.track-chip .track-go b{font-size:.58rem}
html.stage-phone body.teyvat .terrain-frame>.track-chip .track-go small{font-size:.5rem}
html.stage-phone body.teyvat :where(#root) .terrain-frame>.track-chip button.track-clear{width:18px;min-height:18px;font-size:.6rem}

/* 0.16.40 the window of Liyue's areas: the list fills the window's room and turns pages */
body.teyvat dialog#modal[open]:has(.liyue-area-browser){height:calc(100dvh - 40px);width:min(1000px,calc(100vw - 24px));max-width:min(1000px,calc(100vw - 24px))}
body.teyvat dialog#modal>#modal-body:has(>.liyue-area-browser){display:flex;flex-direction:column;min-height:0}
body.teyvat #modal-body>.liyue-area-browser{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px;overflow:hidden}
body.teyvat #modal-body>.liyue-area-browser>p.muted{margin:0;font-size:.76rem}
body.teyvat #modal-body>.liyue-area-browser>.pane-pager{margin-top:auto}
body.teyvat .liyue-area-browser .liyue-area-group{margin:0}
body.teyvat .liyue-area-browser .liyue-area-group>h3{margin:0 0 4px;font-size:.84rem}
body.teyvat .liyue-area-browser .liyue-browse-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
body.teyvat :where(#modal) .liyue-area-browser button.liyue-browse-place{min-height:0;margin:0;padding:6px 10px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left}
body.teyvat :where(#modal) .liyue-area-browser button.liyue-browse-place::before{display:none!important}
body.teyvat .liyue-area-browser .liyue-browse-place>strong{font-size:.8rem;line-height:1.25}
body.teyvat .liyue-area-browser .liyue-browse-place>small{font-size:.66rem;line-height:1.25;opacity:.8}
html.stage-phone body.teyvat .liyue-area-browser .liyue-browse-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
html.stage-phone body.teyvat :where(#modal) .liyue-area-browser button.liyue-browse-place{padding:2px 5px}
html.stage-phone body.teyvat .liyue-area-browser .liyue-browse-place>strong{font-size:.58rem}
html.stage-phone body.teyvat .liyue-area-browser .liyue-browse-place>small{font-size:.48rem}
html.stage-phone body.teyvat #modal-body>.liyue-area-browser>p.muted{display:none}

/* 0.16.40 (user's phone pictures: a field commission card running off the bottom, 호감도's stages in huge letters):
   the field commission card is short — its title, one line of what to do, the reward and the buttons; the panel's own
   heading and note are left to the tab. 호감도's stages are small rows: the stage, then why or when, one line. */
body.teyvat .shell-loc-left .field-commission-panel>h2,body.teyvat .shell-loc-left .field-commission-panel>p.muted{display:none}
body.teyvat .shell-loc-left .field-commission-card{display:flex;flex-direction:column;gap:4px;margin:0 0 6px;padding:8px 10px}
body.teyvat .shell-loc-left .field-commission-card>.eyebrow{font-size:.62rem;letter-spacing:.04em;margin:0}
body.teyvat .shell-loc-left .field-commission-card>h3{margin:0;font-size:.9rem;line-height:1.25}
body.teyvat .shell-loc-left .field-commission-card>p{margin:0;font-size:.72rem;line-height:1.4}
body.teyvat .shell-loc-left .field-commission-card>.reward-preview{margin:2px 0 0}
body.teyvat :where(#root) .shell-loc-left .field-commission-card button{min-height:28px;padding:2px 12px;font-size:.76rem;margin:2px 0 0;width:auto;align-self:flex-start}
html.stage-phone body.teyvat .shell-loc-left .field-commission-card{padding:4px 7px;gap:2px}
html.stage-phone body.teyvat .shell-loc-left .field-commission-card>.eyebrow{display:none}
html.stage-phone body.teyvat .shell-loc-left .field-commission-card>h3{font-size:.7rem}
html.stage-phone body.teyvat .shell-loc-left .field-commission-card>p{font-size:.56rem;line-height:1.3}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .field-commission-card button{min-height:22px;padding:1px 9px;font-size:.58rem}
body.teyvat .relations-body .relationship-stages{gap:3px;margin:3px 0 0}
body.teyvat .relations-body .relationship-stages li{min-height:0;padding:3px 8px;gap:2px 8px;flex-wrap:nowrap;justify-content:flex-start;align-items:baseline;font-size:.74rem;line-height:1.35;border-radius:6px}
body.teyvat .relations-body .relationship-stages li .stage-name{flex:0 0 auto;font-size:.74rem}
body.teyvat .relations-body .relationship-stages li small{flex:1 1 auto;min-width:0;text-align:left;font-size:.68rem;line-height:1.35}
body.teyvat :where(#root) .relations-body .relationship-stages li button{min-height:24px!important;padding:1px 10px;font-size:.7rem;margin:0 0 0 auto!important}
html.stage-phone body.teyvat .relations-body .relationship-stages li{padding:2px 6px;font-size:.56rem}
html.stage-phone body.teyvat .relations-body .relationship-stages li .stage-name{font-size:.56rem}
html.stage-phone body.teyvat .relations-body .relationship-stages li small{font-size:.52rem}
html.stage-phone body.teyvat :where(#root) .relations-body .relationship-stages li button{min-height:20px!important;padding:0 8px;font-size:.54rem}
/* the main quest's two buttons on a phone: words on one line each, the buttons sharing the row */
html.stage-phone body.teyvat :where(#root) .shell-loc-left .main-objective button{white-space:nowrap;min-width:0;padding-left:8px;padding-right:8px}
/* an opened 호감도 card takes the whole row (a page can then split it), its stages side by side */
body.teyvat .relations-body .relationship-card:has(>details[open]){grid-column:1/-1}
body.teyvat .relations-body .relationship-card>details[open]>.relationship-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
html.stage-phone body.teyvat .relations-body .relationship-card>details[open]>.relationship-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
/* 0.16.40 Liyue's area guide on the main screen: its name, one line of what it is, the tags and a slim 살펴보기 */
body.teyvat .shell-loc-left .liyue-local-guide{display:flex;flex-direction:column;gap:4px;padding:8px 12px;margin:0 0 6px}
body.teyvat .shell-loc-left .liyue-local-guide>.eyebrow{margin:0;font-size:.64rem;letter-spacing:.04em}
body.teyvat .shell-loc-left .liyue-local-guide>h2{margin:0;font-size:.92rem;line-height:1.25}
body.teyvat .shell-loc-left .liyue-local-guide>p{margin:0;font-size:.74rem;line-height:1.4}
body.teyvat .shell-loc-left .liyue-local-tags{display:flex;flex-wrap:wrap;gap:4px;margin:0}
body.teyvat .shell-loc-left .liyue-local-tags>span{font-size:.66rem;padding:1px 7px;border-radius:4px;background:rgba(255,255,255,.07);border:1px solid rgba(211,188,142,.2)}
body.teyvat :where(#root) .shell-loc-left .liyue-local-guide>button{align-self:flex-start;width:auto;min-height:28px;padding:2px 12px;font-size:.76rem;margin:2px 0 0}
html.stage-phone body.teyvat .shell-loc-left .liyue-local-guide{padding:4px 7px;gap:2px}
html.stage-phone body.teyvat .shell-loc-left .liyue-local-guide>.eyebrow{display:none}
html.stage-phone body.teyvat .shell-loc-left .liyue-local-guide>h2{font-size:.7rem}
html.stage-phone body.teyvat .shell-loc-left .liyue-local-guide>p{font-size:.56rem;line-height:1.3}
html.stage-phone body.teyvat .shell-loc-left .liyue-local-tags>span{font-size:.5rem;padding:0 5px}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .liyue-local-guide>button{min-height:22px;padding:1px 9px;font-size:.58rem}
/* the phone's travel bar: the button's words may take two short lines rather than run out of the bar */
html.stage-phone body.teyvat :where(#root) .terrain-frame>.terrain-travel-dock>button.terrain-travel{white-space:normal!important;text-align:left;line-height:1.15;max-width:58%!important;flex:0 1 auto}
html.stage-phone body.teyvat .terrain-frame>.terrain-travel-dock>.terrain-selection>:is(span,p){display:none!important}
html.stage-phone body.teyvat .terrain-frame>.terrain-travel-dock>.terrain-selection>.terrain-lock-reason{display:inline!important}
/* 0.16.40 on the computer's 1600×900 page the 편성 cards use its height (the tablet's 720 keeps the smaller pictures) */
@media (min-height:860px){
 html.stage-pc body.teyvat .party-cols .formation-slot .party-portrait{height:240px!important}
 html.stage-pc body.teyvat .party-cols .formation-slot{padding-top:12px;padding-bottom:12px}
 html.stage-pc body.teyvat .party-cols .formation-slot .role-effect{font-size:.72rem}
}
/* 0.16.40: the KO bar sits in the empty middle of the page's head (at the bottom it covered the bag's page buttons) */
body.teyvat .recovery-float{bottom:auto!important;top:84px}
html.stage-phone body.teyvat .recovery-float{top:49px;left:auto;right:10px;transform:none}
/* … in the page head's row of buttons, beside 「이야기로 돌아가기」 */
body.teyvat .shell-page-tools>.recovery-float.in-head{position:static!important;transform:none!important;top:auto;left:auto;right:auto;box-shadow:none;padding:3px 4px 3px 10px;gap:8px;margin:0 8px 0 0;border-radius:8px}
html.stage-phone body.teyvat .shell-page-tools>.recovery-float.in-head>span{display:none}
html.stage-phone body.teyvat .shell-page-tools>.recovery-float.in-head{padding:1px 2px 1px 6px;gap:4px;margin-right:4px}
html.stage-phone body.teyvat :where(#root) .shell-page-tools>.recovery-float.in-head>button{min-height:22px;font-size:.56rem;padding:1px 8px}
/* 0.16.41 (user: 「전투하면서 버프량이 많아지거나 버프 이름이 길어지면 파티가 위아래로 너무 길어져서 상태도 안보이고 그래」, 「버프가 한개만
   있으면 그건 좀」): a card's effects take two lines at most — what fits, then 「+N」 (app_battle_layout_v01522.js fitChips);
   the lines list them all when pressed. */
body.teyvat .combat-panel .combatant-copy{min-width:0}
body.teyvat .combat-panel .combatant-copy>.status-chips,body.teyvat .combat-panel .combatant-copy>.status-chips:hover{flex-wrap:wrap!important;gap:3px 3px;overflow:visible!important;-webkit-mask:none!important;mask:none!important;width:100%;max-width:100%;min-width:0}
body.teyvat .combat-panel .combatant-copy>.status-chips>.st-chip{flex:0 0 auto;max-width:none}
body.teyvat .combat-panel .combatant-copy>.status-chips>.st-chip[hidden]{display:none!important}
body.teyvat .combat-panel .combatant-copy>.status-chips>.st-chip.st-more{color:#ece5d8;border-color:rgba(236,229,216,.42);background:rgba(20,24,34,.9)}/* 0.16.41 (user's picture: 리월항 구역 안내 ran past the bottom of 시설): one small card per district — name, role and the way
   there on one line, its places under it (「소개」 places in gold) — so the column's pages split between the cards. */
body.teyvat .shell-loc-left .liyue-city-directory.liyue-district{margin:0;padding:8px 10px 9px 12px;border:1px solid rgba(196,171,117,.22);border-left:3px solid #c4ab75;border-radius:7px;display:grid;gap:6px}
body.teyvat .shell-loc-left .liyue-district.here{border-left-color:#e8cf95;background:rgba(232,207,149,.06)}
body.teyvat .shell-loc-left .liyue-district-head{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}
body.teyvat .shell-loc-left .liyue-district-head>strong{font-size:.86rem;line-height:1.25;white-space:nowrap}
body.teyvat .shell-loc-left .liyue-district.here .liyue-district-head>strong{color:#e8cf95}
body.teyvat .shell-loc-left .liyue-district-head>small{font-size:.68rem;color:#b9b1a0;white-space:nowrap}
body.teyvat .shell-loc-left .liyue-district-head>:is(button,.requirement-met){margin:0 0 0 auto;flex:0 0 auto}
body.teyvat :where(#root) .shell-loc-left .liyue-district-head>button{min-height:26px;padding:2px 12px;font-size:.72rem;white-space:nowrap}
body.teyvat .shell-loc-left .liyue-district-places{margin:0;gap:4px}
body.teyvat .shell-loc-left .liyue-place-chip{display:inline-flex;align-items:baseline;gap:5px;padding:2px 8px;border-radius:5px;font-size:.72rem;line-height:1.35}
body.teyvat .shell-loc-left .liyue-place-chip>small{font-size:.6rem;color:#a9a294}
body.teyvat .shell-loc-left .liyue-place-chip.intro{border-color:#c9ad6c;color:#f0dcae}
body.teyvat .shell-loc-left .liyue-place-chip.intro>small{color:#d8c08a}
html.stage-phone body.teyvat .shell-loc-left .liyue-city-directory.liyue-district{padding:5px 7px 6px 9px;gap:4px}
html.stage-phone body.teyvat .shell-loc-left .liyue-district-head>strong{font-size:.68rem}
html.stage-phone body.teyvat .shell-loc-left .liyue-district-head>small{font-size:.54rem}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .liyue-district-head>button{min-height:22px;padding:1px 9px;font-size:.58rem}
html.stage-phone body.teyvat .shell-loc-left .liyue-place-chip{font-size:.58rem;padding:1px 6px}
html.stage-phone body.teyvat .shell-loc-left .liyue-place-chip>small{font-size:.5rem}/* 0.16.41: a companion's 「15,234 / 15,234」 under 빠른 식사 broke over two lines; one line, a size smaller. */
html.stage-pc body.teyvat .qm-copy>small{white-space:nowrap;font-size:.64rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
html.stage-pc body.teyvat .qm-face{width:34px;height:34px;flex-basis:34px}
html.stage-pc body.teyvat :where(#root) .qm-person{padding:4px 6px 4px 4px;gap:5px}/* 0.16.41: one to four enemies get bigger pictures with the room the screen has (a lone boss stood 140px tall in an empty
   board); fitFighters still shrinks them if anything would run past the board. */
html.stage-pc body.teyvat .combat-panel .shell-enemies[data-count="1"]{grid-template-columns:minmax(0,300px);--enemy-h:min(260px,calc(100vh - 480px))}
html.stage-pc body.teyvat .combat-panel .shell-enemies[data-count="2"]{grid-template-columns:repeat(2,minmax(0,270px));--enemy-h:min(230px,calc(100vh - 490px))}
html.stage-pc body.teyvat .combat-panel .shell-enemies[data-count="3"]{grid-template-columns:repeat(3,minmax(0,240px));--enemy-h:min(200px,calc(100vh - 500px))}
html.stage-pc body.teyvat .combat-panel .shell-enemies[data-count="4"]{grid-template-columns:repeat(4,minmax(0,215px));--enemy-h:min(180px,calc(100vh - 510px))}
/* 설정 · 계정·저장: the buttons stood glued together under a wide paragraph; now spaced tiles under a short muted note */
body.teyvat .shell-pane[data-tab="s0:계정·저장"]{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}
body.teyvat .shell-pane[data-tab="s0:계정·저장"]>:not(button){flex:0 0 100%}
body.teyvat .shell-pane[data-tab="s0:계정·저장"]>p{margin:0 0 4px;padding-right:20%;box-sizing:border-box;font-size:.78rem;line-height:1.6;color:#b9b1a0}
body.teyvat :where(#root) .shell-pane[data-tab="s0:계정·저장"]>button{margin:0;min-width:150px}/* 0.16.41: a party that still runs past the board (fitFighters) — the role tag goes and the rows tighten */
html.stage-pc body.teyvat .combat-panel .shell-allies.tight{gap:4px}
html.stage-pc body.teyvat .combat-panel .shell-allies.tight .combatant-row{padding-top:3px;padding-bottom:3px}
html.stage-pc body.teyvat .combat-panel .shell-allies.tight .combatant-copy .battle-position{display:none}
html.stage-pc body.teyvat .combat-panel .shell-allies.tighter>h2{display:none}
html.stage-pc body.teyvat .combat-panel .shell-allies.tighter .combatant-copy .stat{font-size:.6rem;line-height:1.15}/* … and its HP numbers move up beside the name, so two lines of effects still fit (the phone's 1280×720 page) */
html.stage-pc body.teyvat .combat-panel .shell-allies.tight .combatant-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:3px;align-items:center}
html.stage-pc body.teyvat .combat-panel .shell-allies.tight .combatant-copy>*{grid-column:1/-1;margin-top:0;margin-bottom:0}
html.stage-pc body.teyvat .combat-panel .shell-allies.tight .combatant-copy>strong{grid-column:1;grid-row:1;min-width:0}
html.stage-pc body.teyvat .combat-panel .shell-allies.tight .combatant-copy>.stat{grid-column:2;grid-row:1;justify-self:end;margin-right:24px;white-space:nowrap}/* 0.16.41: Liyue's oculus is smaller and slips between the rocks faster (app_journey.js catchGame) */
body.teyvat :where(#modal) .resonance-game.hard .resonance-orb{width:40px;height:40px;transition:left .22s ease-out,top .22s ease-out;background:radial-gradient(circle,rgba(255,226,150,.3),rgba(0,0,0,0) 70%)}
body.teyvat .resonance-game.hard .resonance-orb .resonance-icon{width:32px;height:32px;filter:drop-shadow(0 0 8px rgba(255,220,140,.85))}/* 0.16.42 (user: 「이 현장의뢰 이거 ㅅㅂ 이어져있지도 않고 글도 밀리고」): a field commission's card in the column is short — its
   reward chips small, the steps as small square chips, one 「현장 살피기」 button that opens the scene in a window, and the
   choices with their 💬 / ⚔ mark beside the words (it was drawn over the first letters). */
body.teyvat .shell-loc-left .field-commission-card>.reward-preview{display:flex;flex-wrap:wrap;gap:4px}
body.teyvat .shell-loc-left .field-commission-card>.reward-preview>span{display:inline-flex;align-items:center;gap:4px;min-height:0;padding:2px 8px;border-radius:5px;font-size:.7rem;line-height:1.35}
body.teyvat .shell-loc-left .field-commission-card>.reward-preview .reward-cur{width:15px;height:15px}
body.teyvat .shell-loc-left .field-scene-card .scene-steps{margin:2px 0 0;gap:4px}
body.teyvat .shell-loc-left .field-scene-card .scene-steps li{border-radius:5px;padding:1px 8px;font-size:.68rem}
body.teyvat .shell-loc-left .field-scene-card .scene-goal{margin:0;font-size:.68rem}
body.teyvat .field-scene-card .scene-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}
body.teyvat :where(#root) .shell-loc-left .field-scene-card .scene-actions>button.scene-open{display:inline-flex;align-items:baseline;gap:8px;min-height:30px;padding:3px 14px 3px 30px}
body.teyvat .field-scene-card .scene-open>small{font-size:.68rem;opacity:.85;font-weight:600}
body.teyvat :where(#modal) .scene-step-window{margin:0;max-width:640px}
body.teyvat :where(#modal) .scene-step-window .story{font-size:.86rem;line-height:1.65}
body.teyvat :where(#modal,#root) .scene-options .scene-option{display:flex;align-items:flex-start;gap:8px;padding:8px 14px!important;text-align:left}
body.teyvat :where(#modal,#root) .scene-options .scene-option::before{content:none!important;display:none!important}
body.teyvat .scene-options .scene-option>.scene-option-mark{flex:0 0 auto;font-size:.9rem;line-height:1.5}
body.teyvat :where(#modal) .scene-log-window{margin:0;border:0;padding:0;max-width:640px}
html.stage-phone body.teyvat .shell-loc-left .field-commission-card>.reward-preview>span{font-size:.56rem;padding:1px 6px}
html.stage-phone body.teyvat .shell-loc-left .field-scene-card .scene-steps li{font-size:.54rem;padding:0 6px}
html.stage-phone body.teyvat .shell-loc-left .field-scene-card .scene-goal{font-size:.54rem}/* 0.16.43 (user: 「이거도 왜 도전 버튼은 뒤에 있노...」): a boss's card — its challenge buttons right under its name, 「자세히」 beside them */
body.teyvat .shell-loc-left .boss-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 2px}
body.teyvat :where(#root) .shell-loc-left .boss-actions>button{margin:0;width:auto;min-height:30px;padding:3px 14px;font-size:.76rem}
body.teyvat :where(#root) .shell-loc-left .boss-actions>button.primary{padding-left:30px}
body.teyvat .shell-loc-left .boss-actions+.choice-note,body.teyvat .shell-loc-left .boss-actions~.choice-note{margin:0;font-size:.7rem}
body.teyvat .shell-loc-left :is(.material-challenge,.liyue-artifact-farm) .mut-panel{margin-top:6px;padding:8px 10px}
body.teyvat .shell-loc-left :is(.material-challenge,.liyue-artifact-farm)>.material-challenge-reward{font-size:.72rem;margin:2px 0}
body.teyvat :where(#modal) .boss-more-card{display:grid;gap:8px;max-width:620px}
body.teyvat :where(#modal) .boss-more-card>*{margin:0;font-size:.84rem;line-height:1.6}
html.stage-phone body.teyvat :where(#root) .shell-loc-left .boss-actions>button{min-height:22px;padding:1px 9px;font-size:.58rem}body.teyvat .shell-loc-left :is(.material-challenge,.liyue-artifact-farm)>.eyebrow{font-size:.62rem;letter-spacing:0;line-height:1.35;font-family:inherit}
body.teyvat .shell-loc-left .mut-panel .mut-mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;margin:4px 0}
body.teyvat .shell-loc-left .mut-panel .mut-mod{padding:4px 8px;font-size:.66rem;line-height:1.35}
body.teyvat .shell-loc-left .mut-panel .mut-mod>strong{font-size:.72rem}
body.teyvat .shell-loc-left .mut-panel .mut-bonus{margin:2px 0 0;font-size:.68rem}body.teyvat .shell-loc-left .mut-panel{padding:6px 8px}
body.teyvat .shell-loc-left .mut-panel .mut-head{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
body.teyvat .shell-loc-left .mut-panel .mut-head>h3{margin:0;font-size:.8rem}
body.teyvat .shell-loc-left .mut-panel .mut-head>.mut-time{margin-left:auto;font-size:.6rem}
body.teyvat .shell-loc-left .mut-panel .mut-mod{padding:3px 6px;font-size:.6rem;line-height:1.3}
body.teyvat .shell-loc-left .mut-panel .mut-mod>strong{font-size:.66rem}/* 0.16.43 (user: 「전투 할때도 위에 뭔가 생기고 그러면 … 몬스터가 찌그러지거나 … 전체적으로 고정이 될만한 디자인」, 「아래쪽에 로그 나오는거 …
   전투에 녹아들게」): the board keeps one size for the whole fight — the summon strips float over its top-left and the last
   action is a small caption over its bottom-left; neither takes room from the fighters (app_battle_layout_v01522.js). */
body.teyvat .combat-panel .compact-battle-stage.fixed-board{position:relative}
body.teyvat .combat-panel .compact-battle-stage.fixed-board>.battle-summons{position:absolute!important;top:2px;left:6px;z-index:5;margin:0!important;max-width:calc(100% - 340px);display:flex;flex-wrap:wrap;gap:4px 10px;pointer-events:auto}
body.teyvat .combat-panel .compact-battle-stage.fixed-board>.shell-battle-feed{position:absolute;left:8px;bottom:4px;z-index:4;display:flex!important;max-width:calc(100% - 340px);margin:0;padding:3px 10px;border-radius:6px;background:rgba(8,10,16,.72);border:1px solid rgba(211,188,142,.18);font-size:.72rem;pointer-events:none}
body.teyvat .combat-panel .compact-battle-stage.fixed-board>.shell-battle-feed>p{white-space:normal;overflow:visible;text-overflow:clip}
body.teyvat .combat-panel .compact-battle-stage.fixed-board>.shell-battle-feed>p:not(:last-child){display:none}/* … and two lines of effects under each enemy are kept from the first round, so effects that come and go never resize it */
html.stage-pc body.teyvat .combat-panel .shell-enemies .combatant-copy{position:relative;padding-bottom:43px!important}
html.stage-pc body.teyvat .combat-panel .shell-enemies[data-chip-lines="1"] .combatant-copy{padding-bottom:22px!important}
html.stage-pc body.teyvat .combat-panel .shell-enemies .combatant-copy>.status-chips{position:absolute!important;left:0;right:0;bottom:0;margin:0!important}/* 0.16.45 (user: 「이미 읽은 이야기 부분까지 1,2,3번으로 나누는건 좀; 거긴 그냥 휠로 올리고 내려도 돼」): 읽은 이야기 is one list
   scrolled with the wheel or a swipe — the one place that scrolls on purpose (tests/test_screen_fit_v01629.mjs allows it). */
body.teyvat #modal-body>.history-scroll{flex:1 1 auto;min-height:0;max-height:calc(100vh - 230px);overflow-y:auto;zoom:1!important;overscroll-behavior:contain;padding-right:8px;display:grid;gap:8px;align-content:start;scrollbar-width:thin;scrollbar-color:rgba(211,188,142,.45) transparent}
body.teyvat #modal-body>.history-scroll>.history-entry{margin:0;padding:6px 10px;border-left:2px solid rgba(211,188,142,.35)}
body.teyvat #modal-body>.history-scroll>.history-entry>strong{font-size:.76rem;color:#f3dfae}
body.teyvat #modal-body>.history-scroll>.history-entry>p{margin:2px 0 0;font-size:.82rem;line-height:1.6}body.teyvat #modal-body>.history-scroll{outline:none;width:auto;max-width:min(680px,72vw)}/* 0.16.47: the day's (week's) tasks that open later — one muted row at the end of the list */
.task-kind.k-later{background:#4a5560;color:#e6ecef}
.task-later .task-mini-name,.task-later .task-copy strong{color:var(--muted,#9fb0b8);font-weight:600}
.task-later-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:7px 10px;border-radius:12px;border:1px dashed var(--t-line);opacity:.8}
/* 0.16.48 비경 피로: a line under the HP numbers (quick meal, KO/inn party rows) and the strip on a domain result */
body.teyvat .fatigue-badge{display:inline-block;align-self:flex-start;margin-top:1px;padding:0 5px;border-radius:6px;background:rgba(120,40,40,.92);border:1px solid rgba(255,170,150,.55);color:#ffe2d6;font-size:.6rem;line-height:1.35;font-weight:700;white-space:nowrap;pointer-events:none}
body.teyvat .fatigue-badge.easing{background:rgba(40,96,52,.94);border-color:rgba(160,230,150,.6);color:#e4ffd9}
html.stage-phone body.teyvat .fatigue-badge{font-size:.52rem;padding:0 4px}
body.teyvat .fatigue-strip{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;max-width:760px;margin:10px auto 0;padding:8px 14px;border-radius:12px;border:1px solid rgba(255,170,150,.3);background:rgba(60,20,20,.3)}
body.teyvat .fatigue-head{display:flex;flex-direction:column;gap:2px;max-width:150px}
body.teyvat .fatigue-head>strong{font-size:.85rem;color:#ffd3c2}
body.teyvat .fatigue-head>small{font-size:.66rem;line-height:1.3;color:var(--t-muted,#a9b0bd);word-break:keep-all}
body.teyvat .fatigue-people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
body.teyvat .fatigue-member{display:flex;align-items:center;gap:6px;min-width:0;padding:3px 6px 3px 3px;border-radius:10px;background:rgba(0,0,0,.25)}
body.teyvat .fatigue-member.full{outline:1px solid rgba(255,140,120,.7)}
body.teyvat .fatigue-face{width:34px;height:34px;border-radius:8px;object-fit:cover;object-position:top;flex:0 0 34px}
body.teyvat .fatigue-copy{display:flex;flex-direction:column;gap:1px;min-width:0}
body.teyvat .fatigue-copy>small{font-size:.66rem;line-height:1.15}
body.teyvat .fatigue-copy>b{font-size:.74rem;color:#ffc4ae;white-space:nowrap}
html.stage-phone body.teyvat .fatigue-strip{margin:4px auto 0;padding:3px 8px;gap:4px 8px}
html.stage-phone body.teyvat .fatigue-head{max-width:96px}
html.stage-phone body.teyvat .fatigue-head>strong{font-size:.64rem}
html.stage-phone body.teyvat .fatigue-head>small{font-size:.5rem}
html.stage-phone body.teyvat .fatigue-face{width:24px;height:24px;flex-basis:24px}
html.stage-phone body.teyvat .fatigue-copy>small{font-size:.5rem}
html.stage-phone body.teyvat .fatigue-copy>b{font-size:.56rem}
/* 0.16.49 요리의 비경 피로: a row of level bands on a recovery dish (the protagonist's band lit), 「드묾」 on rare ingredients */
body.teyvat .cook-fatigue{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin:4px 0}
body.teyvat .cook-fatigue-label{font-size:.72rem;font-weight:700;color:#ffd3c2;margin-right:2px}
body.teyvat .cook-fatigue-band{display:inline-flex;align-items:baseline;gap:4px;padding:1px 7px;border-radius:7px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22)}
body.teyvat .cook-fatigue-band>small{font-size:.62rem;color:var(--t-muted,#a9b0bd)}
body.teyvat .cook-fatigue-band>b{font-size:.74rem;color:#9be38f}
body.teyvat .cook-fatigue-band.none>b{color:#8a8f99;font-weight:600}
body.teyvat .cook-fatigue-band.now{border-color:rgba(243,223,174,.8);background:rgba(243,223,174,.14)}
body.teyvat .cook-chip-rare{margin-left:4px;padding:0 4px;border-radius:5px;background:rgba(150,90,200,.35);color:#ecd7ff;font-size:.56rem;line-height:1.4;white-space:nowrap}
body.teyvat .cook-fatigue-note{margin:2px 0 0;font-size:.72rem;color:#ffd3c2;word-break:keep-all}
html.stage-phone body.teyvat .cook-fatigue-label{font-size:.6rem}
html.stage-phone body.teyvat .cook-fatigue-band>small{font-size:.52rem}
html.stage-phone body.teyvat .cook-fatigue-band>b{font-size:.62rem}
html.stage-phone body.teyvat .cook-fatigue-note{font-size:.58rem}
/* 0.16.52 a summon made during the turn's playback joins its lane with a short arrival */
body.teyvat .battle-summon.summon-arrive{animation:summon-arrive .45s ease-out both}
@keyframes summon-arrive{from{opacity:0;transform:translateY(-6px) scale(.92)}to{opacity:1;transform:none}}