/* 0.14.7 티바트(Teyvat) UI. Loaded after style.css. Everything is scoped to body.teyvat, which app_shell.js sets while a journey is open, so the title screen keeps its own look. Night-sky glass, cream (#ece5d8) controls with dark ink, gold (#d3bc8e) trim, and an accent that follows the region (app_motion.js sets body[data-region]). */ body.teyvat{ --t-bg:#0a0d18;--t-glass:rgba(14,18,32,.78);--t-glass-2:rgba(20,25,43,.9);--t-glass-3:rgba(30,36,60,.92); --t-line:rgba(211,188,142,.24);--t-line-2:rgba(211,188,142,.52);--t-gold:#d3bc8e;--t-gold-hi:#f3dfae; --t-cream:#ece5d8;--t-cream-2:#dcd2bd;--t-ink:#39404f;--t-ink-2:#5b6272;--t-text:#f3eee4;--t-muted:#bdb6a9; --t-ally:#8fc6e6;--t-foe:#ff9b8a;--t-ok:#a6dca0; --acc:#6fd6c6;--acc-2:#b6f2e8;--acc-rgb:130,226,210;--acc-deep:#1f5a5a; --font-display:'Gowun Batang','Noto Serif KR',CRPGKorean,serif;--font-latin:'Cinzel','Gowun Batang',serif;--font-ui:CRPGKorean,system-ui,sans-serif; --gold:#d3bc8e;--line:rgba(211,188,142,.24);--panel:rgba(14,18,32,.78);--text:#f3eee4;--muted:#bdb6a9;--green:#9fd8b8; --hud-h:62px;--dock-h:0px;--gap:14px; background:var(--t-bg);color:var(--t-text);height:100vh;height:100dvh;overflow:hidden;font-family:var(--font-ui); } body.teyvat[data-region=liyue]{--acc:#f2b84b;--acc-2:#ffe0a0;--acc-rgb:248,196,96;--acc-deep:#5a3f12} body.teyvat[data-region=snow]{--acc:#8fd3f0;--acc-2:#d8f3ff;--acc-rgb:160,220,248;--acc-deep:#1d4560} body.teyvat[data-region=chasm]{--acc:#a58bff;--acc-2:#d9ccff;--acc-rgb:176,150,255;--acc-deep:#33265c} body.teyvat[data-region=abyss]{--acc:#7d8cff;--acc-2:#c7cdff;--acc-rgb:140,152,255;--acc-deep:#22285c} body.teyvat[data-region=hydro]{--acc:#5ab8f0;--acc-2:#bfe6ff;--acc-rgb:110,190,245;--acc-deep:#173f5c} body.teyvat[data-region=electro]{--acc:#b48cf0;--acc-2:#e6d6ff;--acc-rgb:190,150,245;--acc-deep:#3a245c} body.teyvat[data-region=dendro]{--acc:#9bd65a;--acc-2:#ddf5bf;--acc-rgb:170,220,110;--acc-deep:#2f4d14} body.teyvat[data-region=pyro]{--acc:#f08a5a;--acc-2:#ffd2bd;--acc-rgb:245,150,105;--acc-deep:#5c2414} body.teyvat[data-region=nod]{--acc:#7fd0e8;--acc-2:#d0f2fb;--acc-rgb:140,212,235;--acc-deep:#1d4752} body.teyvat *{scrollbar-width:thin;scrollbar-color:rgba(211,188,142,.42) transparent} body.teyvat ::-webkit-scrollbar{width:8px;height:8px} body.teyvat ::-webkit-scrollbar-thumb{background:rgba(211,188,142,.38);border-radius:8px} body.teyvat ::-webkit-scrollbar-track{background:transparent} body.teyvat #masthead{display:none} /* ---------- world backdrop ---------- */ body.teyvat .world-backdrop{opacity:.5;filter:blur(3px) saturate(1.05);transform:scale(1.04);transition:opacity .8s ease,filter .8s ease;background-color:#0e1222;animation:shellDrift 46s ease-in-out infinite alternate} body.teyvat .world-backdrop.shell-lit{opacity:1;filter:saturate(1.08)} @keyframes shellDrift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.2%,-1%,0)}} body.teyvat .shell-motes{position:fixed;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen} body.teyvat .world-backdrop:after{background:linear-gradient(180deg,rgba(8,10,16,.78) 0,rgba(8,10,16,.18) 16%,rgba(8,10,16,.12) 55%,rgba(8,10,16,.82) 100%),radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(6,8,14,.55) 100%)} body.teyvat[data-mode=menu] .world-backdrop,body.teyvat[data-mode=plain] .world-backdrop{filter:blur(14px) brightness(.62) saturate(.9)} body.teyvat[data-mode=battle] .world-backdrop{filter:brightness(.62) saturate(1.1)} /* ---------- frame ---------- */ /* The game screen never scrolls as a page; every long list scrolls inside its own panel. */ html:has(>body.teyvat){overflow:hidden} /* 0.16.4: the page reaches under a phone's camera hole (viewport-fit=cover); what shows there is the game's dark, not white. */ html:has(>body.teyvat){background-color:#070a12} /* 0.16.45 (user: 「이전엔 스토리 하면서 맵사진이 보였던거같은데 뭐지?」): with the page's dark on , the body's own dark was painted over the place's picture (.world-backdrop, z-index -2) on every screen since 0.16.4. The body is clear; the picture shows. */ html:has(>body.teyvat)>body.teyvat{background:transparent} body.teyvat #root{height:100%;overflow:hidden} body.teyvat #root>main{max-width:none;margin:0;height:100%;display:block;padding:calc(var(--hud-h) + 8px) 18px 14px;box-sizing:border-box} body.teyvat .content.shell-content{height:100%;min-height:0;display:flex;flex-direction:column;gap:10px;position:relative} body.teyvat .content.shell-content>.panel{flex:1 1 auto;min-height:0;margin:0} body.teyvat .content.shell-content>:not(.panel){flex:0 0 auto} body.teyvat .shell-offscreen{display:none!important} body.teyvat #notice:not(:empty){position:fixed;z-index:420;top:calc(var(--hud-h) + 10px);left:50%;transform:translateX(-50%);margin:0;width:max-content;max-width:min(760px,calc(100vw - 32px));background:rgba(22,26,40,.95);border:1px solid var(--t-line-2);border-radius:16px;padding:10px 20px;box-shadow:0 10px 32px rgba(0,0,0,.45);animation:shellDrop .25s ease-out} body.teyvat #root>.pending-action-notice{position:fixed;z-index:430;top:calc(var(--hud-h) + 10px);left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 32px));background:rgba(40,30,18,.96);border:1px solid #c9a15b;border-radius:16px;padding:12px 18px;box-shadow:0 10px 32px rgba(0,0,0,.5)} @keyframes shellDrop{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}} @keyframes shellIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes shellFade{from{opacity:0}to{opacity:1}} @keyframes shellGlow{0%,100%{box-shadow:0 0 0 1px rgba(243,223,174,.45),0 0 10px rgba(243,223,174,.25)}50%{box-shadow:0 0 0 2px rgba(243,223,174,.75),0 0 22px rgba(243,223,174,.45)}} @keyframes shellBlink{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(3px)}} @keyframes shellSpin{to{transform:rotate(360deg)}} body.teyvat .content.shell-screen-enter>.panel{animation:shellIn .3s cubic-bezier(.2,.8,.2,1)} body.teyvat .shell-flash{animation:shellGlow .45s ease-in-out 2} /* ---------- base controls ---------- */ body.teyvat{font-size:15px} body.teyvat h1,body.teyvat h2,body.teyvat h3{letter-spacing:.01em} body.teyvat h2{color:var(--t-gold)} body.teyvat :where(#root,#modal,.hud-guide-pop,.combat-playback) button{border-radius:22px;border:1px solid rgba(236,229,216,.2);background:rgba(255,255,255,.06);color:var(--t-text);transition:background .15s,border-color .15s,transform .12s,box-shadow .18s,color .15s} /* 0.15.2: hover looks only where there is a pointer that hovers. A phone keeps the last tapped button in :hover, and this dark hover covered the cream of the chosen tab under its dark letters (the 「이동」 tab looked empty — user screenshot). */ @media (hover:hover){ body.teyvat :where(#root,#modal,.hud-guide-pop,.combat-playback) button:hover:not(:disabled){border-color:rgba(243,223,174,.7);background:rgba(236,229,216,.12);box-shadow:0 0 0 1px rgba(243,223,174,.2),0 0 14px rgba(243,223,174,.16)} /* a chosen tab or option keeps its cream (with dark letters) under the pointer too */ body.teyvat :where(#root,#modal,.hud-guide-pop,.combat-playback) :is(.shell-tab.active,.shell-subtabs button.selected,.shell-subtabs button.active,.shell-roster-item.active,.formation-option.selected,.hud-chat.active,.shell-sound-opt.active,.bag-trade-filter button.selected,.wish-ghost.active):hover:not(:disabled){background:var(--t-cream);color:var(--t-ink);border-color:var(--t-cream)} } body.teyvat :where(#root,#modal,.hud-guide-pop,.combat-playback) button:active:not(:disabled){transform:scale(.98)} body.teyvat :where(#root,#modal,.hud-guide-pop,.combat-playback) button:disabled{opacity:.42} body.teyvat :where(#root,#modal,.hud-guide-pop,.combat-playback) button.primary{background:var(--t-cream);border-color:var(--t-cream);color:var(--t-ink);font-weight:700} body.teyvat :where(#root,#modal,.hud-guide-pop,.combat-playback) button.primary:hover:not(:disabled){background:#fffaf0;color:var(--t-ink);box-shadow:0 0 0 2px rgba(243,223,174,.65),0 0 20px rgba(243,223,174,.42)} 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]){position:relative;padding-left:44px} 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{content:'';position:absolute;left:12px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:radial-gradient(circle,#f1c24c 0 32%,#39404f 35%);box-shadow:0 0 0 2px rgba(57,64,79,.25)} body.teyvat :where(#root,#modal) input,body.teyvat :where(#root,#modal) select{background:rgba(10,13,21,.7);border:1px solid rgba(236,229,216,.2);border-radius:12px;color:var(--t-text)} body.teyvat input:focus-visible,body.teyvat select:focus-visible,body.teyvat button:focus-visible,body.teyvat summary:focus-visible{outline:2px solid var(--t-gold-hi);outline-offset:3px} body.teyvat .card{background:rgba(255,255,255,.035);border:1px solid rgba(211,188,142,.18);border-radius:14px} body.teyvat details>summary{cursor:pointer} body.teyvat .meter{background:rgba(255,255,255,.1);border:0;border-radius:6px} body.teyvat .muted,body.teyvat small{color:var(--t-muted)} body.teyvat .shell-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} /* ---------- typography ---------- */ body.teyvat h1,body.teyvat .shell-h1,body.teyvat .speaker,body.teyvat .hud-place-name,body.teyvat .pm-who strong,body.teyvat .hb-head h2,body.teyvat .shell-loc-head h1,body.teyvat .combat-panel>.battle-heading h1{font-family:var(--font-display);font-weight:700;letter-spacing:.02em} body.teyvat .eyebrow,body.teyvat .shell-eyebrow,body.teyvat .combat-panel>.battle-heading .eyebrow,body.teyvat .hb-title strong{font-family:var(--font-latin);letter-spacing:.16em} body.teyvat h2{font-family:var(--font-display);font-weight:700} /* ---------- pointer response (app_motion.js) ---------- */ body .tiltable{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)) scale(var(--sc,1));transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease,background-color .3s ease,filter .3s ease;will-change:transform} body .tiltable.is-tilting{--lift:-3px;--sc:1.015;transition:transform .1s linear,box-shadow .3s ease,border-color .3s ease,background-color .3s ease,filter .3s ease;z-index:2} body.teyvat .tiltable.is-tilting:not(.shell-tab):not(.hud-nav-button):not(.hud-tool){box-shadow:0 16px 36px rgba(0,0,0,.45),0 0 0 1px rgba(var(--acc-rgb),.6),0 0 30px rgba(var(--acc-rgb),.22);border-color:rgba(var(--acc-rgb),.75)} body .tiltable.is-pressed{--sc:.965;transition-duration:.08s} body .tiltable::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),rgba(var(--acc-rgb,243,223,174),.08) 32%,transparent 60%);opacity:0;transition:opacity .35s ease;mix-blend-mode:screen} body .tiltable.is-tilting::after{opacity:1} body.teyvat .tiltable.is-tilting img{transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.05);transition:transform .1s linear} body.teyvat .tiltable img{transition:transform .45s cubic-bezier(.2,.8,.2,1)} /* ---------- HUD ---------- */ body.teyvat main>aside.shell-hud{position:fixed;inset:0 0 auto 0;height:var(--hud-h);z-index:45;display:flex;align-items:center;gap:12px;padding:0 14px;margin:0;background:none;border-bottom:1px solid rgba(211,188,142,.16);box-sizing:border-box} /* The old sidebar rule (style.css: aside{max-height;overflow-y:auto}) must not apply to the bar: the icon labels hang below it, and a scrolling bar showed a small up-and-down scrollbar at its right end. */ body.teyvat main>aside.shell-hud{max-height:none;overflow:visible;overscroll-behavior:auto} /* The blur sits on a pseudo-element: a backdrop-filter on the HUD itself would trap the phone dock (position:fixed) inside it. */ body.teyvat main>aside.shell-hud::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(8,10,18,.94),rgba(8,10,18,.72));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} body.teyvat .shell-hidden-card{display:none!important} body.teyvat [hidden]{display:none!important} body.teyvat .hud-extra{display:none!important} body.teyvat .hud-info{display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0;flex:0 1 auto} body.teyvat .hud-place{display:flex;align-items:center;gap:6px;min-height:0;padding:0 8px 0 2px;border:0;background:transparent;min-width:0;box-shadow:none!important;line-height:1.3} body.teyvat .hud-place:hover:not(:disabled){background:transparent;color:var(--t-gold-hi)} body.teyvat .hud-place .shell-icon{color:var(--t-gold);width:18px;height:18px} body.teyvat .hud-place-name{font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;min-width:3em} body.teyvat .hud-subline{display:flex;align-items:center;gap:8px;padding-left:26px;font-size:.74rem;line-height:1.35;white-space:nowrap;min-width:0} body.teyvat .hud-time{white-space:nowrap;color:var(--t-muted);font-variant-numeric:tabular-nums} body.teyvat .hud-phase{white-space:nowrap;padding:0 8px;border-radius:8px;background:rgba(211,188,142,.14);color:var(--t-gold-hi);border:0;margin:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;font-size:.72rem} body.teyvat .hud-guide-slot{display:flex;min-width:0;flex:0 1 auto} body.teyvat .hud-guide{display:flex;align-items:center;gap:8px;min-height:36px;max-width:340px;padding:4px 14px 4px 8px;border-radius:18px;background:rgba(211,188,142,.12);border-color:rgba(211,188,142,.4);color:var(--t-gold-hi);font-size:.8rem;min-width:0} body.teyvat .hud-guide:not(.open){animation:shellGlow 2.4s ease-in-out infinite} body.teyvat .hud-guide .shell-icon{width:18px;height:18px} body.teyvat .hud-guide-count{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap} body.teyvat .hud-guide-step{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t-text)} .hud-guide-pop{position:fixed;z-index:44;top:calc(var(--hud-h,62px) + 8px);left:50%;transform:translateX(-50%);width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - var(--hud-h,62px) - 24px);overflow:auto;border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.55);animation:shellDrop .25s ease-out} .hud-guide-pop .learning-guide{margin:0!important;position:static!important;background:rgba(22,27,41,.97)!important;border:1px solid rgba(211,188,142,.55)!important;border-radius:16px!important;padding:14px 18px!important} .hud-guide-pop .learning-guide h2{color:#f3dfae} .hud-guide-pop .hud-guide-min{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;min-height:30px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(236,229,216,.25);color:#ece5d8} .hud-guide-pop .hud-guide-min .shell-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} .hud-guide-pop .learning-guide-heading{padding-right:34px} body.teyvat .hud-me{display:flex;align-items:center;gap:12px;margin-left:auto;min-width:0} body.teyvat .hud-level{display:flex;align-items:center;gap:8px;min-width:0} body.teyvat .hud-level-ring{--p:0;width:36px;height:36px;border-radius:50%;flex:0 0 36px;display:grid;place-items:center;position:relative;background:conic-gradient(var(--t-gold-hi) calc(var(--p)*1%),rgba(255,255,255,.14) 0)} body.teyvat .hud-level-ring:before{content:'';position:absolute;inset:3px;border-radius:50%;background:#151a27} body.teyvat .hud-level-ring b{position:relative;font-size:.82rem;color:var(--t-cream)} body.teyvat .hud-name{font-weight:600;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:1500px){body.teyvat .hud-name{display:none}body.teyvat .hud-guide{max-width:240px}} @media (max-width:1320px){body.teyvat .hud-guide-step{display:none}body.teyvat .hud-hp small{display:none}body.teyvat .hud-hp{width:90px}} body.teyvat .shell-dialogue p.shell-recall{opacity:.72;font-size:1.02rem;animation:none} body.teyvat .hud-hp{display:flex;flex-direction:column;gap:3px;width:130px} body.teyvat .hud-bar{display:block;height:6px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden} body.teyvat .hud-bar i{display:block;height:100%;background:linear-gradient(90deg,#65c775,#bdf0a2);transition:width .45s ease} body.teyvat .hud-hp.low .hud-bar i{background:linear-gradient(90deg,#d8544f,#f6a07c)} body.teyvat .hud-hp small{font-size:.7rem;line-height:1;font-variant-numeric:tabular-nums} body.teyvat .hud-mora{display:flex;align-items:center;gap:6px;padding:5px 12px 5px 8px;border-radius:16px;background:rgba(255,255,255,.07);font-variant-numeric:tabular-nums;font-size:.9rem;white-space:nowrap} body.teyvat .hud-mora .shell-icon{width:18px;height:18px;color:#f0c46a} body.teyvat nav.hud-nav{display:flex;gap:4px;align-items:center} body.teyvat nav.hud-nav button.hud-nav-button{position:relative;width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid transparent;color:var(--t-cream)} @media (hover:hover){body.teyvat nav.hud-nav button.hud-nav-button:hover:not(:disabled):not(.active){background:rgba(236,229,216,.16);border-color:rgba(243,223,174,.55);transform:translateY(-1px)}} body.teyvat nav.hud-nav button.hud-nav-button.active{background:var(--t-cream);color:var(--t-ink);border-color:var(--t-cream);box-shadow:0 0 0 3px rgba(211,188,142,.3),0 0 16px rgba(243,223,174,.35)} body.teyvat nav.hud-nav button.hud-nav-button:disabled{opacity:.3} body.teyvat .nav-glyph{width:21px;height:21px} body.teyvat .hud-nav-label{position:absolute;top:calc(100% + 7px);left:50%;transform:translate(-50%,-4px);opacity:0;pointer-events:none;white-space:nowrap;background:var(--t-cream);color:var(--t-ink);font-size:.74rem;font-weight:600;padding:3px 9px;border-radius:10px;transition:opacity .15s,transform .15s;z-index:5} body.teyvat .hud-nav-button:hover .hud-nav-label,body.teyvat .hud-nav-button:focus-visible .hud-nav-label{opacity:1;transform:translate(-50%,0)} body.teyvat .hud-tools{display:flex;gap:4px;align-items:center;padding-left:8px;border-left:1px solid rgba(211,188,142,.18)} body.teyvat .hud-tool{width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;display:grid;place-items:center;border-color:transparent;background:rgba(255,255,255,.06);color:var(--t-cream)} body.teyvat .hud-tool.hud-menu-button{background:var(--t-cream);color:var(--t-ink)} body.teyvat .hud-tool.hud-handbook{color:var(--t-gold-hi)} /* ---------- tabs ---------- */ body.teyvat .shell-tabs{display:flex;flex-direction:column;min-height:0} body.teyvat .shell-tabbar{display:flex;gap:6px;padding:10px 10px 8px;overflow-x:auto;flex:0 0 auto} body.teyvat .shell-tabs.single>.shell-tabbar{display:none} body.teyvat .shell-tab{min-height:36px;padding:5px 14px;border-radius:18px;display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:.88rem;color:var(--t-muted);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)} body.teyvat .shell-tab .shell-icon{width:16px;height:16px} body.teyvat .shell-tab.active{background:var(--t-cream);color:var(--t-ink);border-color:var(--t-cream);font-weight:700;box-shadow:0 0 12px rgba(243,223,174,.25)} body.teyvat .shell-tab-badge{font-size:.7rem;padding:0 6px;border-radius:8px;background:rgba(211,188,142,.2)} body.teyvat .shell-panes{flex:1;min-height:0;overflow:auto} body.teyvat .shell-pane{min-height:0} body.teyvat .shell-pane.shell-enter{animation:shellFade .22s ease-out} body.teyvat .shell-page-tabs.vertical{display:grid;grid-template-columns:210px minmax(0,1fr);height:100%;gap:0} body.teyvat .shell-page-tabs.vertical>.shell-tabbar{flex-direction:column;overflow:auto;padding:14px 10px;border-right:1px solid rgba(211,188,142,.14);gap:4px} body.teyvat .shell-page-tabs.vertical>.shell-tabbar .shell-tab{border-radius:12px;justify-content:flex-start;white-space:normal;text-align:left} body.teyvat .shell-page-tabs.vertical>.shell-panes{padding:14px 20px} /* ---------- page frame (menus) ---------- */ body.teyvat .panel.shell-page{height:100%;display:flex;flex-direction:column;padding:0;overflow:hidden;background:linear-gradient(160deg,rgba(20,24,37,.92),rgba(12,15,24,.92));border:1px solid var(--t-line);border-radius:18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.35)} body.teyvat .shell-page-head{height:auto;display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;padding:12px 16px 12px 18px;border-bottom:1px solid rgba(211,188,142,.16);background:linear-gradient(90deg,rgba(211,188,142,.1),transparent 55%)} body.teyvat .shell-page-head.untitled .shell-page-title{display:none} body.teyvat .shell-page-title{display:flex;align-items:center;gap:12px;min-width:0} body.teyvat .page-glyph{width:38px;height:38px;padding:7px;border-radius:50%;background:var(--t-cream);color:var(--t-ink);stroke-width:1.8} body.teyvat .shell-page-words{display:flex;flex-direction:column;min-width:0} body.teyvat .shell-eyebrow{font-size:.7rem;letter-spacing:.2em;color:var(--t-gold);margin:0} body.teyvat .shell-h1{font-size:1.32rem;line-height:1.3;margin:0} body.teyvat .shell-page-intro{font-size:.8rem;line-height:1.5;margin:2px 0 0;max-width:720px} body.teyvat .shell-page-tools{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap} body.teyvat .shell-page-tools>*{margin:0} body.teyvat .shell-page-tools button{min-height:40px;padding:6px 14px;font-size:.88rem} body.teyvat button.shell-back{display:flex;align-items:center;gap:6px;padding:6px 14px 6px 10px;min-height:40px;background:rgba(255,255,255,.08);border-color:rgba(236,229,216,.25);color:var(--t-cream);font-weight:600} body.teyvat button.shell-back .shell-icon{width:18px;height:18px} body.teyvat .shell-subtabs{display:flex;gap:6px;flex-wrap:wrap;margin:0;flex-basis:100%} body.teyvat .shell-subtabs button{min-height:34px;padding:4px 14px;border-radius:17px;font-size:.84rem} body.teyvat .shell-subtabs button.selected,body.teyvat .shell-subtabs button.active,body.teyvat .shell-subtabs button[aria-selected=true]{background:var(--t-cream);color:var(--t-ink);border-color:var(--t-cream);font-weight:700} body.teyvat .shell-page-body{flex:1;min-height:0;overflow:auto;padding:14px 18px 18px} body.teyvat .shell-cols{display:grid;gap:16px;overflow:hidden;align-items:stretch} body.teyvat .shell-cols>.shell-region{min-height:0;overflow:auto;padding-right:2px} body.teyvat .shell-page-body.shell-cols{overflow:hidden} /* ---------- location (world HUD) ---------- */ body.teyvat .panel.shell-loc{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:var(--gap);padding:0;background:none;border:0;border-radius:0;box-shadow:none;height:100%;min-height:0} body.teyvat .shell-loc-left{display:flex;flex-direction:column;gap:10px;overflow:hidden;min-height:0;padding:0} body.teyvat .shell-loc-left>*{margin:0;flex:0 0 auto} body.teyvat .shell-loc-left>section:not(.shell-loc-side),body.teyvat .shell-loc-left>details,body.teyvat .shell-loc-left>.card,body.teyvat .shell-loc-left>.next-chapter{background:var(--t-glass);border:1px solid var(--t-line);border-radius:16px;padding:12px 16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} body.teyvat .shell-loc-left>.shell-loc-side{flex:1 1 auto;min-height:120px} body.teyvat .shell-loc-left>button{width:100%} body.teyvat .shell-loc-head{height:auto;display:block;background:none;border:0;padding:2px 4px 4px} body.teyvat .shell-loc-head .eyebrow{font-size:.7rem;letter-spacing:.2em;color:var(--t-gold);text-shadow:0 1px 6px #000} body.teyvat .shell-loc-head h1{font-size:1.75rem;margin:2px 0 6px;text-shadow:0 2px 14px rgba(0,0,0,.8)} body.teyvat .shell-loc-head .area-level{display:inline-block;margin:0;padding:2px 12px;border-radius:12px;background:rgba(10,13,21,.7);border:1px solid var(--t-line);font-size:.8rem} body.teyvat .shell-loc-head p.muted{margin:8px 0 0;font-size:.82rem;text-shadow:0 1px 6px #000} body.teyvat .shell-loc-left .main-objective{border-left:3px solid var(--t-gold);background:linear-gradient(125deg,rgba(52,42,24,.88),rgba(18,22,34,.86));padding:14px 16px} body.teyvat .shell-loc-left .main-objective h2{font-size:.78rem;letter-spacing:.14em;margin:2px 0 4px;color:var(--t-gold)} body.teyvat .shell-loc-left .main-objective h3{font-size:1.08rem;margin:0 0 6px;color:var(--t-cream)} body.teyvat .shell-loc-left .main-objective h3:before{content:'◆ ';color:var(--t-gold-hi);font-size:.8em} body.teyvat .shell-loc-left .main-objective p{font-size:.86rem;margin:4px 0} body.teyvat .shell-loc-left .main-objective button{margin:8px 0 0;width:100%} body.teyvat .shell-loc-left h2{font-size:1rem;margin:0 0 8px} body.teyvat .shell-loc-left .wait-controls{display:flex;flex-direction:column;gap:6px;background:rgba(16,20,31,.66)} body.teyvat .shell-loc-left .wait-controls small{font-size:.74rem;line-height:1.5} body.teyvat .shell-loc-main{min-height:0;display:flex;flex-direction:column} body.teyvat .shell-loc-main>#journey-map,body.teyvat .shell-loc-main>.terrain-navigation{flex:1;min-height:0;display:flex;flex-direction:column;margin:0;padding:12px 14px;background:var(--t-glass);border:1px solid var(--t-line);border-radius:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} body.teyvat .shell-loc-main .terrain-header{flex:0 0 auto;margin:0} body.teyvat .shell-loc-main .terrain-header h2{font-size:1.05rem;margin:0} body.teyvat .shell-loc-main .terrain-layout{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(230px,290px);gap:14px;flex:1;min-height:0;margin-top:10px} body.teyvat .shell-loc-main .terrain-map-column{display:flex;flex-direction:column;min-height:0;gap:6px} body.teyvat .shell-loc-main .terrain-viewport{flex:1;height:auto!important;min-height:200px;border-color:rgba(211,188,142,.35);border-radius:14px} body.teyvat .shell-loc-main .terrain-legend,body.teyvat .shell-loc-main .terrain-help{display:none} body.teyvat .shell-loc-main .terrain-location-note{font-size:.8rem;margin:0;color:var(--t-muted)} body.teyvat .shell-loc-main .terrain-controls{display:flex;gap:6px;flex-wrap:wrap} body.teyvat .shell-loc-main .terrain-controls button{min-height:34px;padding:4px 12px;font-size:.8rem} body.teyvat .shell-loc-main .terrain-destinations{overflow:auto;min-height:0;order:initial;padding-right:4px} body.teyvat .shell-loc-main .terrain-destinations h3{font-size:.95rem;margin:0 0 4px} body.teyvat .shell-loc-main .terrain-select-help{font-size:.76rem;margin:0 0 8px;color:var(--t-muted)} body.teyvat .terrain-destination{border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(211,188,142,.22);color:var(--t-text);margin-bottom:6px} body.teyvat .terrain-destination:hover:not(:disabled){background:rgba(236,229,216,.13);border-color:var(--t-gold-hi)} body.teyvat .terrain-destination.selected{border-color:var(--t-gold-hi);box-shadow:0 0 0 2px rgba(243,223,174,.35)} body.teyvat .shell-loc-main .terrain-travel-dock{flex:0 0 auto;margin-top:10px;padding:8px 10px;border-radius:14px;background:rgba(10,13,21,.6);display:flex;gap:10px;align-items:center;flex-wrap:wrap} body.teyvat .shell-loc-main .terrain-travel-dock .terrain-selection{flex:1 1 220px;font-size:.84rem} body.teyvat .shell-loc-main .terrain-provenance{flex:0 0 auto;font-size:.72rem;margin-top:6px;opacity:.75} body.teyvat .shell-loc-side{min-height:0;display:flex;flex-direction:column;background:var(--t-glass);border:1px solid var(--t-line);border-radius:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden} /* 0.15.21 (user: 「이거 짤려」 — 지역 정보 ran off the right edge of a narrow PC column, and the hidden scroll bar gave no hint): the main screen's tabs are equal cells — one row when the column is wide enough, two by two when it is not. */ body.teyvat .shell-loc-side>.shell-tabbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));overflow-x:visible;gap:5px} body.teyvat .shell-loc-side>.shell-tabbar>.shell-tab{justify-content:center;padding:5px 10px;min-width:0} body.teyvat .shell-loc-side>.shell-panes{padding:4px 12px 14px} body.teyvat .shell-loc-side .shell-pane>*{margin:0 0 12px} body.teyvat .shell-loc-side .shell-pane>h2{font-size:1rem;margin:4px 0 8px} body.teyvat .shell-loc-side .location-places{grid-template-columns:1fr;gap:8px} body.teyvat .shell-loc-side .location-places>*{margin:0} /* Town facilities: two-column tiles with the icon and name; the entry button covers the tile. */ body.teyvat .location-places:has(>.shell-place-tile){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} body.teyvat .place-entry.shell-place-tile{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px;min-height:60px;padding:8px 10px;margin:0;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(211,188,142,.2);transition:background .15s,border-color .15s,box-shadow .15s} body.teyvat .place-entry.shell-place-tile:hover{background:rgba(236,229,216,.1);border-color:rgba(243,223,174,.6);box-shadow:0 0 14px rgba(243,223,174,.14)} body.teyvat .shell-place-tile .place-entry-icon{width:34px;height:34px;object-fit:contain;margin:0} body.teyvat .shell-place-tile .place-entry-copy{min-width:0} body.teyvat .shell-place-tile .place-entry-kind{display:block;font-size:.66rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t-muted)} body.teyvat .shell-place-tile h3{font-size:.84rem;line-height:1.3;margin:1px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body.teyvat .shell-place-tile .place-entry-copy>:not(.place-entry-kind):not(h3):not(.choice-note){display:none} /* 0.14.13: a tile that cannot be entered says why under its name (지맥의 꽃 below Lv. 5 looked simply dead). */ body.teyvat .shell-place-tile .place-entry-copy>.choice-note{display:block;margin:3px 0 0;font-size:.66rem;line-height:1.35;color:#ffb8a2;white-space:normal} body.teyvat .place-entry.shell-place-tile.locked{background:rgba(255,120,90,.06);border-color:rgba(255,160,130,.32)} body.teyvat .place-entry.shell-place-tile.locked .place-entry-icon{filter:grayscale(.7);opacity:.75} body.teyvat :where(#root) .shell-place-tile>button{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border-radius:inherit;background:transparent;border-color:transparent;color:transparent;font-size:0;box-shadow:none;cursor:pointer} body.teyvat :where(#root) .shell-place-tile>button:hover:not(:disabled){background:transparent;border-color:transparent;box-shadow:none} /* 풍경 보기: the place without the interface, dragged left and right. A hidden oculus glints only here. */ .shell-scenery{position:fixed;inset:0;z-index:470;background:#05070c;opacity:0;transition:opacity .22s ease} .shell-scenery.open{opacity:1} .shell-scenery .scenery-pan{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;cursor:grab;scrollbar-width:none;touch-action:pan-x} .shell-scenery .scenery-pan::-webkit-scrollbar{display:none} .shell-scenery .scenery-pan.dragging{cursor:grabbing} .shell-scenery .scenery-stage{position:relative;height:100%;width:max(150vw,calc(100vh * 1.78));user-select:none} .shell-scenery .scenery-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none} .shell-scenery .scenery-stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,12,.55),transparent 18%,transparent 82%,rgba(5,7,12,.45))} .shell-scenery .scenery-glint{position:absolute;z-index:2;transform:translate(-50%,-50%);width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:#e4fff4;font-size:20px;line-height:1;cursor:pointer;opacity:.5;text-shadow:0 0 6px #c8fff0,0 0 14px rgba(170,240,220,.8);animation:sceneryTwinkle 3.6s ease-in-out infinite} .shell-scenery .scenery-glint:hover,.shell-scenery .scenery-glint:focus-visible{opacity:1;animation:none;outline:none;text-shadow:0 0 8px #fff,0 0 22px #b8fff0} @keyframes sceneryTwinkle{0%,62%,100%{opacity:.32}74%{opacity:.85}86%{opacity:.45}} .shell-scenery .scenery-bar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:14px;padding:14px 18px;color:#ece5d8;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.8)} .shell-scenery .scenery-bar strong{font-family:'Gowun Batang','Noto Serif KR',serif;font-size:1.15rem} .shell-scenery .scenery-bar small{font-size:.8rem;color:rgba(236,229,216,.75)} .shell-scenery .scenery-close{pointer-events:auto;margin-left:auto;width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(10,13,21,.55);border:1px solid rgba(236,229,216,.35);color:#ece5d8;cursor:pointer} .shell-scenery .scenery-close:hover{background:rgba(236,229,216,.16)} .shell-scenery .scenery-close .shell-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} @media (prefers-reduced-motion:reduce){.shell-scenery{transition:none}.shell-scenery .scenery-glint{animation:none;opacity:.45}} /* ---------- story (dialogue) ---------- */ body.teyvat .content.shell-story{justify-content:flex-end} body.teyvat .shell-story-figure{position:absolute;left:0;right:0;top:0;bottom:190px;display:flex;justify-content:center;align-items:flex-end;pointer-events:none;z-index:1} body.teyvat .shell-story-figure .portrait-frame{position:static;margin:0;height:100%;border:0;background:none;border-radius:0;display:flex;align-items:flex-end;justify-content:center} body.teyvat .shell-story-figure .portrait-frame img{height:100%;width:auto;max-width:min(620px,72vw);object-fit:contain;object-position:bottom;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 99%);mask-image:linear-gradient(180deg,#000 72%,transparent 99%);filter:drop-shadow(0 16px 40px rgba(0,0,0,.55));animation:shellIn .45s ease-out} /* 0.15.24 (user: 「대화할때 사진 작은건 여기서만 그런거지?」 — no: the picture stopped at 620px however big the screen): it grows with the screen, and its edges fade into the scene instead of showing a pasted rectangle. */ body.teyvat .shell-story-figure .portrait-frame img{max-width:min(58vw,1100px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 72%,transparent 99%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 72%,transparent 99%);mask-composite:intersect} body.teyvat .shell-story-figure figcaption{display:none} body.teyvat .content.shell-story>.panel.shell-dialogue{flex:0 0 auto} body.teyvat .panel.shell-dialogue{flex:0 0 auto;position:relative;z-index:2;margin:0 -18px -14px;padding:22px max(26px,9vw) 18px;border:0;border-radius:0;background:linear-gradient(0deg,rgba(6,8,13,.95) 0,rgba(6,8,13,.9) 62%,rgba(6,8,13,.55) 88%,rgba(6,8,13,0));box-shadow:none;max-height:62%;overflow:auto} body.teyvat .panel.shell-dialogue.can-continue{cursor:pointer} body.teyvat .shell-dialogue .story-layout{display:block} body.teyvat .shell-dialogue .speaker{display:flex;align-items:center;gap:12px;margin:0 0 8px;color:var(--t-gold-hi);font-weight:700;font-size:1.06rem;letter-spacing:.04em} body.teyvat .shell-dialogue .speaker:after{content:'';flex:0 0 140px;height:1px;background:linear-gradient(90deg,rgba(211,188,142,.7),transparent)} body.teyvat .shell-dialogue p.story{font-size:1.14rem;line-height:1.9;max-width:1060px;margin:0 0 10px;color:#f7f2e8;text-shadow:0 1px 3px rgba(0,0,0,.6);animation:shellFade .35s ease-out} body.teyvat .shell-dialogue h1{font-size:1.3rem;margin:0 0 8px} body.teyvat .shell-dialogue .actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:6px 0 0} body.teyvat .shell-dialogue .actions>button{width:auto} body.teyvat .shell-dialogue .shell-continue{min-width:170px} body.teyvat .shell-dialogue .shell-continue:after{content:'';display:inline-block;width:0;height:0;margin-left:10px;vertical-align:middle;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid currentColor;animation:shellBlink 1.3s ease-in-out infinite} body.teyvat .shell-dialogue.has-choices .story-copy .actions{flex-direction:column;align-items:flex-end;gap:8px} body.teyvat .shell-dialogue .choice{display:flex;align-items:center;gap:12px;width:min(520px,100%);padding:10px 20px 10px 12px;border-radius:26px;background:rgba(14,17,27,.82);border:1px solid rgba(236,229,216,.26);color:var(--t-cream);text-align:left;animation:shellIn .25s ease-out backwards} body.teyvat .shell-dialogue .choice:nth-child(2){animation-delay:.04s}body.teyvat .shell-dialogue .choice:nth-child(3){animation-delay:.08s}body.teyvat .shell-dialogue .choice:nth-child(4){animation-delay:.12s} body.teyvat .shell-dialogue .choice:hover:not(:disabled),body.teyvat .shell-dialogue .choice:focus-visible{background:var(--t-cream);color:var(--t-ink);border-color:var(--t-cream)} body.teyvat .shell-dialogue .choice .choice-index{display:grid;place-items:center;box-sizing:border-box;width:28px;height:28px;flex:0 0 28px;margin:0;padding:0;border-radius:50%;background:rgba(236,229,216,.16);font-size:.74rem;font-weight:700;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;text-align:center} body.teyvat .shell-dialogue .choice:hover .choice-index{background:var(--t-ink);color:var(--t-cream)} body.teyvat .shell-dialogue .story-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;padding-top:8px;border-top:1px solid rgba(211,188,142,.14);font-size:.8rem} body.teyvat .shell-dialogue .story-toolbar button,body.teyvat .shell-dialogue .story-intermission-bar button{min-height:34px;padding:4px 14px;font-size:.8rem} body.teyvat .shell-dialogue .story-intermission-bar{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:6px;background:none;border:0;padding:0} body.teyvat .shell-dialogue .next-chapter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 0;padding:10px 14px;border-radius:14px;background:rgba(211,188,142,.1);border:1px solid var(--t-line)} /* ---------- combat ---------- */ body.teyvat .panel.combat-panel{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"head" "order" "duo" "log";gap:8px 14px;padding:0;background:none;border:0;box-shadow:none;position:relative} body.teyvat .panel.combat-panel.with-info{grid-template-columns:minmax(230px,290px) minmax(0,1fr);grid-template-areas:"head head" "order order" "info duo" "info log"} body.teyvat .combat-panel>.battle-heading{grid-area:head;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;padding:0 2px} body.teyvat .combat-panel>.battle-heading .eyebrow{background:var(--t-cream);color:var(--t-ink);padding:2px 12px;border-radius:12px;font-weight:800;letter-spacing:.12em;font-size:.78rem} body.teyvat .combat-panel>.battle-heading h1{font-size:1.2rem;margin:0;text-shadow:0 2px 10px #000} body.teyvat .combat-panel>.battle-heading .battle-formation{padding:2px 10px;border-radius:10px;background:rgba(10,13,21,.7);border:1px solid var(--t-line)} body.teyvat .combat-panel>.battle-order{grid-area:order;margin:0;padding:2px 2px 4px;display:flex;gap:6px;overflow-x:auto;list-style:none} body.teyvat .combat-panel>.battle-order li{display:flex;align-items:center;gap:6px;padding:3px 12px 3px 3px;border-radius:18px;background:rgba(12,15,24,.78);border:1px solid rgba(255,255,255,.1);white-space:nowrap;font-size:.8rem;flex:0 0 auto} body.teyvat .combat-panel>.battle-order li>small:first-child{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12);font-size:.7rem;color:var(--t-cream)} body.teyvat .combat-panel>.battle-order li.ally{border-color:rgba(143,198,230,.38)} body.teyvat .combat-panel>.battle-order li.enemy{border-color:rgba(255,155,138,.38)} body.teyvat .combat-panel>.battle-order li.current{background:var(--t-cream);color:var(--t-ink);border-color:var(--t-gold);animation:shellGlow 1.8s ease-in-out infinite} body.teyvat .combat-panel>.battle-order li.current>small{color:var(--t-ink)} body.teyvat .combat-panel>.combat-duo{grid-area:duo;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:8px} body.teyvat .combat-panel .compact-battle-stage{flex:1;min-height:0;overflow:auto;padding:8px 2px 2px;margin:0} body.teyvat .combat-panel .combat-duo>.battle-command{position:static;max-height:none;overflow:visible;order:0} body.teyvat .combat-panel .battle-teams.compact-teams{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:14px;align-items:start;min-height:100%} body.teyvat .combat-panel .battle-teams>section{margin:0;min-width:0} body.teyvat .combat-panel .battle-teams>section>h2{font-size:.74rem;letter-spacing:.2em;color:var(--t-gold);margin:0 0 8px;text-shadow:0 1px 6px #000} body.teyvat .combat-panel .shell-enemies{order:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;align-content:start} body.teyvat .combat-panel .shell-enemies>h2{grid-column:1/-1} body.teyvat .combat-panel .shell-allies{order:2;display:flex;flex-direction:column;gap:8px} body.teyvat .combat-panel .combatant-row{margin:0;background:rgba(14,17,27,.84);border-radius:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .2s,box-shadow .2s,transform .2s} body.teyvat .combat-panel .shell-enemies .combatant-row{flex-direction:column;align-items:stretch;gap:6px;padding:10px 10px 12px;min-height:0;border:1px solid rgba(255,155,138,.24);position:relative} body.teyvat .combat-panel .shell-enemies .combat-portrait{width:100%;height:118px;object-fit:contain;border-radius:10px;background:radial-gradient(ellipse at 50% 75%,rgba(255,120,90,.2),transparent 70%)} body.teyvat .combat-panel .shell-enemies .combatant-row>button{min-height:34px;font-size:.78rem;padding:4px 10px} body.teyvat .combat-panel .shell-enemies .combatant-row.selected{border-color:#ffc27a;box-shadow:0 0 0 2px rgba(255,194,122,.5),0 0 24px rgba(255,130,70,.32);transform:translateY(-2px)} body.teyvat .combat-panel .shell-enemies .combatant-row.selected:before{content:'';position:absolute;top:-7px;left:50%;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);background:#ffc27a;box-shadow:0 0 12px #ff9a4a} body.teyvat .combat-panel .shell-enemies .meter i{background:linear-gradient(90deg,#d94f47,#ff9468)} body.teyvat .combat-panel .shell-allies .combatant-row{padding:8px 12px 8px 8px;min-height:64px;border:1px solid rgba(143,198,230,.22);border-radius:34px 14px 14px 34px} body.teyvat .combat-panel .shell-allies .combat-portrait,body.teyvat .combat-panel .shell-allies .combat-player-mark{width:48px;height:48px;flex:0 0 48px;border-radius:50%;object-fit:cover;object-position:top;background:rgba(236,229,216,.12);display:grid;place-items:center;border:2px solid rgba(236,229,216,.35)} body.teyvat .combat-panel .shell-allies .meter i{background:linear-gradient(90deg,#5fc06d,#b8ef9f)} body.teyvat .combat-panel .combatant-copy{min-width:0;flex:1} body.teyvat .combat-panel .combatant-copy strong{font-size:.92rem} body.teyvat .combat-panel .combatant-copy .stat{font-size:.76rem;margin:2px 0;font-variant-numeric:tabular-nums} body.teyvat .combat-panel .combatant-copy small{font-size:.72rem} body.teyvat .combat-panel .combatant-row.shell-acting{border-color:var(--t-gold-hi)!important;animation:shellGlow 1.8s ease-in-out infinite} body.teyvat .combat-panel .combatant-row.dead{opacity:.42;filter:grayscale(.85)} body.teyvat .combat-panel .battle-command{flex:0 0 auto;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 14px;background:rgba(12,15,24,.86);border:1px solid var(--t-line);border-radius:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} body.teyvat .combat-panel .battle-command>h2{margin:0;font-size:1rem} body.teyvat .combat-panel .battle-command>p{margin:0;font-size:.84rem} body.teyvat .combat-panel .battle-cards{display:flex;flex-wrap:wrap;gap:8px;margin:0} body.teyvat .combat-panel .battle-card-choice{display:flex;align-items:stretch} body.teyvat .combat-panel .battle-cards button[data-card-id]{min-width:112px;min-height:52px;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:6px 14px;border-radius:16px 0 0 16px;border:1px solid rgba(236,229,216,.22);border-right:0;border-top:1px solid rgba(236,229,216,.22);background:rgba(255,255,255,.07)} body.teyvat .combat-panel .battle-cards button[data-card-id] strong{font-size:.9rem;line-height:1.3} body.teyvat .combat-panel .battle-cards button[data-card-id] small{font-size:.7rem;line-height:1.3} body.teyvat .combat-panel .battle-cards button[data-card-id].selected{background:var(--t-cream);color:var(--t-ink);border-color:var(--t-cream);box-shadow:0 0 16px rgba(243,223,174,.45)} body.teyvat .combat-panel .battle-cards button[data-card-id].selected small{color:var(--t-ink-2)} body.teyvat .combat-panel .battle-cards button.skill-q:not(:disabled){border-color:rgba(243,223,174,.7)} body.teyvat .combat-panel .battle-cards button.skill-q:not(:disabled):not(.selected){animation:shellGlow 2.2s ease-in-out infinite} body.teyvat .combat-panel .battle-effect-button{min-height:0;padding:4px 10px;border-radius:0 16px 16px 0;font-size:.72rem;border-color:rgba(236,229,216,.22)} body.teyvat .combat-panel .skill-key{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--t-ink);color:var(--t-cream);font-size:.68rem;font-weight:800;margin-bottom:2px} body.teyvat .combat-panel .battle-execute{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap} body.teyvat .combat-panel .battle-execute select{width:auto;min-width:190px;min-height:44px} body.teyvat .combat-panel .battle-execute button.primary{min-width:168px;min-height:48px;font-size:1rem} body.teyvat .combat-panel .battle-command .combat-speed{display:flex;align-items:center;gap:8px;font-size:.76rem;margin:0} body.teyvat .combat-panel .battle-command .combat-speed input{width:90px;min-height:0} body.teyvat .combat-panel .battle-retreat{display:flex;align-items:center;gap:10px;font-size:.78rem} body.teyvat .combat-panel .battle-retreat p{margin:0} body.teyvat .shell-battle-feed{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;padding:0 6px;font-size:.78rem;color:var(--t-muted);pointer-events:none} body.teyvat .shell-battle-feed p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px #000;animation:shellFade .3s ease-out} body.teyvat .shell-battle-feed p:last-child{color:var(--t-cream)} body.teyvat .combat-panel>.battle-details{grid-area:log;margin:0;font-size:.8rem;align-self:end} body.teyvat .combat-panel>.battle-details>summary{display:inline-flex;padding:4px 12px;border-radius:14px;background:rgba(12,15,24,.7);border:1px solid rgba(255,255,255,.1)} body.teyvat .combat-panel>.battle-details[open] .log{max-height:28vh;overflow:auto;background:rgba(12,15,24,.9);border-radius:12px;padding:8px 12px;margin-top:6px} body.teyvat .shell-battle-info{grid-area:info;min-height:0;display:flex;flex-direction:column;gap:8px} body.teyvat .shell-battle-info-toggle{display:none} body.teyvat .shell-battle-info-body{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px} body.teyvat .shell-battle-info-body>*{margin:0;background:rgba(14,17,27,.86);border:1px solid var(--t-line);border-radius:14px;padding:12px 14px;font-size:.84rem} body.teyvat .shell-battle-info-body h2,body.teyvat .shell-battle-info-body h3{font-size:.95rem;margin:0 0 6px} body.teyvat .combat-playback{background:rgba(14,17,27,.95);border:1px solid var(--t-line-2);border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.55)} body.teyvat .combat-playback .playback-buttons button{min-height:38px;padding:4px 14px} /* ---------- bag ---------- */ body.teyvat .bag-cols{grid-template-columns:minmax(0,1fr) minmax(260px,320px)} body.teyvat .bag-cols:not(:has(>.shell-col-side)){grid-template-columns:minmax(0,1fr)} body.teyvat .bag-cols .shell-col-main{overflow:hidden;display:flex} body.teyvat .bag-cols .bag-layout{flex:1;min-height:0;height:100%;grid-template-columns:minmax(0,1fr) minmax(250px,300px);align-items:stretch} body.teyvat .bag-cols .bag-grid{overflow:auto;min-height:0;align-content:start;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;padding:2px 6px 10px 2px} body.teyvat .bag-cols .bag-detail{position:static;overflow:auto;min-height:0;max-height:100%;background:linear-gradient(180deg,rgba(236,229,216,.07),rgba(236,229,216,.03));border-color:var(--t-line)} /* 0.14.12: bag tiles read like the forge tiles (user: 「제작처럼」, then 「가방 디자인이 별로」): a square of the item's grade colour with the icon, the count as a badge, and the name on the cream strip below. */ body.teyvat .bag-item{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;gap:0;min-height:0;aspect-ratio:auto;border-radius:10px;overflow:hidden;border:2px solid transparent;background:#ece5d8;color:#3b4252;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.35)} body.teyvat .bag-item .item-icon,body.teyvat .bag-item .item-glyph{display:grid;place-items:center;width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;padding:14%;box-sizing:border-box;background:var(--rar-1);border-radius:0 0 18px 0;font-size:2rem;color:#fff} body.teyvat .bag-item.tier-2 .item-icon,body.teyvat .bag-item.tier-2 .item-glyph{background:var(--rar-2)} body.teyvat .bag-item.tier-3 .item-icon,body.teyvat .bag-item.tier-3 .item-glyph{background:var(--rar-3)} body.teyvat .bag-item.tier-4 .item-icon,body.teyvat .bag-item.tier-4 .item-glyph{background:var(--rar-4)} body.teyvat .bag-item.tier-5 .item-icon,body.teyvat .bag-item.tier-5 .item-glyph{background:var(--rar-5)} body.teyvat .bag-item .item-count{position:absolute;top:4px;right:5px;padding:0 6px;border-radius:8px;font-size:.68rem;line-height:1.5;font-weight:800;background:rgba(8,10,16,.72);color:#f3dfae} body.teyvat .bag-item .item-name{display:block;padding:5px 6px 6px;font-size:.72rem;font-weight:700;line-height:1.25;color:#3b4252!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.teyvat .bag-item .item-worn{position:absolute;top:4px;left:4px;font-size:.62rem;padding:0 6px;border-radius:8px;background:rgba(20,24,36,.8);color:#ece5d8} body.teyvat .bag-item:hover:not(:disabled){transform:none;border-color:rgba(243,223,174,.85);background:#ece5d8;box-shadow:0 0 0 1px rgba(243,223,174,.5),0 6px 16px rgba(0,0,0,.4)} body.teyvat .bag-item.selected,body.teyvat .bag-item[aria-pressed=true],body.teyvat .bag-cell.selected .bag-item{border-color:#f3dfae;box-shadow:0 0 0 2px rgba(243,223,174,.75),0 0 18px rgba(243,223,174,.35)} /* 0.14.12: equipment frames by enhancement on the bag, forge and character-gear tiles (user: 「강화수치가 높을수록 테두리, 운명의 자리처럼 간지나게는 말고, 10강부터 조금 간지」). An empty overlay on top of the tile: +3 a silver hairline, +6 gold, +9 a double gold line, +10/+11 gold corner brackets with a soft inner glow, +12 the same with a slow shine. */ body.teyvat :is(.bag-item,.gear-slot,.shell-forge-tile).enh{position:relative} body.teyvat :is(.bag-item,.gear-slot,.shell-forge-tile).enh::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none} body.teyvat :is(.bag-item,.gear-slot,.shell-forge-tile).enh-3::after{box-shadow:inset 0 0 0 1.5px rgba(214,222,234,.95)} body.teyvat :is(.bag-item,.gear-slot,.shell-forge-tile).enh-6::after{box-shadow:inset 0 0 0 1.5px rgba(232,196,118,.95)} body.teyvat :is(.bag-item,.gear-slot,.shell-forge-tile).enh-9::after{box-shadow:inset 0 0 0 1.5px rgba(238,202,124,1),inset 0 0 0 3.5px rgba(238,202,124,.28)} body.teyvat :is(.bag-item,.gear-slot,.shell-forge-tile):is(.enh-10,.enh-12)::after{box-shadow:inset 0 0 0 1.5px rgba(246,212,138,1),inset 0 0 12px rgba(255,214,120,.42); background:linear-gradient(#ffe2a0,#ffe2a0) left 3px top 3px/12px 2px,linear-gradient(#ffe2a0,#ffe2a0) left 3px top 3px/2px 12px,linear-gradient(#ffe2a0,#ffe2a0) right 3px top 3px/12px 2px,linear-gradient(#ffe2a0,#ffe2a0) right 3px top 3px/2px 12px,linear-gradient(#ffe2a0,#ffe2a0) left 3px bottom 3px/12px 2px,linear-gradient(#ffe2a0,#ffe2a0) left 3px bottom 3px/2px 12px,linear-gradient(#ffe2a0,#ffe2a0) right 3px bottom 3px/12px 2px,linear-gradient(#ffe2a0,#ffe2a0) right 3px bottom 3px/2px 12px;background-repeat:no-repeat} body.teyvat :is(.bag-item,.gear-slot,.shell-forge-tile).enh-12::before{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,240,200,.55) 50%,transparent 60%) no-repeat;background-size:250% 100%;animation:enh-shine 3.6s ease-in-out infinite} @keyframes enh-shine{0%,55%{background-position:120% 0}100%{background-position:-20% 0}} @media (prefers-reduced-motion:reduce){body.teyvat .enh-12::before{animation:none;opacity:0}} body.teyvat .shell-bag-side{height:100%} body.teyvat .shell-bag-side .shell-pane>*{margin:0 0 12px} /* ---------- characters (gear) ---------- */ body.teyvat .gear-cols{grid-template-columns:170px minmax(0,1fr) minmax(250px,300px)} body.teyvat .gear-cols:not(:has(.shell-col-roster)){grid-template-columns:minmax(0,1fr) minmax(250px,300px)} body.teyvat .shell-roster{display:flex;flex-direction:column;gap:8px} body.teyvat .shell-roster-item{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:32px 14px 14px 32px;min-height:58px;text-align:left} body.teyvat .shell-roster-item.active{background:var(--t-cream);color:var(--t-ink);border-color:var(--t-cream);box-shadow:0 0 14px rgba(243,223,174,.35)} body.teyvat .shell-roster-face{width:44px!important;height:44px!important;flex:0 0 44px;border-radius:50%;object-fit:cover;object-position:top;display:grid;place-items:center;background:rgba(236,229,216,.15)} body.teyvat .gear-cols .gear-members{display:block} body.teyvat .gear-cols .gear-member{background:rgba(255,255,255,.035);animation:shellFade .25s ease-out} body.teyvat .gear-cols .gear-member[hidden]{display:none} /* ---------- party ---------- */ body.teyvat .party-cols{grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr)} body.teyvat .party-cols .formation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px} body.teyvat .party-cols .formation-slot{background:linear-gradient(180deg,rgba(236,229,216,.08),rgba(236,229,216,.02));border:1px solid var(--t-line);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px} body.teyvat .party-cols .member-select{display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:14px;padding:10px 8px;text-align:center} body.teyvat .party-cols .party-portrait{width:100%;max-width:150px;aspect-ratio:3/4;height:auto;object-fit:cover;object-position:top;border-radius:12px;background:rgba(236,229,216,.1)} body.teyvat .party-cols .shell-col-side>*{margin:0 0 12px} body.teyvat .party-cols .formation-options{grid-template-columns:1fr;gap:6px} body.teyvat .party-cols .formation-option{border-radius:12px;padding:8px 12px} body.teyvat .formation-option.selected{background:var(--t-cream);color:var(--t-ink);border-color:var(--t-cream)} body.teyvat .formation-option.selected strong,body.teyvat .formation-option.selected small{color:var(--t-ink)} body.teyvat .party-cols .formation-row{background:rgba(255,255,255,.04);border-color:var(--t-line)} body.teyvat .party-cols .formation-slot .member-select{background:transparent;border:0} body.teyvat .party-cols .formation-slot .member-select:hover{background:rgba(236,229,216,.08)} /* ---------- quests / bonds ---------- */ body.teyvat .quest-cols{grid-template-columns:minmax(260px,360px) minmax(0,1fr)} /* 0.14.12: a shop with side notes (몬드 잡화 상인's 「주변의 작은 단서」…) puts the goods left and the notes in a narrow right column; stacked in one column without row sizes, the notes took the height and buried the goods. */ body.teyvat .shop-cols.with-side{grid-template-columns:minmax(0,1fr) minmax(240px,300px);grid-template-rows:minmax(0,1fr)} body.teyvat .quest-cols .quest-track>*{margin:0 0 12px} body.teyvat .quest-cols .main-objective{border-left:3px solid var(--t-gold);background:linear-gradient(125deg,rgba(52,42,24,.85),rgba(18,22,34,.85));margin:0 0 12px} body.teyvat .quest-cols .quest-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-content:start} body.teyvat .quest-cols .quest-list>*{margin:0} body.teyvat .relations-body .relationship-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:12px;align-items:start} body.teyvat .relations-body .relationship-card{min-width:0} body.teyvat .relationship-toggles{flex-wrap:wrap;max-width:100%} body.teyvat .relationship-toggles button{max-width:100%;white-space:normal;overflow-wrap:anywhere} /* ---------- floating guide ---------- */ body.teyvat .content.shell-content>.learning-guide.shell-float-guide{position:fixed;right:18px;bottom:16px;z-index:36;width:min(360px,calc(100vw - 36px));max-height:42vh;overflow:auto;margin:0;background:rgba(20,24,37,.95);border:1px solid var(--t-line-2);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.5);animation:shellIn .3s ease-out} body.teyvat[data-shell-screen=COMBAT] .content.shell-content>.learning-guide.shell-float-guide{display:none} /* ---------- Paimon menu ---------- */ .paimon-menu{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at 30% 35%,rgba(46,56,86,.55),rgba(5,7,12,.9));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .18s ease} .paimon-menu.open{opacity:1} .paimon-menu .shell-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .pm-box::-webkit-scrollbar{display:none} .pm-box{scrollbar-width:none;position:relative;width:min(1000px,100%);max-height:calc(100dvh - 32px);overflow:auto;display:grid;grid-template-columns:290px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:18px 22px;padding:30px;border-radius:24px;background:rgba(17,21,33,.82);border:1px solid rgba(211,188,142,.3);box-shadow:0 30px 90px rgba(0,0,0,.6);transform:scale(.97) translateY(10px);transition:transform .24s cubic-bezier(.2,.8,.2,1)} .paimon-menu.open .pm-box{transform:none} .pm-card{grid-row:1/3;border-radius:18px;padding:22px 20px;background:linear-gradient(165deg,#f0e9dc,#d9cdb4);color:#39404f;position:relative;overflow:hidden} .pm-card:after{content:'';position:absolute;right:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;border:24px solid rgba(57,64,79,.06)} .pm-who{display:flex;flex-direction:column;gap:2px;margin-bottom:16px} .pm-who small{font-size:.72rem;letter-spacing:.2em;color:#8a7650} .pm-who strong{font-size:1.5rem;line-height:1.3} .pm-who span{font-size:.86rem;color:#5b6272} .pm-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:.86rem} .pm-facts dt{color:#8a7650} .pm-facts dd{margin:0;color:#39404f;font-weight:600} .pm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;align-content:start} .pm-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:112px;padding:14px 8px;border-radius:18px;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(236,229,216,.14);color:#f2ede3;cursor:pointer;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s} .pm-tile:hover:not(:disabled),.pm-tile:focus-visible{transform:translateY(-3px);background:rgba(236,229,216,.1);border-color:rgba(243,223,174,.7);box-shadow:0 10px 26px rgba(0,0,0,.35),0 0 18px rgba(243,223,174,.2);outline:none} .pm-tile:disabled{opacity:.35;cursor:default} .pm-glyph{width:46px!important;height:46px!important;padding:10px;border-radius:50%;background:rgba(236,229,216,.12);color:#ece5d8;transition:background .15s,color .15s} .pm-tile:hover:not(:disabled) .pm-glyph{background:#ece5d8;color:#39404f} .pm-label{font-size:.9rem;font-weight:600} .pm-tile kbd{position:absolute;top:8px;right:10px;font:600 .66rem/1 system-ui,sans-serif;padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.1);color:#d3bc8e} .pm-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:14px;border-top:1px solid rgba(211,188,142,.18)} .pm-foot-button{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px 6px 10px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(236,229,216,.16);color:#f2ede3;cursor:pointer;font:inherit;font-size:.86rem} .pm-foot-button:hover:not(:disabled){border-color:rgba(243,223,174,.7);background:rgba(236,229,216,.12)} .pm-foot-button .shell-icon{width:18px;height:18px} .pm-close{position:absolute;top:14px;right:14px;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(236,229,216,.2);color:#ece5d8;cursor:pointer} body.shell-menu-open{overflow:hidden} /* ---------- toast ---------- */ .shell-toast{position:fixed;left:50%;top:calc(var(--hud-h,62px) + 14px);transform:translate(-50%,-10px);opacity:0;z-index:440;max-width:min(640px,calc(100vw - 32px));padding:10px 22px;border-radius:22px;background:rgba(18,22,34,.95);border:1px solid rgba(211,188,142,.5);color:#f2ede3;box-shadow:0 10px 30px rgba(0,0,0,.45);pointer-events:none;transition:opacity .2s,transform .2s} .shell-toast.show{opacity:1;transform:translate(-50%,0)} /* ---------- modal ---------- */ body.teyvat dialog#modal{background:linear-gradient(170deg,rgba(24,29,44,.98),rgba(14,17,27,.98));color:var(--t-text);border:1px solid var(--t-line-2);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:shellIn .25s ease-out} body.teyvat dialog#modal::backdrop{background:rgba(5,7,12,.7);backdrop-filter:blur(6px)} /* ---------- responsive ---------- */ @media (max-width:1180px){ body.teyvat .hud-name,body.teyvat .hud-time{display:none} body.teyvat .hud-hp{width:96px} body.teyvat .panel.shell-loc{grid-template-columns:minmax(280px,320px) minmax(0,1fr)} body.teyvat .shell-loc-main .terrain-layout{grid-template-columns:minmax(0,1fr) minmax(210px,250px)} body.teyvat .gear-cols{grid-template-columns:150px minmax(0,1fr)} body.teyvat .gear-cols>.shell-col-side{grid-column:2} body.teyvat .gear-cols{overflow:auto} body.teyvat .bag-cols{grid-template-columns:minmax(0,1fr)} body.teyvat .bag-cols>.shell-col-side{max-height:40%} body.teyvat .panel.combat-panel.with-info{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "order" "duo" "log"} 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} body.teyvat .shell-battle-info-toggle{display:flex;align-items:center;gap:6px;min-height:36px;padding:4px 14px;border-radius:18px;background:rgba(14,17,27,.9)} body.teyvat .shell-battle-info:not(.open)>.shell-battle-info-body{display:none} body.teyvat .shell-battle-info.open>.shell-battle-info-body{max-height:62vh;width:100%} } @media (max-width:760px) and (min-height:501px){ body.teyvat{--hud-h:52px;--dock-h:60px;font-size:14.5px} body.teyvat #root>main{padding:calc(var(--hud-h) + 6px) 8px calc(var(--dock-h) + 8px)} body.teyvat main>aside.shell-hud{gap:6px;padding:0 8px} body.teyvat .hud-phase,body.teyvat .hud-hp,body.teyvat .hud-level .hud-name,body.teyvat .hud-tools .hud-tool:not(.hud-menu-button):not(.hud-handbook):not(.hud-scenery){display:none} body.teyvat .hud-place{padding:4px 8px 4px 4px} body.teyvat .hud-place-name{max-width:34vw;font-size:.92rem} body.teyvat .hud-level-ring{width:32px;height:32px;flex-basis:32px} body.teyvat .hud-mora{font-size:.8rem;padding:4px 10px 4px 6px} body.teyvat .hud-tools{border-left:0;padding-left:0} body.teyvat .hud-tool{width:38px;height:38px;min-height:38px} body.teyvat nav.hud-nav{position:fixed;left:0;right:0;bottom:0;height:var(--dock-h);z-index:46;justify-content:space-around;gap:0;padding:4px 2px calc(4px + env(safe-area-inset-bottom));background:rgba(9,11,18,.96);border-top:1px solid rgba(211,188,142,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} body.teyvat nav.hud-nav button.hud-nav-button{flex:1 1 0;width:auto;height:52px;min-height:52px;border-radius:14px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:none} body.teyvat nav.hud-nav button.hud-nav-button.active{background:rgba(236,229,216,.14);color:var(--t-gold-hi);box-shadow:none;border-color:transparent} body.teyvat nav.hud-nav .hud-nav-label{position:static;opacity:1;transform:none;background:none;color:inherit;font-size:.6rem;font-weight:500;padding:0;letter-spacing:-.02em} body.teyvat nav.hud-nav button[data-screen=SYSTEM],body.teyvat nav.hud-nav button[data-screen=RELATIONS]{display:none} body.teyvat .shell-page-body{padding:10px} body.teyvat .shell-cols,body.teyvat .shell-page-body.shell-cols{display:flex;flex-direction:column;overflow:auto} body.teyvat .shell-cols>.shell-region{overflow:visible} body.teyvat .shell-page-tabs.vertical{display:flex;flex-direction:column} body.teyvat .shell-page-tabs.vertical>.shell-tabbar{flex-direction:row;border-right:0;border-bottom:1px solid rgba(211,188,142,.14)} body.teyvat .panel.shell-loc{display:flex;flex-direction:column} body.teyvat .shell-loc-tabs{height:100%;background:rgba(12,15,24,.55);border-radius:16px} body.teyvat .shell-loc-tabs>.shell-panes{padding:0 8px 10px} body.teyvat .shell-loc-tabs .shell-pane>*{margin:0 0 10px} body.teyvat .shell-loc-tabs .shell-pane>section,body.teyvat .shell-loc-tabs .shell-pane>details{background:var(--t-glass);border:1px solid var(--t-line);border-radius:14px;padding:12px} body.teyvat .shell-loc-tabs #journey-map .terrain-layout{display:flex!important;flex-direction:column} body.teyvat .shell-loc-tabs .terrain-viewport{height:46vh!important} body.teyvat .panel.shell-dialogue{margin:0 -8px -8px;padding:16px 16px 12px;max-height:70%} body.teyvat .shell-story-figure{bottom:210px} body.teyvat .shell-dialogue p.story{font-size:1.02rem;line-height:1.8} body.teyvat .shell-dialogue .choice{width:100%} body.teyvat .combat-panel .battle-teams.compact-teams{grid-template-columns:minmax(0,1fr)} body.teyvat .combat-panel .shell-enemies{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} body.teyvat .combat-panel .shell-enemies .combat-portrait{height:78px} body.teyvat .combat-panel .battle-cards button[data-card-id]{min-width:88px} body.teyvat .combat-panel .battle-execute{margin-left:0;width:100%} body.teyvat .combat-panel .battle-execute select{flex:1;min-width:0} body.teyvat .combat-panel .battle-execute button.primary{flex:1;min-width:0} body.teyvat .content.shell-content>.learning-guide.shell-float-guide{bottom:calc(var(--dock-h) + 10px);right:8px;left:8px;width:auto;max-height:34vh} /* 0.15.2: rows as tall as their content (the desktop minmax(0,1fr) row squeezed the card to 0px on a short phone screen and it lay over the first row of tiles — user screenshot) */ .pm-box{grid-template-columns:1fr;grid-template-rows:none;padding:22px 16px;gap:14px} .pm-card{grid-row:auto} .pm-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .pm-tile{min-height:92px;padding:10px 4px} .pm-glyph{width:40px!important;height:40px!important} } @media (prefers-reduced-motion:reduce){ body.teyvat *,.paimon-menu,.paimon-menu *{animation:none!important;transition:none!important} } html.reduce-motion body.teyvat *{animation:none!important} /* ---------- adventurer's handbook ---------- */ .handbook{position:fixed;inset:0;z-index:310;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at 60% 30%,rgba(46,56,86,.5),rgba(5,7,12,.9));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .18s ease} .handbook.open{opacity:1} .handbook .shell-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .hb-book{position:relative;width:min(1120px,100%);height:min(780px,calc(100dvh - 32px));display:grid;grid-template-columns:230px minmax(0,1fr);border-radius:22px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.6);transform:scale(.97) translateY(10px);transition:transform .24s cubic-bezier(.2,.8,.2,1);border:1px solid rgba(211,188,142,.35)} .handbook.open .hb-book{transform:none} .hb-side{background:linear-gradient(180deg,#1b2131,#131826);color:#ece5d8;padding:22px 14px;display:flex;flex-direction:column;gap:18px;border-right:1px solid rgba(211,188,142,.25)} .hb-title{display:flex;align-items:center;gap:10px;padding:0 6px} .hb-title strong{font-size:1.1rem;letter-spacing:.04em;word-break:keep-all} .hb-title small{margin-left:auto;font-size:.68rem;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.1);color:#d3bc8e} .hb-glyph{width:34px!important;height:34px!important;padding:6px;border-radius:50%;background:#ece5d8;color:#39404f} .hb-tabs{display:flex;flex-direction:column;gap:6px} .hb-tab{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 14px;border-radius:14px;background:transparent;border:1px solid transparent;color:#cfc8ba;font:inherit;font-size:.95rem;text-align:left;cursor:pointer;transition:background .15s,color .15s,border-color .15s} .hb-tab:hover{background:rgba(236,229,216,.08);color:#fff;border-color:rgba(211,188,142,.3)} .hb-tab.active{background:#ece5d8;color:#39404f;font-weight:700;box-shadow:0 0 18px rgba(243,223,174,.25)} .hb-page{background:linear-gradient(180deg,#efe8db,#e6dccb);color:#39404f;display:flex;flex-direction:column;min-height:0} .hb-head{height:auto;display:block;background:none;padding:20px 28px 10px;border-bottom:1px solid rgba(57,64,79,.12)} .hb-head h2{margin:0;font-size:1.35rem;color:#39404f} .hb-body{flex:1;min-height:0;overflow:auto;padding:14px 28px 28px;animation:shellFade .22s ease-out} .hb-body *{scrollbar-color:rgba(57,64,79,.35) transparent} .hb-section{margin:0 0 20px} .hb-section>h3{font-size:1rem;margin:10px 0 4px;color:#8a6d3b;display:flex;align-items:center;gap:8px} .hb-section>h3:before{content:'';width:8px;height:8px;transform:rotate(45deg);background:#c9a86a} .hb-note{font-size:.84rem;color:#6b6f7c;margin:0 0 10px;line-height:1.6} .hb-row{display:flex;align-items:center;gap:14px;padding:12px 14px;margin:0 0 8px;border-radius:14px;background:#f8f4ec;border:1px solid rgba(57,64,79,.1);transition:transform .15s,box-shadow .15s} .hb-row:hover{transform:translateX(3px);box-shadow:0 6px 18px rgba(57,64,79,.12)} .hb-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .hb-copy strong{font-size:.98rem;color:#2f3544} .hb-copy small{font-size:.8rem;color:#6b6f7c} .hb-copy .hb-reason{color:#a0522d} .hb-chip{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:700;padding:1px 9px;border-radius:9px;background:rgba(57,64,79,.1);color:#39404f} .hb-chip.ok{background:#dbeed4;color:#35683a}.hb-chip.wait{background:#efe0c4;color:#8a5a19}.hb-chip.warn{background:#f3d6d0;color:#9a3b2c}.hb-chip.blue{background:#d6e4f3;color:#2d5a8a}.hb-chip.gold{background:#f1e2bb;color:#7c5a14} .hb-guide{display:flex;align-items:center;gap:6px;min-height:38px;padding:6px 14px 6px 10px;border-radius:19px;background:#39404f;color:#ece5d8;border:1px solid #39404f;font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;white-space:nowrap} .hb-guide:hover:not(:disabled){background:#4a5266;box-shadow:0 0 0 2px rgba(211,188,142,.6)} .hb-guide:disabled{opacity:.55;cursor:default} .hb-guide.here{background:transparent;color:#39404f;border-color:rgba(57,64,79,.3)} .hb-hero{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap;margin:6px 0 18px} .hb-level{flex:1 1 260px;padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,#39404f,#2b3140);color:#ece5d8;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:14px;align-items:center} .hb-level small{grid-column:1/-1;font-size:.72rem;letter-spacing:.18em;color:#d3bc8e} .hb-level b{font-size:2.2rem;line-height:1;grid-row:2} .hb-level span{font-size:.84rem;color:#cfc8ba;grid-row:2} .hb-xp{grid-column:1/-1;height:6px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden;margin-top:10px} .hb-xp i{display:block;height:100%;background:linear-gradient(90deg,#d3bc8e,#f3dfae)} .hb-party{flex:1 1 260px;display:flex;flex-wrap:wrap;gap:6px;align-content:center} .hb-party .hb-chip{font-size:.8rem;padding:4px 12px;border-radius:14px;background:#f8f4ec;border:1px solid rgba(57,64,79,.12)} .hb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px} .hb-stat{padding:14px 16px;border-radius:14px;background:#f8f4ec;border:1px solid rgba(57,64,79,.1)} .hb-stat small{font-size:.74rem;color:#8a6d3b;letter-spacing:.06em} .hb-stat strong{display:block;font-size:1.3rem;color:#2f3544;margin:2px 0} .hb-stat p{margin:0;font-size:.78rem;color:#6b6f7c;line-height:1.5} .hb-stat.spent strong{color:#9a8c75} .hb-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.84rem;background:#f8f4ec;border-radius:14px;overflow:hidden;border:1px solid rgba(57,64,79,.1)} .hb-table th{text-align:left;padding:8px 12px;background:#39404f;color:#ece5d8;font-weight:600} .hb-table td{padding:8px 12px;border-top:1px solid rgba(57,64,79,.08)} .hb-table tr.locked td{color:#9a9aa3} .hb-floors{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:12px} .hb-floor{padding:12px 8px;border-radius:12px;text-align:center;background:#f8f4ec;border:1px solid rgba(57,64,79,.12);display:flex;flex-direction:column;gap:2px} .hb-floor b{font-size:1.05rem;color:#2f3544}.hb-floor small{font-size:.72rem;color:#6b6f7c} .hb-floor.cleared{background:linear-gradient(160deg,#f3e3bd,#e8d09a);border-color:#c9a86a} .hb-floor.locked{opacity:.55} .hb-filter{display:flex;gap:6px;margin:0 0 12px} .hb-filter-button{min-height:34px;padding:4px 14px;border-radius:17px;background:#f8f4ec;border:1px solid rgba(57,64,79,.15);color:#39404f;font:inherit;font-size:.84rem;cursor:pointer} .hb-filter-button.active{background:#39404f;color:#ece5d8;border-color:#39404f} .hb-companions{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px} .hb-companion{padding:12px 14px;border-radius:14px;background:#f8f4ec;border:1px solid rgba(57,64,79,.1);display:flex;flex-direction:column;gap:4px} .hb-companion strong{color:#2f3544}.hb-companion small{font-size:.78rem;color:#6b6f7c} .hb-companion.owned{background:linear-gradient(160deg,#f6ecd4,#efe0bb);border-color:#d3bc8e} .hb-reqs{margin:4px 0 0;padding:0 0 0 16px;font-size:.76rem;color:#6b6f7c} .hb-reqs li.met{color:#35683a}.hb-reqs li.unmet{color:#9a3b2c} /* 0.14.12: rarity, how to recruit, and a hint under each unmet condition */ .hb-rarity{font-size:.72rem;letter-spacing:-.02em;color:#a36bff;font-weight:700}.hb-rarity.r5{color:#d49a21} .hb-method{margin:2px 0 0;font-size:.74rem;line-height:1.45;color:#4e5466} .hb-reqs li{margin:3px 0;line-height:1.4} .hb-reqs .hb-hint{display:block;font-size:.68rem;color:#7a7f8c;font-weight:400} .hb-close{position:absolute;top:14px;right:14px;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;display:grid;place-items:center;background:#39404f;border:0;color:#ece5d8;cursor:pointer;z-index:2} .hb-close:hover{box-shadow:0 0 0 3px rgba(211,188,142,.55)} @media (max-width:760px) and (min-height:501px){ .hb-book{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:calc(100dvh - 16px)} .handbook{padding:8px} .hb-side{padding:12px 10px;gap:10px;border-right:0;border-bottom:1px solid rgba(211,188,142,.25)} /* 0.14.13: all five sections in view (동료 ran off the edge); they wrap instead of scrolling sideways */ .hb-tabs{flex-direction:row;flex-wrap:wrap;overflow-x:visible;gap:4px} .hb-tab{flex:1 1 auto;justify-content:center;min-height:36px;padding:4px 10px;gap:6px;font-size:.82rem} .hb-head{padding:14px 16px 8px}.hb-body{padding:10px 14px 20px} .hb-row{flex-wrap:wrap} } /* ---------- accent, glass borders, ornaments ---------- */ body.teyvat main>aside.shell-hud::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent 0,rgba(var(--acc-rgb),.9) 50%,transparent 100%);background-size:50% 100%;background-repeat:no-repeat;animation:shellHudLine 9s ease-in-out infinite;opacity:.75} @keyframes shellHudLine{0%{background-position:-60% 0}50%{background-position:160% 0}100%{background-position:-60% 0}} body.teyvat nav.hud-nav button.hud-nav-button.active{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.38),0 0 20px rgba(var(--acc-rgb),.5)} body.teyvat nav.hud-nav button.hud-nav-button:hover:not(:disabled){border-color:rgba(var(--acc-rgb),.75);box-shadow:0 0 16px rgba(var(--acc-rgb),.35)} body.teyvat .shell-tab.active{box-shadow:0 0 0 2px rgba(var(--acc-rgb),.35),0 0 16px rgba(var(--acc-rgb),.3)} body.teyvat .shell-loc-left>section:not(.shell-loc-side),body.teyvat .shell-loc-left>details,body.teyvat .shell-loc-left>.card,body.teyvat .shell-loc-left>.next-chapter,body.teyvat .shell-loc-main>#journey-map,body.teyvat .shell-loc-side,body.teyvat .panel.shell-page,body.teyvat .combat-panel .battle-command{border:1px solid transparent;background:linear-gradient(var(--t-glass),var(--t-glass)) padding-box,linear-gradient(140deg,rgba(var(--acc-rgb),.55),rgba(255,255,255,.07) 34%,rgba(255,255,255,.04) 66%,rgba(211,188,142,.42)) border-box} body.teyvat .panel.shell-page{background:linear-gradient(160deg,rgba(18,22,40,.93),rgba(10,13,24,.93)) padding-box,linear-gradient(140deg,rgba(var(--acc-rgb),.55),rgba(255,255,255,.07) 34%,rgba(255,255,255,.04) 66%,rgba(211,188,142,.42)) border-box} body.teyvat .shell-loc-left .main-objective{background:linear-gradient(125deg,rgba(54,44,24,.9),rgba(16,20,34,.88)) padding-box,linear-gradient(140deg,rgba(var(--acc-rgb),.7),rgba(211,188,142,.4)) border-box;border-left:3px solid var(--acc)} body.teyvat .shell-loc-left .main-objective h3:before{color:var(--acc-2)} body.teyvat .shell-page-head{background:linear-gradient(90deg,rgba(var(--acc-rgb),.14),transparent 55%)} body.teyvat .page-glyph{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.3),0 0 18px rgba(var(--acc-rgb),.3)} body.teyvat .panel.shell-page::before{content:'';position:absolute;top:8px;left:8px;width:9px;height:9px;transform:rotate(45deg);border:1px solid rgba(var(--acc-rgb),.7);pointer-events:none} body.teyvat .panel.shell-page{position:relative} body.teyvat :where(#root,#modal) button.primary:hover:not(:disabled){box-shadow:0 0 0 2px rgba(var(--acc-rgb),.55),0 0 22px rgba(var(--acc-rgb),.38)} body.teyvat input:focus-visible,body.teyvat select:focus-visible,body.teyvat button:focus-visible,body.teyvat summary:focus-visible{outline-color:var(--acc-2)} body.teyvat .hud-bar i{box-shadow:0 0 8px rgba(160,240,150,.5)} /* Primary buttons get a light sweep on hover. */ body.teyvat :where(#root,#modal) button.primary:not(.shell-back){background-image:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;background-repeat:no-repeat;background-color:var(--t-cream)} body.teyvat :where(#root,#modal) button.primary:not(.shell-back):hover:not(:disabled){background-position:-20% 0;transition:background-position .6s ease,box-shadow .2s,transform .12s} /* ---------- travel and work screens ---------- */ body.teyvat .travel-overlay{position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin:0;border:0;border-radius:0;transform:none;width:auto;max-width:none;background:radial-gradient(ellipse at 50% 58%,rgba(var(--acc-rgb),.14),transparent 55%),linear-gradient(180deg,#060810,#0c1120 70%,#070912);color:var(--t-text);animation:shellFade .35s ease-out;box-shadow:none} body.teyvat .travel-overlay .travel-mark{display:block;font-size:0;width:88px;height:88px;margin-bottom:10px;border-radius:50%;border:2px solid rgba(var(--acc-rgb),.55);box-shadow:0 0 34px rgba(var(--acc-rgb),.35),inset 0 0 24px rgba(var(--acc-rgb),.2);position:relative;animation:shellSpin 7s linear infinite} body.teyvat .travel-overlay .travel-mark::before{content:'';position:absolute;inset:20px;transform:rotate(45deg);border:2px solid var(--acc-2);box-shadow:0 0 16px rgba(var(--acc-rgb),.6)} body.teyvat .travel-overlay .travel-mark::after{content:'';position:absolute;inset:36px;border-radius:50%;background:var(--acc-2);box-shadow:0 0 18px var(--acc)} body.teyvat .travel-overlay strong{font-family:var(--font-display);font-size:1.9rem;letter-spacing:.14em;color:#fff;text-shadow:0 0 18px rgba(var(--acc-rgb),.5)} body.teyvat .travel-overlay>span:not(.travel-mark){font-size:.95rem;color:var(--t-muted);letter-spacing:.06em} body.teyvat .travel-overlay progress{width:min(440px,72vw);height:4px;border:0;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.12);appearance:none;-webkit-appearance:none;margin-top:12px} body.teyvat .travel-overlay progress::-webkit-progress-bar{background:rgba(255,255,255,.12)} body.teyvat .travel-overlay progress::-webkit-progress-value{background:linear-gradient(90deg,var(--t-gold),var(--acc-2));box-shadow:0 0 10px var(--acc)} body.teyvat .travel-overlay progress::-moz-progress-bar{background:linear-gradient(90deg,var(--t-gold),var(--acc-2))} body.teyvat .travel-overlay .shell-tip{position:absolute;bottom:8vh;left:50%;transform:translateX(-50%);width:min(640px,86vw);text-align:center;font-size:.86rem;color:var(--t-muted);line-height:1.6} body.teyvat .travel-overlay .shell-tip b{color:var(--acc-2);font-weight:700;margin-right:8px;font-family:var(--font-latin);letter-spacing:.14em} /* ---------- level-up banner ---------- */ .shell-levelup{position:fixed;z-index:520;left:0;right:0;top:28%;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;padding:22px 0;background:linear-gradient(90deg,transparent,rgba(10,13,24,.9) 20%,rgba(10,13,24,.9) 80%,transparent);border-top:1px solid rgba(211,188,142,.45);border-bottom:1px solid rgba(211,188,142,.45);animation:shellLevel 2.8s cubic-bezier(.2,.8,.2,1) forwards} .shell-levelup small{font:700 .8rem/1 'Cinzel','Gowun Batang',serif;letter-spacing:.3em;color:#d3bc8e} .shell-levelup strong{font:700 2.1rem/1.3 'Gowun Batang',serif;color:#fff;text-shadow:0 0 22px rgba(243,223,174,.6)} .shell-levelup span{font-size:1rem;color:#f3dfae;letter-spacing:.08em} @keyframes shellLevel{0%{opacity:0;transform:scaleY(.2)}12%{opacity:1;transform:scaleY(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-12px)}} /* ---------- loot tiles ---------- */ /* 0.14.13: the bag's tile (rarity picture, cream name bar) with the amount in a dark badge; the old pale gold count on cream could not be read (「채취 완료란이 너무 하얀데, 몇 개 구했는지 잘 안 보여」). */ body.teyvat .loot-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:12px} body.teyvat .loot-item{position:relative;min-height:0;padding:0;gap:0;justify-content:flex-start;align-items:stretch;border-radius:10px;overflow:hidden;background:#ece5d8;color:#3b4252;border:2px solid transparent;box-shadow:0 4px 12px rgba(0,0,0,.35)} body.teyvat .loot-item .item-icon,body.teyvat .loot-item .item-glyph{display:grid;place-items:center;width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;padding:16%;box-sizing:border-box;background:var(--rar-1);border-radius:0 0 18px 0;font-size:2rem;color:#fff} body.teyvat .loot-item.tier-2 .item-icon,body.teyvat .loot-item.tier-2 .item-glyph{background:var(--rar-2)} body.teyvat .loot-item.tier-3 .item-icon,body.teyvat .loot-item.tier-3 .item-glyph{background:var(--rar-3)} body.teyvat .loot-item.tier-4 .item-icon,body.teyvat .loot-item.tier-4 .item-glyph{background:var(--rar-4)} body.teyvat .loot-item.tier-5 .item-icon,body.teyvat .loot-item.tier-5 .item-glyph{background:var(--rar-5)} body.teyvat .loot-item.loot-mora .item-glyph{background:var(--rar-5)} body.teyvat .loot-item strong{display:block;padding:6px 6px 7px;font-size:.78rem;line-height:1.25;color:#3b4252!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.teyvat .loot-item .loot-count{position:absolute;top:5px;right:5px;padding:1px 9px;border-radius:10px;font-size:.92rem;font-weight:800;line-height:1.5;background:rgba(8,10,16,.82);color:#ffe7a8;box-shadow:0 1px 4px rgba(0,0,0,.4)} /* ---------- battle v2: standees, party list, round skills ---------- */ body.teyvat[data-mode=battle] .world-backdrop:after{background:radial-gradient(ellipse at 50% 40%,transparent 30%,rgba(6,7,14,.7) 100%),linear-gradient(180deg,rgba(8,10,16,.75),rgba(8,10,16,.15) 22%,rgba(8,10,16,.3) 70%,rgba(8,10,16,.92))} body.teyvat .combat-panel .shell-enemies{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px 14px;padding-top:6px} body.teyvat .combat-panel .shell-enemies .combatant-row{background:transparent;border:0;border-radius:18px;padding:6px 6px 10px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;align-items:center;text-align:center} body.teyvat .combat-panel .shell-enemies .combatant-row::before{content:'';position:absolute;left:12%;right:12%;top:146px;height:18px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);pointer-events:none;transform:none;width:auto;margin:0;box-shadow:none} body.teyvat .combat-panel .shell-enemies .combat-portrait{height:150px;width:100%;object-fit:contain;background:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));border-radius:0;position:relative;z-index:1} body.teyvat .combat-panel .shell-enemies .combatant-row.selected{transform:translateY(-4px);box-shadow:none} body.teyvat .combat-panel .shell-enemies .combatant-row.selected .combat-portrait{filter:drop-shadow(0 0 14px rgba(255,190,110,.85)) drop-shadow(0 10px 18px rgba(0,0,0,.55))} body.teyvat .combat-panel .shell-enemies .combatant-row.selected::before{background:radial-gradient(ellipse,rgba(255,180,90,.75),rgba(255,140,60,.25) 55%,transparent 72%);animation:shellPulse 1.6s ease-in-out infinite} body.teyvat .combat-panel .shell-enemies .combatant-row.selected::after{opacity:0} @keyframes shellPulse{0%,100%{opacity:.7;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.12)}} body.teyvat .combat-panel .shell-enemies .combatant-copy{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px} body.teyvat .combat-panel .shell-enemies .combatant-copy strong{font-size:.95rem;text-shadow:0 2px 8px #000;display:flex;align-items:baseline;gap:6px;justify-content:center;flex-wrap:wrap} body.teyvat .combat-panel .shell-level{font:700 .72rem/1 var(--font-latin);letter-spacing:.06em;color:#ffd7a0;background:rgba(10,12,20,.75);padding:2px 6px;border-radius:6px} body.teyvat .combat-panel .shell-enemies .meter{width:100%;height:7px;background:rgba(10,12,20,.75);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);border-radius:5px} body.teyvat .combat-panel .meter i{transition:width .6s cubic-bezier(.2,.8,.2,1)} body.teyvat .combat-panel .shell-enemies .combatant-copy .stat{font-size:.72rem;color:var(--t-muted);text-shadow:0 1px 4px #000} body.teyvat .combat-panel .shell-enemies .combatant-row>button{min-height:30px;padding:2px 12px;font-size:.74rem;border-radius:15px;background:rgba(10,12,20,.72)} body.teyvat .combat-panel .combatant-row[data-aura]::marker{content:none} body.teyvat .combatant-row[data-aura=pyro]{--aura:#ff7a45}body.teyvat .combatant-row[data-aura=hydro]{--aura:#4cc2f1}body.teyvat .combatant-row[data-aura=cryo]{--aura:#a6e4f2}body.teyvat .combatant-row[data-aura=electro]{--aura:#c79bff}body.teyvat .combatant-row[data-aura=anemo]{--aura:#74e0c2}body.teyvat .combatant-row[data-aura=geo]{--aura:#f5c542}body.teyvat .combatant-row[data-aura=dendro]{--aura:#a5d63b} body.teyvat .combat-panel .shell-allies{counter-reset:ally} body.teyvat .combat-panel .shell-allies .combatant-row{counter-increment:ally;padding:6px 12px 6px 6px;min-height:62px;border-radius:36px 16px 16px 36px;background:linear-gradient(90deg,rgba(14,17,30,.92),rgba(14,17,30,.7));border:1px solid rgba(143,198,230,.2)} body.teyvat .combat-panel .shell-allies .combatant-row::before{content:counter(ally);position:absolute;right:10px;top:8px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 .7rem/1 var(--font-latin);background:rgba(236,229,216,.14);color:var(--t-cream)} body.teyvat .combat-panel .shell-allies .combatant-row.shell-acting{background:linear-gradient(90deg,rgba(var(--acc-rgb),.28),rgba(14,17,30,.82));border-color:rgba(var(--acc-rgb),.85)!important;transform:translateX(-6px)} body.teyvat .combat-panel .shell-allies .combatant-row.shell-acting::before{background:var(--t-cream);color:var(--t-ink)} body.teyvat .combat-panel .shell-allies .combatant-row.dead .combat-portrait{filter:grayscale(1)} body.teyvat .combat-panel>.battle-order li.down{opacity:.4;text-decoration:line-through} body.teyvat .combat-panel .battle-cards{gap:10px} body.teyvat .combat-panel .battle-card-choice{position:relative} body.teyvat .combat-panel .battle-cards button[data-card-id]{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;justify-items:start;min-width:132px;min-height:58px;padding:6px 14px 6px 6px;border-radius:30px 0 0 30px} body.teyvat .combat-panel .battle-cards button[data-card-id] .shell-card-glyph{grid-row:1/3;width:44px;height:44px;margin:0;border-radius:50%;display:grid;place-items:center;font:800 1.05rem/1 var(--font-latin);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),rgba(255,255,255,.06) 60%),rgba(20,24,40,.9);color:var(--t-cream);border:2px solid rgba(236,229,216,.5);box-shadow:inset 0 0 10px rgba(255,255,255,.08)} body.teyvat .combat-panel .battle-cards button[data-card-id] .shell-card-glyph .shell-icon{width:22px;height:22px} body.teyvat .combat-panel .battle-cards button[data-card-id].selected .shell-card-glyph{border-color:var(--t-ink);background:var(--t-ink);color:var(--t-cream)} body.teyvat .combat-panel .battle-cards button.skill-e .shell-card-glyph{border-color:rgba(var(--acc-rgb),.9);box-shadow:0 0 12px rgba(var(--acc-rgb),.45)} body.teyvat .combat-panel .shell-burst button.skill-q .shell-card-glyph{width:50px;height:50px;border-color:#ffe39a;background:radial-gradient(circle at 35% 30%,rgba(255,240,200,.55),rgba(255,200,90,.25) 55%),rgba(40,30,12,.95);color:#fff4d6;box-shadow:0 0 18px rgba(255,210,110,.6)} body.teyvat .combat-panel .shell-burst button.skill-q:not(:disabled) .shell-card-glyph{animation:shellBurst 2s ease-in-out infinite} @keyframes shellBurst{0%,100%{box-shadow:0 0 12px rgba(255,210,110,.45)}50%{box-shadow:0 0 26px rgba(255,215,120,.95),0 0 0 4px rgba(255,215,120,.22)}} body.teyvat .combat-panel .battle-cards button[data-cd]::before{content:attr(data-cd);position:absolute;left:6px;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;background:rgba(6,8,14,.72);color:#fff;font:800 1.2rem/1 var(--font-latin);z-index:2} body.teyvat .combat-panel .battle-cards button[data-card-id] strong{grid-column:2;font-size:.88rem} body.teyvat .combat-panel .battle-cards button[data-card-id] small{grid-column:2;font-size:.68rem} body.teyvat .combat-panel .battle-effect-button{border-radius:0 30px 30px 0;padding:4px 12px 4px 8px} body.teyvat .combat-panel .battle-execute button.primary{min-width:180px;min-height:52px;font-size:1.04rem;border-radius:26px;box-shadow:0 0 0 2px rgba(var(--acc-rgb),.35),0 6px 20px rgba(0,0,0,.4)} /* battle v2 refinements: enemies fill the stage, their art fades into the scene */ body.teyvat .combat-panel .compact-battle-stage{display:flex;flex-direction:column} body.teyvat .combat-panel .battle-teams.compact-teams{flex:1;align-items:stretch} body.teyvat .combat-panel .shell-enemies{--enemy-h:clamp(120px,24vh,240px);grid-template-columns:repeat(auto-fit,minmax(170px,250px));justify-content:center;align-content:center;min-height:100%} body.teyvat .combat-panel .shell-enemies>h2{justify-self:start} body.teyvat .combat-panel .shell-enemies .combat-portrait{height:var(--enemy-h);object-fit:cover;-webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 48%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 72% 68% at 50% 48%,#000 52%,transparent 100%);filter:saturate(1.08) contrast(1.04)} body.teyvat .combat-panel .shell-enemies .combatant-row::before{top:calc(var(--enemy-h) - 18px);height:22px} body.teyvat .combat-panel .shell-enemies .combatant-row:not(.selected)::before{opacity:.0} body.teyvat .combat-panel .shell-enemies .combatant-row::after{display:none} body.teyvat .combat-panel .shell-enemies .combatant-row.tiltable.is-tilting{box-shadow:none} body.teyvat .combat-panel .shell-enemies .combatant-row.tiltable.is-tilting .combat-portrait{filter:saturate(1.15) brightness(1.08) drop-shadow(0 0 10px rgba(var(--acc-rgb),.5))} body.teyvat .combat-panel .shell-enemies .combatant-row.dead{opacity:.35} /* 0.14.10: on a narrow PC page (the 1280-wide frame) the enemy cards overlapped: two columns of 250px left the third card to a second row squeezed shorter than its card. Rows now always fit their cards (the stage scrolls instead) and up to three cards share a row with lower portraits. */ body.teyvat .combat-panel .shell-enemies{grid-auto-rows:max-content} @media (min-width:761px) and (max-width:1400px){body.teyvat .combat-panel .shell-enemies{--enemy-h:clamp(96px,19vh,200px);grid-template-columns:repeat(auto-fit,minmax(140px,188px));gap:12px 10px}} /* ---------- character screen: art in the middle, details on the right ---------- */ body.teyvat .gear-cols .gear-stage{position:relative;overflow:auto;display:flex;flex-direction:column;align-items:flex-end;gap:12px} body.teyvat .gear-cols .gear-stage>.gear-members,body.teyvat .gear-cols .gear-stage>:not(.shell-splash){position:relative;z-index:1;width:min(560px,62%)} body.teyvat .shell-splash{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden} body.teyvat .shell-splash img{position:absolute;left:0;top:0;height:100%;width:62%;object-fit:cover;object-position:50% 18%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 62%,transparent 98%),linear-gradient(0deg,transparent 0,#000 14%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 62%,transparent 98%),linear-gradient(0deg,transparent 0,#000 14%);mask-composite:intersect;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));animation:shellSplash .55s cubic-bezier(.2,.8,.2,1)} body.teyvat .shell-splash::before{content:'';position:absolute;left:4%;bottom:8%;width:48%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(var(--acc-rgb),.28),transparent 68%);filter:blur(6px)} body.teyvat .shell-splash.empty .shell-splash-mark{position:absolute;left:14%;top:30%;font-size:9rem;color:rgba(var(--acc-rgb),.35);text-shadow:0 0 40px rgba(var(--acc-rgb),.5)} @keyframes shellSplash{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}} body.teyvat .gear-cols .gear-member{background:rgba(12,15,27,.86);border:1px solid var(--t-line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} body.teyvat .gear-cols .gear-member .gear-member-head .gear-portrait{display:none} body.teyvat .gear-cols .gear-member .gear-member-head{grid-template-columns:1fr} body.teyvat .gear-cols .gear-member h2{font-size:1.5rem} body.teyvat .gear-cols .gear-slots{gap:10px} body.teyvat .gear-cols .gear-slot{border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid var(--t-line)} body.teyvat .gear-cols .gear-slot.tier-5{background:linear-gradient(160deg,rgba(215,164,88,.35),rgba(154,98,48,.15));border-color:rgba(232,180,100,.6)} body.teyvat .gear-cols .gear-slot.tier-4{background:linear-gradient(160deg,rgba(154,127,208,.32),rgba(93,76,147,.14));border-color:rgba(170,140,230,.55)} body.teyvat .gear-cols .gear-slot.tier-3{background:linear-gradient(160deg,rgba(111,148,207,.3),rgba(65,95,152,.14));border-color:rgba(120,160,225,.5)} body.teyvat .gear-cols .gear-slot.tier-2{background:linear-gradient(160deg,rgba(108,159,128,.3),rgba(63,107,82,.14));border-color:rgba(120,180,140,.5)} body.teyvat .shell-col-roster{display:flex;flex-direction:column;justify-content:center} body.teyvat .shell-roster-item{background:rgba(12,15,27,.7)} @media (max-width:1180px){body.teyvat .gear-cols .gear-stage>.gear-members,body.teyvat .gear-cols .gear-stage>:not(.shell-splash){width:min(560px,72%)}body.teyvat .shell-splash img{max-width:55%;opacity:.55}} @media (max-width:760px) and (min-height:501px){body.teyvat .shell-splash{position:relative;height:38vh;flex:0 0 auto}body.teyvat .shell-splash img{max-width:none;height:100%;left:50%;transform:translateX(-50%);opacity:1;animation:none}body.teyvat .gear-cols .gear-stage{align-items:stretch}body.teyvat .gear-cols .gear-stage>.gear-members,body.teyvat .gear-cols .gear-stage>:not(.shell-splash){width:100%}body.teyvat .shell-col-roster .shell-roster{flex-direction:row;overflow-x:auto}} body.teyvat #root button.shell-back,body.teyvat #root button.shell-back.primary{background:rgba(255,255,255,.08);border:1px solid rgba(236,229,216,.28);color:var(--t-cream);padding:6px 14px 6px 10px;font-weight:600} body.teyvat #root button.shell-back:hover:not(:disabled){background:rgba(236,229,216,.16);border-color:rgba(var(--acc-rgb),.7)} /* ---------- dialogue v2 ---------- */ body.teyvat .shell-dialogue p.story:not(.shell-recall){-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 55%);mask-image:linear-gradient(180deg,#000 45%,transparent 55%);-webkit-mask-size:100% 260%;mask-size:100% 260%;-webkit-mask-position:0 0;mask-position:0 0;animation:shellReveal .75s cubic-bezier(.3,.7,.3,1) both} @keyframes shellReveal{from{-webkit-mask-position:0 100%;mask-position:0 100%;opacity:.4}to{-webkit-mask-position:0 0;mask-position:0 0;opacity:1}} body.teyvat .shell-dialogue .speaker:before{content:'';width:8px;height:8px;transform:rotate(45deg);background:var(--acc-2);box-shadow:0 0 10px var(--acc);flex:0 0 auto} body.teyvat .shell-dialogue .speaker{font-size:1.12rem} body.teyvat .shell-dialogue .story-toolbar{flex-wrap:wrap} body.teyvat .shell-dialogue .shell-auto{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:3px 12px 3px 8px;border-radius:16px;font-size:.78rem;margin-left:auto} body.teyvat .shell-dialogue .shell-auto .shell-icon{width:16px;height:16px} body.teyvat .shell-dialogue .shell-auto.on{background:var(--t-cream);color:var(--t-ink);border-color:var(--t-cream);box-shadow:0 0 12px rgba(var(--acc-rgb),.45)} body.teyvat .shell-dialogue .shell-auto.on .shell-icon{animation:shellSpin 3s linear infinite} body.teyvat .shell-story-figure .portrait-frame img{animation:shellFigure .6s cubic-bezier(.2,.8,.2,1)} @keyframes shellFigure{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}} /* ---------- title screen (no journey open) ---------- */ .game-title .title-landscape{animation:shellDrift 52s ease-in-out infinite alternate;transform-origin:50% 60%} .game-title .title-logo{color:#fffef5;text-shadow:0 2px 0 rgba(30,60,70,.55),0 4px 14px rgba(0,0,0,.55),0 0 34px rgba(10,40,60,.55);animation:shellFloat 6s ease-in-out infinite} .game-title .title-star{display:inline-block;animation:shellTwinkle 3.2s ease-in-out infinite} @keyframes shellFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes shellTwinkle{0%,100%{transform:scale(1) rotate(0deg);opacity:.85}50%{transform:scale(1.25) rotate(45deg);opacity:1;filter:drop-shadow(0 0 12px #fff3c4)}} body:not(.teyvat) .shell-motes{position:fixed;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen} body.teyvat .shell-sound-gallery{margin:12px 0;padding:12px 14px} body.teyvat .shell-sound-gallery h3{margin:0 0 8px;font-family:var(--font-display)} body.teyvat .shell-sound-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0} body.teyvat .shell-sound-row small{width:72px;flex:0 0 72px;color:var(--t-gold)} body.teyvat :where(#root,#modal) button.shell-sound-chip{min-height:32px;padding:3px 12px;font-size:.8rem;border-radius:16px} body.teyvat .settings-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 14px;margin:0 0 8px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(211,188,142,.14)} body.teyvat .settings-row .copy{flex:1;min-width:0} body.teyvat .settings-row .copy p{margin:0;font-weight:600} body.teyvat .settings-row .copy small{display:block;margin-top:2px;line-height:1.5} body.teyvat .settings-row select{width:auto;min-width:120px;flex:0 0 auto} body.teyvat .settings-row input[type=range]{flex:0 1 260px;accent-color:var(--acc)} body.teyvat .settings-row input[type=checkbox]{accent-color:var(--acc);width:22px;height:22px} /* ---------- travel map: a circle for every place, a straight line for every road (app_navigation.js, 0.15.16) ---------- */ .terrain-links{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1} .terrain-link{stroke:rgba(255,246,222,.82);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.9));transition:stroke .15s,stroke-width .15s} .terrain-link.here{stroke:#fff6de;stroke-width:3.5} .terrain-link.locked{stroke:rgba(255,246,222,.55);stroke-width:2;stroke-dasharray:4 5;filter:drop-shadow(0 0 1px rgba(0,0,0,.85))} .terrain-link.hovered{stroke:#ffe9a8;stroke-width:4} .terrain-link.route{stroke:#ffd76a;stroke-width:5;stroke-dasharray:none;filter:drop-shadow(0 0 4px rgba(255,215,106,.75)) drop-shadow(0 0 1px #000)} /* Circles never change size or place under the pointer (a mark growing between press and release would swallow the press): hover, selection and press show in colour and ring. The press area is wider than the circle. */ .terrain-navigation .terrain-node{position:absolute;transform:translate(-50%,-50%);box-sizing:border-box;width:14px;height:14px;margin:0;padding:0;min-width:0;min-height:0;border:2px solid #17312d;border-radius:50%;background:#fff0c5;box-shadow:0 0 0 2px rgba(255,247,222,.45),0 1px 4px rgba(0,0,0,.6);pointer-events:auto;cursor:pointer;z-index:2;transition:background .15s,box-shadow .15s,opacity .15s} .terrain-navigation .terrain-node::after{content:'';position:absolute;inset:-9px;border-radius:50%} .terrain-navigation .terrain-node.near{width:18px;height:18px;background:#ffe39a;border-color:#3b2f15;z-index:3} .terrain-navigation .terrain-node.faded{background:rgba(255,255,255,.16);border:2px solid rgba(255,246,222,.8);box-shadow:0 0 0 1.5px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.35)} .terrain-navigation .terrain-node.unknown:not(.faded){background:#d9dfd9} /* 0.15.20: a place several roads away is see-through; it turns solid under the pointer, when chosen or on the trip. */ .terrain-navigation .terrain-node.far{opacity:.45;box-shadow:none} .terrain-navigation .terrain-node.on-route{background:#ffd76a;border-color:#3b2f15;opacity:1;z-index:4} .terrain-navigation .terrain-node.selected{width:22px;height:22px;background:#ffd76a;border:2px solid #3b2f15;opacity:1;box-shadow:0 0 0 3px rgba(255,237,158,.9),0 0 14px rgba(255,215,106,.9);z-index:5} .terrain-navigation .terrain-node.current{width:26px;height:26px;display:grid;place-items:center;background:#93f3df;border:2px solid #f1fff7;color:#063f3b;font-size:.78rem;font-weight:800;line-height:1;box-shadow:0 0 0 3px #043c35b0,0 2px 10px #000b;pointer-events:none;z-index:6} .terrain-navigation .terrain-node.hovered{box-shadow:0 0 0 3px rgba(255,215,106,.75),0 0 10px rgba(255,215,106,.6);opacity:1} body.teyvat .terrain-navigation button.terrain-node:hover:not(:disabled){background:#ffd76a;border-color:#3b2f15;box-shadow:0 0 0 3px rgba(255,215,106,.7);opacity:1} body.teyvat .terrain-navigation button.terrain-node:active:not(:disabled){transform:translate(-50%,-50%);filter:brightness(.85)} /* Names sit beside their circle and never take a press (a circle under a name stays pressable). */ .terrain-label{position:absolute;z-index:1;white-space:nowrap;pointer-events:none;padding:1px 6px;border-radius:8px;background:rgba(14,22,26,.8);color:#fff7e0;font:700 11px/16px system-ui,sans-serif;letter-spacing:-.01em;box-shadow:0 1px 4px rgba(0,0,0,.5)} .terrain-label.extra{background:rgba(14,22,26,.62);font-weight:600;color:#efe6cc} .terrain-label.current{background:#123d38;color:#edfff7;box-shadow:0 0 0 1px #b1dfc6,0 1px 4px rgba(0,0,0,.5)} .terrain-label.selected{background:#ffd76a;color:#3b2f15} .terrain-label.quiet{display:none} .terrain-label.hovered{display:block;z-index:7;background:#ffd76a;color:#3b2f15} /* The key under the map. */ .terrain-key{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 0;font-size:.72rem;line-height:1.5;color:#c8d3bf} .terrain-key-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .terrain-key-item::before{content:'';flex:0 0 auto;box-sizing:border-box;width:11px;height:11px;border-radius:50%;border:2px solid #3b2f15;background:#ffe39a} .terrain-key-item.here::before{background:#93f3df;border-color:#f1fff7} .terrain-key-item.far::before{opacity:.45} .terrain-key-item.faded::before{background:rgba(255,255,255,.16);border:2px solid rgba(255,246,222,.8);box-shadow:0 0 0 1.5px rgba(0,0,0,.5)} .terrain-key-item.route::before{width:16px;height:4px;border:0;border-radius:2px;background:#ffd76a} /* A card's dot is its place's circle on the map. */ .terrain-navigation .terrain-dot{flex:0 0 14px;width:14px;height:14px;box-sizing:border-box;margin:0 4px;border-radius:50%;border:2px solid #3b2f15;background:#ffe39a} .terrain-navigation .terrain-dot.locked{background:rgba(255,255,255,.16);border:2px solid rgba(255,246,222,.8);box-shadow:0 0 0 1.5px rgba(0,0,0,.5)} .terrain-navigation .terrain-destination.selected .terrain-dot{background:#ffd76a;box-shadow:0 0 0 3px rgba(255,237,158,.6)} body.teyvat .terrain-destination.route-hovered{border-color:var(--t-gold-hi);background:rgba(236,229,216,.1)} body.teyvat .terrain-controls button.terrain-view[aria-pressed=true]{background:rgba(236,229,216,.16);border-color:rgba(243,223,174,.7);color:var(--t-gold-hi)} /* ---------- 원석·교환·특성·운명의 자리 (app_premium_v0148.js) ---------- */ body.teyvat :where(#root) button.hud-primo{display:flex;align-items:center;gap:6px;min-height:0;padding:3px 12px 3px 5px;border-radius:16px;background:rgba(255,255,255,.07);border:0;font-variant-numeric:tabular-nums;font-size:.9rem;white-space:nowrap;color:var(--t-text)} body.teyvat :where(#root) button.hud-primo:hover:not(:disabled){background:rgba(160,220,255,.16);box-shadow:none} body.teyvat .hud-primo .hud-primo-icon{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 0 4px rgba(150,210,255,.5))} @media (max-width:760px) and (min-height:501px){body.teyvat :where(#root) button.hud-primo{font-size:.8rem;padding:3px 10px 3px 4px}} .premium-cur{width:20px;height:20px;object-fit:contain;flex:none} .premium-cur.fallback{display:inline-grid;place-items:center;color:#9fdcff} .shell-premium-shop{display:flex;flex-direction:column;gap:12px;min-width:min(660px,86vw)} .shell-premium-shop .premium-balances{display:flex;gap:8px;flex-wrap:wrap} .shell-premium-shop .premium-balance{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 6px;border-radius:14px;background:rgba(255,255,255,.06);font-variant-numeric:tabular-nums} .shell-premium-shop .premium-balance small{color:var(--t-muted,#bdb6a9);font-size:.72rem} .shell-premium-shop .premium-tabs{display:flex;gap:6px;flex-wrap:wrap} .shell-premium-shop .premium-tab{min-height:34px;padding:4px 14px;border-radius:17px} .shell-premium-shop .premium-tab.active{background:#ece5d8!important;color:#39404f!important;border-color:#ece5d8!important;font-weight:700} .shell-premium-shop .premium-offers{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px} .shell-premium-shop .premium-offer{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(211,188,142,.22)} .shell-premium-shop .premium-goods{display:flex;gap:6px;align-items:center;justify-content:center;min-height:68px;border-radius:10px;background:radial-gradient(circle at 50% 42%,rgba(255,236,190,.18),rgba(0,0,0,.2) 70%)} .shell-premium-shop .premium-goods-icon{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))} .shell-premium-shop .premium-goods-icon.stella{display:grid;place-items:center;font-size:2.2rem;color:#f3dfae;text-shadow:0 0 14px rgba(243,223,174,.8)} .shell-premium-shop .premium-price{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums} .shell-premium-shop .premium-weekly{color:var(--t-gold-hi,#f3dfae);font-size:.74rem} .shell-premium-shop .premium-pick,.shell-premium-shop .premium-count{width:100%} .shell-premium-shop .premium-note{font-size:.8rem;line-height:1.5} .shell-premium-shop .premium-done{margin:0;padding:8px 14px;border-radius:10px;background:rgba(95,197,154,.16);border:1px solid rgba(95,197,154,.55);color:#c9f2de;font-weight:700;animation:premium-done-in .35s ease-out} .shell-premium-shop .premium-done::before{content:'✓ '} .shell-premium-shop .premium-done.failed{background:rgba(226,103,95,.14);border-color:rgba(226,103,95,.55);color:#ffc9c4} .shell-premium-shop .premium-done.failed::before{content:'! '} @keyframes premium-done-in{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}} body.teyvat .shell-premium-member{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(211,188,142,.18)} body.teyvat .shell-premium-member h4{margin:0 0 6px;font-size:.9rem;color:var(--t-gold)} body.teyvat .premium-talents,body.teyvat .premium-cons{display:flex;flex-direction:column;gap:6px;min-width:0} body.teyvat :where(#root) button.premium-talent{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px;align-items:center;width:100%;min-height:0;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid transparent;font-size:.84rem;text-align:left;color:var(--t-text);box-shadow:none} body.teyvat :where(#root) button.premium-talent:hover:not(:disabled),body.teyvat :where(#root) button.premium-talent.open{background:rgba(243,223,174,.08);border-color:rgba(243,223,174,.35)} body.teyvat .premium-talent .talent-kind{color:var(--t-muted);font-size:.72rem} body.teyvat .premium-talent strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.teyvat .premium-talent .talent-level{font-variant-numeric:tabular-nums;color:var(--t-gold-hi);font-size:.8rem;white-space:nowrap} body.teyvat .premium-talent .talent-level em{font-style:normal;color:#9fe3a8} body.teyvat .premium-talent .talent-mult{font-variant-numeric:tabular-nums;color:var(--t-muted);font-size:.76rem;min-width:3.4em;text-align:right} body.teyvat .premium-curve{display:flex;flex-direction:column;gap:6px;padding:16px 10px 8px;border-radius:10px;background:rgba(0,0,0,.2)} body.teyvat .premium-curve-bars{display:grid;grid-template-columns:repeat(13,1fr);align-items:end;gap:3px;height:78px} body.teyvat .premium-curve-bar{position:relative;height:calc(var(--h) * 1%);min-height:6px;border-radius:3px 3px 0 0;background:rgba(255,255,255,.14)} body.teyvat .premium-curve-bar.past{background:rgba(243,223,174,.45)} body.teyvat .premium-curve-bar.now{background:linear-gradient(#fff3c4,#e2b85a);box-shadow:0 0 8px rgba(243,223,174,.7)} body.teyvat .premium-curve-bar.extra{background:repeating-linear-gradient(135deg,rgba(159,227,168,.28) 0 4px,rgba(159,227,168,.1) 4px 8px)} body.teyvat .premium-curve-bar.extra.now{background:linear-gradient(#e3ffe7,#7fd28d)} body.teyvat .premium-curve-bar i{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);font-size:.56rem;font-style:normal;color:var(--t-muted);opacity:0;white-space:nowrap} body.teyvat .premium-curve-bar.now i,body.teyvat .premium-curve-bar:hover i{opacity:1;color:var(--t-gold-hi)} body.teyvat .cons-head{display:flex;align-items:baseline;gap:8px} body.teyvat .cons-head h4{margin:0} body.teyvat .cons-group{color:var(--t-muted);font-size:.78rem} body.teyvat .cons-count{margin-left:auto;color:var(--t-gold-hi);font-variant-numeric:tabular-nums} body.teyvat .cons-chart{position:relative;height:156px;border-radius:12px;overflow:hidden;border:1px solid rgba(160,190,255,.16);background:radial-gradient(1.2px 1.2px at 14% 22%,#fff,transparent),radial-gradient(1px 1px at 36% 80%,#fffc,transparent),radial-gradient(1.4px 1.4px at 63% 12%,#fff,transparent),radial-gradient(1px 1px at 82% 74%,#fffb,transparent),radial-gradient(1px 1px at 52% 48%,#fff9,transparent),radial-gradient(1.2px 1.2px at 92% 40%,#fffa,transparent),radial-gradient(1px 1px at 6% 56%,#fff9,transparent),radial-gradient(ellipse at 50% 70%,rgba(82,112,180,.42),rgba(8,12,26,.9) 72%)} body.teyvat .cons-lines{position:absolute;inset:0;width:100%;height:100%} body.teyvat .cons-lines line{stroke:rgba(255,255,255,.22);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 3} body.teyvat .cons-lines line.on{stroke:rgba(255,236,190,.9);stroke-dasharray:none;stroke-width:1.6;filter:drop-shadow(0 0 3px rgba(255,236,190,.9))} body.teyvat :where(#root) button.cons-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:42px;height:42px;min-height:0;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);background:radial-gradient(circle,#2b3350,#10131f);display:grid;place-items:center;box-shadow:none;transition:box-shadow .2s,border-color .2s} body.teyvat :where(#root) button.cons-node:hover:not(:disabled),body.teyvat :where(#root) button.cons-node:active:not(:disabled){transform:translate(-50%,-50%);filter:brightness(1.15)} body.teyvat .cons-node .cons-icon{width:32px;height:32px;opacity:.32} body.teyvat .cons-node .cons-glyph{color:rgba(255,255,255,.35);font-size:1.1rem} body.teyvat :where(#root) button.cons-node.on{border-color:#f3dfae;background:radial-gradient(circle,#5b4a28,#1d160c);box-shadow:0 0 14px rgba(243,223,174,.6),inset 0 0 10px rgba(243,223,174,.35)} body.teyvat .cons-node.on .cons-icon{opacity:1;filter:drop-shadow(0 0 4px rgba(255,240,200,.95))} body.teyvat .cons-node.on .cons-glyph{color:#fff3c4;text-shadow:0 0 8px #f3dfae} body.teyvat :where(#root) button.cons-node.selected{outline:2px solid rgba(160,220,255,.85);outline-offset:3px} body.teyvat .cons-num{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:.6rem;font-weight:700;background:#1b2033;color:var(--t-muted);border:1px solid rgba(255,255,255,.2)} body.teyvat .cons-node.on .cons-num{background:#f3dfae;color:#3b2f15;border-color:#fff6d8} body.teyvat :where(#root) button.cons-node.just-on{animation:cons-lit 1.8s ease-out} @keyframes cons-lit{0%{transform:translate(-50%,-50%) scale(.5);box-shadow:0 0 0 0 rgba(255,236,190,.95)}35%{transform:translate(-50%,-50%) scale(1.45);box-shadow:0 0 34px 14px rgba(255,236,190,.8)}100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 14px rgba(243,223,174,.6)}} body.teyvat .cons-detail{min-height:78px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(243,223,174,.32)} body.teyvat .cons-detail small{color:var(--t-muted);font-size:.7rem} body.teyvat .cons-detail strong{display:block;margin:2px 0 4px;color:var(--t-gold-hi)} body.teyvat .cons-detail p{margin:0;font-size:.8rem;line-height:1.55} body.teyvat .cons-detail.locked{border-color:rgba(255,255,255,.1)} body.teyvat .cons-detail.locked strong{color:var(--t-muted)} body.teyvat .premium-cons-open{min-height:34px;padding:4px 12px;font-size:.8rem} @media (max-width:1100px){body.teyvat .shell-premium-member{grid-template-columns:1fr}} /* 운명의 자리 테두리: gold lines from C1, corner ornaments from C3, an elemental glow at C5, a shining frame at C6 */ .cons-frame{position:relative;--cf-a:#fff6d6;--cf-b:#e6bd62;--cf-c:#8a6a2c;--cf-w:2px;--cf-el:#f3dfae} .cons-frame[data-cons-el=fire]{--cf-el:#ff7a52}.cons-frame[data-cons-el=water]{--cf-el:#4fb2ff}.cons-frame[data-cons-el=ice]{--cf-el:#9fe8ff}.cons-frame[data-cons-el=electro]{--cf-el:#c58bff}.cons-frame[data-cons-el=anemo]{--cf-el:#6fe0c0}.cons-frame[data-cons-el=geo]{--cf-el:#ffc85a}.cons-frame[data-cons-el=dendro]{--cf-el:#a5e05a} .cons-skin{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6} .cons-skin::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:var(--cf-w);background:linear-gradient(135deg,var(--cf-a),var(--cf-b) 22%,var(--cf-c) 48%,var(--cf-b) 74%,var(--cf-a));background-size:220% 220%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .cons-3,.cons-4{--cf-w:3px}.cons-5{--cf-w:3px}.cons-6{--cf-w:4px} .cons-3 .cons-skin::after,.cons-4 .cons-skin::after,.cons-5 .cons-skin::after,.cons-6 .cons-skin::after{content:'';position:absolute;inset:6px;border-radius:inherit;border:1px solid rgba(243,223,174,.42)} .cons-3 .cons-skin,.cons-4 .cons-skin{box-shadow:0 0 10px rgba(243,223,174,.28)} .cons-5 .cons-skin{box-shadow:0 0 14px color-mix(in srgb,var(--cf-el) 70%,transparent),inset 0 0 22px color-mix(in srgb,var(--cf-el) 26%,transparent)} .cons-6 .cons-skin{box-shadow:0 0 22px color-mix(in srgb,var(--cf-el) 80%,transparent),0 0 2px #fff6d6,inset 0 0 26px color-mix(in srgb,var(--cf-el) 30%,transparent)} .cons-6 .cons-skin::before{animation:cons-flow 6s linear infinite} @keyframes cons-flow{0%{background-position:0% 50%}100%{background-position:220% 50%}} .cons-corner{position:absolute;width:28px;height:28px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6d6'/%3E%3Cstop offset='1' stop-color='%23c9973a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 29V11C3 6.6 6.6 3 11 3h18' fill='none' stroke='url(%23g)' stroke-width='2.4'/%3E%3Cpath d='M8.5 25V13.5c0-2.8 2.2-5 5-5H25' fill='none' stroke='url(%23g)' stroke-width='1.2' opacity='.85'/%3E%3Cpath d='M1.5 1.5l7 2.6-4.4 4.4z' fill='url(%23g)'/%3E%3Ccircle cx='13.5' cy='13.5' r='2.2' fill='url(%23g)'/%3E%3C/svg%3E")} .cons-corner.tl{top:-3px;left:-3px}.cons-corner.tr{top:-3px;right:-3px;transform:scaleX(-1)}.cons-corner.bl{bottom:-3px;left:-3px;transform:scaleY(-1)}.cons-corner.br{bottom:-3px;right:-3px;transform:scale(-1,-1)} .cons-6 .cons-corner{width:34px;height:34px;filter:drop-shadow(0 0 4px rgba(255,236,190,.9))} .cons-shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden} .cons-shine::before{content:'';position:absolute;top:-30%;bottom:-30%;width:28%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,250,230,.0) 20%,rgba(255,250,230,.28) 50%,rgba(255,250,230,0) 80%,transparent);animation:cons-sweep 4.5s ease-in-out infinite} @keyframes cons-sweep{0%,55%{left:-40%}100%{left:120%}} .cons-spark{position:absolute;width:10px;height:10px;background:radial-gradient(circle,#fff 0 18%,transparent 20%),conic-gradient(from 45deg,transparent 0 10%,#fff6d6 12% 13%,transparent 15% 35%,#fff6d6 37% 38%,transparent 40% 60%,#fff6d6 62% 63%,transparent 65% 85%,#fff6d6 87% 88%,transparent 90%);border-radius:50%;opacity:0;animation:cons-twinkle 3.2s ease-in-out infinite} .cons-spark.s0{top:8%;left:12%}.cons-spark.s1{top:20%;right:9%;animation-delay:.6s}.cons-spark.s2{top:48%;left:6%;animation-delay:1.2s}.cons-spark.s3{bottom:22%;right:12%;animation-delay:1.8s}.cons-spark.s4{bottom:10%;left:30%;animation-delay:2.3s}.cons-spark.s5{top:6%;left:55%;animation-delay:2.8s} @keyframes cons-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(45deg)}} .cons-badges{position:absolute;top:-12px;right:12px;display:flex;align-items:center;gap:3px;padding:2px 5px 2px 3px;border-radius:12px;background:rgba(14,11,6,.92);box-shadow:0 0 0 1px rgba(243,223,174,.55),0 2px 6px rgba(0,0,0,.45)} .gear-member.cons-frame .cons-badges{top:8px;right:14px} .cons-badge{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#4a3b20,#120e08);border:1px solid var(--cf-b)} .cons-badge .cons-icon{width:15px;height:15px;filter:drop-shadow(0 0 2px rgba(255,240,200,.9))} .cons-badge .cons-glyph{font-size:.62rem;color:#fff3c4} .cons-6 .cons-badge{box-shadow:0 0 6px color-mix(in srgb,var(--cf-el) 80%,transparent)} .cons-tag{position:static;margin-right:2px;padding:0 7px;border-radius:9px;font-weight:800;font-size:.66rem;line-height:1.55;letter-spacing:.05em;background:linear-gradient(#fff3c4,#d9a945);color:#3b2a0c;box-shadow:0 1px 3px rgba(0,0,0,.4)} .cons-6 .cons-tag{background:linear-gradient(110deg,#fff6d6,#ffd774 40%,#fff6d6 60%,#e2a93a);background-size:200% 100%;animation:cons-flow 3s linear infinite} @media (prefers-reduced-motion:reduce){.cons-skin::before,.cons-shine::before,.cons-spark,.cons-6 .cons-tag{animation:none}} /* ---------- 제작 (app_forge_v0148.js): item cards on their grade colour, the chosen one large on the right ---------- */ body.teyvat{--rar-1:linear-gradient(160deg,#6c6e74,#8c8e93);--rar-2:linear-gradient(160deg,#3c705d,#5c9a7f);--rar-3:linear-gradient(160deg,#4a6596,#6a8fce);--rar-4:linear-gradient(160deg,#69539a,#9a78cf);--rar-5:linear-gradient(160deg,#a8622b,#e2a04a)} body.teyvat .shell-forge{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:18px;align-items:stretch;min-height:0} body.teyvat .shell-forge-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));grid-auto-rows:max-content;gap:10px;align-content:start;min-height:0;overflow:auto;padding:2px 6px 6px 2px;scrollbar-width:thin} body.teyvat :where(#root) button.shell-forge-tile{position:relative;display:flex;flex-direction:column;padding:0;min-height:0;border-radius:10px;overflow:hidden;background:#ece5d8;border:2px solid transparent;box-shadow:0 4px 12px rgba(0,0,0,.35);color:#3b4252;text-align:center} body.teyvat :where(#root) button.shell-forge-tile:hover:not(:disabled){border-color:rgba(243,223,174,.85);background:#ece5d8;box-shadow:0 0 0 1px rgba(243,223,174,.5),0 6px 16px rgba(0,0,0,.4)} body.teyvat :where(#root) button.shell-forge-tile.active{border-color:#f3dfae;box-shadow:0 0 0 2px rgba(243,223,174,.75),0 0 18px rgba(243,223,174,.35)} body.teyvat .shell-forge-tile.unready{filter:saturate(.55) brightness(.82)} body.teyvat .shell-forge-tile-art{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;background:var(--rar-1);border-bottom-right-radius:18px} body.teyvat .shell-forge-tile.tier-2 .shell-forge-tile-art{background:var(--rar-2)} body.teyvat .shell-forge-tile.tier-3 .shell-forge-tile-art{background:var(--rar-3)} body.teyvat .shell-forge-tile.tier-4 .shell-forge-tile-art{background:var(--rar-4)} body.teyvat .shell-forge-tile.tier-5 .shell-forge-tile-art{background:var(--rar-5)} body.teyvat .shell-forge-tile-art img,body.teyvat .shell-forge-tile-art .item-glyph{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));font-size:2rem;display:grid;place-items:center;color:#fff} body.teyvat .shell-forge-tile-stars{position:absolute;left:0;right:0;bottom:3px;font-size:.62rem;letter-spacing:-.04em;color:#ffcc33;text-shadow:0 1px 2px rgba(0,0,0,.6)} body.teyvat .shell-forge-tile-name{display:block;padding:5px 6px 6px;font-size:.72rem;font-weight:700;line-height:1.25;color:#3b4252;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.teyvat .shell-forge-detail{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:16px;background:linear-gradient(180deg,rgba(28,24,20,.72),rgba(10,13,21,.78));border:1px solid rgba(211,188,142,.32);box-shadow:inset 0 1px 0 rgba(255,236,190,.08)} body.teyvat .shell-forge-scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:16px;scrollbar-width:thin} /* The button that makes it never scrolls away: it sits at the foot of the panel. */ body.teyvat .shell-forge-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 16px;border-top:1px solid rgba(211,188,142,.22);background:rgba(8,10,16,.82)} body.teyvat .shell-forge-foot>button{flex:1 1 140px;min-height:46px;margin:0;font-size:.98rem} body.teyvat .shell-forge-foot>.cook-foot{display:flex;flex:1;flex-wrap:wrap;gap:8px;align-items:center;margin:0} body.teyvat .shell-forge-foot>.cook-foot>button{flex:1 1 130px;min-height:46px;margin:0} body.teyvat .shell-forge-foot>.cook-foot>small{flex-basis:100%} body.teyvat .shell-forge-none{padding:18px} body.teyvat .shell-forge-tile-badge{position:absolute;top:4px;right:5px;padding:0 6px;border-radius:8px;font-size:.66rem;font-weight:800;background:rgba(8,10,16,.72);color:#f3dfae} body.teyvat .shell-forge-ready{position:absolute;top:6px;left:6px;width:9px;height:9px;border-radius:50%;background:#7ee08a;box-shadow:0 0 6px #7ee08a} body.teyvat .shell-forge-copy{display:flex;flex-direction:column;gap:6px} body.teyvat .shell-forge-copy>strong{display:none} body.teyvat .shell-forge-copy .forge-next{font-size:.92rem;color:var(--t-text);line-height:1.6} body.teyvat .shell-forge-card .cook-head{display:none} /* ---------- 작업장 막대: 판매 상품 / 제작 / 강화·돌파 in one place ---------- */ body.teyvat .shell-workbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 auto 0 8px} body.teyvat .shell-worktabs{display:flex;gap:4px;padding:4px;border-radius:24px;background:rgba(0,0,0,.28);border:1px solid rgba(211,188,142,.2)} body.teyvat :where(#root) button.shell-worktab{display:flex;align-items:center;gap:8px;min-height:38px;padding:6px 18px;border-radius:19px;background:transparent;border:0;color:var(--t-muted);font-weight:600;font-size:.9rem} body.teyvat :where(#root) button.shell-worktab:hover:not(:disabled){background:rgba(255,255,255,.08);color:var(--t-cream);box-shadow:none} body.teyvat :where(#root) button.shell-worktab.active{background:linear-gradient(180deg,#f6e2b3,#d6b46f);color:#2b2112;box-shadow:0 0 14px rgba(243,223,174,.35)} body.teyvat .shell-worktab .shell-icon{width:18px;height:18px} body.teyvat .shell-workstats{display:flex;gap:8px;font-size:.8rem;color:var(--t-muted);margin:0} body.teyvat .shell-workstats span{padding:4px 10px;border-radius:12px;background:rgba(255,255,255,.06)} /* The work area fills the page; only the tile list and the detail panel scroll. */ body.teyvat .panel.shell-workshop>.shell-page-body{display:flex;flex-direction:column;overflow:hidden;padding-top:12px} body.teyvat .panel.shell-workshop .shell-forge-tabs{flex:1;min-height:0} body.teyvat .panel.shell-workshop .shell-forge-tabs>.shell-panes{overflow:hidden} body.teyvat .panel.shell-workshop .shell-forge-tabs>.shell-panes>.shell-pane,body.teyvat .panel.shell-workshop .shell-workarea{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px} body.teyvat .panel.shell-workshop .shell-workarea{flex:1} body.teyvat .panel.shell-workshop .enhance-panel{flex:1;min-height:0;height:100%;width:100%;max-width:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;background:none;border:0} body.teyvat .panel.shell-workshop .enhance-panel>h2,body.teyvat .panel.shell-workshop .enhance-panel>p:not([class]){display:none} body.teyvat .panel.shell-workshop .enhance-panel>.enhance-rules{order:9;margin:0;font-size:.85rem} body.teyvat .panel.shell-workshop .shell-forge{flex:1} body.teyvat .panel.shell-workshop .craft-tabs,body.teyvat .panel.shell-workshop .forge-tabs,body.teyvat .panel.shell-workshop .cook-tabs,body.teyvat .panel.shell-workshop .cook-effects{margin:0} body.teyvat .panel.shell-workshop .shell-workarea>h2{display:none} /* A workshop picture under the tiles: warm light like a forge. */ body.teyvat .panel.shell-workshop{background:radial-gradient(ellipse at 18% 100%,rgba(255,150,60,.12),transparent 55%),linear-gradient(160deg,rgba(24,22,30,.94),rgba(12,14,22,.94))} body.teyvat .shell-forge-hero{display:flex;gap:14px;align-items:center} body.teyvat .shell-forge-art{position:relative;flex:0 0 96px;height:96px;border-radius:12px;display:grid;place-items:center;background:var(--rar-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)} body.teyvat .shell-forge-hero.tier-2 .shell-forge-art{background:var(--rar-2)} body.teyvat .shell-forge-hero.tier-3 .shell-forge-art{background:var(--rar-3)} body.teyvat .shell-forge-hero.tier-4 .shell-forge-art{background:var(--rar-4)} body.teyvat .shell-forge-hero.tier-5 .shell-forge-art{background:var(--rar-5)} body.teyvat .shell-forge-art img,body.teyvat .shell-forge-art .item-glyph{width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));font-size:2.4rem;display:grid;place-items:center;color:#fff} body.teyvat .shell-forge-stars{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:.72rem;color:#ffcc33;text-shadow:0 1px 2px rgba(0,0,0,.6)} body.teyvat .shell-forge-words h3{margin:2px 0 0;font-size:1.25rem} body.teyvat .shell-forge-kind{font-size:.76rem;color:var(--t-muted)} body.teyvat .shell-forge-info{display:flex;flex-direction:column;gap:6px} body.teyvat .shell-forge-sub{margin:4px 0 0;font-size:.74rem;letter-spacing:.08em;color:var(--t-gold)} body.teyvat .shell-forge-stats{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04)} body.teyvat .shell-forge-stats dt{color:var(--t-muted);font-size:.84rem} body.teyvat .shell-forge-stats dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums} body.teyvat .shell-forge-effect{margin:0;font-size:.84rem;line-height:1.55;color:var(--t-cream-2)} body.teyvat .shell-forge-note{margin:0;font-size:.76rem;color:var(--t-muted)} body.teyvat .shell-forge-card{margin:0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.035)} body.teyvat .shell-forge-card>.craft-output{display:none} body.teyvat .shell-forge-card>button{width:100%;margin-top:6px} body.teyvat .shell-forge-tabs>.shell-tabbar{padding:0 0 10px} body.teyvat .shell-forge-tabs .shell-pane>h2{display:none} body.teyvat .shell-forge-tabs .shell-pane>.craft-tabs,body.teyvat .shell-forge-tabs .shell-pane>.forge-filters{margin:0} @media (max-width:1100px){body.teyvat .shell-forge{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}body.teyvat .shell-forge-detail{order:-1;max-height:52vh}} @media (max-width:760px) and (min-height:501px){body.teyvat .panel.shell-workshop>.shell-page-body{overflow:auto;display:block}body.teyvat .panel.shell-workshop .shell-forge-tabs>.shell-panes,body.teyvat .panel.shell-workshop .shell-forge-list{overflow:visible}body.teyvat .shell-workbar{margin:0;flex-basis:100%}} /* ---------- damage numbers and reactions (app_combat_fx.js rewrites the text) ---------- The number alone, in the element's colour with a thin dark rim; a critical hit is bigger. It pops, then drifts up. */ body.teyvat .impact{--dmg:#fffaf0;--dmg-2:#e8e0d2} body.teyvat .impact.effect-fire{--dmg:#ffb56b;--dmg-2:#ff8a3d} body.teyvat .impact.effect-water{--dmg:#7fd6ff;--dmg-2:#3fb2f0} body.teyvat .impact.effect-ice{--dmg:#c4f6ff;--dmg-2:#8fe4f2} body.teyvat .impact.effect-lightning{--dmg:#e6b6ff;--dmg-2:#c47cf5} body.teyvat .impact.effect-wind{--dmg:#9ff7dc;--dmg-2:#5fe0bd} body.teyvat .impact.effect-rock{--dmg:#ffe08a;--dmg-2:#f2bc45} body.teyvat .impact.effect-dendro{--dmg:#c4ef7a;--dmg-2:#94cf3e} body.teyvat .impact.healing,body.teyvat .impact.kind-heal{--dmg:#b8ff9a;--dmg-2:#7fe06a} body.teyvat .impact.shielded{--dmg:#d9e6f2;--dmg-2:#a9bccd} body.teyvat .impact:is(.kind-action,.kind-damage,.kind-heal){animation:shellDmgPop 1s cubic-bezier(.2,.8,.3,1) both} /* 0.14.11: a solid number with a thick dark rim reads over any background (the gradient fill with a thin rim washed out on bright scenery). */ body.teyvat .impact:is(.kind-action,.kind-damage,.kind-heal) .impact-label{font-family:HoyoDamageNumbers,CRPGKorean,sans-serif;font-size:2.15rem;font-weight:900;font-style:normal;letter-spacing:.02em;line-height:1.05;color:var(--dmg);background:none!important;-webkit-text-fill-color:var(--dmg);-webkit-text-stroke:6px rgba(16,11,8,.94);paint-order:stroke fill;filter:drop-shadow(0 2px 2px rgba(0,0,0,.65)) drop-shadow(0 0 10px rgba(0,0,0,.35));text-shadow:none;padding:0 .06em!important;border-radius:0!important} body.teyvat .impact.critical:is(.kind-action,.kind-damage) .impact-label{font-size:3rem;-webkit-text-stroke:7px rgba(46,10,4,.96);filter:drop-shadow(0 2px 2px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(255,120,60,.55))} body.teyvat .impact .impact-crit{display:block;width:max-content;margin:0 auto 1px;padding:2px 11px 3px;border-radius:11px;font:900 .86rem/1.15 CRPGKorean,sans-serif;letter-spacing:.06em;color:#fff6dc;background:linear-gradient(180deg,#ff7a3c,#c8231a);border:1px solid rgba(255,214,150,.75);box-shadow:0 0 14px rgba(255,92,40,.75),0 2px 4px rgba(0,0,0,.55);text-shadow:0 1px 2px rgba(0,0,0,.6);-webkit-text-fill-color:#fff6dc;-webkit-text-stroke:0} body.teyvat .impact.worded .impact-label{font-family:'Gowun Batang',CRPGKorean,serif;font-size:1.2rem;-webkit-text-stroke:0;background-image:none!important;-webkit-text-fill-color:currentColor;color:#e9e4da;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))} body.teyvat .impact .impact-target{background:none;color:#f3eee4;font-size:.72rem;padding:0;margin:2px auto 0;text-shadow:0 1px 3px #000} body.teyvat .impact .impact-shield{color:#cfe0ee} @keyframes shellDmgPop{0%{opacity:0;transform:translate(-50%,-40%) scale(.55)}12%{opacity:1;transform:translate(-50%,-58%) scale(1.22)}26%{transform:translate(-50%,-62%) scale(1)}78%{opacity:1;transform:translate(-50%,-88%) scale(1)}100%{opacity:0;transform:translate(-50%,-104%) scale(.96)}} body.teyvat .combat-light.reaction-tag{position:absolute;z-index:5;white-space:nowrap;transform:translate(-50%,-60%);font-family:CRPGKorean,sans-serif;font-weight:900;font-size:1.32rem;letter-spacing:.08em;color:var(--rx,#f3eee4);-webkit-text-stroke:4px rgba(16,11,8,.92);paint-order:stroke fill;text-shadow:0 0 12px var(--rx,#fff);pointer-events:none;background:rgba(8,10,16,.55);border:1.5px solid var(--rx,#f3eee4);border-radius:16px;padding:1px 14px 3px;width:auto;height:auto;box-shadow:0 0 16px rgba(0,0,0,.5)} /* The element that stayed on a target after a hit (「불 부착」), under the number. */ body.teyvat .combat-light.aura-tag{position:absolute;z-index:4;white-space:nowrap;transform:translate(-50%,-50%);font:800 .86rem/1.2 CRPGKorean,sans-serif;letter-spacing:.04em;color:#15120e;background:var(--ax,#f3eee4);border-radius:12px;padding:2px 10px 3px;box-shadow:0 0 12px var(--ax,#fff),0 2px 4px rgba(0,0,0,.5);pointer-events:none;width:auto;height:auto;border:0} body.teyvat .combat-light.aura-tag.effect-fire{--ax:#ff9a5c} body.teyvat .combat-light.aura-tag.effect-water{--ax:#6fd0fb} body.teyvat .combat-light.aura-tag.effect-ice{--ax:#bff3ff} body.teyvat .combat-light.aura-tag.effect-lightning{--ax:#d7a4ff} body.teyvat .combat-light.aura-tag.effect-dendro{--ax:#b9e86d} /* The element on each fighter as a labelled badge on the card. */ body.teyvat .combat-panel .combatant-row{position:relative} body.teyvat .shell-aura-badge{position:absolute;top:6px;left:8px;z-index:3;padding:2px 9px 3px;border-radius:11px;font:800 .74rem/1.2 CRPGKorean,sans-serif;color:#15120e;background:var(--aura,#fff);box-shadow:0 0 10px var(--aura,#fff),0 2px 4px rgba(0,0,0,.5);pointer-events:none;animation:shellAuraIn .3s ease-out} @keyframes shellAuraIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}} body.teyvat .combat-light.reaction-tag.effect-fire{--rx:#ffb15e} body.teyvat .combat-light.reaction-tag.effect-ice{--rx:#b9f1ff} body.teyvat .combat-light.reaction-tag.effect-lightning{--rx:#e3a8ff} body.teyvat .combat-light.reaction-tag.effect-wind{--rx:#8ff5d4} body.teyvat .combat-light.reaction-tag.effect-rock{--rx:#ffd773} body.teyvat .combat-light.reaction-tag.effect-dendro{--rx:#b8ea6c} body.teyvat .combat-light.reaction-tag.effect-water{--rx:#88d8ff} .reduce-motion body.teyvat .impact,body.teyvat.reduce-motion .impact{animation:none} /* ---------- battle result ---------- */ body.teyvat .content.shell-result-screen{justify-content:center} body.teyvat .content.shell-result-screen>.panel.shell-result{flex:0 1 auto;max-height:100%;overflow:auto;width:min(760px,100%);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 28px 22px;background:none;border:0;box-shadow:none;text-align:center} body.teyvat .shell-result-banner{position:relative;width:100%;height:auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding:22px 0 18px;background:linear-gradient(90deg,transparent,rgba(10,13,24,.88) 18%,rgba(10,13,24,.88) 82%,transparent);border-top:1px solid rgba(211,188,142,.5);border-bottom:1px solid rgba(211,188,142,.5);animation:shellLevelIn .6s cubic-bezier(.2,.8,.2,1)} body.teyvat .content.shell-result-screen:has(.shell-result.victory)::before{content:'';position:absolute;left:50%;top:44%;width:620px;height:620px;margin:-310px 0 0 -310px;background:repeating-conic-gradient(from 0deg,rgba(var(--acc-rgb),.16) 0deg 6deg,transparent 6deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 10%,transparent 62%);mask-image:radial-gradient(circle,#000 10%,transparent 62%);animation:shellSpin 40s linear infinite;pointer-events:none;z-index:-1} body.teyvat .shell-result-banner small{font:700 .85rem/1 var(--font-latin);letter-spacing:.42em;color:var(--t-gold)} body.teyvat .shell-result-banner h1{margin:4px 0 0;font-size:2.4rem;color:#fff;text-shadow:0 0 24px rgba(var(--acc-rgb),.55)} body.teyvat .shell-result.defeat .shell-result-banner h1{color:#d9d3c7;text-shadow:none} @keyframes shellLevelIn{from{opacity:0;transform:scaleY(.3)}to{opacity:1;transform:none}} body.teyvat .shell-result-body{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%} body.teyvat .shell-result-body>p{margin:0;font-size:1.02rem} body.teyvat .shell-result-body .reward-preview{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} body.teyvat .shell-result-body .reward-preview>*{min-width:96px;padding:10px 12px;border-radius:10px;background:var(--t-cream);color:var(--t-ink);font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.35);animation:shellIn .4s ease-out backwards} body.teyvat .shell-result-body .reward-preview>*:nth-child(2){animation-delay:.06s}body.teyvat .shell-result-body .reward-preview>*:nth-child(3){animation-delay:.12s}body.teyvat .shell-result-body .reward-preview>*:nth-child(4){animation-delay:.18s}body.teyvat .shell-result-body .reward-preview>*:nth-child(n+5){animation-delay:.24s} body.teyvat .shell-result-body .card{width:100%;text-align:left} body.teyvat .shell-result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px} body.teyvat .shell-result-actions button{min-width:200px;min-height:50px;justify-content:center;text-align:center} /* ---------- chat ---------- */ body.teyvat .hud-tool{position:relative} body.teyvat .hud-badge{position:absolute;top:-2px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e8604c;color:#fff;font:700 .66rem/18px system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #0b0e18} body.teyvat .hud-chat.active{background:var(--t-cream);color:var(--t-ink)} .chat-window{position:fixed;z-index:330;right:16px;bottom:16px;width:min(380px,calc(100vw - 32px));height:min(520px,calc(100dvh - var(--hud-h,62px) - 40px));display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:rgba(12,15,26,.94);border:1px solid rgba(211,188,142,.4);box-shadow:0 24px 60px rgba(0,0,0,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#f3eee4;transform:translateY(16px);opacity:0;transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .18s} .chat-window.open{transform:none;opacity:1} .chat-window>.chat-head{height:auto;min-height:0} /* 0.15.25: not the old 84px page header (style.css `header`) */ .chat-window .shell-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .chat-head{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 14px;border-bottom:1px solid rgba(211,188,142,.18);background:linear-gradient(90deg,rgba(211,188,142,.12),transparent)} .chat-head strong{font-family:'Gowun Batang',serif;font-size:1rem} .chat-head small{padding:1px 8px;border-radius:8px;background:rgba(255,255,255,.08);color:#d3bc8e;font-size:.72rem} .chat-close{margin-left:auto;width:32px;height:32px;min-height:32px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(236,229,216,.2);color:#ece5d8;cursor:pointer} .chat-list{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin} .chat-empty{margin:auto;color:#a9a397;font-size:.86rem;text-align:center} .chat-line{position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;column-gap:8px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.04);animation:shellIn .25s ease-out} .chat-line.own{background:rgba(211,188,142,.12)} .chat-line.deleted .chat-text{font-style:italic;color:#8d877c} .chat-author{font-size:.82rem;color:hsl(var(--h,40),70%,74%);display:flex;align-items:center;gap:4px} .chat-staff{font-size:.62rem;padding:0 6px;border-radius:6px;background:#d3bc8e;color:#2b2f3a} .chat-time{font-size:.68rem;color:#8d877c} .chat-text{grid-column:1/-1;margin:2px 0 0;font-size:.9rem;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap} .chat-tools{position:absolute;top:4px;right:6px;display:none;gap:4px} .chat-line:hover .chat-tools,.chat-line:focus-within .chat-tools{display:flex} .chat-tools button{min-height:24px;padding:0 8px;border-radius:12px;font-size:.68rem;background:rgba(10,12,20,.85);border:1px solid rgba(236,229,216,.25);color:#ece5d8;cursor:pointer} .chat-muted{margin:0 12px 6px;min-height:28px;padding:2px 10px;border-radius:14px;font-size:.72rem;background:transparent;border:1px dashed rgba(236,229,216,.3);color:#bdb6a9;cursor:pointer} .chat-form{display:flex;align-items:center;gap:6px;padding:10px 12px;border-top:1px solid rgba(211,188,142,.18)} .chat-form input{flex:1;min-width:0;min-height:40px;padding:8px 12px;border-radius:20px;background:rgba(5,7,12,.6);border:1px solid rgba(236,229,216,.22);color:#f3eee4;font:inherit} .chat-form input:focus{outline:2px solid rgba(243,223,174,.7);outline-offset:1px} .chat-count{font-size:.66rem;color:#8d877c;min-width:46px;text-align:right} .chat-send{min-height:40px;padding:6px 14px;border-radius:20px;background:#ece5d8;color:#39404f;border:0;font-weight:700;cursor:pointer} .chat-send:disabled{opacity:.5} /* 0.14.13 phones: the chat opens from the bottom, right above the dock, and a round button there opens it (app_chat.js). */ .chat-fab{display:none} @media (max-width:760px) and (min-height:501px){ .chat-window{right:0;left:0;width:auto;bottom:var(--dock-h,60px);height:min(56dvh,460px);border-radius:16px 16px 0 0;border-bottom:0} body.teyvat:is([data-mode=world],[data-mode=menu]) .chat-fab:not([hidden]){display:grid} .chat-fab{position:fixed;z-index:47;left:10px;bottom:calc(var(--dock-h,60px) + 12px);width:46px;height:46px;min-height:0;margin:0;padding:0;place-items:center;border-radius:50%;background:rgba(12,15,26,.92);border:1px solid rgba(211,188,142,.55);color:#f3dfae;box-shadow:0 6px 16px rgba(0,0,0,.45);cursor:pointer} .chat-fab .shell-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .chat-fab .hud-badge{top:-3px;right:-3px} } /* ---------- trade ---------- */ .trade-overlay{position:fixed;inset:0;z-index:335;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at 40% 30%,rgba(46,56,86,.5),rgba(5,7,12,.9));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .18s} .trade-overlay.open{opacity:1} .trade-overlay .shell-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .trade-box{width:min(820px,100%);height:min(720px,calc(100dvh - 32px));display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#efe8db,#e6dccb);color:#39404f;border:1px solid rgba(211,188,142,.5);box-shadow:0 30px 90px rgba(0,0,0,.6)} .trade-head{display:flex;align-items:center;gap:10px;padding:16px 18px;background:linear-gradient(90deg,#1b2131,#262e43);color:#ece5d8} .trade-head strong{font-family:'Gowun Batang',serif;font-size:1.2rem;white-space:nowrap;flex-shrink:0} .trade-head small{color:#cfc8ba;font-size:.8rem;min-width:0} /* phones: the title keeps its line (it broke into 거/래/소); the line under it takes the next row */ @media (max-width:760px) and (min-height:501px){.trade-head{flex-wrap:wrap;row-gap:4px;padding:12px 14px}.trade-head small{order:3;flex-basis:100%}} .trade-glyph{width:34px!important;height:34px!important;padding:6px;border-radius:50%;background:#ece5d8;color:#39404f} .trade-close{margin-left:auto;width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(236,229,216,.25);color:#ece5d8;cursor:pointer} .trade-tabs{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid rgba(57,64,79,.12)} .tr-btn{min-height:36px;padding:5px 14px;border-radius:18px;border:1px solid rgba(57,64,79,.2);background:#f8f4ec;color:#39404f;font:inherit;font-size:.86rem;cursor:pointer} .tr-btn:hover{border-color:#c9a86a;box-shadow:0 0 0 2px rgba(211,188,142,.35)} .tr-btn.active{background:#39404f;color:#ece5d8;border-color:#39404f} .tr-btn.primary{background:#39404f;color:#ece5d8;font-weight:700} .trade-body{flex:1;overflow:auto;padding:14px 18px 20px;display:flex;flex-direction:column;gap:10px} .trade-body>*{flex-shrink:0} /* every part keeps its height and the body scrolls (the shop spilled out of its box on phones) */ .trade-note{margin:0;font-size:.84rem;color:#6b6f7c} .trade-note.warn{color:#9a3b2c} .trade-card{padding:12px 14px;border-radius:14px;background:#f8f4ec;border:1px solid rgba(57,64,79,.1)} .trade-card-top{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:6px} .trade-chip{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:9px;background:rgba(57,64,79,.1)} .trade-chip.ok{background:#dbeed4;color:#35683a}.trade-chip.wait{background:#efe0c4;color:#8a5a19}.trade-chip.warn{background:#f3d6d0;color:#9a3b2c}.trade-chip.muted{color:#8a8e99} .trade-line{margin:2px 0;font-size:.86rem} .trade-line b{display:inline-block;min-width:54px;color:#8a6d3b;margin-right:6px} .trade-memo{margin:4px 0 0;font-size:.82rem;color:#5b6272;font-style:italic} .trade-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:8px} .trade-new{display:flex;flex-direction:column;gap:8px} .trade-new h3{margin:8px 0 0;font-size:.95rem;color:#8a6d3b} .trade-new input[type=text],.trade-new input:not([type]),.trade-new input[type=search]{min-height:40px;padding:8px 12px;border-radius:12px;border:1px solid rgba(57,64,79,.2);background:#fffdf8;color:#39404f;font:inherit} .trade-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;max-height:240px;overflow:auto;padding:2px} .trade-pick.small{max-height:160px} .trade-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:#f8f4ec;border:1px solid rgba(57,64,79,.1);font-size:.84rem} .trade-row.picked{border-color:#c9a86a;background:#f6ecd4} .trade-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .trade-row small{color:#8a8e99;font-size:.72rem} .trade-row input[type=number]{width:64px;min-height:30px;padding:2px 6px;border-radius:8px;border:1px solid rgba(57,64,79,.2);background:#fff;color:#39404f} .trade-wanted{display:flex;flex-wrap:wrap;gap:6px} .tr-x{min-height:20px;padding:0 6px;border-radius:10px;border:0;background:transparent;cursor:pointer;color:inherit} .trade-send{align-self:flex-end;margin-top:8px;min-height:44px;padding:8px 20px} body.teyvat .trade-rule{margin:10px 0 0;padding:6px 10px;border-radius:10px;font-size:.8rem;font-weight:600} body.teyvat .trade-rule.ok{background:rgba(120,200,140,.14);color:#a8e0b4;border:1px solid rgba(120,200,140,.3)} body.teyvat .trade-rule.bound{background:rgba(232,120,100,.1);color:#f0b2a6;border:1px solid rgba(232,120,100,.25)} /* ---------- small fixes: dock labels, tab scrollbars, version chip ---------- */ body.teyvat .hud-nav-short{display:none} body.teyvat .shell-tabbar,body.teyvat .hb-tabs,body.teyvat nav.hud-nav{scrollbar-width:none} body.teyvat .shell-tabbar::-webkit-scrollbar,body.teyvat nav.hud-nav::-webkit-scrollbar{display:none} body.teyvat #game-version{position:fixed;right:8px;bottom:6px;z-index:40;min-height:0;padding:1px 8px;font-size:.66rem;line-height:1.5;opacity:.5;background:rgba(8,10,16,.5);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:var(--t-muted)} body.teyvat #game-version:hover{opacity:1} @media (max-width:760px) and (min-height:501px){ body.teyvat nav.hud-nav .hud-nav-label{display:none} body.teyvat nav.hud-nav .hud-nav-short{display:block;font-size:.64rem;font-weight:600;line-height:1.2} body.teyvat #game-version{bottom:calc(var(--dock-h) + 6px)} } .game-title button.title-start:not(:disabled){animation:shellTitlePulse 2.6s ease-in-out infinite} /* 0.15.24: the words sit between the two ✦ (the plain button rule set them to the left, over the left ✦). */ .game-title button.title-start{text-align:center;padding-left:44px;padding-right:44px} @keyframes shellTitlePulse{0%,100%{box-shadow:0 5px 26px #092f4a50,0 0 0 5px #ffffff1a}50%{box-shadow:0 8px 32px #092f4a60,0 0 0 8px #ffffff33,0 0 28px #fff6d880}} /* ---------- trade v2: tiles and trays ---------- */ .trade-box{width:min(1060px,100%)} .trade-body.tab-new{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:14px;overflow:hidden;padding:12px 16px 16px} .tr-picker,.tr-offer{min-height:0;display:flex;flex-direction:column;gap:8px;background:#f8f4ec;border:1px solid rgba(57,64,79,.1);border-radius:16px;padding:12px} .tr-offer{overflow:auto} .tr-offer h3,.tr-tray h3{margin:4px 0 2px;font-size:.9rem;color:#8a6d3b;font-family:'Gowun Batang',serif} .tr-modes{display:flex;gap:6px} .tr-mode{flex:1} .tr-mode.active,.tr-cat.active,.tr-person.active{background:#39404f;color:#ece5d8;border-color:#39404f} .tr-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .tr-cats{display:flex;gap:4px;flex-wrap:wrap} .tr-cat{min-height:30px;padding:2px 12px;font-size:.78rem} .tr-search{flex:1;min-width:140px;min-height:34px;padding:4px 12px;border-radius:17px;border:1px solid rgba(57,64,79,.2);background:#fff;color:#39404f;font:inherit;font-size:.84rem} .tr-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;align-content:start;padding:4px 2px} .tr-tile{position:relative;display:flex;flex-direction:column;align-items:stretch;padding:0;border:1px solid transparent;border-radius:8px;overflow:hidden;background:#ece5d8;color:#39404f;cursor:pointer;font:inherit;min-height:0;transition:transform .15s,box-shadow .15s} .tr-tile:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 0 2px #fff,0 6px 16px rgba(57,64,79,.3)} .tr-tile:disabled{opacity:.55;cursor:default} .tr-tile.in-tray{box-shadow:0 0 0 3px #c9a86a} .tr-art{display:grid;place-items:center;aspect-ratio:1/1;border-radius:0 0 16px 0;background:linear-gradient(160deg,#5d6270,#8c909b)} .tr-tile.tier-2 .tr-art{background:linear-gradient(160deg,#3f6b52,#6c9f80)}.tr-tile.tier-3 .tr-art{background:linear-gradient(160deg,#415f98,#6f94cf)}.tr-tile.tier-4 .tr-art{background:linear-gradient(160deg,#5d4c93,#9a7fd0)}.tr-tile.tier-5 .tr-art{background:linear-gradient(160deg,#9a6230,#d7a458)} .tr-art .item-icon{width:78%;height:78%;object-fit:contain} .tr-art .item-glyph{font-size:1.6rem} .tr-count{font-size:.7rem;font-weight:700;line-height:1.5;text-align:center} .tr-name{font-size:.62rem;line-height:1.3;padding:0 4px 4px;color:#5b6272;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center} .tr-badge{position:absolute;top:4px;right:4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#39404f;color:#f3dfae;font-size:.7rem;font-weight:700;line-height:20px;text-align:center} .tr-people{display:flex;flex-wrap:wrap;gap:6px} .tr-person{min-height:32px;padding:3px 12px;font-size:.82rem} .tr-id,.tr-note{min-height:38px;padding:6px 12px;border-radius:12px;border:1px solid rgba(57,64,79,.2);background:#fff;color:#39404f;font:inherit;font-size:.86rem} .tr-tray{display:flex;flex-direction:column;gap:6px} .tr-tray-list{display:flex;flex-direction:column;gap:6px} .tr-tray-item{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px;border-radius:12px;background:#fff;border:1px solid rgba(57,64,79,.1);animation:shellIn .2s ease-out} .tr-tray-item .tr-tile{width:62px} .tr-tray-info{display:flex;flex-direction:column;gap:4px;min-width:0} .tr-tray-info>span{font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tr-stepper{display:flex;align-items:center;gap:4px} .tr-step{min-height:28px;width:28px;padding:0;border-radius:14px;text-align:center} .tr-stepper input{width:56px;min-height:28px;padding:2px 6px;border-radius:8px;border:1px solid rgba(57,64,79,.2);text-align:center;font:inherit;font-size:.84rem} .trade-note.small{font-size:.78rem;margin-top:4px} .trade-note.empty{text-align:center;padding:40px 0} .trade-send{align-self:stretch;margin-top:6px} .trade-send:disabled{opacity:.45;cursor:default} .tr-offer-row{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;align-items:center;margin:6px 0} .tr-offer-row b{font-size:.8rem;color:#8a6d3b} .tr-offer-tiles{display:flex;flex-wrap:wrap;gap:6px} .tr-offer-tiles .tr-tile{width:68px} .trade-card-top small{margin-left:auto;margin-right:8px;color:#8a8e99;font-size:.74rem} body.teyvat .trade-bag-add{margin-top:8px;width:100%} @media (max-width:760px) and (min-height:501px){.trade-body.tab-new{grid-template-columns:1fr;overflow:auto}.tr-picker{max-height:52vh}.tr-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}} .tr-grid{grid-auto-rows:max-content} .tr-tile{flex:0 0 auto} .tr-art{aspect-ratio:auto;height:70px;flex:0 0 70px} .tr-tray-item .tr-art,.tr-offer-tiles .tr-art{height:56px;flex-basis:56px} .tr-stepper input{background:#fff;color:#39404f;max-width:none;width:56px} .trade-overlay input[type=number]::-webkit-inner-spin-button{opacity:.4} /* ---------- battle on phones ---------- */ @media (max-width:760px) and (min-height:501px){ body.teyvat .panel.combat-panel{gap:6px} body.teyvat .combat-panel>.battle-heading h1{font-size:1rem} body.teyvat .combat-panel>.battle-heading .battle-formation{display:none} body.teyvat .combat-panel .battle-teams.compact-teams{grid-template-columns:minmax(0,1fr)} body.teyvat .combat-panel .shell-enemies{--enemy-h:96px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));min-height:0;gap:8px} body.teyvat .combat-panel .shell-enemies .combatant-copy .stat{display:none} body.teyvat .combat-panel .shell-enemies .combatant-row>button{min-height:26px;padding:0 10px;font-size:.7rem} body.teyvat .combat-panel .shell-allies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} body.teyvat .combat-panel .shell-allies>h2{grid-column:1/-1} body.teyvat .combat-panel .shell-allies .combatant-row{min-height:0;padding:4px 8px 4px 4px;gap:6px} body.teyvat .combat-panel .shell-allies .combat-portrait,body.teyvat .combat-panel .shell-allies .combat-player-mark{width:34px;height:34px;flex-basis:34px} body.teyvat .combat-panel .shell-allies .combatant-copy small,body.teyvat .combat-panel .shell-allies .combatant-copy .battle-position{display:none} body.teyvat .combat-panel .shell-allies .combatant-row::before{display:none} body.teyvat .combat-panel .battle-command{padding:8px;gap:8px} body.teyvat .combat-panel .battle-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%} body.teyvat .combat-panel .battle-card-choice{flex-direction:column;align-items:stretch} body.teyvat .combat-panel .battle-cards button[data-card-id]{grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;min-width:0;min-height:0;padding:6px 2px 4px;border-radius:14px;border-right:1px solid rgba(236,229,216,.22);text-align:center} body.teyvat .combat-panel .battle-cards button[data-card-id] .shell-card-glyph{grid-row:1;width:40px;height:40px} body.teyvat .combat-panel .battle-cards button[data-card-id] strong{grid-column:1;font-size:.68rem;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.teyvat .combat-panel .battle-cards button[data-card-id] small{display:none} body.teyvat .combat-panel .battle-cards button[data-cd]::before{left:50%;top:6px;margin:0 0 0 -20px;width:40px;height:40px} body.teyvat .combat-panel .battle-effect-button{border-radius:10px;min-height:22px;padding:0;font-size:.62rem;margin-top:3px} body.teyvat .combat-panel .battle-execute{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px} body.teyvat .combat-panel .battle-execute select{min-width:0;min-height:44px} body.teyvat .combat-panel .battle-execute button.primary{min-width:120px;min-height:44px;font-size:.92rem} body.teyvat .combat-panel .battle-command .combat-speed{display:none} body.teyvat .combat-panel>.battle-details{display:none} body.teyvat .shell-battle-feed{font-size:.7rem} } @media (max-width:760px) and (min-height:501px){ body.teyvat .combat-panel .shell-enemies .combatant-row{display:flex;flex-direction:column;align-items:center} body.teyvat .combat-panel .shell-enemies .combatant-copy strong{font-size:.8rem} body.teyvat .combat-panel .shell-allies .combatant-copy .stat{font-size:.64rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.teyvat .combat-panel .shell-allies .combatant-copy strong{font-size:.8rem} } /* ---------- placeholders, bag readability, about ---------- */ body.teyvat .portrait-placeholder{overflow:hidden;line-height:1;background:radial-gradient(circle at 50% 42%,rgba(var(--acc-rgb),.38),rgba(20,24,40,.92) 72%);color:var(--t-gold-hi);text-shadow:0 0 12px rgba(var(--acc-rgb),.7);border-radius:12px} body.teyvat .formation-row .portrait-placeholder{font-size:1.05rem;border-radius:10px} body.teyvat .shell-roster-face.portrait-placeholder{font-size:1.3rem;border-radius:50%} body.teyvat .party-cols .party-portrait.portrait-placeholder{font-size:3.4rem} body.teyvat .gear-member-head .portrait-placeholder{font-size:2rem} body.teyvat .combat-panel .combat-player-mark{float:none;display:grid;place-items:center;overflow:hidden;font-size:1.4rem;line-height:1;color:var(--t-gold-hi);background:radial-gradient(circle at 50% 42%,rgba(var(--acc-rgb),.4),rgba(20,24,40,.95) 72%)} body.teyvat .bag-cols .bag-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px} body.teyvat .bag-cols .bag-detail{font-size:.95rem;line-height:1.65;padding:16px 18px} body.teyvat .bag-detail h2{font-size:1.35rem;margin:6px 0 4px} body.teyvat .bag-detail .item-effect{background:rgba(255,255,255,.05);border:1px solid rgba(211,188,142,.18);border-radius:12px;padding:10px 12px;white-space:pre-line} body.teyvat .bag-detail .item-detail-fields{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:10px 0} body.teyvat .bag-detail .item-detail-fields dt{color:var(--t-gold);font-size:.84rem} body.teyvat .bag-detail .item-detail-fields dd{margin:0;color:#fff;font-size:.9rem} body.teyvat .shell-item-hero{position:relative;display:grid;place-items:center;height:150px;margin:-4px -4px 10px;border-radius:14px 14px 40px 14px;background:linear-gradient(160deg,#5d6270,#8c909b);box-shadow:inset 0 -40px 60px rgba(0,0,0,.18)} body.teyvat .shell-item-hero.tier-2{background:linear-gradient(160deg,#3f6b52,#6c9f80)}body.teyvat .shell-item-hero.tier-3{background:linear-gradient(160deg,#415f98,#6f94cf)}body.teyvat .shell-item-hero.tier-4{background:linear-gradient(160deg,#5d4c93,#9a7fd0)}body.teyvat .shell-item-hero.tier-5{background:linear-gradient(160deg,#9a6230,#d7a458)} body.teyvat .shell-item-hero .item-icon{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));animation:shellIn .3s ease-out} body.teyvat .shell-item-hero .item-glyph{font-size:3.4rem} body.teyvat .shell-item-stars{position:absolute;left:12px;bottom:8px;color:#ffd97a;letter-spacing:2px;font-size:.9rem;text-shadow:0 1px 3px rgba(0,0,0,.5)} .shell-disclaimer{margin:6px 0 10px;padding:12px 14px;border-radius:12px;font-size:.86rem;line-height:1.7;background:rgba(255,255,255,.04);border:1px solid rgba(211,188,142,.2);word-break:keep-all;overflow-wrap:anywhere} .shell-official{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:18px;background:#ece5d8;color:#39404f!important;font-weight:700;text-decoration:none} .shell-official::after{content:'↗';font-size:.9em} .shell-official:hover{box-shadow:0 0 0 2px rgba(243,223,174,.7)} body.teyvat .shell-sound-group{margin:10px 0 4px} body.teyvat .shell-sound-group h4{margin:8px 0 6px;color:var(--t-gold);font-size:.9rem;font-family:var(--font-display)} body.teyvat .shell-sound-pick{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px;border-radius:12px;background:rgba(255,255,255,.03);margin-bottom:4px} body.teyvat .shell-sound-name{min-width:84px;font-size:.86rem;font-weight:600} body.teyvat .shell-sound-choice{display:inline-flex;margin-left:auto;border-radius:16px;overflow:hidden;border:1px solid rgba(236,229,216,.25)} body.teyvat :where(#root,#modal) .shell-sound-opt{min-height:30px;padding:2px 12px;border-radius:0;border:0;font-size:.78rem;background:transparent} body.teyvat :where(#root,#modal) .shell-sound-opt.active{background:var(--t-cream);color:var(--t-ink);font-weight:700} body.teyvat .shell-sound-pick.variants{align-items:flex-start} body.teyvat .shell-sound-pick.variants .shell-sound-name{padding-top:6px} body.teyvat .shell-sound-variants{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 260px} body.teyvat :where(#root,#modal) .shell-sound-variants .shell-sound-opt{border:1px solid rgba(236,229,216,.25);border-radius:16px;padding:3px 12px;text-align:left} body.teyvat :where(#root,#modal) .shell-sound-variants .shell-sound-opt:hover{border-color:rgba(var(--acc-rgb),.7)} body.teyvat :where(#root,#modal) .shell-sound-variants .shell-sound-opt.active::before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--t-ink);vertical-align:middle} /* The title screen's settings window sits outside the shell: keep its rows readable and style the sound picker. */ #modal .settings-row select{width:auto;min-width:120px;flex:0 0 auto} #modal .settings-row .copy{flex:1;min-width:0} #modal .shell-sound-gallery{margin:14px 0;padding:12px 14px;border:1px solid rgba(236,229,216,.16);border-radius:12px} #modal .shell-sound-gallery h3{margin:0 0 6px} #modal .shell-sound-group h4{margin:10px 0 6px;font-size:.9rem;color:#d3bc8e} #modal .shell-sound-pick{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.035);margin-bottom:4px} #modal .shell-sound-pick.variants{align-items:flex-start} #modal .shell-sound-name{min-width:84px;font-size:.86rem;font-weight:600} #modal .shell-sound-choice{display:inline-flex;margin-left:auto;border-radius:16px;overflow:hidden;border:1px solid rgba(236,229,216,.25)} #modal .shell-sound-variants{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 240px} #modal button.shell-sound-chip,#modal button.shell-sound-opt{width:auto;min-height:32px;padding:3px 12px;font-size:.8rem;border-radius:16px} #modal .shell-sound-choice button.shell-sound-opt{border:0;border-radius:0;background:transparent} #modal button.shell-sound-opt.active{background:#ece5d8;color:#1d1b24;font-weight:700} /* Title screen: on short desktop windows (and the 1280×720 PC frame) the centre column's large top/bottom padding pushed the footer below the fold; trim it so the whole title fits without scrolling. */ @media (min-width:900px) and (max-height:830px){ .game-title .title-center{padding-top:10px;padding-bottom:14px} .game-title .title-tagline{margin-bottom:28px} } /* ---------- 시설 화면 (app_places_v01411.js): host on the left, what the place offers as tabs on the right ---------- */ body.teyvat .shell-place-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:18px;padding:16px 18px 18px;overflow:hidden} body.teyvat .shell-place-host{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;scrollbar-width:thin} body.teyvat .shell-place-figure{position:relative;margin:0;flex:0 0 auto;border-radius:16px;overflow:hidden;border:1px solid rgba(211,188,142,.32);background:rgba(255,255,255,.04);aspect-ratio:4/3;box-shadow:0 10px 28px rgba(0,0,0,.35)} body.teyvat .shell-place-figure.portrait{aspect-ratio:4/5;max-height:54vh} body.teyvat .shell-place-figure.empty{aspect-ratio:auto;min-height:96px} body.teyvat .shell-place-figure img{display:block;width:100%;height:100%;max-width:none;margin:0;border-radius:0;object-fit:cover;object-position:50% 20%} body.teyvat .shell-place-plate{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:30px 14px 12px;background:linear-gradient(rgba(8,10,18,0),rgba(8,10,18,.92))} body.teyvat .shell-place-figure.empty .shell-place-plate{position:static;background:none;padding:14px} body.teyvat .shell-place-plate strong{font-size:1.15rem;color:var(--t-cream);text-shadow:0 2px 8px #000} body.teyvat .shell-place-kind{margin:0;font-size:.78rem;color:var(--t-gold-hi)} body.teyvat .shell-place-greet{margin:0;padding:12px 14px;border-radius:12px;background:rgba(211,188,142,.1);border-left:3px solid var(--t-gold);font-size:.92rem;line-height:1.65;color:var(--t-text)} body.teyvat .shell-place-actions{display:flex;flex-wrap:wrap;gap:8px} body.teyvat .shell-place-actions button{flex:1 1 120px;min-height:40px;margin:0} body.teyvat .shell-place-main{min-height:0;display:flex;flex-direction:column;overflow:hidden;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid rgba(211,188,142,.12)} body.teyvat .shell-place-tabs{flex:1;min-height:0} body.teyvat .shell-place-tabs.single>.shell-tabbar{display:flex} body.teyvat .shell-page-head .market-tabs>button{flex:0 0 auto;min-width:112px;width:auto} body.teyvat .shell-place-tabs>.shell-panes{padding:4px 14px 16px;scrollbar-width:thin} body.teyvat .shell-place-empty{padding:18px} body.teyvat .shell-place-notes{margin:4px 0 10px} body.teyvat .shell-place-notes h2{font-size:1rem;margin:0 0 6px;color:var(--t-gold-hi)} body.teyvat .shell-place-notes p{margin:0 0 6px;font-size:.85rem;line-height:1.6} body.teyvat .shell-place-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start} body.teyvat .shell-place-grid>.card{margin:0} body.teyvat .shell-page-tools button.shell-leave{background:rgba(255,255,255,.06)} /* Shops that also introduce companion missions: 상점 and 동료 영입 임무 as tabs instead of a squeezed strip. */ body.teyvat .shell-page-body.shop-with-stories{display:flex;flex-direction:column;overflow:hidden;padding-top:6px} body.teyvat .shell-shop-tabs{flex:1;min-height:0} body.teyvat .shell-shop-tabs>.shell-tabbar{padding:4px 0 10px} body.teyvat .shell-shop-tabs>.shell-panes{overflow:auto;scrollbar-width:thin} body.teyvat .shell-shop-tabs .shop-main{height:100%;overflow:auto} /* ---------- 편성 (app_party_v01411.js): the cards are the battle line; press, hold and drag to swap ---------- */ body.teyvat .party-cols .shell-line-help{margin:0 0 8px;font-size:.82rem;line-height:1.55} body.teyvat .shell-battle-line>.shell-draggable{cursor:grab;transition:transform .12s ease,box-shadow .2s ease;user-select:none} /* 0.15.2: only a mouse drags a card; a finger on a card scrolls the page (◀ ▶ move the cards) */ @media (pointer:fine){body.teyvat .shell-battle-line>.shell-draggable .member-select{touch-action:none}} body.teyvat .shell-line-head{display:flex;align-items:center;gap:6px} body.teyvat .shell-line-head .slot-label{flex:1;min-width:0;text-align:center;line-height:1.3} body.teyvat :where(#root) button.shell-line-move{flex:0 0 auto;width:34px;height:34px;min-height:34px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:.8rem;line-height:1} body.teyvat .shell-battle-line>.shell-draggable.dragging{cursor:grabbing;position:relative;z-index:30;transition:none;box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 0 2px rgba(243,223,174,.85)} body.teyvat .shell-battle-line>.drop-target{box-shadow:0 0 0 2px #f3dfae,0 0 24px rgba(243,223,174,.45)} body.teyvat .shell-battle-line .slot-label.front{color:#ffb38a} body.teyvat .shell-battle-line .slot-label.back{color:#8fd3ff} body.teyvat .shell-presets{display:flex;flex-direction:column;gap:8px;margin:0 0 12px} body.teyvat .shell-presets>h2{margin:0;font-size:1rem} body.teyvat .shell-presets-help{margin:0;font-size:.8rem;line-height:1.5} body.teyvat .shell-preset-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} body.teyvat .shell-presets.compact .shell-preset-chips{grid-template-columns:repeat(6,minmax(0,1fr))} body.teyvat :where(#root) button.shell-preset-chip{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:66px;margin:0;padding:8px 10px;border-radius:12px;text-align:left;background:rgba(255,255,255,.05)} body.teyvat :where(#root) button.shell-preset-chip.active{border-color:#f3dfae;background:rgba(243,223,174,.12);box-shadow:0 0 0 1px rgba(243,223,174,.6)} body.teyvat .shell-preset-chip small{font-size:.66rem;color:var(--t-muted)} body.teyvat .shell-preset-chip strong{max-width:100%;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.teyvat .shell-preset-chip.empty strong{color:var(--t-muted);font-weight:500} body.teyvat .shell-preset-faces{display:flex;gap:2px} body.teyvat .shell-preset-faces>*{width:22px;height:22px;flex:0 0 22px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.25);font-size:.62rem;display:grid;place-items:center;overflow:hidden} body.teyvat .shell-preset-detail{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.22)} body.teyvat .shell-preset-members{margin:0;font-size:.86rem} body.teyvat .shell-preset-actions{display:flex;flex-wrap:wrap;gap:6px;margin:0} body.teyvat .shell-preset-actions button{flex:1 1 120px;min-height:36px;margin:0} body.teyvat .shell-preset-name{display:flex;gap:6px} body.teyvat .shell-preset-name input{flex:1;min-width:0} @media (max-width:760px) and (min-height:501px){ /* 0.14.13: the rows shared the screen height, so the place's own column was squeezed under its picture and its tabs and buttons drew over each other; here the parts stack at full height and the page scrolls. */ body.teyvat .shell-place-body{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto;flex:0 0 auto;min-height:auto;overflow:visible;padding:10px} body.teyvat .shell-place-figure,body.teyvat .shell-place-figure.portrait{aspect-ratio:16/9;max-height:none} body.teyvat .shell-place-main{overflow:visible;min-height:auto} body.teyvat .shell-place-tabs{flex:0 0 auto;min-height:auto} body.teyvat .shell-place-tabs>.shell-panes{overflow:visible} body.teyvat .shell-place-grid{grid-template-columns:1fr} } /* ---------- 기원 (app_wish_v01411.js): banners, a falling star, reveals on the original backgrounds, results ---------- */ .wish-screen{position:fixed;inset:0;z-index:2000;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:12px 18px 14px;color:#ece5d8;background:radial-gradient(ellipse at 50% 125%,#2f4374 0%,#151c37 46%,#070a17 100%);overflow:hidden;font-family:inherit} .wish-sky,.wish-stage-sky{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 32% 62%,#fffc,transparent),radial-gradient(1.2px 1.2px at 48% 8%,#fff,transparent),radial-gradient(1px 1px at 66% 36%,#fffb,transparent),radial-gradient(1.6px 1.6px at 84% 14%,#fff,transparent),radial-gradient(1px 1px at 92% 70%,#fffa,transparent),radial-gradient(1px 1px at 22% 84%,#fff9,transparent),radial-gradient(1.3px 1.3px at 74% 88%,#fffb,transparent),radial-gradient(1px 1px at 4% 46%,#fff9,transparent),radial-gradient(1px 1px at 56% 70%,#fff8,transparent)} .wish-sky{opacity:.75;animation:wish-twinkle 5s ease-in-out infinite alternate} @keyframes wish-twinkle{from{opacity:.45}to{opacity:.85}} .wish-top{position:relative;display:flex;align-items:center;gap:14px;min-width:0} .wish-title{display:flex;align-items:center;gap:8px;margin:0;font-size:1.3rem;letter-spacing:.1em;white-space:nowrap} .wish-title-star{color:#f3dfae;text-shadow:0 0 12px #f3dfae} .wish-tabs{display:flex;gap:8px;margin-right:auto;min-width:0} .wish-screen button{font:inherit;cursor:pointer} .wish-screen button:disabled{cursor:default;opacity:.55} .wish-screen button.wish-tab{position:relative;display:flex;align-items:flex-end;width:178px;height:60px;padding:0 12px 7px;border-radius:12px;overflow:hidden;border:1.5px solid rgba(255,255,255,.2);background:linear-gradient(120deg,#26305a,#1a2140);color:#ece5d8;box-shadow:none;transform:none} .wish-tab-face{position:absolute;right:-14px;top:-26px;width:120px;opacity:.85;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)} .wish-tab-name{position:relative;font-size:.8rem;font-weight:700;text-shadow:0 1px 3px #000} .wish-screen button.wish-tab.active{border-color:#f3dfae;box-shadow:0 0 0 2px rgba(243,223,174,.35),0 0 20px rgba(243,223,174,.28)} .wish-wallet{display:flex;gap:8px;flex:none} .wish-chip{display:flex;align-items:center;gap:6px;padding:4px 5px 4px 6px;border-radius:17px;background:rgba(0,0,0,.38);font-variant-numeric:tabular-nums;white-space:nowrap} .wish-chip b{min-width:2ch;padding-right:4px} .wish-cur{width:26px;height:26px;object-fit:contain;flex:none} .wish-cur.small{width:20px;height:20px} .wish-cur.fallback{display:inline-grid;place-items:center;color:#9fdcff} .wish-screen button.wish-plus{width:22px;height:22px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;background:#ece5d8;color:#3b4255;font-weight:800;border:0;line-height:1} .wish-screen button.wish-close{position:relative;flex:none;width:38px;height:38px;min-height:0;padding:0;border-radius:50%;background:#ece5d8;color:#3b4255;font-size:0;line-height:0;text-align:center;border:0;box-shadow:0 2px 8px rgba(0,0,0,.4)} /* 0.14.12: the × is drawn, centred; the base button style left-aligned the text glyph */ .wish-screen button.wish-close::before,.wish-screen button.wish-close::after{content:'';position:absolute;left:50%;top:50%;width:46%;height:2.5px;border-radius:2px;background:currentColor;translate:-50% -50%;rotate:45deg} .wish-screen button.wish-close::after{rotate:-45deg} .wish-screen button.wish-close:hover{filter:brightness(1.06)} .wish-banner{position:relative;display:grid;grid-template-columns:minmax(300px,40%) 1fr;min-height:0;border-radius:18px;overflow:hidden;background:var(--wish-bg,none) center/cover no-repeat,#e9e3d6;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 2px rgba(243,223,174,.55);animation:wish-banner-in .35s ease-out} @keyframes wish-banner-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .wish-banner-art{position:absolute;top:0;right:0;bottom:0;width:64%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)} .wish-banner-art img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;animation:wish-art-in .9s cubic-bezier(.2,.8,.2,1)} .wish-banner-art::after{content:'';position:absolute;inset:14px 14px 14px 24%;border:1px solid rgba(255,255,255,.6);border-radius:10px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.12);pointer-events:none} .wish-banner-info{position:relative;grid-column:1;display:flex;flex-direction:column;gap:7px;padding:22px 22px 18px;color:#3b4255;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.62) 78%,transparent);overflow:auto} .wish-kind{align-self:flex-start;padding:2px 12px;border-radius:11px;background:#3b4255;color:#ece5d8;font-size:.74rem;font-weight:700} .wish-up{font-weight:800;color:#d2683f;letter-spacing:.08em} body.teyvat .wish-screen h2.wish-banner-name{margin:0;font-size:2.2rem;line-height:1.1;color:#2d3245;text-shadow:0 1px 0 #fff} .wish-banner-meta{display:flex;gap:10px;align-items:center;margin:0;font-size:.84rem} .wish-stars{color:#f0b429;letter-spacing:.06em;text-shadow:0 1px 0 rgba(0,0,0,.18)} .wish-sub{margin-top:4px;color:#7b6aa8;font-weight:700} .wish-fours{display:flex;gap:10px} .wish-four{display:flex;flex-direction:column;align-items:center;gap:2px;width:76px;font-size:.72rem;text-align:center} .wish-four img{width:66px;height:66px;object-fit:cover;object-position:50% 12%;border-radius:12px;background:linear-gradient(#8c6bc4,#4d3b77);border:2px solid #b996ff;box-shadow:0 2px 6px rgba(0,0,0,.25)} .wish-four small{color:#9a6bff;font-size:.62rem} .wish-time,.wish-next{margin:0;font-size:.8rem} .wish-time{margin-top:4px;font-weight:700} .wish-note{margin:2px 0 0;font-size:.74rem;color:#5b6276;line-height:1.5} .wish-standard-faces{position:absolute;top:0;right:0;bottom:0;left:40%;display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(90deg,transparent,#000 14%)} .wish-strip{position:relative;flex:1 1 0;min-width:0;margin-left:-5%;clip-path:polygon(24% 0,100% 0,76% 100%,0 100%);overflow:hidden;animation:wish-art-in .8s cubic-bezier(.2,.8,.2,1) both} .wish-strip:nth-child(2){animation-delay:.06s}.wish-strip:nth-child(3){animation-delay:.12s}.wish-strip:nth-child(4){animation-delay:.18s}.wish-strip:nth-child(5){animation-delay:.24s} .wish-strip img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform .4s} .wish-strip:hover img{transform:scale(1.05)} .wish-strip span{position:absolute;bottom:16px;left:28%;font-weight:800;font-size:.9rem;color:#fff;text-shadow:0 1px 5px #000,0 0 2px #000} .wish-foot{position:relative;display:flex;align-items:center;gap:14px;min-width:0} .wish-foot-left{display:flex;gap:8px;flex-wrap:wrap} .wish-screen button.wish-ghost{min-height:34px;padding:4px 14px;border-radius:17px;background:rgba(236,229,216,.12);border:1px solid rgba(236,229,216,.38);color:#ece5d8;box-shadow:none} .wish-screen button.wish-ghost.active{background:#ece5d8;color:#3b4255} .wish-pity{display:flex;flex-direction:column;gap:2px;margin:0 0 0 auto;font-size:.74rem;color:#c9cfdf;text-align:right} .wish-guarantee{color:#f3dfae;font-weight:700} .wish-lock{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);max-width:min(620px,92vw);margin:0;padding:9px 18px;border-radius:20px;background:rgba(30,34,48,.88);border:1px solid rgba(243,223,174,.55);color:#f3dfae;font-size:.86rem;font-weight:700;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.4)} .wish-pulls{display:flex;gap:12px;flex:none} .wish-screen button.wish-pull{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:210px;min-height:64px;padding:6px 18px;border-radius:32px;background:linear-gradient(#fbf6ea,#e2d7bf);color:#4a4f5f;border:2px solid #fff;box-shadow:0 4px 0 #b7a98a,0 10px 24px rgba(0,0,0,.45);transform:none} .wish-screen button.wish-pull strong{font-size:1rem} .wish-screen button.wish-pull:hover:not(:disabled){filter:brightness(1.04)} .wish-screen button.wish-pull:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #b7a98a,0 6px 16px rgba(0,0,0,.4)} .wish-cost{display:flex;align-items:center;gap:4px;font-size:.82rem} .wish-panel-wrap{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(4,6,14,.55)} .wish-panel{width:min(640px,92%);max-height:86%;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:16px;background:#ece5d8;color:#3b4255;box-shadow:0 20px 60px rgba(0,0,0,.6)} .wish-panel-head{display:flex;align-items:center;gap:8px} body.teyvat .wish-screen .wish-panel h3{margin:0 auto 0 0;color:#3b4255;font-size:1.1rem} .wish-screen .wish-panel button.wish-close.small{width:30px;height:30px;font-size:0;background:#3b4255;color:#ece5d8} .wish-buy{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.3rem} .wish-buy .wish-cur{width:46px;height:46px} .wish-steps{display:flex;gap:6px;justify-content:center} .wish-screen .wish-panel button.wish-ghost{background:rgba(59,66,85,.08);color:#3b4255;border-color:rgba(59,66,85,.28)} .wish-screen .wish-panel button.wish-ghost.active{background:#3b4255;color:#ece5d8} .wish-screen button.wish-primary{align-self:center;min-width:190px;min-height:46px;padding:4px 22px;border-radius:23px;background:#3b4255;color:#ece5d8;border:0;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.25)} .wish-warn{margin:0;color:#c0492f;font-weight:600} .wish-panel .muted{color:#6b7184} .wish-rates{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.84rem;line-height:1.5} .wish-rates dt{font-weight:800;white-space:nowrap} .wish-rates dd{margin:0} .wish-pools p{margin:4px 0;font-size:.8rem;line-height:1.55} .wish-history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} .wish-history li{display:grid;grid-template-columns:86px minmax(0,1fr) 70px minmax(0,1.4fr);gap:8px;align-items:center;padding:6px 8px;border-radius:8px;background:rgba(59,66,85,.06);font-size:.8rem} .wish-history li.rarity-5{background:rgba(240,180,41,.2)} .wish-history li.rarity-4{background:rgba(160,120,230,.15)} .wish-panel select,.wish-panel input{min-height:38px} /* 0.14.12: the original wish video, then each result on its own */ .wish-stage{position:absolute;inset:0;z-index:10;overflow:hidden;background:radial-gradient(ellipse at 72% -4%,#2b3a6e,#0a0d1d 62%,#05060d)} /* The recordings carry the recorder's UID in the bottom-right corner (the bottom ~3.5% of the frame). Anchored to the top and enlarged 6%, that strip always falls below the screen, whatever the window's shape (user: 「UID 가려줘」). */ .wish-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.06);transform-origin:50% 0;pointer-events:none} .wish-stage.whiteout::after{content:'';position:absolute;inset:0;z-index:6;background:#fff;pointer-events:none;animation:wish-whiteout .6s ease-out forwards} @keyframes wish-whiteout{from{opacity:1}to{opacity:0}} .wish-screen .wish-stage button.wish-skip{position:absolute;top:14px;right:18px;z-index:7;min-height:34px;padding:4px 16px;border-radius:17px;background:rgba(236,229,216,.15);border:1px solid rgba(236,229,216,.55);color:#ece5d8;box-shadow:none} /* one result on the original reveal background */ .wish-reveal{position:absolute;inset:0;z-index:2;overflow:hidden;background:var(--wish-bg,none) center/cover no-repeat,#e8e2d4;cursor:pointer;--glow:#8fcbff;--cx:61%;--cy:50%;--cr:min(40vh,320px)} .wish-reveal.rarity-4{--glow:#c39bff} .wish-reveal.rarity-5{--glow:#ffcf5c} .wish-reveal-burst{position:absolute;left:var(--cx);top:var(--cy);width:140vmax;height:140vmax;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff 0,color-mix(in srgb,var(--glow) 80%,#fff) 5%,color-mix(in srgb,var(--glow) 36%,transparent) 19%,transparent 45%);translate:-50% -50%;scale:.15;opacity:0;animation:wish-burst 1s cubic-bezier(.2,.7,.2,1) forwards} .wish-reveal.rarity-3 .wish-reveal-burst{animation-duration:.6s} .wish-reveal.rarity-5 .wish-reveal-burst{animation-duration:1.4s} @keyframes wish-burst{0%{opacity:0;scale:.15}16%{opacity:1}100%{opacity:.5;scale:1}} .wish-reveal-rays{position:absolute;left:var(--cx);top:var(--cy);width:150vmax;height:150vmax;pointer-events:none;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--glow) 34%,transparent) 0 3deg,transparent 3deg 15deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 52%);mask:radial-gradient(circle,#000 0,transparent 52%);opacity:0;animation:wish-rays 1.4s .15s ease-out forwards,wish-spin 60s linear infinite} .wish-reveal.rarity-3 .wish-reveal-rays{display:none} @keyframes wish-rays{to{opacity:.6}} @keyframes wish-spin{to{rotate:360deg}} /* a companion: this game's own portrait (never official art), lit as it lands */ .wish-reveal-art{position:absolute;left:var(--cx);top:var(--cy);height:min(84vh,calc(var(--cr)*2.15));aspect-ratio:4/5;translate:-50% -50%;rotate:2deg;border-radius:20px;overflow:hidden;border:5px solid #fff;box-shadow:0 0 0 2px var(--glow),0 0 54px color-mix(in srgb,var(--glow) 70%,transparent),0 28px 60px rgba(0,0,0,.35);animation:wish-art-in .9s cubic-bezier(.16,.84,.24,1) both} .wish-reveal.rarity-5 .wish-reveal-art{animation-duration:1.3s;animation-delay:.2s} .wish-reveal-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%} .wish-reveal-sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);translate:-120% 0;animation:wish-sheen 1s .6s ease-in-out forwards} @keyframes wish-art-in{0%{opacity:0;transform:translateX(90px) rotate(5deg) scale(1.08);filter:brightness(3)}60%{opacity:1;filter:brightness(1.15)}100%{opacity:1;transform:none;filter:none}} @keyframes wish-sheen{to{translate:120% 0}} /* a weapon spins down into place */ .wish-reveal-weapon{position:absolute;left:var(--cx);top:var(--cy);width:calc(var(--cr)*1.3);aspect-ratio:1;translate:-50% -50%;animation:wish-weapon-in .8s cubic-bezier(.16,.84,.24,1) both} .wish-reveal-weapon img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--glow) 85%,#fff)) drop-shadow(0 18px 24px rgba(0,0,0,.25))} @keyframes wish-weapon-in{0%{opacity:0;transform:translateY(12%) scale(.6) rotate(-14deg);filter:brightness(4)}55%{opacity:1;filter:brightness(1.3)}100%{opacity:1;transform:none;filter:none}} .wish-reveal-info{position:absolute;left:8%;bottom:15%;max-width:min(520px,44%);display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:#2d3245} body.teyvat .wish-screen .wish-reveal-info h2.wish-reveal-name{margin:0;font-size:2.9rem;line-height:1.1;color:#2d3245;text-shadow:0 1px 0 #fff,0 0 18px rgba(255,255,255,.8);animation:wish-name-in .6s .3s both} .wish-reveal-stars{display:flex;gap:4px;font-size:1.9rem;line-height:1} .wish-reveal-stars span{display:inline-block;color:#f3b72d;text-shadow:0 0 10px rgba(243,183,45,.9),0 1px 0 #fff;opacity:0;animation:wish-star-pop .34s calc(.55s + var(--s) * .12s) cubic-bezier(.3,1.6,.5,1) forwards} .wish-reveal-sub{margin:0;font-size:.95rem;color:#4a5066;animation:wish-info-in .5s .85s both} .wish-reveal-gain{margin:0;font-size:.85rem;color:#7a5b16;font-weight:700;animation:wish-info-in .5s .95s both} .wish-reveal-up{padding:2px 12px;border-radius:11px;background:#d2683f;color:#fff;font-weight:800;font-size:.8rem;animation:wish-info-in .5s 1s both} @keyframes wish-name-in{from{opacity:0;translate:-36px 0}to{opacity:1;translate:0 0}} @keyframes wish-star-pop{0%{opacity:0;scale:2.4}100%{opacity:1;scale:1}} @keyframes wish-info-in{from{opacity:0;translate:-24px 0}to{opacity:1;translate:0 0}} .wish-reveal-hint{position:absolute;bottom:16px;left:50%;translate:-50% 0;margin:0;color:#5b6276;font-size:.8rem;opacity:0;transition:opacity .3s} .wish-reveal.settled .wish-reveal-hint{opacity:1} /* a click during the entrance shows the result at once */ .wish-reveal.settled :is(.wish-reveal-burst,.wish-reveal-art,.wish-reveal-sheen,.wish-reveal-weapon,.wish-reveal-name,.wish-reveal-stars span,.wish-reveal-sub,.wish-reveal-gain,.wish-reveal-up){animation-duration:.01ms!important;animation-delay:0s!important} .wish-reveal.leaving{animation:wish-out .16s forwards} @keyframes wish-out{to{opacity:0}} @media (max-aspect-ratio:1/1){ .wish-reveal{--cx:50%;--cy:33%} .wish-reveal-art{height:min(54vh,520px)} .wish-reveal-weapon{width:min(70vw,380px)} .wish-reveal-info{left:6%;right:6%;bottom:9%;max-width:none} body.teyvat .wish-screen .wish-reveal-info h2.wish-reveal-name{font-size:2.1rem} } @media (prefers-reduced-motion:reduce){.wish-reveal *{animation-duration:.01ms!important;animation-delay:0s!important}.wish-reveal-rays{display:none}} /* all results */ .wish-stage.summary{background:var(--wish-summary,none) center/cover no-repeat,#151a2b} .wish-summary{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;background:radial-gradient(ellipse at 50% 50%,rgba(10,14,28,.15),rgba(5,7,14,.55))} .wish-cards{display:flex;gap:10px;justify-content:center;align-items:stretch;width:100%;height:min(60vh,440px)} .wish-card{position:relative;flex:0 1 118px;min-width:0;border-radius:14px 14px 44px 44px/14px 14px 26px 26px;overflow:hidden;background:linear-gradient(180deg,#3a4a76,#1b2139);border:2px solid #7d93d3;box-shadow:0 8px 18px rgba(0,0,0,.45);animation:wish-card-in .5s calc(var(--i) * .07s) both} .wish-card.rarity-4{background:linear-gradient(180deg,#7254b0,#2b1f48);border-color:#c9a2ff;box-shadow:0 0 18px rgba(201,162,255,.5),0 8px 18px rgba(0,0,0,.45)} .wish-card.rarity-5{background:linear-gradient(180deg,#e0a93f,#5e3c12);border-color:#ffe08a;box-shadow:0 0 26px rgba(255,214,110,.7),0 8px 18px rgba(0,0,0,.45)} .wish-card-art{position:absolute;left:0;top:0;width:100%;height:72%;object-fit:cover;object-position:50% 8%} .wish-card-weapon{position:absolute;top:10%;left:50%;width:88%;transform:translateX(-50%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))} .wish-card-foot{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:24px 6px 12px;background:linear-gradient(transparent,rgba(0,0,0,.72) 40%);text-align:center} .wish-card-stars{font-size:.8rem;letter-spacing:.04em;color:#9fd2ff} .wish-card.rarity-4 .wish-card-stars{color:#d9b8ff} .wish-card.rarity-5 .wish-card-stars{color:#ffe08a} .wish-card-foot strong{font-size:.8rem;line-height:1.25;word-break:keep-all} .wish-card-foot small{font-size:.6rem;line-height:1.35;color:rgba(236,229,216,.82)} .wish-card-badge{position:absolute;top:6px;left:6px;width:22px;height:22px} .wish-card-up{position:absolute;top:6px;right:6px;padding:0 6px;border-radius:8px;background:#d2683f;color:#fff;font-size:.62rem;font-weight:800} .wish-cards.one .wish-card{flex-basis:200px} .wish-summary-gain{display:flex;align-items:center;gap:6px;margin:0;color:#ece5d8;font-variant-numeric:tabular-nums} @keyframes wish-card-in{from{opacity:0;transform:translateY(26px) scale(.92)}to{opacity:1;transform:none}} /* 0.14.13 phones. Before: the banner tabs and × fell behind the banner, the portrait was washed out under a white veil, the 0.14.11 reveal rules fought the 0.14.12 ones (a weapon cut in half), and ten results ran off the bottom with 확인 out of reach (「넘어가지도 못하고 있어」). */ @media (max-width:900px){ .wish-screen{display:flex;flex-direction:column;padding:10px 10px calc(10px + env(safe-area-inset-bottom));gap:10px} .wish-screen>.wish-top,.wish-screen>.wish-foot{flex:none} .wish-screen>.wish-banner{flex:1 1 auto;min-height:0} /* the page's own phone rule fixes every
at 66px; this one holds three rows */ .wish-screen>header.wish-top{height:auto;padding:4px 2px;flex-wrap:wrap;align-items:center;gap:8px} .wish-title{order:0;flex:1 1 auto;font-size:1.1rem} .wish-screen button.wish-close{order:1} .wish-wallet{order:2;width:100%;flex-wrap:wrap;gap:6px} .wish-chip{padding:3px 4px 3px 5px;font-size:.84rem} .wish-cur{width:22px;height:22px} .wish-tabs{order:3;width:100%;margin:0;gap:6px} .wish-screen button.wish-tab{flex:1 1 0;width:auto;min-width:0;height:46px;padding:0 8px 6px} .wish-tab-face{width:84px;top:-16px;right:-10px} .wish-tab-name{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wish-banner{display:flex;flex-direction:column;justify-content:flex-end} .wish-banner-art{width:100%;-webkit-mask-image:none;mask-image:none} .wish-banner-art::after{inset:10px} .wish-banner-art img{object-position:50% 6%} .wish-standard-faces{left:0} .wish-banner-info{flex:none;max-height:70%;padding:30px 16px 14px;gap:5px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.88) 26px,rgba(255,255,255,.95))} body.teyvat .wish-screen h2.wish-banner-name{font-size:1.7rem} .wish-four{width:62px} .wish-four img{width:52px;height:52px} .wish-foot{flex-wrap:wrap;gap:8px} .wish-pity{font-size:.68rem} .wish-pulls{width:100%} .wish-screen button.wish-pull{flex:1;min-width:0;min-height:56px} .wish-summary{justify-content:flex-start;overflow-y:auto;padding:58px 12px calc(20px + env(safe-area-inset-bottom));gap:14px} .wish-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:none;width:100%;max-width:420px;height:auto} .wish-cards.one{grid-template-columns:minmax(0,220px);justify-content:center} .wish-card{height:168px} .wish-cards.one .wish-card{height:300px} .wish-screen .wish-summary button.wish-primary{position:sticky;bottom:0;flex:none} } /* 확인 centred (the base button aligns left); 건너뛰기 readable on the light reveal pictures */ .wish-screen button.wish-primary{display:flex;align-items:center;justify-content:center;text-align:center} .wish-screen .wish-stage button.wish-skip{background:rgba(16,20,36,.5);border-color:rgba(236,229,216,.7);text-shadow:0 1px 2px #000} @media (prefers-reduced-motion:reduce){.wish-sky,.wish-stage-sky,.wish-trail,.wish-card,.wish-reveal,.wish-reveal-art,.wish-reveal-info,.wish-banner{animation:none!important}} /* Short windows and enlarged text may need more than one viewport: keep every control reachable by scrolling. */ .wish-screen{grid-template-rows:auto minmax(240px,1fr) auto;overflow-y:auto;overscroll-behavior:contain} .wish-screen:has(.wish-panel-wrap,.wish-stage){overflow:hidden} .wish-screen>.wish-top,.wish-foot,.wish-wallet{flex-wrap:wrap} .wish-screen>.wish-banner{min-height:240px} .wish-wallet,.wish-tabs,.wish-panel{min-width:0;max-width:100%} .wish-panel{overflow-wrap:anywhere} .wish-rates{grid-template-columns:auto minmax(0,1fr)} @media (max-width:640px) and (min-height:501px){ .wish-rates{grid-template-columns:minmax(0,1fr);gap:4px} .wish-rates dt{white-space:normal}.wish-rates dd{margin-bottom:8px} .wish-history li{grid-template-columns:86px minmax(0,1fr);gap:4px 8px} .wish-history li>strong{min-width:0;overflow-wrap:anywhere} } /* ---------- 0.14.13 왜 안 되는지 (app_reasons_v01413.js): a greyed-out button lets the press through, and the reason shows in a bubble beside it, over windows too (top layer) ---------- */ button:disabled{pointer-events:none} .locked-reason-tip{position:fixed;inset:auto;margin:0;max-width:min(320px,calc(100vw - 16px));padding:8px 12px;border-radius:10px;border:1px solid rgba(255,176,150,.6);background:rgba(30,20,18,.96);color:#ffe3d8;font-size:.82rem;font-weight:600;line-height:1.45;text-align:left;box-shadow:0 8px 22px rgba(0,0,0,.55);pointer-events:none;animation:locked-tip-in .16s ease-out} .locked-reason-tip::before{content:'⚠ ';color:#ffb27a} .ley-line-locked{margin:6px 0 2px;padding:7px 10px;border-radius:8px;border:1px solid rgba(255,176,150,.45);background:rgba(255,120,90,.1);color:#ffcdb8;font-weight:700;font-size:.86rem} /* 0.14.13 phone top bar: at 375px the guide, level, Mora, 원석 and buttons were drawn over each other. Everything keeps its size and only the place name gives way; the handbook and scenery buttons are in the menu there, and the guide pill shows its count only. */ @media (max-width:760px) and (min-height:501px){ body.teyvat main>aside.shell-hud{gap:5px;padding:0 6px} body.teyvat main>aside.shell-hud>*{flex-shrink:0} body.teyvat main>aside.shell-hud>.hud-info{flex:1 1 auto;min-width:0} body.teyvat .hud-place{padding:4px 2px 4px 0;gap:3px;max-width:100%} body.teyvat .hud-place-name{max-width:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem} body.teyvat .hud-tools .hud-handbook,body.teyvat .hud-tools .hud-scenery{display:none} body.teyvat .hud-guide{gap:3px;min-height:30px;padding:3px 7px 3px 5px} body.teyvat .hud-guide .hud-guide-step{display:none} body.teyvat .hud-guide-count{font-size:.68rem;letter-spacing:-.04em} body.teyvat .hud-me{gap:5px;margin-left:0} body.teyvat .hud-level-ring{width:30px;height:30px;flex-basis:30px} body.teyvat .hud-mora{gap:3px;padding:3px 7px 3px 3px;font-size:.74rem} body.teyvat :where(#root) button.hud-primo{gap:3px;padding:3px 7px 3px 2px;font-size:.74rem} body.teyvat .hud-primo .hud-primo-icon{width:20px;height:20px} body.teyvat .hud-tool{width:36px;height:36px;min-height:36px} /* Pages (편성, 상점, 가방…): the desktop columns may shrink and scroll inside (min-height:0), so on a phone each column was squeezed to a sliver and its content spilled over the next (「아주 개판」). Here the whole page scrolls, title included, and every part keeps its full height. */ body.teyvat .panel.shell-page{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain} body.teyvat .panel.shell-page>*{flex-shrink:0} body.teyvat .panel.shell-page>.shell-page-body{flex:0 0 auto;min-height:auto;overflow:visible} body.teyvat .panel.shell-page :is(.shell-cols,.shell-page-body)>*{flex-shrink:0;min-height:auto} body.teyvat .panel.shell-page .shell-panes{flex:0 0 auto;min-height:auto;overflow:visible} body.teyvat .panel.shell-page .shell-cols>.shell-region{overflow:visible} /* Tabs fit the width instead of running off the edge (지맥·보스 was cut in half); a long set wraps to a second row. */ body.teyvat .shell-tabbar{flex-wrap:wrap;overflow-x:visible;gap:5px} body.teyvat .shell-tabbar>.shell-tab{flex:1 1 auto;justify-content:center;min-height:34px;padding:4px 8px;gap:4px;font-size:.8rem} body.teyvat .shell-tabbar>.shell-tab .shell-icon{width:14px;height:14px} body.teyvat .shell-page-tabs.vertical>.shell-tabbar{flex-direction:row;flex-wrap:wrap} /* Battle: enemies and the party each keep their full height and the stage scrolls (the enemy cards ran into 우리 파티). */ body.teyvat .combat-panel .battle-teams.compact-teams{flex:0 0 auto;min-height:auto;grid-template-rows:auto auto} body.teyvat .combat-panel .battle-teams.compact-teams>*{min-height:auto} } @keyframes locked-tip-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* ==================== 0.14.15 ==================== */ /* style.css draws every
as the page bar (84px, 66px on phones, dark fill, side padding). These headers are panel headings, so they take their content's height. */ .pf-head,.deal-head,.ch-head,.trade-head{height:auto;min-height:0} /* Korean lines break between words in the new windows (「들어갑니/다」, 「좌/우」), and a long token still wraps */ :is(.ch-overlay,.pf-overlay,.trade-overlay,.deal-overlay,.deal-invite,.rk-season,.rk-previous,.hb-treasure,.abyss-season){word-break:keep-all;overflow-wrap:anywhere} .pf-head,.deal-head{padding:0;border-bottom:0;background:none} .ch-head{background:none} /* ---------- 나선 문장과 지난 시즌 테두리 (chat, profile, ranking, Abyss screen) ---------- The Spiral Abyss crest in silver (10), violet (11) or gold (12) with the floor in the game's number font. */ .pf-medal{--crest:236,229,216;--crest-ink:#ece5d8;display:inline-flex;align-items:center;gap:2px;height:20px;padding:0 7px 0 1px;border-radius:10px;vertical-align:middle;background:linear-gradient(90deg,rgba(var(--crest),.26),rgba(var(--crest),.05) 80%);border:1px solid rgba(var(--crest),.5);line-height:1;white-space:nowrap} .pf-medal.floor-10{--crest:203,214,232;--crest-ink:#e4ecf8} .pf-medal.floor-11{--crest:182,138,255;--crest-ink:#e2d1ff} .pf-medal.floor-12{--crest:255,204,102;--crest-ink:#ffe2a1;box-shadow:0 0 8px rgba(255,204,102,.28)} .pf-crest{width:18px;height:18px;flex:0 0 18px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))} .pf-medal.floor-12 .pf-crest{filter:drop-shadow(0 0 3px rgba(255,214,120,.8))} .pf-medal>b{font:400 .8rem/1 HoyoDamageNumbers,CRPGKorean,sans-serif;color:var(--crest-ink);text-shadow:0 1px 2px rgba(0,0,0,.65)} .pf-medal.bare{height:auto;padding:0;border:0;background:none;box-shadow:none} .pf-medal.bare .pf-crest{width:20px;height:20px;flex-basis:20px} .pf-medal.wide{height:24px;padding:0 10px 0 2px;border-radius:12px} .pf-medal.wide .pf-crest{width:20px;height:20px;flex-basis:20px} .pf-medal.wide>b{font-family:inherit;font-size:.76rem;font-weight:700} /* on the cream windows (거래소, 직접 거래) the metals need darker ink */ :is(.trade-box,.deal-box,.hb-medals) .pf-medal{background:linear-gradient(90deg,rgba(27,33,49,.9),rgba(27,33,49,.72));border-color:rgba(var(--crest),.7)} .hb-medals{margin:10px 0 4px} .chat-author{border:0;background:none;padding:0;margin:0;min-height:0;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;color:hsl(var(--h,40),70%,74%);text-align:left} .chat-author:hover{text-decoration:underline} .chat-author .pf-medal{margin-left:5px} .chat-line.abyss-frame{background:linear-gradient(rgba(14,18,30,.9),rgba(14,18,30,.9)) padding-box,linear-gradient(120deg,var(--fr1),var(--fr2),var(--fr1)) border-box;border:1.5px solid transparent;box-shadow:0 0 12px var(--frg)} .chat-line.frame-10{--fr1:#a9b9d4;--fr2:#f1f5fc;--frg:rgba(203,214,232,.22)} .chat-line.frame-11{--fr1:#b88cff;--fr2:#f0e2ff;--frg:rgba(184,140,255,.3)} .chat-line.frame-12{--fr1:#ffc94d;--fr2:#fff2c4;--frg:rgba(255,201,77,.4);animation:frameGlow 3s ease-in-out infinite} @keyframes frameGlow{50%{box-shadow:0 0 18px rgba(255,201,77,.6)}} .abyss-season{display:flex;flex-direction:column;gap:6px;background:linear-gradient(120deg,rgba(66,58,120,.35),rgba(20,24,40,.4));border-color:rgba(184,160,255,.35)!important} .abyss-season-head{display:flex;align-items:center;justify-content:space-between;gap:8px} .abyss-season-head strong{font-size:1.05rem} .abyss-season-left{font-size:.8rem;color:#d7cdf6} .abyss-season-line{margin:0;font-weight:600} .abyss-medals{display:flex;flex-wrap:wrap;gap:6px} .abyss-medal{padding:2px 10px;border-radius:12px;font-size:.76rem;font-weight:700;color:#ece5d8;border:1px solid rgba(236,229,216,.4)} .abyss-owed{margin:4px 0 0;font-size:.8rem;color:#f3dfae} /* the ranking window: season name, time left and last season's top 20 */ .rk-season{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:4px 0 10px;padding:10px 12px;border-radius:14px;background:linear-gradient(120deg,rgba(66,58,120,.35),rgba(20,24,40,.4));border:1px solid rgba(184,160,255,.35)} .rk-season strong{font:700 1.02rem 'Gowun Batang',serif;color:#f3dfae} .rk-left{font-size:.8rem;color:#d7cdf6} .rk-season small{flex-basis:100%;color:#bdb6a9;font-size:.76rem;line-height:1.5} .rk-previous{margin-top:16px} .rk-previous h2{margin:0 0 6px;font-size:.98rem;color:#f3dfae} .rk-previous-table td .pf-medal{margin-left:6px} /* ---------- 모험가 정보 (app_profile_v01415.js) ---------- */ .pf-overlay{position:fixed;inset:0;z-index:2100;display:grid;place-items:center;padding:16px;background:rgba(5,7,14,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .16s} .pf-overlay.open{opacity:1} .pf-card{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:16px 18px 18px;border-radius:20px;background:linear-gradient(180deg,#1b2131,#141826);color:#ece5d8;border:1px solid rgba(211,188,142,.45);box-shadow:0 26px 70px rgba(0,0,0,.6)} .pf-card .shell-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .pf-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px} .pf-title{display:flex;align-items:center;gap:8px;flex:1;min-width:0;flex-wrap:wrap} .pf-name{font:700 1.25rem/1.2 'Gowun Batang',serif} .pf-staff{font-size:.66rem;padding:1px 7px;border-radius:7px;background:#d3bc8e;color:#2b2f3a} .pf-online{font-size:.72rem;padding:1px 8px;border-radius:9px;background:rgba(255,255,255,.08);color:#a6a198} .pf-online.on{background:rgba(110,200,130,.18);color:#9fe0ad} .pf-close{width:34px;height:34px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(236,229,216,.25);color:#ece5d8;cursor:pointer} .pf-medals{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%} .pf-medals small{color:#cfc8ba;font-size:.74rem} .pf-section{margin-top:12px} .pf-section h3{margin:0 0 8px;font-size:.92rem;color:#f3dfae;display:flex;gap:8px;align-items:baseline} .pf-section h3 small{color:#bdb6a9;font-size:.76rem} .pf-me{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;background:rgba(255,255,255,.05)} .pf-me-copy{display:flex;flex-direction:column;gap:2px;min-width:0} .pf-me-copy span{font-size:.82rem;color:#cfc8ba} .pf-abyss{color:#d7cdf6!important} .pf-face{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 15%;background:#2a3147;flex:none} .pf-party{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .pf-member{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 10px;align-items:center;padding:8px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(211,188,142,.15)} .pf-member.rarity-5{border-color:rgba(255,206,110,.45)} .pf-member .pf-face{width:48px;height:48px} .pf-member-copy{display:flex;flex-direction:column;min-width:0} .pf-member-copy strong{font-size:.88rem} .pf-member-copy span{font-size:.74rem;color:#bdb6a9} .pf-gear{grid-column:1/-1;display:flex;flex-direction:column;gap:3px} .pf-gear-item{display:flex;align-items:center;gap:6px;font-size:.74rem;min-width:0} .pf-gear-item .item-icon,.pf-gear-item .item-glyph{width:20px;height:20px;font-size:.8rem;flex:none} .pf-gear-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pf-gear-item.tier-5 span{color:#ffd88a}.pf-gear-item.tier-4 span{color:#d7b8ff}.pf-gear-item.tier-3 span{color:#a9c8ff} .pf-companions{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px} .pf-companions>.pf-empty{grid-column:1/-1;margin:0} .pf-mate{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:12px;background:rgba(255,255,255,.04);text-align:center} .pf-mate.rarity-5{background:linear-gradient(180deg,rgba(214,150,60,.28),rgba(255,255,255,.03))} .pf-mate.rarity-4{background:linear-gradient(180deg,rgba(130,100,200,.25),rgba(255,255,255,.03))} .pf-mate-face{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 15%;background:#2a3147} .pf-cons{position:absolute;top:4px;right:6px;padding:0 5px;border-radius:7px;font-size:.62rem;font-weight:800;background:#ece5d8;color:#2b2f3a} .pf-mate-name{font-size:.72rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .pf-mate-lv{font-size:.64rem;color:#bdb6a9} .pf-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .pf-btn{min-height:40px;padding:6px 16px;border-radius:20px;border:1px solid rgba(236,229,216,.3);background:rgba(255,255,255,.06);color:#ece5d8;font:inherit;font-size:.86rem;cursor:pointer} .pf-btn.primary{background:#ece5d8;color:#2b2f3a;font-weight:700} .pf-empty,.pf-loading{color:#bdb6a9;font-size:.84rem} .pf-error{color:#ffb8a2} .pf-noart{display:grid;place-items:center} /* ---------- 거래소: 시장 · 내 상점 · 직접 거래 (app_trade.js) ---------- */ .trade-body.tab-market,.trade-body.tab-shop,.trade-body.tab-direct{display:flex;flex-direction:column;gap:10px} .mk-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .mk-sort{min-height:34px;padding:2px 10px;border-radius:17px;border:1px solid rgba(57,64,79,.2);background:#fff;color:#39404f;font:inherit;font-size:.82rem} .mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px} .mk-card{display:grid;grid-template-columns:70px minmax(0,1fr);grid-template-rows:auto auto;gap:6px 10px;align-items:center;padding:10px;border-radius:14px;background:#f8f4ec;border:1px solid rgba(57,64,79,.1)} .mk-card .tr-tile{width:70px;grid-row:1/3} .mk-card.mine{background:#f2ead8} .mk-info{display:flex;flex-direction:column;gap:2px;min-width:0} .mk-name{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mk-price{display:flex;align-items:center;gap:4px;font-size:.86rem} .mk-price b{font-size:.98rem;color:#8a5a19} .mk-price small{color:#8a8e99} .tr-mora{width:18px!important;height:18px!important;color:#b3893c} .mk-seller-name{align-self:flex-start;border:0;background:none;padding:0;min-height:0;font:inherit;font-size:.76rem;color:#5b6aa5;cursor:pointer;text-decoration:underline dotted} .mk-buy,.mk-cancel,.mk-mine{grid-column:2;justify-self:start} .mk-mine{font-size:.74rem;color:#8a6d3b;font-weight:700} .mk-buy.confirm{animation:mkPulse 1s ease-in-out infinite} @keyframes mkPulse{50%{box-shadow:0 0 0 4px rgba(201,168,106,.45)}} .mk-wallet{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:linear-gradient(90deg,#f4e7c6,#f8f4ec);border:1px solid rgba(201,168,106,.5)} .mk-wallet>div{display:flex;flex-direction:column;flex:1} .mk-wallet span{font-size:.84rem;color:#6b6f7c} .mk-shop{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr);gap:12px;min-height:0} .mk-sell,.mk-mine-list{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;background:#f8f4ec;border:1px solid rgba(57,64,79,.1);min-width:0} .mk-sell h3,.mk-mine-list h3,.trade-body.tab-direct h3{margin:0;font-size:.92rem;color:#8a6d3b;font-family:'Gowun Batang',serif} .tr-bag{display:flex;flex-direction:column;gap:6px} .tr-bag .tr-grid{max-height:280px} .mk-form{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;align-items:start;padding:10px;border-radius:14px;background:#fff;border:1px solid rgba(201,168,106,.45)} .mk-form .tr-tile{width:70px} .mk-fields{display:flex;flex-direction:column;gap:6px} .mk-price-input{min-height:40px;padding:6px 12px;border-radius:12px;border:1px solid rgba(57,64,79,.25);background:#fffdf8;color:#39404f;font:inherit} .mk-preview{color:#8a6d3b;font-size:.78rem} .mk-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px;border-radius:12px;background:#fff;border:1px solid rgba(57,64,79,.1)} .mk-row .tr-tile{width:56px} .mk-row.sold{opacity:.75} .mk-row small{font-size:.72rem;color:#6b6f7c} .mk-online{display:flex;flex-direction:column;gap:6px} .mk-person{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:12px;background:#f8f4ec;border:1px solid rgba(57,64,79,.1)} .mk-person-name{display:flex;align-items:center;gap:6px;border:0;background:none;padding:0;min-height:0;font:inherit;font-weight:700;color:#39404f;cursor:pointer} .mk-deal-now{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:#f4e7c6;border:1px solid rgba(201,168,106,.6)} .mk-deal-now strong{flex:1} .mk-refresh{align-self:flex-start} .deal-overlay{position:fixed;inset:0;z-index:2050;display:grid;place-items:center;padding:16px;background:rgba(5,7,14,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .16s} .deal-overlay.open{opacity:1} .deal-box{width:min(860px,100%);max-height:calc(100dvh - 32px);overflow:auto;display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;border-radius:20px;background:linear-gradient(180deg,#efe8db,#e6dccb);color:#39404f;border:1px solid rgba(211,188,142,.6);box-shadow:0 26px 80px rgba(0,0,0,.6)} .deal-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .deal-head strong{font:700 1.1rem 'Gowun Batang',serif} .deal-head small{flex:1;min-width:200px;color:#6b6f7c;font-size:.8rem} .deal-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .deal-side{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:#f8f4ec;border:2px solid rgba(57,64,79,.1)} .deal-side.locked{border-color:#c9a86a;background:#f6ecd4} .deal-side-head{display:flex;justify-content:space-between;align-items:center;gap:6px} .deal-state{font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:9px;background:rgba(57,64,79,.1)} .deal-state.lock{background:#efe0c4;color:#8a5a19}.deal-state.ok{background:#dbeed4;color:#35683a} .deal-items{display:flex;flex-direction:column;gap:6px} .deal-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:8px;align-items:center} .deal-item .tr-tile{width:56px} .deal-item-info{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:.84rem} .deal-foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap} .deal-go{min-height:44px;padding:8px 22px} .deal-invite{position:fixed;z-index:2060;left:50%;top:76px;translate:-50% 0;width:min(380px,calc(100vw - 24px));display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px;background:linear-gradient(180deg,#1f2638,#161b29);color:#ece5d8;border:1px solid rgba(243,223,174,.6);box-shadow:0 18px 50px rgba(0,0,0,.55);animation:shellIn .25s ease-out} .deal-invite small{color:#bdb6a9} .deal-invite-actions{display:flex;gap:6px} .deal-invite .tr-btn{background:rgba(255,255,255,.08);color:#ece5d8;border-color:rgba(236,229,216,.3)} .deal-invite .tr-btn.primary{background:#ece5d8;color:#2b2f3a} @media (max-width:760px) and (min-height:501px){ .mk-shop,.deal-cols{grid-template-columns:1fr} .mk-grid{grid-template-columns:1fr} .pf-party{grid-template-columns:1fr} .trade-box{height:calc(100dvh - 16px)} .trade-overlay,.deal-overlay,.pf-overlay{padding:8px} } /* ---------- 보물상자 (app_chests_v01415.js) ---------- */ .scenery-chest{position:absolute;z-index:3;width:clamp(56px,7vw,92px);aspect-ratio:1;translate:-50% -60%;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,236,170,.75));animation:chestBob 2.4s ease-in-out infinite} .scenery-chest img{width:100%;height:100%;object-fit:contain;pointer-events:none} .scenery-chest::before{content:'';position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(circle,rgba(255,240,180,.55),transparent 62%);z-index:-1;animation:chestHalo 2.4s ease-in-out infinite} .scenery-chest.night{width:38px;filter:none;animation:none;background:radial-gradient(circle,rgba(190,220,255,.9) 0 8%,rgba(150,190,255,.35) 22%,transparent 62%);border-radius:50%;opacity:.55} .scenery-chest.night::before{animation:nightShimmer 1.8s ease-in-out infinite;background:radial-gradient(circle,rgba(170,205,255,.45),transparent 60%)} /* 0.16: a chest someone in the room unsealed — a cooler glow and their name under it (app_coop_v0153.js). */ .scenery-chest.unsealed{filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(160,232,255,.95))} .scenery-chest-note{position:absolute;left:50%;top:100%;margin-top:2px;padding:1px 8px;border-radius:9px;transform:translateX(-50%);background:rgba(16,24,38,.9);color:#dff4ff;font:700 11px/16px system-ui,sans-serif;font-style:normal;white-space:nowrap;pointer-events:none} .ch-note.by-friend{color:#bfeaff;font-weight:700} /* 0.16 같이 풀기 (app_coop_puzzle_v0160.js): who is on the board, and a partner's press with their name. */ .ch-head .ch-together{display:block;margin-top:2px;color:#9fe8b8;font-weight:700} .ch-peer{position:fixed;z-index:9;padding:1px 8px;border-radius:9px;transform:translate(-50%,-150%);background:rgba(127,224,160,.95);color:#123020;font:700 11px/16px system-ui,sans-serif;white-space:nowrap;pointer-events:none;animation:chPeer .9s ease-out both} @keyframes chPeer{0%{opacity:0;transform:translate(-50%,-110%)}15%{opacity:1;transform:translate(-50%,-150%)}75%{opacity:1}100%{opacity:0}} .cp-puzzle-pop{border-color:rgba(127,224,160,.75)} @media (prefers-reduced-motion:reduce){.ch-peer{animation:none}} @keyframes chestBob{50%{translate:-50% -66%}} @keyframes chestHalo{50%{opacity:.55;transform:scale(1.12)}} @keyframes nightShimmer{0%,100%{opacity:.2;transform:scale(.85)}50%{opacity:.9;transform:scale(1.15)}} .ch-glint{position:absolute;z-index:6;width:18px;height:18px;min-height:0;padding:0;border:0;border-radius:50%;cursor:pointer;background:radial-gradient(circle,#fff 0 18%,rgba(255,245,200,.85) 30%,rgba(255,230,160,.25) 55%,transparent 70%);opacity:.5;animation:glintTwinkle 2.6s ease-in-out infinite} .ch-glint:hover{opacity:1} @keyframes glintTwinkle{0%,100%{opacity:.18;transform:scale(.7)}45%{opacity:.75;transform:scale(1.1)}55%{opacity:.4}} .ch-glint.in-menu{right:18px;bottom:16px} .ch-glint.in-settings{right:14px;bottom:12px} .ch-glint.in-wish{left:12%;top:18%;z-index:3} .ch-glint.in-handbook{right:10px;top:8px} .ch-glint.in-bag{right:16px;bottom:14px} .ch-glint.in-status{left:12px;bottom:12px} @media (max-width:760px) and (min-height:501px){.ch-glint.in-status{left:auto;right:16px}} /* the chat button sits in the bottom-left corner on phones */ .ch-glint.ch-ripple{width:34px;height:34px;translate:-50% -50%;background:radial-gradient(circle,rgba(255,255,255,.0) 30%,rgba(210,235,255,.5) 42%,rgba(255,255,255,0) 56%);opacity:.6;animation:mapRipple 2.8s ease-out infinite;pointer-events:auto} @keyframes mapRipple{0%{transform:scale(.4);opacity:.65}70%{opacity:.25}100%{transform:scale(1.5);opacity:0}} .panel.shell-page-system,.panel.shell-page-inventory,.panel.gear-screen,.hb-body{position:relative} .ch-overlay{position:fixed;inset:0;z-index:2200;display:grid;place-items:center;padding:14px;background:var(--ch-bg,none) center/cover no-repeat,#0b0f1a;opacity:0;transition:opacity .22s} .ch-overlay::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(10,14,26,.35),rgba(5,7,14,.9));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .ch-overlay.open{opacity:1} .ch-box{position:relative;width:min(760px,100%);max-height:calc(100dvh - 28px);overflow:auto;display:flex;flex-direction:column;border-radius:22px;background:linear-gradient(180deg,rgba(28,33,50,.94),rgba(18,22,34,.96));color:#ece5d8;border:1px solid rgba(243,223,174,.5);box-shadow:0 30px 90px rgba(0,0,0,.65)} .ch-overlay.region-liyue .ch-box{border-color:rgba(248,210,169,.55)} .ch-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(243,223,174,.2)} .ch-head-icon{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))} .ch-head-copy{display:flex;flex-direction:column;flex:1;min-width:0} .ch-head-copy strong{font:700 1.05rem 'Gowun Batang',serif;color:#f3dfae} .ch-head-copy small{color:#bdb6a9;font-size:.78rem} .ch-close{width:36px;height:36px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(236,229,216,.25);color:#ece5d8;cursor:pointer} .ch-close .shell-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8} .ch-body{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 16px 18px} .ch-body>*{min-width:0;max-width:100%} .ch-note{margin:0;font-size:.86rem;color:#d8d1c3;text-align:center;line-height:1.55} .ch-note.warn{color:#ffb8a2} .ch-count{margin:0;font-weight:800;color:#f3dfae} .ch-btn{min-height:40px;padding:6px 18px;border-radius:20px;border:1px solid rgba(236,229,216,.3);background:rgba(255,255,255,.07);color:#ece5d8;font:inherit;font-size:.88rem;cursor:pointer} .ch-btn.primary{background:linear-gradient(#fbf6ea,#e2d7bf);color:#3b4255;font-weight:800;border:2px solid #fff;box-shadow:0 3px 0 #b7a98a,0 8px 18px rgba(0,0,0,.4)} .ch-btn:disabled{opacity:.5} /* The overlay sits outside #root, where the page's own button rule leaves text at the top left of a block; every button here centres its label (sudoku digits sat in the corners of their cells). */ .ch-overlay :is(.ch-btn,.sd-cell,.sd-num,.slate,.tile){display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1} .ch-tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .ch-hint{border-color:rgba(243,223,174,.55);color:#f3dfae} .ch-game{position:relative;transition:filter .5s,opacity .5s,transform .5s} .ch-game.solved{filter:brightness(1.6) drop-shadow(0 0 22px rgba(255,236,170,.9));animation:boardSolved 1.2s ease-out forwards} @keyframes boardSolved{0%{transform:scale(1)}30%{transform:scale(1.03)}100%{transform:scale(.96);opacity:.25}} .ch-solved{position:absolute;left:50%;top:44%;translate:-50% -50%;z-index:5;padding:10px 26px;border-radius:24px;background:rgba(20,24,40,.85);border:1px solid #f3dfae;color:#f3dfae;font:800 1.2rem 'Gowun Batang',serif;letter-spacing:.06em;box-shadow:0 0 30px rgba(243,223,174,.5);animation:solvedIn .5s cubic-bezier(.2,1.6,.4,1) both} @keyframes solvedIn{from{opacity:0;scale:.6}to{opacity:1;scale:1}} /* 틀린 그림 찾기 */ .ch-spot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%} .spot-pic{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#2a3147 center/cover no-repeat;cursor:crosshair;border:2px solid rgba(243,223,174,.35);touch-action:manipulation} .spot-pic.noimg{background:repeating-linear-gradient(45deg,#2a3147 0 12px,#323a55 12px 24px)} .spot-diff{position:absolute;width:calc(var(--r)*2);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%);mask-image:radial-gradient(circle,#000 52%,transparent 71%)} .spot-diff.hue{backdrop-filter:hue-rotate(var(--turn)) saturate(1.7);-webkit-backdrop-filter:hue-rotate(var(--turn)) saturate(1.7)} .spot-diff.flip{background-repeat:no-repeat;transform:scaleX(-1)} .spot-diff.icon{-webkit-mask-image:none;mask-image:none;display:grid;place-items:center} .spot-diff.icon img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))} /* Liyue: smaller pieces, a slight colour shift and small faded objects */ .ch-spot.subtle .spot-diff.hue{backdrop-filter:hue-rotate(var(--turn)) saturate(1.12);-webkit-backdrop-filter:hue-rotate(var(--turn)) saturate(1.12)} .ch-spot.subtle .spot-diff.icon img{width:56%;height:56%;opacity:.86;filter:saturate(.8) drop-shadow(0 1px 1px rgba(0,0,0,.3))} .ch-box.wide{width:min(1120px,100%)} .spot-mark{position:absolute;width:calc(var(--r)*2.2);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none} .spot-mark.hit{border:3px solid #ffe08a;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 18px rgba(255,224,138,.8);animation:markHit .45s cubic-bezier(.2,1.6,.4,1)} .spot-mark.miss{width:26px;border:3px solid #ff7a6b;animation:markMiss .6s ease-out forwards} .spot-mark.hint{border:3px dashed #9fd2ff;animation:markHint 1.6s ease-in-out} @keyframes markHit{from{scale:1.6;opacity:0}to{scale:1;opacity:1}} @keyframes markMiss{to{opacity:0;scale:.6}} @keyframes markHint{0%,100%{opacity:0}30%,70%{opacity:1}} /* 그림 맞추기 · 밀기 */ .ch-tiles{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;width:min(420px,86vw);aspect-ratio:16/10;padding:3px;border-radius:12px;background:rgba(243,223,174,.35)} .ch-tiles .tile{border:0;padding:0;min-height:0;border-radius:4px;background-color:#2a3147;background-repeat:no-repeat;cursor:pointer;color:#ece5d8;font-weight:800;transition:transform .15s,box-shadow .15s,filter .15s} .ch-tiles .tile.picked{transform:scale(.92);box-shadow:0 0 0 3px #ffe08a,0 0 16px rgba(255,224,138,.8);z-index:1} .ch-tiles .tile.home{filter:brightness(1.05)} .ch-tiles .tile.blank{background:rgba(10,12,20,.55)!important;cursor:default} .ch-preview{width:min(420px,86vw);font-size:.8rem;color:#bdb6a9} .ch-preview img{width:100%;border-radius:10px;margin-top:6px} /* 석판 밝히기 */ .ch-lights{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:10px;width:min(340px,80vw)} .slate{aspect-ratio:1;min-height:0;padding:0;border-radius:14px;border:2px solid rgba(160,180,210,.35);cursor:pointer;background:radial-gradient(circle at 50% 45%,#3a4258,#1d2232);box-shadow:inset 0 0 0 4px rgba(255,255,255,.04);transition:background .25s,box-shadow .25s,transform .1s} .slate::after{content:'✦';display:block;font-size:1.4rem;color:rgba(200,215,240,.25);transition:color .25s,text-shadow .25s} .slate.lit{background:radial-gradient(circle at 50% 45%,#fff6cf,#e7b94c 55%,#8c5f1b);border-color:#ffe9a6;box-shadow:0 0 18px rgba(255,214,110,.7),inset 0 0 0 4px rgba(255,255,255,.25)} .region-mond .slate.lit{background:radial-gradient(circle at 50% 45%,#effffb,#78dcc8 55%,#1e7c6c);border-color:#bff5ea;box-shadow:0 0 18px rgba(120,220,200,.7),inset 0 0 0 4px rgba(255,255,255,.25)} .slate.lit::after{color:#fff;text-shadow:0 0 10px #fff} .slate.pulse{animation:slatePulse .35s ease-out} .slate.hinted{outline:3px dashed #9fd2ff;outline-offset:3px} @keyframes slatePulse{50%{transform:scale(.92)}} /* 스도쿠 */ .ch-sudoku{display:grid;grid-template-columns:repeat(var(--n),1fr);width:min(calc(var(--n)*58px),88vw);border:3px solid #f3dfae;border-radius:10px;overflow:hidden;background:#141826} .sd-cell{aspect-ratio:1;min-height:0;padding:0;border:0;border-right:1px solid rgba(243,223,174,.22);border-bottom:1px solid rgba(243,223,174,.22);background:rgba(255,255,255,.03);color:#ece5d8;font:700 1.25rem/1 system-ui,sans-serif;cursor:pointer} .sd-cell.edge-r{border-right:3px solid #f3dfae}.sd-cell.edge-b{border-bottom:3px solid #f3dfae} .sd-cell.given{color:#f3dfae;background:rgba(243,223,174,.08);cursor:default} .sd-cell.sel{background:rgba(159,210,255,.25);box-shadow:inset 0 0 0 2px #9fd2ff} .sd-cell.clash{color:#ff8a7a;background:rgba(255,120,100,.16)} .ch-sudoku.done{box-shadow:0 0 26px rgba(255,224,138,.8)} .sd-pad{display:flex;flex-wrap:wrap;gap:6px;justify-content:center} .sd-num{width:46px;min-height:46px;padding:0;font-size:1.1rem;font-weight:800} .sd-lesson{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:14px;background:rgba(8,10,18,.82);border-radius:22px} .sd-lesson-card{width:min(420px,100%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;border-radius:18px;background:#1d2334;border:1px solid rgba(243,223,174,.5);text-align:center} .sd-lesson-card strong{font:700 1.1rem 'Gowun Batang',serif;color:#f3dfae} .sd-lesson-card p{margin:0;font-size:.88rem;line-height:1.6} .sd-step{color:#bdb6a9} .sd-mini{display:grid;grid-template-columns:repeat(4,38px);border:2px solid #f3dfae;border-radius:8px;overflow:hidden} .sd-mini-cell{height:38px;display:grid;place-items:center;font-weight:800;border-right:1px solid rgba(243,223,174,.2);border-bottom:1px solid rgba(243,223,174,.2);transition:background .3s} .sd-mini-cell.edge-r{border-right:2px solid #f3dfae}.sd-mini-cell.edge-b{border-bottom:2px solid #f3dfae} .sd-mini-cell.hl{background:rgba(159,210,255,.3);color:#fff} /* the chest appears, opens, and pays out */ .ch-reveal{min-height:360px;overflow:hidden} /* The light around the chest reaches past the stage; it must never take the press meant for 「상자 열기」 (it did). */ .ch-stage,.ch-rays,.ch-glow,.ch-mote,.ch-flash,.ch-spark{pointer-events:none} .ch-reveal>.ch-btn,.ch-reveal>.ch-rewards,.ch-reveal>.ch-progress,.ch-reveal>.ch-note{position:relative;z-index:2} .ch-stage{position:relative;width:min(320px,80vw);aspect-ratio:1;display:grid;place-items:center} .ch-rays{position:absolute;inset:-20%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,236,170,.32) 0 6deg,transparent 6deg 20deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 66%);mask:radial-gradient(circle,#000 0,transparent 66%);animation:raysSpin 14s linear infinite,raysIn .8s ease-out both} .ch-glow{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(255,244,200,.85),rgba(255,214,120,.25) 45%,transparent 70%);animation:glowPulse 2.2s ease-in-out infinite} .ch-stage.tier-luxurious .ch-glow{background:radial-gradient(circle,rgba(255,240,180,.95),rgba(255,190,80,.35) 45%,transparent 70%)} .ch-chest{position:relative;width:62%;filter:drop-shadow(0 14px 18px rgba(0,0,0,.55));animation:chestRise .8s cubic-bezier(.2,1.4,.4,1) both,chestIdle 2.4s .8s ease-in-out infinite} .ch-mote{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#fff3c4;box-shadow:0 0 8px #ffe08a;rotate:var(--a);animation:moteRise var(--d) ease-in-out infinite;opacity:0} .ch-stage.opened .ch-chest{animation:chestShake .45s ease-in-out both} .ch-flash{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,250,220,.85) 25%,transparent 62%);animation:flashOut .7s ease-out forwards;pointer-events:none} .ch-spark{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:2px;background:linear-gradient(#fffbe0,#ffcf5c);box-shadow:0 0 10px #ffd970;rotate:var(--a);animation:sparkFly var(--t) cubic-bezier(.1,.7,.3,1) forwards} @keyframes raysSpin{to{rotate:360deg}} @keyframes raysIn{from{opacity:0;scale:.4}to{opacity:1;scale:1}} @keyframes glowPulse{50%{opacity:.6;transform:scale(1.08)}} @keyframes chestRise{0%{opacity:0;transform:translateY(60px) scale(.5)}70%{opacity:1}100%{transform:none}} @keyframes chestIdle{50%{transform:translateY(-6px)}} @keyframes chestShake{0%,100%{transform:none}20%{transform:rotate(-6deg) scale(1.05)}40%{transform:rotate(5deg) scale(1.08)}60%{transform:rotate(-3deg) scale(1.1)}80%{transform:scale(1.14)}} @keyframes moteRise{0%{opacity:0;transform:translate(-50%,-50%) translateY(0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) translateY(-120px)}} @keyframes flashOut{0%{opacity:0;scale:.3}25%{opacity:1}100%{opacity:0;scale:1.4}} @keyframes sparkFly{0%{transform:translate(-50%,-50%) translateY(0);opacity:1}100%{transform:translate(-50%,-50%) translateY(calc(var(--r)*-1)) scale(.4);opacity:0}} .ch-open{min-height:48px;padding:8px 32px;font-size:1rem;animation:openPulse 1.4s ease-in-out infinite} @keyframes openPulse{50%{box-shadow:0 3px 0 #b7a98a,0 0 0 6px rgba(243,223,174,.35),0 8px 18px rgba(0,0,0,.4)}} .ch-rewards{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .ch-reward{display:flex;flex-direction:column;align-items:center;gap:2px;width:92px;padding:10px 6px 8px;border-radius:14px 14px 30px 30px/14px 14px 18px 18px;background:linear-gradient(180deg,#3a4a76,#1b2139);border:2px solid #7d93d3;opacity:0;animation:rewardIn .55s calc(var(--i)*.14s + .1s) cubic-bezier(.2,1.5,.4,1) forwards} .ch-reward.primo{background:linear-gradient(180deg,#e0a93f,#5e3c12);border-color:#ffe08a;box-shadow:0 0 18px rgba(255,214,110,.6)} .ch-reward.mora{background:linear-gradient(180deg,#8c6a2c,#3b2a10);border-color:#e7c37a} .ch-reward.tier-4{background:linear-gradient(180deg,#7254b0,#2b1f48);border-color:#c9a2ff} .ch-reward-icon{width:52px!important;height:52px!important;object-fit:contain;font-size:1.8rem;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))} .ch-reward-count{font-size:1.05rem;font-weight:800;color:#fff;text-shadow:0 1px 3px #000} .ch-reward-name{font-size:.68rem;color:#ece5d8;text-align:center;line-height:1.3} @keyframes rewardIn{from{opacity:0;transform:translateY(30px) scale(.6)}to{opacity:1;transform:none}} .ch-progress{margin:6px 0 0;color:#f3dfae;font-weight:700} /* the handbook's treasure page */ /* the handbook's treasure page (cream): counts only */ .ch-journal{margin-bottom:16px;padding:12px 14px 14px;border-radius:14px;background:rgba(255,255,255,.5);border:1px solid rgba(160,130,80,.25)} .ch-journal.complete{border-color:rgba(201,168,106,.85);box-shadow:inset 0 0 0 1px rgba(255,224,138,.6)} .ch-journal h3{display:flex;align-items:baseline;gap:8px;margin:0 0 6px} .ch-journal h3 small{font-size:.86rem;font-weight:800;color:#a0773a} .ch-journal-bar{height:8px;border-radius:4px;background:rgba(57,64,79,.12);overflow:hidden;margin-bottom:10px} .ch-journal-bar::after{content:'';display:block;height:100%;width:var(--p);background:linear-gradient(90deg,#c9a86a,#ffe08a)} .ch-journal-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-bottom:10px} .ch-journal-fact{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;background:rgba(57,64,79,.06)} .ch-journal-fact small{font-size:.72rem;color:#7a7466} .ch-journal-fact strong{font-size:1rem;color:#39404f;font-variant-numeric:tabular-nums} .ch-journal-tiers{display:flex;flex-wrap:wrap;gap:8px} .ch-journal-tier{display:flex;align-items:center;gap:6px;padding:3px 12px 3px 3px;border-radius:20px;background:rgba(57,64,79,.06);font-size:.8rem} .ch-journal-tier img{width:30px;height:30px;object-fit:contain} .ch-journal-tier b{color:#39404f;font-variant-numeric:tabular-nums} .ch-journal-tier.done{background:rgba(255,224,138,.4)} .ch-journal-done{margin:8px 0 0;font-weight:700;color:#a0773a} @media (max-width:760px) and (min-height:501px){ .ch-spot{grid-template-columns:1fr} .ch-overlay{padding:6px} .ch-box{max-height:calc(100dvh - 12px)} .sd-num{width:42px;min-height:42px} .ch-reward{width:80px} } @media (prefers-reduced-motion:reduce){.ch-rays,.ch-glow,.ch-chest,.ch-mote,.scenery-chest,.ch-glint,.chat-line.frame-12{animation:none!important}} /* ==================== 0.15.1 ==================== */ /* ---------- 우편함 (app_mail_v0151.js) ---------- */ .ml-overlay{position:fixed;inset:0;z-index:2150;display:grid;place-items:center;padding:16px;background:rgba(5,7,14,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .16s;word-break:keep-all;overflow-wrap:anywhere} .ml-overlay.open{opacity:1} .ml-box{width:min(880px,100%);height:min(600px,calc(100dvh - 32px));display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#1b2131,#141826);color:#ece5d8;border:1px solid rgba(211,188,142,.45);box-shadow:0 26px 70px rgba(0,0,0,.6)} .ml-head{display:flex;align-items:center;gap:10px;height:auto;min-height:0;padding:14px 16px;border-bottom:1px solid rgba(243,223,174,.2);background:none} .ml-head-icon{width:30px!important;height:30px!important;padding:5px;border-radius:50%;background:#ece5d8;color:#2b2f3a;fill:none;stroke:currentColor;stroke-width:1.7;flex:0 0 auto} .ml-head-copy{display:flex;flex-direction:column;flex:1;min-width:0} .ml-head-copy strong{font:700 1.15rem 'Gowun Batang',serif;color:#f3dfae;white-space:nowrap} .ml-head-copy small{color:#bdb6a9;font-size:.78rem} .ml-close{width:36px;height:36px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(236,229,216,.25);color:#ece5d8;cursor:pointer;flex:0 0 auto} .ml-close .shell-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8} .ml-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:38px;padding:6px 18px;border-radius:20px;border:1px solid rgba(236,229,216,.3);background:rgba(255,255,255,.07);color:#ece5d8;font:inherit;font-size:.88rem;cursor:pointer} .ml-btn.primary{background:linear-gradient(#fbf6ea,#e2d7bf);color:#3b4255;font-weight:800;border:2px solid #fff;box-shadow:0 3px 0 #b7a98a,0 8px 18px rgba(0,0,0,.4)} .ml-btn:disabled{opacity:.5} .ml-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(220px,300px) 1fr} .ml-list{list-style:none;margin:0;padding:8px;overflow:auto;border-right:1px solid rgba(243,223,174,.14);display:flex;flex-direction:column;gap:6px} .ml-list>li{flex-shrink:0} .ml-item-btn{width:100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 8px;align-items:center;padding:9px 10px;border-radius:12px;border:1px solid transparent;background:rgba(255,255,255,.04);color:#ece5d8;text-align:left;cursor:pointer;min-height:0} .ml-item-btn strong{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .ml-item-btn small{grid-column:2;color:#9d978c;font-size:.72rem} .ml-kind{grid-row:1/3;padding:3px 8px;border-radius:9px;font-size:.7rem;font-weight:800;background:rgba(255,255,255,.1);color:#cfc8ba;white-space:nowrap} .ml-item.gift.new .ml-kind{background:linear-gradient(#ffe7a3,#d9a441);color:#3a2a0a} .ml-item.on .ml-item-btn{border-color:rgba(243,223,174,.7);background:rgba(243,223,174,.1)} .ml-item.new .ml-item-btn strong::after{content:'';display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:#e8604c;vertical-align:middle} .ml-detail{padding:16px 18px;overflow:auto} .ml-detail h3{margin:0 0 4px;font:700 1.12rem 'Gowun Batang',serif;color:#f3dfae} .ml-from{margin:0 0 12px;color:#9d978c;font-size:.76rem} .ml-text{margin:0 0 6px;line-height:1.6;font-size:.9rem} .ml-gifts{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0} .ml-gift{width:92px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px 8px;border-radius:12px;background:linear-gradient(180deg,#3a3f52,#2a2e3d);border:1px solid rgba(255,255,255,.12);text-align:center} .ml-gift.tier-5{background:linear-gradient(180deg,#b8833e,#7a522a)}.ml-gift.tier-4{background:linear-gradient(180deg,#8a6bc4,#5a4386)}.ml-gift.tier-3{background:linear-gradient(180deg,#4f7fb5,#355a86)}.ml-gift.tier-2{background:linear-gradient(180deg,#4f8f6f,#36634d)} .ml-gift-icon{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))} .ml-gift .item-glyph{font-size:2rem;line-height:52px} .ml-gift strong{font-size:.86rem} .ml-gift span{font-size:.72rem;color:#ece5d8;line-height:1.3} .ml-gifts.taken .ml-gift{opacity:.5;filter:grayscale(.4)} .ml-gifts.just .ml-gift{animation:mlTaken .5s ease-out both} @keyframes mlTaken{0%{transform:scale(1)}40%{transform:scale(1.08);filter:brightness(1.4)}100%{transform:scale(1)}} .ml-taken{color:#9fe0ad;font-weight:700} .ml-empty{color:#9d978c;padding:12px;list-style:none} /* 편지: tabs, kinds, actions (a press that cannot be undone asks again on the same button) */ .ml-tabs{display:flex;gap:6px;padding:8px 16px 0;border-bottom:1px solid rgba(243,223,174,.14)} .ml-tab{min-height:36px;padding:6px 16px;border-radius:12px 12px 0 0;border:1px solid transparent;border-bottom:0;background:none;color:#bdb6a9;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;white-space:nowrap} .ml-tab.on{background:rgba(243,223,174,.12);color:#f3dfae;border-color:rgba(243,223,174,.3)} .ml-item.letter .ml-kind{background:rgba(120,170,230,.18);color:#bcd6f5} .ml-item.return .ml-kind{background:rgba(232,150,90,.2);color:#f5c9a4} .ml-item:is(.letter,.return).waiting .ml-kind{background:linear-gradient(#ffe7a3,#d9a441);color:#3a2a0a} .ml-kind.state-ok{background:rgba(110,200,140,.2);color:#9fe0ad}.ml-kind.state-warn{background:rgba(232,150,90,.22);color:#f5c9a4}.ml-kind.state-info{background:rgba(120,170,230,.2);color:#bcd6f5} .ml-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center} .ml-btn.sure{background:#7a2f28;border-color:#e8604c;color:#ffe1da} .ml-note{margin:6px 0;color:#bdb6a9;font-size:.8rem;line-height:1.5} .ml-text.muted{color:#8d877c} .ml-tidy{margin-top:auto;padding-top:6px;list-style:none} .ml-tidy .ml-btn{width:100%;min-height:34px;font-size:.8rem} .ml-blocked{list-style:none;font-size:.78rem;color:#bdb6a9} .ml-blocked summary{cursor:pointer;padding:4px 2px} .ml-blocked-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 2px} .ml-btn.ml-mini{min-height:28px;padding:2px 12px;font-size:.76rem} .ml-msg{margin:0;padding:8px 16px;background:rgba(232,96,76,.16);border-top:1px solid rgba(232,96,76,.5);color:#ffc9bf;font-size:.84rem} body.teyvat .hud-menu-button .ml-menu-badge{display:none} /* 편지 쓰기 */ .ml-body.ml-write{display:block;overflow:auto} .ml-form{display:flex;flex-direction:column;gap:12px;padding:14px 18px 18px;max-width:720px;margin:0 auto;box-sizing:border-box} .ml-field{display:flex;flex-direction:column;gap:6px;position:relative;min-width:0} .ml-label{align-self:flex-start;font-size:.78rem;font-weight:800;color:#d3bc8e} .ml-input{width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;border-radius:10px;border:1px solid rgba(236,229,216,.25);background:rgba(8,10,18,.55);color:#ece5d8;font:inherit;font-size:.92rem} .ml-input:focus{outline:2px solid rgba(243,223,174,.6);outline-offset:1px} .ml-textarea{min-height:110px;resize:vertical;line-height:1.55} .ml-count{position:absolute;right:2px;top:0;color:#8d877c;font-size:.72rem} .ml-find{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} .ml-find:empty{display:none} .ml-find-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:38px;padding:6px 12px;border-radius:10px;border:1px solid rgba(236,229,216,.18);background:rgba(255,255,255,.05);color:#ece5d8;font:inherit;cursor:pointer;text-align:left} .ml-find-btn small{color:#9d978c;font-size:.74rem;white-space:nowrap} .ml-to{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 14px;border-radius:12px;background:rgba(243,223,174,.1);border:1px solid rgba(243,223,174,.35)} .ml-to strong{flex:1;min-width:0;color:#f3dfae} .ml-tray{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch} .ml-tray-item{position:relative;width:104px} .ml-tray-x{position:absolute;top:-6px;right:-6px;width:24px;height:24px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;background:#2b2f3a;border:1px solid rgba(236,229,216,.4);color:#ece5d8;cursor:pointer} .ml-tray-x .shell-icon{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2} .ml-btn.ml-add{align-self:center;min-height:44px} .ml-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;max-height:260px;overflow:auto;padding:8px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid rgba(236,229,216,.12)} .ml-picker>.ml-note{grid-column:1/-1;margin:2px 4px} .ml-gift.ml-pick{width:auto;cursor:pointer;color:#ece5d8;font:inherit;min-height:0} .ml-pick .ml-gift-icon{width:44px;height:44px} .ml-stepper{display:flex;align-items:center;gap:2px} .ml-btn.ml-step{min-height:24px;min-width:24px;padding:0 6px;border-radius:8px;font-size:.9rem} .ml-stepper input{width:40px;min-height:24px;padding:0 2px;text-align:center;border-radius:6px;border:1px solid rgba(236,229,216,.25);background:rgba(8,10,18,.55);color:#ece5d8;font:inherit;font-size:.8rem} .ml-mora-row{display:flex;align-items:center;gap:8px} .ml-mora-row .ml-input{max-width:220px} .ml-mora-icon{width:28px;height:28px;object-fit:contain} .ml-fee{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;padding:10px 12px;border-radius:12px;background:rgba(243,223,174,.08);border:1px solid rgba(243,223,174,.25);font-size:.84rem} .ml-fee strong{color:#f3dfae;font-size:.95rem} .ml-fee span{color:#cfc8ba} .ml-fee small{flex-basis:100%;color:#9d978c;font-size:.74rem} .ml-fee.short small{color:#ffb3a6} .ml-confirm{flex-basis:100%;margin:0;padding:10px 12px;border-radius:12px;background:rgba(120,170,230,.12);border:1px solid rgba(120,170,230,.4);font-size:.84rem;line-height:1.5} /* ---------- the fan-project notice under the title screen; 효과음 고르기 folded ---------- */ .game-title.has-legal .title-footer{padding-bottom:8px} .title-legal{position:relative;z-index:1;margin:0 auto;padding:0 20px 14px;max-width:860px;text-align:center;font-size:.68rem;line-height:1.5;color:rgba(242,246,233,.74);text-shadow:0 1px 6px rgba(0,0,0,.55);word-break:keep-all} .shell-sound-gallery>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;cursor:pointer;list-style:none;padding:2px 0} .shell-sound-gallery>summary::-webkit-details-marker{display:none} .shell-sound-gallery>summary::before{content:'▸';display:inline-block;color:#d3bc8e;transition:rotate .2s} .shell-sound-gallery[open]>summary::before{rotate:90deg} .shell-sound-gallery>summary strong{font-size:1.02rem} .shell-sound-gallery>summary small{color:#a6a198;font-size:.76rem} .shell-sound-gallery[open]>summary small{display:none} /* ---------- 재화 그림 (모라 · 원석) in rewards ---------- */ .reward-cur{width:22px;height:22px;object-fit:contain;vertical-align:-5px;margin-right:4px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))} .reward-preview>:is(.reward-mora,.reward-primogem){display:inline-flex;align-items:center;justify-content:center;gap:2px} .scene-chip .reward-cur{width:16px;height:16px;vertical-align:-3px} .loot-mora .item-icon{object-fit:contain} .tr-mora-img{object-fit:contain;vertical-align:-4px} /* the Mora at the top: the game's coin, the size of the Primogem beside it */ body.teyvat .hud-mora .hud-mora-icon{width:24px;height:24px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 0 3px rgba(240,196,106,.45))} body.teyvat .hud-mora:has(>.hud-mora-icon){padding:3px 12px 3px 5px} /* ---------- 운명의 별 · 스타라이트 · 스타더스트 pictures (wish results, exchange, constellations) ---------- */ .wish-gain{display:inline-flex;align-items:center;gap:4px;margin-right:10px} .wish-gain-icon{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))} .wish-card-gain{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px;font-size:.6rem;line-height:1.35;color:rgba(236,229,216,.82)} .wish-card-gain .wish-gain{margin-right:0} .wish-card-gain .wish-gain-icon{width:14px;height:14px} .premium-stella-icon{width:22px;height:22px;object-fit:contain;vertical-align:-6px;margin-right:6px} img.premium-goods-icon,img.premium-cur{object-fit:contain} /* ---------- 거래 가능 · 거래 불가 (bag lock, bag filter, the trade pickers' bound list) ---------- */ body.teyvat .bag-item{position:relative} .item-bound{position:absolute;top:4px;left:4px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(20,22,32,.78);color:#e9dcc0;box-shadow:0 0 0 1px rgba(233,220,192,.45);pointer-events:none} .item-bound .shell-icon{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2} .bag-trade-filter{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px} body.teyvat .bag-trade-filter button{min-height:30px;padding:3px 12px;font-size:.78rem} body.teyvat .bag-trade-filter button.selected{background:var(--t-cream);color:var(--t-ink);border-color:var(--t-cream)} .tr-bound{margin-top:10px;font-size:.82rem} .tr-bound>summary{cursor:pointer;color:#7a7466;font-weight:700;padding:4px 0} .tr-bound-list{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 12px} .tr-bound-list li{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:9px;background:rgba(57,64,79,.06);color:#6b6f7c;min-width:0} .tr-bound-list .shell-icon{width:13px;height:13px;flex:0 0 13px;fill:none;stroke:currentColor;stroke-width:2} .tr-bound-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .tr-bound-list small{margin-left:auto;font-size:.72rem;color:#8c8578;text-align:right} /* ---------- 틀린 그림 찾기: 기회 (wrong presses cost a chance; none left → start over) ---------- */ .ch-lives{display:flex;align-items:center;gap:4px;margin:0;font-size:.82rem;color:#d8d1c3} .ch-lives span{margin-right:4px} .ch-lives b{font-size:1rem;line-height:1;color:#ff7a6b;text-shadow:0 0 6px rgba(255,122,107,.6)} .ch-lives b.off{color:#6b6470;text-shadow:none} .ch-lives.shake{animation:livesShake .35s} @keyframes livesShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} .ch-spot.cooling .spot-pic{cursor:wait;filter:saturate(.7)} .ch-reset{white-space:nowrap;font-size:1rem;color:#ffb8a2;border-color:#ffb8a2;pointer-events:none} /* 0.15.15: the spot game's 30-second rest, two lines that fit a phone. */ .ch-reset.ch-rest{display:flex;flex-direction:column;align-items:center;gap:4px;width:max-content;max-width:min(92%,380px);white-space:normal;text-align:center;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere} .ch-reset.ch-rest small{font-size:.8rem;font-weight:600;letter-spacing:0;color:#f3dfae} .ch-spot.resting .spot-pic{filter:saturate(.35) brightness(.72)} /* 0.15.18 battle screen: whose turn it is over the commands and on the card, enemies chosen by pressing them, summons at the top of the battlefield, and a playback window that leaves the fight in view on a phone. */ body.teyvat .battle-command .battle-turn-banner{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:6px 14px 6px 6px;border-radius:16px;background:linear-gradient(90deg,rgba(243,223,174,.24),rgba(243,223,174,.04));border:1px solid rgba(243,223,174,.6);animation:shellGlow 1.8s ease-in-out infinite} body.teyvat .battle-command .battle-turn-banner.enemy{background:linear-gradient(90deg,rgba(255,130,110,.24),rgba(255,130,110,.04));border-color:rgba(255,150,130,.6)} body.teyvat .battle-turn-face{flex:0 0 40px;width:40px;height:40px;box-sizing:border-box;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--t-gold-hi);background:#1b2233} body.teyvat .battle-turn-face.mark{display:grid;place-items:center;color:var(--t-gold-hi);font-size:1.1rem} body.teyvat .battle-turn-copy{display:flex;flex-direction:column;min-width:0} body.teyvat .battle-turn-copy strong{font-size:1.08rem;line-height:1.25;color:var(--t-gold-hi);letter-spacing:.02em} body.teyvat .battle-turn-copy small{font-size:.74rem;line-height:1.4;color:var(--t-muted);word-break:keep-all} body.teyvat .combat-panel .combatant-row.targetable{cursor:pointer} @media (hover:hover){body.teyvat .combat-panel .combatant-row.targetable:not(.selected):hover{box-shadow:0 0 0 2px rgba(255,194,122,.45)}} body.teyvat .combat-panel .battle-summons.top{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 8px} body.teyvat .combat-panel .battle-summons.top .summon-lane{display:flex;align-items:center;flex-wrap:wrap;gap:6px} body.teyvat .combat-panel .battle-summons.top .summon-lane h3{margin:0;font-size:.72rem;color:var(--t-muted)} body.teyvat .combat-panel .battle-summons.top .battle-summon{display:flex;align-items:center;gap:6px;min-height:0;margin:0;padding:4px 10px 4px 4px;text-align:left;border-radius:12px;background:rgba(14,17,27,.82)} body.teyvat .combat-panel .battle-summons.top .summon-portrait{flex:0 0 34px;width:34px;height:30px;margin:0} body.teyvat .combat-panel .battle-summons.top .summon-copy strong{font-size:.78rem} body.teyvat .combat-panel .battle-summons.top .summon-copy small{font-size:.66rem;line-height:1.3} @media (max-width:760px) and (min-height:501px){ body.teyvat .combat-playback{max-height:min(30dvh,250px);padding:8px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center} body.teyvat .combat-playback>*{grid-column:1/-1;margin:0} body.teyvat .combat-playback .combat-skill-banner{padding:6px 8px;gap:6px} body.teyvat .combat-playback .combat-skill-name{font-size:15px} body.teyvat .combat-playback .playback-position{font-size:.7rem} body.teyvat .combat-playback .playback-message{min-height:0;font-size:12px;line-height:1.45} body.teyvat .combat-playback .playback-outcomes{max-height:48px;font-size:.72rem} body.teyvat .combat-playback .combat-speed{grid-column:1} body.teyvat .combat-playback .playback-buttons{grid-column:2;flex-wrap:nowrap} body.teyvat .combat-playback .playback-buttons button{flex:0 0 auto;min-height:34px;padding:4px 12px} body.teyvat .battle-command .battle-turn-banner{padding:4px 10px 4px 4px;margin-bottom:6px} body.teyvat .battle-turn-face{flex-basis:32px;width:32px;height:32px} body.teyvat .battle-turn-copy strong{font-size:.95rem} body.teyvat .battle-turn-copy small{font-size:.68rem} } /* 0.15.19 편성: companions picked by their pictures, an empty slot invites one in, and the bench says 대기. */ body.teyvat .member-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;max-height:min(62vh,560px);overflow:auto;padding:4px 2px} body.teyvat :where(#modal) button.member-pick{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:0;padding:10px 6px;border-radius:14px;text-align:center;line-height:1.3} body.teyvat .member-pick :is(.member-pick-face,.portrait-placeholder){width:80px;height:80px;box-sizing:border-box;border-radius:50%;object-fit:cover;object-position:top;border:2px solid rgba(243,223,174,.45);background:#1b2233;display:grid;place-items:center;font-size:1.6rem;color:var(--t-gold-hi)} body.teyvat .member-pick strong{font-size:.86rem;word-break:keep-all} body.teyvat .member-pick-meta{font-size:.7rem;color:var(--t-muted)} body.teyvat .member-pick-stars{font-size:.74rem;letter-spacing:-.04em;color:#c9a4ff} body.teyvat .member-pick-stars.r5{color:#ffc85a} body.teyvat :where(#modal) button.member-pick.in-party{border-color:rgba(243,223,174,.55)} body.teyvat .member-pick-state{font-size:.66rem;color:var(--t-gold-hi);word-break:keep-all} body.teyvat :where(#root) button.member-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-height:180px;border:2px dashed rgba(243,223,174,.35);border-radius:14px;background:rgba(255,255,255,.03)} body.teyvat .member-add-plus{font-size:2rem;line-height:1;color:var(--t-gold-hi)} body.teyvat .shell-roster-item .shell-roster-bench{margin-left:auto;flex:0 0 auto;padding:0 6px;border:1px solid rgba(236,229,216,.25);border-radius:8px;font-size:.62rem;color:var(--t-muted)} body.teyvat .shell-roster-item>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.teyvat .gear-bench-note{display:block;margin-top:4px;font-size:.72rem;color:var(--t-muted)} /* The roster was centred with justify-content, which pushed the top of a long list (everyone, not four) above the scroll area where it could not be reached; auto margins centre a short list and start a long one at the top. */ body.teyvat .shell-col-roster{justify-content:flex-start} body.teyvat .shell-col-roster>.shell-roster{margin-block:auto} /* 0.15.17: the same rest on 폭발 꽃 찾기 and 원소 암호; the code's earlier tries stay readable above the banner. */ .pz-mines.resting .pz-mine{filter:saturate(.35) brightness(.72);cursor:wait} .pz-mm.resting :is(.pz-mm-slots,.pz-mm-pal){opacity:.45;pointer-events:none} .pz-mm>.ch-rest{top:auto;bottom:6px;translate:-50% 0} /* 0.15.15: a window's header keeps its height when the window is full (on a 320 px phone the chest window squeezed its header to 25 px and the two-line title rose above the window, leaving only 「틀린 그림 찾기」). */ :is(.pf-head,.deal-head,.ch-head,.trade-head){flex-shrink:0} /* ---------- 기원: 하나씩 나올 때 그림자 먼저 (user: 「카드 그림자만 나왔다가 이름하고 별하고 천천히」; 0.15.2 「마지막 부분이 그림자여야 된다는게 아니라 하나씩 나올때 그림자여야된다고」) ---------- */ /* one by one: the character card and the weapon stand as a shadow, then take their colours; names and stars follow slowly */ .wish-reveal.kind-weapon .wish-reveal-weapon img{animation:wish-shadow-in 1.6s ease-out both} @keyframes wish-shadow-in{0%{opacity:0;filter:brightness(0) drop-shadow(0 0 0 rgba(255,255,255,0))}22%{opacity:1;filter:brightness(0) drop-shadow(0 0 16px rgba(255,255,255,.9))}62%{opacity:1;filter:brightness(0) drop-shadow(0 0 24px rgba(255,255,255,.95))}100%{opacity:1;filter:brightness(1) drop-shadow(0 0 22px color-mix(in srgb,var(--glow) 85%,#fff))}} .wish-reveal.kind-char .wish-reveal-art img{animation:wish-art-shadow 1.7s ease-out both} .wish-reveal.kind-char.rarity-5 .wish-reveal-art img{animation-duration:2s} @keyframes wish-art-shadow{0%,58%{filter:brightness(0)}100%{filter:brightness(1)}} .wish-reveal.kind-char .wish-reveal-sheen{animation-delay:1.6s} body.teyvat .wish-screen .wish-reveal .wish-reveal-info h2.wish-reveal-name{animation-duration:.9s;animation-delay:1.45s} body.teyvat .wish-screen .wish-reveal.kind-char.rarity-5 .wish-reveal-info h2.wish-reveal-name{animation-delay:1.75s} .wish-reveal .wish-reveal-stars span{animation-delay:calc(1.8s + var(--s) * .2s)} .wish-reveal.kind-char.rarity-5 .wish-reveal-stars span{animation-delay:calc(2.1s + var(--s) * .2s)} .wish-reveal .wish-reveal-sub{animation-delay:2s}.wish-reveal .wish-reveal-gain{animation-delay:2.1s}.wish-reveal .wish-reveal-up{animation-delay:2.2s} .wish-reveal.settled :is(.wish-reveal-weapon img,.wish-reveal-art img){animation-duration:.01ms!important;animation-delay:0s!important} /* the result list at the end shows everything at once */ /* a weapon is shown whole, above the name strip */ .wish-card-weapon{top:6%;width:auto;max-width:84%;height:60%;object-fit:contain} @media (max-width:760px) and (min-height:501px){ .ml-overlay{padding:8px} .ml-box{height:calc(100dvh - 16px)} .ml-body{grid-template-columns:1fr;grid-template-rows:minmax(120px,38%) 1fr} .ml-list{border-right:0;border-bottom:1px solid rgba(243,223,174,.14)} .ml-tabs{padding:6px 8px 0;overflow-x:auto} .ml-tab{padding:6px 12px;font-size:.82rem} .ml-form{padding:12px} .ml-tray-item{width:96px} .ml-actions .ml-btn{flex:1 1 auto} /* the bag stacks on a phone: the items, then the chosen one (the two columns left the items 15px wide) */ body.teyvat .bag-cols .bag-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;height:auto;gap:12px} body.teyvat .bag-cols .bag-grid{max-height:46dvh;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px} body.teyvat .bag-cols .bag-detail{max-height:none} body.teyvat .hud-menu-button .ml-menu-badge:not([hidden]){display:block} body.teyvat .hud-mora:has(>.hud-mora-icon){gap:3px;padding:3px 7px 3px 2px} body.teyvat .hud-mora .hud-mora-icon{width:20px;height:20px} /* a bound item's name keeps its line; the reason goes under it */ .tr-bound-list li{flex-wrap:wrap;row-gap:2px} .tr-bound-list small{flex-basis:100%;margin-left:19px;text-align:left} /* the notice fits under the buttons and above the version mark in the corner */ .game-title.has-legal .title-center{padding-bottom:36px} .title-legal{font-size:.62rem;line-height:1.45;padding:0 16px 48px} } /* ==================== 0.15.2 ==================== */ .ml-note.ml-warn{margin:0;padding:8px 12px;border-radius:10px;background:rgba(232,96,76,.12);border:1px solid rgba(232,96,76,.4);color:#ffc9bf} /* ---------- 퍼즐 23종 (app_puzzles_v0152.js), drawn in the chest window ---------- */ .ch-overlay :is(.pz-rot,.pz-pipe,.pz-mirror-btn,.pz-nono-cell,.pz-sym-cell,.pz-mem-cell,.pz-mine,.pz-flood-cell,.pz-flood-key,.pz-simon-key,.pz-mm-slot,.pz-mm-key,.pz-dial,.pz-word-slot,.pz-word-tile,.pz-peg,.pz-quiz-choice,.pz-odd-cell,.pz-weight,.pz-card,.pz-maze-cell,.pz-star,.pz-shadow-opt){font:inherit;color:inherit;min-height:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent} .ch-overlay .pz-status{font-size:.92rem;text-align:center} .ch-head-glyph{width:38px!important;height:38px!important;fill:none;stroke:#f3dfae;stroke-width:1.5;filter:drop-shadow(0 0 6px rgba(243,223,174,.5))} .pz-shake{animation:pzShake .38s} @keyframes pzShake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}} .pz-item{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none} .pz-item.fallback{display:grid;place-items:center;font-size:1.4rem;color:#f3dfae} .ch-btn.pz-mode.on{background:rgba(243,223,174,.22);border-color:#f3dfae;color:#fff} /* element orbs */ .pz-orb{--c:#f2c94c;position:relative;display:inline-grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.7),var(--c) 42%,color-mix(in srgb,var(--c) 55%,#000) 100%);box-shadow:0 0 10px color-mix(in srgb,var(--c) 60%,transparent),inset 0 -3px 6px rgba(0,0,0,.25)} .pz-orb.small{width:24px;height:24px} .pz-orb.el-pyro,.el-pyro{--c:#ff7a3a}.pz-orb.el-hydro,.el-hydro{--c:#3fb3ff}.pz-orb.el-cryo,.el-cryo{--c:#8fe3fa}.pz-orb.el-electro,.el-electro{--c:#b77dff}.pz-orb.el-anemo,.el-anemo{--c:#4fd6ae}.pz-orb.el-geo,.el-geo{--c:#f2c14a}.pz-orb.el-dendro,.el-dendro{--c:#8fd14f} .pz-glyph{width:60%;height:60%;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))} .pz-glyph.fill{fill:#fff;stroke:none}.pz-glyph.both{fill:rgba(255,255,255,.88);stroke:#fff;stroke-width:1.2} /* 그림 돌리기 */ .pz-rotate{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;width:min(400px,84vw);aspect-ratio:1;padding:3px;border-radius:12px;background:rgba(243,223,174,.35)} .pz-rot{position:relative;padding:0;border:0;border-radius:4px;overflow:hidden;background:#2a3147} .pz-rot-face{position:absolute;inset:0;display:block;background-repeat:no-repeat;transition:transform .2s cubic-bezier(.3,1.4,.5,1)} .pz-rot-face.noimg{background:repeating-linear-gradient(45deg,#2a3147 0 10px,#323a55 10px 20px)} .pz-rot-mark{position:absolute;left:50%;top:5%;translate:-50% 0;font-size:.7rem;color:#fff;text-shadow:0 0 4px #000,0 0 2px #000;opacity:0;transition:opacity .2s} .pz-rotate.guided .pz-rot-mark{opacity:.9} .pz-rot.home{box-shadow:inset 0 0 0 2px rgba(255,236,170,.55)} /* 원소 회로 */ .pz-pipes{position:relative;width:min(380px,78vw);padding:0 26px} .pz-pipe-board{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:2px;aspect-ratio:1;padding:4px;border-radius:12px;background:#121726;border:2px solid rgba(243,223,174,.4)} .pz-pipe{padding:0;border:0;border-radius:6px;background:rgba(255,255,255,.05);aspect-ratio:1} .pz-pipe-svg{width:100%;height:100%;display:block;transition:transform .18s ease-out} .pz-pipe-svg path{stroke:#5d6680;stroke-width:16;stroke-linecap:round;fill:none} .pz-pipe-svg circle{fill:#5d6680} .pz-pipe.on .pz-pipe-svg path{stroke:#6fe0c0;filter:drop-shadow(0 0 4px #6fe0c0)} .pz-pipe.on .pz-pipe-svg circle{fill:#bff5ea} .region-liyue .pz-pipe.on .pz-pipe-svg path{stroke:#f5c542;filter:drop-shadow(0 0 4px #f5c542)} .region-liyue .pz-pipe.on .pz-pipe-svg circle{fill:#ffe9a6} .pz-pipe-end{position:absolute;translate:0 -50%;opacity:.75;transition:filter .3s,opacity .3s} .pz-pipe-end.in{left:-6px}.pz-pipe-end.out{right:-6px} .pz-pipe-end .pz-orb{width:30px;height:30px} .pz-pipe-end.on{opacity:1;filter:drop-shadow(0 0 10px #fff)} /* 빛의 거울 */ .pz-mirrors{position:relative;width:min(380px,82vw);aspect-ratio:1} .pz-mirror-svg{width:100%;height:100%;display:block} .pz-mirror-cell{fill:rgba(255,255,255,.05);stroke:rgba(243,223,174,.18);stroke-width:.02} .pz-mirror{stroke:#d9ecff;stroke-width:.1;stroke-linecap:round;filter:drop-shadow(0 0 .05px #fff)} .pz-beam{fill:none;stroke:#fff4c4;stroke-width:.07;stroke-linejoin:round;stroke-linecap:round} .pz-beam-glow{fill:none;stroke:rgba(255,214,110,.55);stroke-width:.24;stroke-linejoin:round;stroke-linecap:round;filter:blur(.04px)} .pz-lamp{fill:#ffe08a;filter:drop-shadow(0 0 .15px #ffe08a)} .pz-crystal{fill:#6b7590;stroke:#cfe3ff;stroke-width:.04;transition:fill .3s} .pz-crystal.on{fill:#9fe6ff;filter:drop-shadow(0 0 .2px #9fe6ff)} .pz-mirror-btn{position:absolute;width:calc(100%/var(--f));height:calc(100%/var(--f));padding:0;border:0;border-radius:6px;background:transparent} .pz-mirror-btn:hover,.pz-mirror-btn:focus-visible{background:rgba(159,210,255,.16);outline:none} /* 그림 로직 */ .pz-nono{display:grid;grid-template-columns:auto repeat(var(--n),minmax(0,1fr));width:min(400px,88vw);gap:2px;font-variant-numeric:tabular-nums} .pz-nono-corner{min-width:0} .pz-nono-clue{display:flex;gap:4px;justify-content:flex-end;align-items:center;font-size:.82rem;font-weight:800;color:#d8d1c3;transition:color .2s} .pz-nono-clue.col{flex-direction:column;justify-content:flex-end;padding-bottom:3px;gap:0;line-height:1.15} .pz-nono-clue.row{padding-right:6px} .pz-nono-clue.ok{color:#7be3a8} .pz-nono-cell{aspect-ratio:1;padding:0;border:1px solid rgba(243,223,174,.25);border-radius:3px;background:rgba(255,255,255,.04);font-size:.9rem;font-weight:800;line-height:1} .pz-nono-cell.on{background:linear-gradient(#f3dfae,#c9a86a);border-color:#fff3c4} .pz-nono-cell.x::after{content:'✕';color:#8f8a80} .pz-nono-cell.edge-r{margin-right:3px}.pz-nono-cell.edge-b{margin-bottom:3px} /* 거울 무늬 */ .pz-sym{display:flex;align-items:stretch;gap:8px;width:min(440px,90vw)} .pz-sym-half{flex:1;display:grid;grid-template-columns:repeat(var(--m),1fr);gap:4px} .pz-sym-mirror{width:4px;border-radius:2px;background:linear-gradient(#9fd2ff,#fff,#9fd2ff);box-shadow:0 0 10px #9fd2ff} .pz-sym-cell{aspect-ratio:1;padding:0;border:1px solid rgba(243,223,174,.3);border-radius:6px;background:rgba(255,255,255,.05);display:block} .pz-sym-half.left .pz-sym-cell{opacity:.85} .pz-sym-cell.on{background:radial-gradient(circle at 50% 40%,#effffb,#78dcc8 60%,#1e7c6c);border-color:#bff5ea;box-shadow:0 0 10px rgba(120,220,200,.55)} .region-liyue .pz-sym-cell.on{background:radial-gradient(circle at 50% 40%,#fff6cf,#e7b94c 60%,#8c5f1b);border-color:#ffe9a6;box-shadow:0 0 10px rgba(255,214,110,.55)} /* 빛의 위치 기억 */ .pz-mem{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px;width:min(340px,80vw)} .pz-mem-cell{aspect-ratio:1;padding:0;border-radius:12px;border:2px solid rgba(160,180,210,.35);background:radial-gradient(circle at 50% 45%,#3a4258,#1d2232);transition:background .2s,box-shadow .2s} .pz-mem-cell.lit,.pz-mem-cell.ok{background:radial-gradient(circle at 50% 45%,#fff6cf,#e7b94c 55%,#8c5f1b);border-color:#ffe9a6;box-shadow:0 0 16px rgba(255,214,110,.7)} .pz-mem-cell.bad{background:radial-gradient(circle at 50% 45%,#ffd0c8,#d9574a 60%,#5a1a14);border-color:#ff9a8a} /* 폭발 꽃 찾기 */ .pz-mines{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;width:min(380px,86vw)} .pz-mine{aspect-ratio:1;padding:0;border-radius:6px;border:1px solid rgba(160,180,210,.35);background:linear-gradient(#3d4660,#272e43);font-weight:900;font-size:.95rem;line-height:1;display:grid;place-items:center} .pz-mine.open{background:rgba(236,229,216,.12);border-color:rgba(236,229,216,.15);cursor:default} .pz-mine.flag{color:#ff8a7a;background:linear-gradient(#4a4560,#2f2a43)} .pz-mine.bloom{color:#fff;background:radial-gradient(circle,#ff9ad0,#b8326f);border-color:#ffc4e2} .pz-mine.n1{color:#9fd2ff}.pz-mine.n2{color:#7be3a8}.pz-mine.n3{color:#ffb86b}.pz-mine.n4{color:#d7a2ff}.pz-mine.n5,.pz-mine.n6,.pz-mine.n7,.pz-mine.n8{color:#ff8a7a} /* 원소 물들이기 */ .pz-flood{display:grid;grid-template-columns:repeat(var(--n),1fr);width:min(360px,82vw);aspect-ratio:1;border-radius:12px;overflow:hidden;border:2px solid rgba(243,223,174,.45)} .pz-flood-cell{padding:0;border:0;border-radius:0;background:var(--c);transition:background .25s;cursor:pointer} .pz-flood-cell.start{box-shadow:inset 0 0 0 3px rgba(255,255,255,.8)} .pz-flood-pal{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .pz-flood-key{padding:4px;border-radius:50%;border:2px solid transparent;background:none} .pz-flood-key.now{border-color:#fff;opacity:.55} .pz-flood-key .pz-orb{width:44px;height:44px} /* 원소 순서 기억 */ .pz-simon{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:min(460px,92vw)} .pz-simon-key{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border-radius:14px;border:1px solid rgba(236,229,216,.18);background:rgba(255,255,255,.04);width:58px;transition:transform .12s,filter .12s} .pz-simon-key .pz-orb{width:42px;height:42px;filter:saturate(.6) brightness(.75);transition:filter .15s,transform .15s} .pz-simon-key small{font-size:.72rem;color:#d8d1c3} .pz-simon-key.lit .pz-orb{filter:saturate(1.3) brightness(1.4);transform:scale(1.18);box-shadow:0 0 24px var(--c)} /* 원소 암호 */ .pz-mm{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(420px,92vw)} .pz-mm-list{display:flex;flex-direction:column;gap:5px;width:100%;max-height:220px;overflow:auto} .pz-mm-row{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:10px;background:rgba(255,255,255,.05)} .pz-mm-row.old{opacity:.5} .pz-mm-fb{margin-left:auto;display:flex;gap:4px;align-items:center;font-size:.95rem;letter-spacing:2px} .pz-mm-fb b{color:#ffe08a}.pz-mm-fb i{font-style:normal;color:#cfd6e6}.pz-mm-fb small{font-size:.75rem;color:#9a9486;letter-spacing:0} .pz-mm-slots{display:flex;gap:10px} .pz-mm-slot{width:50px;height:50px;padding:0;border-radius:50%;border:2px dashed rgba(243,223,174,.45);background:rgba(255,255,255,.04);display:grid;place-items:center} .pz-mm-slot:not(.empty){border-style:solid} .pz-mm-slot .pz-orb{width:40px;height:40px} .pz-mm-pal{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .pz-mm-key{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px;border:0;background:none} .pz-mm-key small{font-size:.72rem;color:#d8d1c3} /* 연동 다이얼 */ .pz-dials{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:min(520px,94vw)} .pz-dial{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none} .pz-dial-face{position:relative;display:block;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle,#3a4258 0,#1d2232 70%);border:3px solid rgba(243,223,174,.55);box-shadow:inset 0 0 12px rgba(0,0,0,.5)} .pz-dial.home .pz-dial-face{border-color:#ffe08a;box-shadow:0 0 14px rgba(255,224,138,.6),inset 0 0 12px rgba(0,0,0,.5)} .pz-dial-tick{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:rgba(236,229,216,.4);transform:rotate(var(--a)) translateY(-30px)} .pz-dial-tick.star{width:auto;height:auto;margin:0;background:none;color:#ffe08a;font-size:.8rem;line-height:1;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-29px)} .pz-dial-needle{position:absolute;left:50%;top:50%;width:4px;height:30px;margin-left:-2px;margin-top:-30px;border-radius:2px;background:linear-gradient(#fff,#f3dfae);transform-origin:50% 100%;transition:transform .25s cubic-bezier(.3,1.4,.5,1);box-shadow:0 0 6px rgba(255,236,170,.7)} .pz-dial-link{font-size:.68rem;color:#bdb6a9} /* 낱말 맞추기 */ .pz-word-hint{margin:0;padding:6px 14px;border-radius:14px;background:rgba(243,223,174,.12);color:#f3dfae;font-size:.9rem} .pz-word-slots,.pz-word-pool{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .pz-word-slot,.pz-word-tile{width:52px;height:52px;padding:0;border-radius:12px;font:700 1.35rem 'Gowun Batang',serif;display:grid;place-items:center} .pz-word-slot{border:2px dashed rgba(243,223,174,.5);background:rgba(255,255,255,.04);color:#fff} .pz-word-slot:not(.empty){border-style:solid;background:rgba(243,223,174,.18)} .pz-word-tile{border:1px solid rgba(236,229,216,.3);background:linear-gradient(#fbf6ea,#e2d7bf);color:#3b4255;box-shadow:0 3px 0 #b7a98a} .pz-word-tile:disabled{opacity:.25;box-shadow:none} /* 원소 탑 옮기기 */ .pz-hanoi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(480px,92vw)} .pz-peg{position:relative;height:170px;padding:0 0 22px;border-radius:12px;border:1px solid rgba(236,229,216,.15);background:rgba(255,255,255,.04);display:flex;flex-direction:column;justify-content:flex-end;align-items:center} .pz-peg.picked{border-color:#ffe08a;background:rgba(255,224,138,.1)} .pz-peg-rod{position:absolute;left:50%;bottom:22px;width:6px;height:125px;margin-left:-3px;border-radius:3px;background:linear-gradient(#8c7b5c,#4c4232)} .pz-peg-stack{position:relative;display:flex;flex-direction:column-reverse;align-items:center;gap:2px;width:100%} .pz-disk{display:block;width:var(--w);height:18px;border-radius:9px;background:linear-gradient(color-mix(in srgb,var(--c) 70%,#fff),var(--c));box-shadow:0 2px 4px rgba(0,0,0,.4);transition:transform .15s} .pz-disk.up{transform:translateY(-16px);box-shadow:0 0 14px var(--c)} .pz-peg-label{position:absolute;bottom:3px;left:0;right:0;font-size:.72rem;color:#f3dfae} /* 상식 · 원소 반응 */ .pz-quiz{width:min(520px,94vw);display:flex;flex-direction:column;gap:10px} .pz-quiz-q{margin:0;text-align:center;font:700 1.02rem/1.5 'Gowun Batang',serif;color:#f3dfae} .pz-quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px} .pz-quiz-choice{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid rgba(236,229,216,.25);background:rgba(255,255,255,.06);text-align:left;line-height:1.35} .pz-quiz-choice b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(243,223,174,.2);color:#f3dfae;font-size:.78rem} .pz-quiz-choice.ok{border-color:#7be3a8;background:rgba(123,227,168,.18)} .pz-quiz-choice.bad{border-color:#ff8a7a;background:rgba(255,138,122,.15);opacity:.7} /* 다른 하나 찾기 */ .pz-odd{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px;width:min(400px,86vw)} .pz-odd-cell{aspect-ratio:1;padding:10%;border-radius:10px;border:1px solid rgba(236,229,216,.15);background:rgba(255,255,255,.05);overflow:hidden} .pz-odd-cell .pz-item{width:80%;height:80%;margin:10%} .pz-odd-cell.ok{border-color:#7be3a8;box-shadow:0 0 12px rgba(123,227,168,.6)} .pz-odd-cell.bad{border-color:#ff8a7a;background:rgba(255,138,122,.15)} /* 원소 세기 */ .pz-count-q{display:flex;align-items:center;gap:4px;margin:0;font-weight:700;color:#f3dfae} .pz-count{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:min(440px,90vw);padding:10px;border-radius:14px;background:rgba(0,0,0,.18)} .pz-count .pz-orb{width:34px;height:34px} .pz-count-step{display:flex;align-items:center;gap:6px} .pz-count-num{width:72px;height:44px;border-radius:12px;border:1px solid rgba(243,223,174,.45);background:rgba(0,0,0,.3);color:#fff;text-align:center;font-size:1.2rem;font-weight:800} .ch-btn.pz-step{width:44px;padding:0;font-size:1.3rem} /* 저울 */ .pz-balance{position:relative;width:min(400px,86vw);height:150px} .pz-fulcrum{position:absolute;left:50%;bottom:0;width:0;height:0;margin-left:-22px;border:22px solid transparent;border-bottom:70px solid #8c7b5c;border-top:0} .pz-beam-bar{position:absolute;left:6%;right:6%;top:62px;height:8px;border-radius:4px;background:linear-gradient(#f3dfae,#a88c5a);transition:transform .35s cubic-bezier(.3,1.3,.5,1)} .pz-pan{position:absolute;top:8px;width:34%;min-height:44px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:3px;padding:4px;border-radius:0 0 40px 40px;border-bottom:4px solid #c9a86a;translate:0 -100%} .pz-pan.left{left:-4%}.pz-pan.right{right:-4%} .pz-stone{display:grid;place-items:center;width:46px;height:38px;border-radius:40% 45% 35% 40%;background:radial-gradient(circle at 35% 30%,#b9b2a4,#6e675c);color:#fff;font-weight:900;text-shadow:0 1px 2px #000} .pz-weights{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .pz-weight{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:8px 8px 12px 12px;border:1px solid #e7c37a;background:linear-gradient(#e9c77d,#9a7337);color:#2a1d08;font-weight:900} .pz-weight.on{width:30px;height:30px;font-size:.8rem} .pz-weight.used{opacity:.3} /* 짝 맞추기 */ .pz-pairs{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px;width:min(400px,86vw)} .pz-card{aspect-ratio:3/4;padding:0;border:0;background:none;perspective:600px} .pz-card-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .35s} .pz-card.up .pz-card-inner{transform:rotateY(180deg)} .pz-card-back,.pz-card-front{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center} .pz-card-back{background:linear-gradient(135deg,#3a4a76,#1b2139);border:2px solid #c9a86a;box-shadow:inset 0 0 0 4px rgba(243,223,174,.18)} .pz-card-back::after{content:'✦';color:#f3dfae;font-size:1.3rem} .pz-card-front{transform:rotateY(180deg);background:linear-gradient(180deg,#f6efdd,#d8c9a6);border:2px solid #fff;padding:14%} .pz-card.done .pz-card-front{box-shadow:0 0 14px rgba(255,224,138,.8)} /* 미로 */ .pz-maze{display:grid;grid-template-columns:repeat(var(--m),1fr);width:min(380px,84vw);aspect-ratio:1;border:3px solid #c9a86a;border-radius:8px;background:#141826;overflow:hidden} .pz-maze-cell{position:relative;padding:0;border:0;border-radius:0;background:transparent;box-sizing:border-box;cursor:default} .pz-maze-cell.w-n{border-top:2px solid #c9a86a}.pz-maze-cell.w-s{border-bottom:2px solid #c9a86a}.pz-maze-cell.w-e{border-right:2px solid #c9a86a}.pz-maze-cell.w-w{border-left:2px solid #c9a86a} .pz-maze-cell.trail{background:rgba(159,210,255,.12)} .pz-maze-cell.exit::after{content:'★';position:absolute;inset:0;display:grid;place-items:center;color:#ffe08a;text-shadow:0 0 8px #ffe08a} .pz-maze-cell.here::before{content:'';position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#9fe6ff 55%,#3f8fd0);box-shadow:0 0 12px #9fe6ff} .pz-maze.fog .pz-maze-cell.dark{background:#05070d;border-color:#05070d} .pz-maze.fog .pz-maze-cell.dark.exit::after{opacity:.35} .pz-maze-pad{display:grid;grid-template-columns:repeat(3,52px);grid-template-areas:'. u .' 'l d r';gap:6px} .pz-arrow{width:52px;padding:0;font-size:1.1rem}.pz-arrow.a0{grid-area:u}.pz-arrow.a1{grid-area:r}.pz-arrow.a2{grid-area:d}.pz-arrow.a3{grid-area:l} /* 별자리 */ .pz-const{display:flex;gap:14px;align-items:center;justify-content:center;width:min(640px,94vw)} .pz-const-ref{margin:0;flex:0 0 32%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:12px;background:rgba(10,14,30,.7);border:1px solid rgba(159,210,255,.3)} .pz-const-ref svg{width:100%;aspect-ratio:1} .pz-const-ref line{stroke:#9fd2ff;stroke-width:1.4;opacity:.8}.pz-const-ref circle{fill:#fff} .pz-const-ref figcaption{font-size:.72rem;color:#9fd2ff} .pz-const-sky{position:relative;flex:1;aspect-ratio:1;border-radius:14px;background:radial-gradient(ellipse at 50% 30%,#1f2b52,#090c18);border:1px solid rgba(243,223,174,.3);overflow:hidden} .pz-const-sky svg{position:absolute;inset:0;width:100%;height:100%} .pz-const-sky line{stroke:#ffe9a6;stroke-width:1.1;filter:drop-shadow(0 0 1px #ffe08a)} .pz-star{position:absolute;width:13%;aspect-ratio:1;translate:-50% -50%;padding:0;border:0;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,rgba(255,244,200,.55) 26%,transparent 60%)} .pz-star.picked{background:radial-gradient(circle,#fff 0 22%,rgba(159,210,255,.85) 32%,transparent 66%)} /* 그림자 */ .pz-shadow{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(440px,90vw)} .pz-shadow-main{width:96px;height:96px;padding:10px;border-radius:16px;background:linear-gradient(180deg,#3a4a76,#1b2139);border:2px solid #7d93d3} .pz-shadow-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%} .pz-shadow-opt{aspect-ratio:1;padding:12%;border-radius:12px;border:1px solid rgba(236,229,216,.2);background:rgba(236,229,216,.85);overflow:hidden} .pz-item.silhouette{filter:brightness(0);opacity:.85} .pz-shadow-opt.ok{box-shadow:0 0 0 3px #7be3a8}.pz-shadow-opt.bad{box-shadow:0 0 0 3px #ff8a7a;opacity:.6} @media (max-width:760px) and (min-height:501px){ .pz-quiz-choices{grid-template-columns:1fr} .pz-const{flex-direction:column} .pz-const-ref{flex-basis:auto;width:46%} .pz-const-sky{width:100%} .pz-shadow-opts{grid-template-columns:repeat(2,1fr);width:72%} .pz-peg{height:150px}.pz-peg-rod{height:105px} .pz-simon-key{width:52px} } @media (prefers-reduced-motion:reduce){.pz-rot-face,.pz-pipe-svg,.pz-card-inner,.pz-dial-needle,.pz-beam-bar{transition:none}} /* ---------- 지역 사건 (app_events_v0152.js) and the raid card, in the 할 일 tab ---------- */ .region-event,.raid-card{display:flex;flex-direction:column;gap:8px} .re-head{display:flex;align-items:center;gap:10px} .re-icon{width:36px!important;height:36px!important;flex:none;padding:7px;border-radius:50%;background:rgba(243,223,174,.14);border:1px solid rgba(243,223,174,.35);fill:none;stroke:var(--t-gold,#f3dfae);stroke-width:1.6} .re-words{display:flex;flex-direction:column;min-width:0} .re-eyebrow{font-size:.72rem;color:var(--t-gold,#f3dfae);letter-spacing:.04em} .re-words h2{margin:0;font-size:1.05rem} .re-text{margin:0;line-height:1.65;font-size:.9rem} .re-choices{display:flex;flex-direction:column;gap:8px} .re-choice{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px} .re-choice>button{min-width:8em} .re-reward{font-size:.78rem;color:#cfc8ba} .re-choice .choice-note{flex-basis:100%;margin:0} .re-primo{margin:2px 0 0;font-size:.76rem;color:#a9a294} .re-primo.full{color:#e7c37a} .re-done{margin:0;color:#a8d8a0;font-size:.88rem} .region-event.teaser{border-style:dashed;animation:reTease 2.8s ease-in-out infinite} @keyframes reTease{50%{box-shadow:0 0 0 1px rgba(243,223,174,.35),0 0 22px rgba(243,223,174,.18)}} .region-event.escort{border-color:rgba(159,210,255,.45)} .re-gift,.re-shop{display:flex;flex-wrap:wrap;gap:6px;width:100%} .re-shop{flex-direction:column} .re-gift-item{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:12px;min-height:0} .re-gift-item small{color:#a9a294} .re-gift-icon{width:32px!important;height:32px!important;object-fit:contain;border-radius:8px;flex:none;font-size:1rem} .re-shop-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:rgba(255,255,255,.04)} .re-shop-row.sold{opacity:.55} .re-shop-copy{flex:1;display:flex;flex-direction:column;min-width:0} .re-shop-copy small{color:#e7c37a;font-size:.76rem} .re-sold{font-size:.78rem;color:#a8d8a0} .region-event-result h2,.raid-result h2,.mut-result h2{margin:2px 0 4px} .re-reveal .re-stage{width:min(260px,70vw)} .re-stage-glyph{position:relative;width:44%!important;height:44%!important;fill:none;stroke:#ffe9a6;stroke-width:1.1;filter:drop-shadow(0 0 12px #ffe08a);animation:chestRise .8s cubic-bezier(.2,1.4,.4,1) both,chestIdle 2.4s .8s ease-in-out infinite} /* ---------- 변이 보스 (app_mutations_v0152.js) ---------- */ .mut-panel{margin-top:12px;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(130,44,110,.3),rgba(44,22,66,.38));border:1px solid rgba(214,120,200,.45);display:flex;flex-direction:column;gap:6px} .mut-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .mut-head h3{margin:0;font-size:1rem} .mut-time{margin-left:auto;font-size:.74rem;color:#d8c5e8} .mut-badge{display:inline-block;padding:2px 10px;border-radius:10px;background:linear-gradient(#e07bd0,#8a3c9a);color:#fff;font-weight:800;font-size:.74rem;letter-spacing:.08em} .mut-badge.raid{background:linear-gradient(#ffb36b,#c0582a)} .mut-mods{list-style:none;margin:0;padding:0;display:grid;gap:6px} .mut-mod{display:flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.22)} .mut-mod strong{color:#f1c6ff;font-size:.86rem} .mut-mod span{font-size:.8rem;color:#e6dcef;line-height:1.45} .mut-bonus{margin:0;font-size:.82rem;color:#ffe08a} .mut-panel>button{align-self:flex-start} .mut-panel .mut-go:not(:disabled){box-shadow:0 0 0 2px rgba(224,123,208,.6),0 0 16px rgba(224,123,208,.35)} .mut-note{margin:6px 0;padding:6px 10px;border-radius:10px;background:rgba(224,123,208,.15);color:#f1c6ff;font-size:.84rem} .mut-combat{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0;padding:6px 10px;border-radius:12px;background:rgba(80,30,90,.5);border:1px solid rgba(214,120,200,.45)} .mut-chip{padding:2px 10px;border-radius:10px;background:rgba(0,0,0,.3);font-size:.78rem;color:#f1c6ff;cursor:help} .mut-chip.used{color:#b9b0c2;text-decoration:line-through} /* ---------- 공동 토벌전 (app_raid_v0152.js) ---------- */ .rd-overlay{position:fixed;inset:0;z-index:2150;display:grid;place-items:center;padding:16px;background:rgba(5,7,14,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .16s;word-break:keep-all;overflow-wrap:anywhere} .rd-overlay.open{opacity:1} .rd-box{width:min(840px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#261a22,#141826 60%);color:#ece5d8;border:1px solid rgba(255,170,110,.45);box-shadow:0 26px 70px rgba(0,0,0,.6)} .rd-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,190,140,.22)} .rd-head-icon{width:32px!important;height:32px!important;padding:5px;border-radius:50%;background:linear-gradient(#ffcf9a,#e0803c);color:#3a1d08;fill:none;stroke:currentColor;stroke-width:1.6;flex:none} .rd-head-copy{display:flex;flex-direction:column;flex:1;min-width:0} .rd-head-copy strong{font:700 1.15rem 'Gowun Batang',serif;color:#ffd3a1} .rd-head-copy small{color:#bdb6a9;font-size:.78rem} .rd-close{width:36px;height:36px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(236,229,216,.25);color:#ece5d8;cursor:pointer;flex:none} .rd-close .shell-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8} .rd-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:36px;padding:6px 16px;border-radius:18px;border:1px solid rgba(236,229,216,.3);background:rgba(255,255,255,.07);color:#ece5d8;font:inherit;font-size:.86rem;cursor:pointer} .rd-btn.primary{background:linear-gradient(#fbf6ea,#e2d7bf);color:#3b4255;font-weight:800;border:2px solid #fff;box-shadow:0 3px 0 #b7a98a,0 8px 18px rgba(0,0,0,.4)} .rd-btn:disabled{opacity:.5;cursor:not-allowed} .rd-body{flex:1;min-height:0;overflow:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:16px} .rd-hero{display:flex;gap:14px;align-items:center;padding:12px;border-radius:16px;background:radial-gradient(ellipse at 15% 50%,rgba(255,140,80,.25),transparent 60%),rgba(255,255,255,.04);border:1px solid rgba(255,170,110,.35)} .rd-boss-art{width:112px;height:112px;flex:none;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))} .rd-boss-art.fallback{display:grid;place-items:center;font-size:2.4rem;color:#ffd3a1} .rd-hero-copy h2{margin:0 0 4px;font:700 1.15rem 'Gowun Batang',serif;color:#ffd3a1} .rd-hero-copy p{margin:0 0 6px;font-size:.86rem;line-height:1.55} .rd-hero-copy .rd-rule{color:#cfc8ba;font-size:.8rem} .rd-progress h3,.rd-rewards h3,.rd-top h3{margin:0 0 8px;font-size:.95rem;color:#f3dfae} .rd-bar{position:relative;height:16px;margin:0 6px 22px;border-radius:8px;background:rgba(255,255,255,.08)} .rd-bar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:8px;background:linear-gradient(90deg,#ff9a5a,#ffe08a);box-shadow:0 0 12px rgba(255,170,90,.6)} .rd-mark{position:absolute;top:calc(100% + 3px);translate:-50% 0;font-size:.68rem;color:#9d978c;white-space:nowrap} .rd-mark::before{content:'';position:absolute;left:50%;bottom:calc(100% + 3px);width:2px;height:16px;margin-left:-1px;background:rgba(255,255,255,.3)} .rd-mark.on{color:#ffe08a;font-weight:800} .rd-mine{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .rd-facts{flex:1;min-width:260px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .rd-fact{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05)} .rd-fact small{display:block;font-size:.7rem;color:#9d978c} .rd-fact strong{font-size:1.05rem;color:#fff;font-variant-numeric:tabular-nums} .rd-go{min-height:48px;padding:8px 34px;font-size:1rem} .rd-why{flex-basis:100%;margin:0;font-size:.8rem;color:#ffb8a2} .rd-reward-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px} .rd-reward{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)} .rd-reward strong{font-size:.84rem} .rd-reward span{grid-column:1;font-size:.78rem;color:#cfc8ba} .rd-reward>:is(button,em,small){grid-column:2;grid-row:1/3} .rd-reward.reached{border-color:rgba(255,224,138,.5)} .rd-reward.claimed{opacity:.55} .rd-reward.mine strong{color:#9fd2ff} .rd-reward em{font-style:normal;color:#a8d8a0;font-size:.8rem} .rd-reward small{font-size:.72rem;color:#9d978c;max-width:130px;text-align:right} .rd-top-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} .rd-top-list li{display:grid;grid-template-columns:28px 1fr auto auto;gap:8px;align-items:center;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.04);font-size:.86rem} .rd-top-list li.me{background:rgba(255,224,138,.14);border:1px solid rgba(255,224,138,.4)} .rd-top-list b{color:#ffe08a}.rd-top-list small{color:#9d978c} .rd-msg{margin:0;padding:10px 16px;background:rgba(232,96,76,.15);color:#ffc9bf;font-size:.86rem;border-top:1px solid rgba(232,96,76,.35)} .raid-combat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0;padding:6px 12px;border-radius:12px;background:rgba(120,60,20,.45);border:1px solid rgba(255,170,110,.45)} .raid-hits{margin-left:auto;font-weight:800;color:#ffe08a;font-size:1.05rem;font-variant-numeric:tabular-nums} /* ---------- 업적 (app_achievements_v0152.js), the handbook's cream page ---------- */ .ac-summary{display:flex;flex-direction:column;gap:10px;margin:0 0 14px} .ac-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .ac-fact{padding:10px 12px;border-radius:12px;background:#f8f4ec;border:1px solid rgba(57,64,79,.1)} .ac-fact small{display:block;font-size:.72rem;color:#8a6d3b} .ac-fact strong{font-size:1.2rem;color:#2f3544;font-variant-numeric:tabular-nums} .ac-fact.ready strong{color:#b0752a} .ac-bar{height:8px;border-radius:4px;background:rgba(57,64,79,.12);overflow:hidden} .ac-bar::after{content:'';display:block;height:100%;width:var(--p);background:linear-gradient(90deg,#c9a86a,#ffe08a)} .ac-btn{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:5px 14px;border-radius:17px;border:1px solid rgba(57,64,79,.2);background:#fff;color:#39404f;font:inherit;font-size:.82rem;cursor:pointer} .ac-btn.primary{background:linear-gradient(#4a5470,#39404f);color:#f3dfae;border-color:#39404f;font-weight:800} .ac-btn:disabled{opacity:.5;cursor:not-allowed} .ac-all{align-self:flex-start} .ac-msg{margin:0 0 10px;padding:8px 12px;border-radius:10px;background:#f3d6d0;color:#9a3b2c;font-size:.84rem} .ac-cats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px} .ac-cat{position:relative;display:inline-flex;align-items:baseline;gap:6px;min-height:0;padding:6px 12px;border-radius:16px;border:1px solid rgba(57,64,79,.15);background:#f8f4ec;color:#39404f;font:inherit;font-size:.82rem;cursor:pointer} .ac-cat small{color:#8a8f9c;font-size:.72rem} .ac-cat.on{background:#39404f;color:#f3dfae;border-color:#39404f} .ac-cat.on small{color:#d8d1c3} .ac-cat.full{box-shadow:inset 0 0 0 1px #c9a86a} .ac-dot{position:absolute;top:-6px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e8604c;color:#fff;font-size:.66rem;line-height:17px;text-align:center} .ac-filters{display:flex;gap:6px;margin:0 0 10px} .ac-filter.on{background:#39404f;color:#f3dfae;border-color:#39404f} .ac-list{display:flex;flex-direction:column;gap:8px} .ac-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:#f8f4ec;border:1px solid rgba(57,64,79,.1)} .ac-medal{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e9e2d2} .ac-medal .shell-icon{width:22px;height:22px;fill:none;stroke:#8a8f9c;stroke-width:1.6} .ac-item.done .ac-medal .shell-icon{stroke:#4a3410} .ac-item.tier-1.done .ac-medal{background:radial-gradient(circle at 38% 32%,#ffe6cc,#c98a52)} .ac-item.tier-2.done .ac-medal{background:radial-gradient(circle at 38% 32%,#ffffff,#9eabbd)} .ac-item.tier-3.done .ac-medal{background:radial-gradient(circle at 38% 32%,#fff6cf,#d9a441);box-shadow:0 0 12px rgba(217,164,65,.55)} .ac-item.done:not(.claimed){border-color:#c9a86a;box-shadow:inset 0 0 0 1px rgba(255,224,138,.7)} .ac-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .ac-copy strong{font-size:.94rem;color:#2f3544} .ac-copy small{font-size:.78rem;color:#6b6f7c} .ac-progress{height:6px;border-radius:3px;background:rgba(57,64,79,.12);overflow:hidden;margin-top:4px} .ac-progress::after{content:'';display:block;height:100%;width:var(--p);background:#c9a86a} .ac-count{font-variant-numeric:tabular-nums} .ac-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px} .ac-reward{font-size:.72rem;color:#8a6d3b;white-space:nowrap} .ac-taken{font-style:normal;font-size:.8rem;color:#35683a} .ac-item.claimed{opacity:.68} .ac-item.secret .ac-copy strong{color:#8a8f9c} /* ---------- 0.15.2 phone fixes (user screenshots of 0.15.0 on a phone) ---------- */ @media (max-width:760px) and (min-height:501px){ /* 편성: the cards stand side by side to swipe through, with a smaller picture */ body.teyvat .party-cols .formation-grid.shell-battle-line{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:2px 2px 8px;overscroll-behavior-x:contain} body.teyvat .party-cols .shell-battle-line>.formation-slot{flex:0 0 76%;max-width:300px;scroll-snap-align:center} body.teyvat .party-cols .party-portrait{max-width:118px} /* 캐릭터: the companions above the sheet are small cards with the name under the face (names stood one letter a line) */ body.teyvat .shell-col-roster .shell-roster{gap:6px;padding-bottom:4px} body.teyvat .shell-col-roster .shell-roster-item{flex:0 0 auto;flex-direction:column;justify-content:center;gap:4px;width:84px;min-height:0;padding:8px 6px 6px;border-radius:18px;text-align:center} body.teyvat .shell-col-roster .shell-roster-item>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem} } @media (max-width:760px) and (min-height:501px){ .rd-overlay{padding:8px} .rd-box{max-height:calc(100dvh - 16px)} .rd-hero{flex-direction:column;text-align:center} .rd-facts{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;flex-basis:100%} .rd-go{flex:1} .rd-top-list li{grid-template-columns:24px 1fr auto} .rd-top-list li small{display:none} .ac-item{flex-wrap:wrap} .ac-side{flex-direction:row;align-items:center;margin-left:54px} .mut-time{margin-left:0;flex-basis:100%} } /* ---------- 0.15.3 다인 모드 (app_coop_v0153.js): the window, the guest's battle window, the host's marks ---------- */ body.teyvat :is(.cp-overlay,.cp-battle){position:fixed;inset:0;z-index:2150;display:grid;place-items:center;padding:16px;background:rgba(5,7,14,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .16s;word-break:keep-all;overflow-wrap:anywhere} body.teyvat .cp-battle{z-index:2160;background:rgba(5,7,14,.78)} body.teyvat :is(.cp-overlay,.cp-battle).open{opacity:1} body.teyvat :is(.cp-box,.cp-bbox){width:min(860px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#1a2335,#121826 60%);color:#ece5d8;border:1px solid rgba(140,190,255,.42);box-shadow:0 26px 70px rgba(0,0,0,.6)} body.teyvat .cp-bbox{width:min(980px,100%);height:calc(100dvh - 32px)} body.teyvat :is(.cp-head,.cp-bhead){display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(160,200,255,.2)} body.teyvat .cp-head-icon{width:32px!important;height:32px!important;padding:5px;border-radius:50%;background:linear-gradient(#cfe9ff,#5d9ad6);color:#10243a;fill:none;stroke:currentColor;stroke-width:1.6;flex:none} body.teyvat .cp-head-copy{display:flex;flex-direction:column;flex:1;min-width:0} body.teyvat .cp-head-copy strong{font:700 1.1rem 'Gowun Batang',serif;color:#d6ebff} body.teyvat .cp-head-copy small{color:#b3b9c6;font-size:.78rem} body.teyvat :is(.cp-close,.cp-back){width:36px;height:36px;min-height:0;padding:0;margin:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(236,229,216,.25);color:#ece5d8;cursor:pointer;flex:none} body.teyvat :is(.cp-close,.cp-back) .shell-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8} body.teyvat .cp-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:38px;margin:0;padding:6px 16px;border-radius:19px;border:1px solid rgba(236,229,216,.3);background:rgba(255,255,255,.07);color:#ece5d8;font:inherit;font-size:.86rem;line-height:1.3;cursor:pointer;word-break:keep-all} body.teyvat .cp-btn.primary{background:linear-gradient(#fbf6ea,#e2d7bf);color:#3b4255;font-weight:800;border:2px solid #fff;box-shadow:0 3px 0 #b7a98a,0 8px 18px rgba(0,0,0,.4)} body.teyvat .cp-btn.cp-danger{border-color:rgba(255,150,130,.55);color:#ffc9bf} body.teyvat .cp-btn.cp-mini{min-height:30px;padding:3px 12px;font-size:.76rem;font-weight:600} body.teyvat .cp-btn:disabled{opacity:.5;cursor:not-allowed} body.teyvat :is(.cp-body,.cp-bbody){flex:1;min-height:0;overflow:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:14px} body.teyvat :is(.cp-body,.cp-bbody) h3{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;font-size:.95rem;color:#f3dfae} body.teyvat :is(.cp-row,.cp-actions){display:flex;flex-wrap:wrap;gap:8px} body.teyvat .cp-note{margin:0;font-size:.8rem;color:#b9c0cc;line-height:1.5} body.teyvat .cp-why{margin:4px 0 0;font-size:.8rem;color:#ffb8a2;line-height:1.45} body.teyvat .cp-empty{margin:0;padding:12px;border-radius:12px;background:rgba(255,255,255,.04);color:#a9b0bc;font-size:.86rem;text-align:center} body.teyvat .cp-msg{margin:0;padding:10px 16px;background:rgba(232,96,76,.15);color:#ffc9bf;font-size:.86rem;line-height:1.45;border-top:1px solid rgba(232,96,76,.35)} body.teyvat .cp-rules{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px dashed rgba(160,200,255,.25)} body.teyvat .cp-rules p{margin:0;font-size:.78rem;color:#c3c9d4;line-height:1.55} body.teyvat :is(.cp-room,.cp-invite-row,.cp-state){display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)} body.teyvat .cp-room+.cp-room{margin-top:8px} body.teyvat :is(.cp-room.invited,.cp-invite-row){border-color:rgba(243,223,174,.55)} body.teyvat .cp-room-copy{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px} body.teyvat .cp-room-copy small{color:#b9c0cc;font-size:.78rem} body.teyvat .cp-room-members{color:#9fd2ff!important} body.teyvat .cp-invite-row strong{flex:1;min-width:150px} body.teyvat .cp-state{flex-direction:column;align-items:flex-start} body.teyvat .cp-state.running{border-color:rgba(255,190,120,.6);background:rgba(120,70,20,.25)} body.teyvat .cp-state small{color:#c9cfd9;font-size:.82rem;line-height:1.5} body.teyvat :is(.cp-chars,.cp-team){display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px} body.teyvat .cp-team>h3{grid-column:1/-1} body.teyvat .cp-char{display:flex;align-items:center;gap:10px;width:100%;min-width:0;margin:0;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#ece5d8;font:inherit;text-align:left;position:relative} body.teyvat button.cp-char{cursor:pointer} body.teyvat button.cp-char:hover:not(:disabled){border-color:rgba(160,200,255,.7)} body.teyvat .cp-char.rarity-5{box-shadow:inset 3px 0 0 #e8b85b} body.teyvat .cp-char.rarity-4{box-shadow:inset 3px 0 0 #a98be0} body.teyvat .cp-char:disabled{opacity:.6} body.teyvat .cp-face{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 15%;background:rgba(255,255,255,.08)} body.teyvat .cp-face-glyph{display:grid;place-items:center;color:#f3dfae;font-size:1.3rem} body.teyvat .cp-char-copy{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} body.teyvat .cp-char-copy strong{font-size:.92rem} body.teyvat .cp-char-copy small{font-size:.72rem;color:#b9c0cc;line-height:1.4} body.teyvat .cp-char-gear{color:#d8c79a!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} body.teyvat .cp-char-why{position:absolute;right:8px;bottom:6px;font-style:normal;font-size:.68rem;color:#ffb8a2;max-width:45%;text-align:right} body.teyvat .cp-member{display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:16px;background:rgba(0,0,0,.18)} body.teyvat .cp-member.me{outline:1px solid rgba(159,210,255,.6)} body.teyvat .cp-member.host{outline:1px solid rgba(243,223,174,.5)} body.teyvat .cp-member.empty{display:grid;place-items:center;min-height:64px;color:#7f8694;font-size:.82rem;border:1px dashed rgba(255,255,255,.15)} body.teyvat .cp-member-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 4px;font-size:.8rem;color:#d6ebff} body.teyvat .cp-member>.cp-btn{align-self:flex-end} body.teyvat .cp-ready{font-style:normal;font-size:.7rem;padding:1px 8px;border-radius:9px;background:rgba(255,255,255,.08);color:#b9c0cc} body.teyvat .cp-ready.on{background:rgba(120,200,140,.25);color:#bdf0c8} body.teyvat .cp-invite{display:flex;flex-direction:column;gap:6px} body.teyvat .cp-online{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.04);font-size:.86rem} /* the guest's battle window */ body.teyvat .cp-turn{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)} body.teyvat .cp-turn.mine{background:rgba(90,140,220,.22);border-color:rgba(159,210,255,.75);box-shadow:0 0 18px rgba(120,180,255,.25)} body.teyvat .cp-turn-who{flex:1;min-width:160px;font-size:.98rem} body.teyvat .cp-turn .cp-note{flex-basis:100%} body.teyvat .cp-count{min-width:52px;padding:2px 10px;border-radius:12px;background:#ece5d8;color:#2b2f3a;font-weight:800;text-align:center;font-variant-numeric:tabular-nums} body.teyvat :is(.cp-count,.cp-host-count).hurry{background:#ff8f73;color:#2b1208} body.teyvat .cp-sides{display:grid;grid-template-columns:1fr 1fr;gap:12px} body.teyvat .cp-side{display:flex;flex-direction:column;gap:6px;min-width:0} body.teyvat .cp-side h3{margin:0} body.teyvat .cp-unit{display:flex;flex-direction:column;gap:3px;padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)} body.teyvat .cp-unit.mine{border-color:rgba(159,210,255,.7)} body.teyvat .cp-unit.acting{box-shadow:0 0 0 2px rgba(243,223,174,.7)} body.teyvat .cp-unit.down{opacity:.45} body.teyvat .cp-unit-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px} body.teyvat .cp-unit-top strong{font-size:.88rem} body.teyvat .cp-unit-top small{font-size:.7rem;color:#b9c0cc} body.teyvat .cp-tag{font-style:normal;font-size:.66rem;padding:0 7px;border-radius:8px;background:rgba(159,210,255,.2);color:#cfe7ff} body.teyvat .cp-tag.me{background:#9fd2ff;color:#10243a;font-weight:800} body.teyvat .cp-tag.host{background:rgba(243,223,174,.2);color:#f3dfae} body.teyvat .cp-tag.auto{background:rgba(255,255,255,.1);color:#c9cfd9} body.teyvat .cp-tag.boss{background:rgba(255,120,90,.3);color:#ffd0c4} body.teyvat .cp-hp{height:7px;border-radius:4px;background:rgba(0,0,0,.35);overflow:hidden} body.teyvat .cp-hp>span{display:block;height:100%;background:linear-gradient(90deg,#7fd68a,#c6f0a0)} body.teyvat .enemies .cp-hp>span{background:linear-gradient(90deg,#e8604c,#ff9a7a)} body.teyvat :is(.cp-hp-num,.cp-unit-st){font-size:.7rem;color:#b9c0cc;font-variant-numeric:tabular-nums} body.teyvat .cp-commands{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:rgba(90,140,220,.12);border:1px solid rgba(159,210,255,.35)} body.teyvat .cp-cards{display:flex;flex-wrap:wrap;gap:8px} body.teyvat .cp-card{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:120px;max-width:100%;margin:0;padding:7px 12px;border-radius:14px;border:1px solid rgba(236,229,216,.25);background:rgba(255,255,255,.06);color:#ece5d8;font:inherit;text-align:left;cursor:pointer} body.teyvat .cp-card strong{font-size:.86rem} body.teyvat .cp-card small{font-size:.7rem;color:#b9c0cc} body.teyvat .cp-card.selected{background:#ece5d8;color:#2b2f3a;border-color:#fff} body.teyvat .cp-card.selected small{color:#5b6070} body.teyvat .cp-card:disabled{opacity:.5;cursor:not-allowed} body.teyvat .cp-go{display:flex;flex-wrap:wrap;align-items:center;gap:8px} body.teyvat .cp-select{min-height:38px;max-width:100%;padding:4px 10px;border-radius:10px;background:rgba(10,14,24,.8);color:#ece5d8;border:1px solid rgba(236,229,216,.3);font:inherit;font-size:.86rem} body.teyvat .cp-run{min-width:96px} body.teyvat .cp-log{display:flex;flex-direction:column;gap:2px} body.teyvat .cp-log p{margin:0;font-size:.76rem;color:#c3c9d4;line-height:1.45} body.teyvat .cp-result{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;text-align:center} body.teyvat .cp-result h2{margin:0;font:700 1.6rem 'Gowun Batang',serif;color:#ffe08a} body.teyvat .cp-result.lose h2{color:#c9cfd9} body.teyvat .cp-result p{margin:0;line-height:1.55} body.teyvat .cp-bfoot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:10px 16px;border-top:1px solid rgba(160,200,255,.15)} body.teyvat .cp-pill{position:fixed;z-index:2055;right:12px;bottom:calc(var(--dock-h,0px) + 14px);display:flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:6px 16px 6px 10px;border-radius:22px;background:rgba(18,24,38,.95);border:1px solid rgba(159,210,255,.6);color:#d6ebff;font:inherit;font-size:.86rem;box-shadow:0 8px 22px rgba(0,0,0,.5);cursor:pointer} body.teyvat .cp-pill .shell-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6} body.teyvat .cp-pill.mine{background:#9fd2ff;color:#10243a;animation:reTease 1.6s ease-in-out infinite} body.teyvat .cp-invite-pop{position:fixed;z-index:2060;left:50%;top:76px;translate:-50% 0;width:min(380px,calc(100vw - 24px));display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:16px;background:linear-gradient(180deg,#1f2638,#161b29);color:#ece5d8;border:1px solid rgba(159,210,255,.65);box-shadow:0 18px 50px rgba(0,0,0,.55);animation:shellIn .25s ease-out;word-break:keep-all;overflow-wrap:anywhere} body.teyvat .cp-invite-pop small{color:#bdb6a9} /* the host's battle screen */ body.teyvat .cp-host-tag{display:inline-block;margin-top:2px;padding:1px 8px;border-radius:8px;background:rgba(159,210,255,.22);color:#cfe7ff;font-size:.68rem;font-weight:700;word-break:keep-all} body.teyvat .cp-host-tag.away{background:rgba(255,255,255,.1);color:#c9cfd9} body.teyvat .cp-host-wait{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 8px;padding:8px 12px;border-radius:12px;background:rgba(90,140,220,.22);border:1px solid rgba(159,210,255,.6);color:#d6ebff;word-break:keep-all} body.teyvat .cp-host-wait .shell-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none} body.teyvat .cp-host-wait small{flex-basis:100%;font-size:.74rem;color:#b9c0cc} body.teyvat .cp-host-count{min-width:44px;padding:0 8px;border-radius:10px;background:#ece5d8;color:#2b2f3a;font-weight:800;text-align:center;font-variant-numeric:tabular-nums} body.teyvat .cp-host-note{margin:0 0 8px;font-size:.78rem;color:#cfe7ff} @media (max-width:760px) and (min-height:501px){ body.teyvat :is(.cp-overlay,.cp-battle){padding:6px} body.teyvat .cp-box{max-height:calc(100dvh - 12px)} body.teyvat .cp-bbox{height:calc(100dvh - 12px)} body.teyvat :is(.cp-body,.cp-bbody){padding:12px 10px 14px;gap:12px} body.teyvat :is(.cp-head,.cp-bhead){padding:10px 12px} body.teyvat :is(.cp-chars,.cp-team){grid-template-columns:1fr} body.teyvat .cp-sides{gap:8px} body.teyvat .cp-unit{padding:6px 8px} body.teyvat .cp-room-copy{min-width:0;flex-basis:100%} body.teyvat :is(.cp-room,.cp-actions)>.cp-btn{flex:1} body.teyvat .cp-card{flex:1 1 calc(50% - 8px);min-width:0} body.teyvat .cp-go>:is(.cp-select,.cp-btn){flex:1 1 100%} body.teyvat .cp-char-why{position:static;max-width:none;text-align:left} body.teyvat .cp-pill{right:10px;left:auto;max-width:calc(100vw - 20px)} } /* ==================== 0.15.3 ==================== */ /* Journal rows (임무: 호감도 임무 · 의뢰 · 동료 획득 임무) wrap by their own width, not the window's. style.css only moved the buttons under the text below 640 px of window, so in the PC journal's narrow columns the buttons kept their width and squeezed the text to one letter a line (user: 「이거 고치라고 했잖아」, screenshot of 호감도 임무). The text keeps at least 200 px; when the row is narrower than picture + text + buttons, the buttons drop to the next line. */ body.teyvat .journal-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px} body.teyvat .journal-row>.journal-thumb{flex:0 0 auto} body.teyvat .journal-row>.journal-row-copy{flex:1 1 200px;min-width:min(200px,100%)} body.teyvat .journal-row>.journal-row-copy :is(strong,small){word-break:keep-all;overflow-wrap:anywhere} body.teyvat .journal-row>.journal-row-actions{flex:1 1 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px} body.teyvat .journal-row>.journal-row-actions button{white-space:normal;word-break:keep-all;max-width:100%} /* ---------- 0.15.6 여행 지도: the map keeps its room ---------- */ /* Whatever sits under the map (the route bar, 지도 보는 법) scrolls the panel instead of squeezing the map to nothing and drawing it over the rest (user: 「글 깨지는것도 잘 해주고」). The Liyue area list opens in its own window. */ body.teyvat .shell-loc-main>#journey-map{overflow-y:auto;overscroll-behavior:contain} body.teyvat #journey-map{word-break:keep-all;overflow-wrap:anywhere} body.teyvat .shell-loc-main>#journey-map>.terrain-layout{min-height:clamp(240px,48vh,460px)} body.teyvat .terrain-shortcuts>button{white-space:nowrap;flex:0 0 auto} body.teyvat #modal .liyue-area-browser{padding:0;margin:0;border:0;word-break:keep-all;overflow-wrap:anywhere} body.teyvat #modal .liyue-area-group h3{margin:14px 0 8px;font-size:.95rem} /* ---------- 0.15.7 앱처럼 하기 (app_install_v0157.js): the install window opens from the title screen too ---------- */ #modal .install-guide{display:grid;gap:12px;word-break:keep-all;overflow-wrap:anywhere} #modal .install-guide .install-lead{margin:0;line-height:1.65} #modal .install-guide .install-steps{margin:0;padding-left:1.3em;display:grid;gap:8px;line-height:1.6} #modal .install-guide :is(.install-go,.install-full){width:100%;min-height:46px;margin:0} /* ---------- 0.15.8 회원가입 안내 (app_signup_v0158.js) ---------- */ #modal .account-form .account-id-hint{display:block;margin:-2px 0 4px;font-size:.78rem;line-height:1.55;color:#5f6b66;word-break:keep-all;overflow-wrap:anywhere} #modal .account-form .account-id-hint.bad{color:#b3261e;font-weight:600} /* ---------- 0.15.9 다인 모드 · 함께 다니기 (app_coop_v0153.js): the host's world, suggestions, the room's talk ---------- */ body.teyvat :is(.cp-world,.cp-talk){display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);word-break:keep-all;overflow-wrap:anywhere} body.teyvat .cp-world>h3,body.teyvat .cp-talk>h3{margin:0} body.teyvat .cp-where{display:flex;flex-direction:column;gap:2px} body.teyvat .cp-where strong{font-size:1rem;color:#f3dfae} body.teyvat .cp-where small{font-size:.8rem;color:#c9cfd9;line-height:1.5} body.teyvat .cp-minimap{position:relative;height:clamp(150px,28vh,230px);border-radius:12px;overflow:hidden;background:#0b1320;border:1px solid rgba(160,200,255,.25)} body.teyvat .cp-minimap-layer{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:880/786} body.teyvat .cp-minimap-layer img{display:block;width:100%;height:100%;pointer-events:none;user-select:none} body.teyvat .cp-pin{position:absolute;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;border:2px solid #10243a;background:#ffd76a;box-shadow:0 0 0 3px rgba(255,215,106,.45),0 2px 6px rgba(0,0,0,.5)} body.teyvat .cp-pin.suggest{background:#9fd2ff;box-shadow:0 0 0 3px rgba(159,210,255,.45),0 2px 6px rgba(0,0,0,.5)} body.teyvat .cp-pin em{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);padding:1px 7px;border-radius:9px;background:rgba(16,24,38,.92);color:#fff;font-style:normal;font-size:.7rem;white-space:nowrap} body.teyvat .cp-suggested{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.84rem;color:#d6ebff} body.teyvat .cp-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px} body.teyvat .cp-chips-label{flex-basis:100%;font-size:.78rem;color:#b9c0cc} body.teyvat .cp-btn.cp-chip{min-height:32px;padding:4px 12px;font-size:.78rem;border-radius:16px} body.teyvat .cp-btn.cp-chip.on{border-color:#9fd2ff;color:#9fd2ff} body.teyvat .cp-talk-log{display:flex;flex-direction:column;gap:4px;max-height:170px;overflow:auto} body.teyvat .cp-talk-line{margin:0;font-size:.84rem;line-height:1.5;color:#ece5d8} body.teyvat .cp-talk-line strong{margin-right:6px;color:#9fd2ff;font-size:.8rem} body.teyvat .cp-talk-line.host strong{color:#f3dfae} body.teyvat .cp-talk-form{display:flex;gap:6px} body.teyvat .cp-talk-form input{flex:1;min-width:0;min-height:38px;padding:6px 12px;border-radius:19px;border:1px solid rgba(236,229,216,.3);background:rgba(0,0,0,.25);color:#ece5d8;font:inherit;font-size:.86rem} /* The world note is a small two-line card: under every window (z-index), above the version mark, clear of the chat button. */ body.teyvat .cp-pill.world{z-index:1150;bottom:calc(var(--dock-h,0px) + 30px);max-width:min(270px,calc(100vw - 80px));min-height:44px;padding:5px 14px 5px 10px;border-radius:18px;border-color:rgba(243,223,174,.55);color:#f3dfae} body.teyvat .cp-pill.world .shell-icon{flex:0 0 auto} body.teyvat .cp-pill-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.3;text-align:left} body.teyvat .cp-pill-copy :is(strong,small){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.teyvat .cp-pill-copy strong{font-size:.82rem} body.teyvat .cp-pill-copy small{font-size:.74rem;color:#d6ebff;opacity:.9} body.teyvat .cp-pill.world.compact{width:46px;height:46px;min-height:46px;padding:0;justify-content:center;border-radius:50%} body.teyvat .cp-pill.world.compact .cp-pill-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} body.teyvat .cp-pill.world.compact:focus-visible{width:auto;height:auto;min-height:44px;padding:5px 14px 5px 10px;border-radius:18px} body.teyvat .cp-pill.world.compact:focus-visible .cp-pill-copy{position:static;width:auto;height:auto;clip-path:none} @media (hover:hover){ body.teyvat .cp-pill.world.compact:hover{width:auto;height:auto;min-height:44px;padding:5px 14px 5px 10px;border-radius:18px} body.teyvat .cp-pill.world.compact:hover .cp-pill-copy{position:static;width:auto;height:auto;clip-path:none} } body.teyvat .cp-char-stats span{white-space:nowrap} /* Settings 「정보」: the operator's note on asking customer service, under the fan-project notice. */ .shell-guidance{margin-top:0;font-size:.82rem;color:#d8cfbd;word-break:keep-all;overflow-wrap:anywhere} /* 0.15.15: room under the corner button at the end of the field screen's lists (phone tabs; PC side list and map). */ body.teyvat.cp-world-on .shell-loc-tabs>.shell-panes{padding-bottom:86px} body.teyvat.cp-world-on :is(.shell-loc-left,.shell-loc-main){padding-bottom:64px} /* The host has a guest's suggestion waiting. */ body.teyvat .cp-pill.world.news::after{content:'';position:absolute;top:1px;right:1px;width:11px;height:11px;border-radius:50%;background:#f3c96b;box-shadow:0 0 0 2px rgba(18,24,38,.95)} /* Audit repairs: shared visibility, inset, and responsive content/input boundaries. */ [hidden]{display:none!important} :root{--crpg-top-inset:0px} body:not(.teyvat) .game-title{padding-top:var(--crpg-top-inset)} body.teyvat main>aside.shell-hud{top:var(--crpg-top-inset)} body.teyvat #root>main{padding-top:calc(var(--hud-h) + var(--crpg-top-inset) + 8px)} body.teyvat :is(.paimon-menu,.handbook,.shell-scenery,.trade-overlay,.deal-overlay,.pf-overlay,.wish-screen,.ch-overlay,.ml-overlay,.rd-overlay,.cp-overlay,.cp-battle){top:var(--crpg-top-inset)} body.teyvat :is(.pm-box,.trade-box,.deal-box,.pf-box,.ch-box,.ml-box,.rd-box,.cp-box,.cp-bbox){max-height:calc(100dvh - var(--crpg-top-inset) - 32px)} body.teyvat .hb-book{height:min(780px,calc(100dvh - var(--crpg-top-inset) - 32px))} body.teyvat .cp-bbox{height:calc(100dvh - var(--crpg-top-inset) - 32px)} body.teyvat #notice:not(:empty),body.teyvat #root>.pending-action-notice{top:calc(var(--hud-h) + var(--crpg-top-inset) + 10px)} body.teyvat #notice:not(:empty){max-height:max(44px,30dvh);overflow:auto;word-break:keep-all;overflow-wrap:anywhere} .hud-guide-pop{top:calc(var(--hud-h,62px) + var(--crpg-top-inset) + var(--shell-notice-offset,0px) + 8px);max-height:calc(100dvh - var(--hud-h,62px) - var(--crpg-top-inset) - var(--shell-notice-offset,0px) - var(--dock-h,0px) - 24px)} .shell-toast{top:calc(var(--hud-h,62px) + var(--crpg-top-inset) + var(--shell-notice-offset,0px) + 14px)} body.teyvat.shell-overlay-open>.cp-pill,body.teyvat.shell-overlay-open>.chat-fab{display:none} body.teyvat .shell-dialogue p.story{word-break:keep-all;overflow-wrap:anywhere} /* The replay dock already contains progress and controls; its old command placeholder was visible behind it. */ .av-running body.teyvat .combat-panel .battle-command{visibility:hidden} /* 0.15.25: the band lies exactly on that command area (app_battle_layout_v01522.js fitPlayback sets its box). */ body.teyvat .combat-playback.command-docked{position:fixed;box-sizing:border-box;margin:0;max-height:none;overflow:auto;overscroll-behavior:contain} body.teyvat .relationship-card .relationship-next{word-break:keep-all;overflow-wrap:anywhere} body.teyvat .quest-cols .quest-list{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))} /* A missing illustration must not reserve an illustration-sized empty column or a 38vh mobile panel. */ body.teyvat .gear-stage>.shell-splash.empty{display:none} body.teyvat .gear-stage:has(>.shell-splash.empty)>.gear-members,body.teyvat .gear-stage:has(>.shell-splash.empty)>:not(.shell-splash){width:100%} body.teyvat .gear-cols:not(:has(>.shell-col-side)){grid-template-columns:170px minmax(0,1fr)} body.teyvat .gear-cols:not(:has(>.shell-col-roster)){grid-template-columns:minmax(0,1fr) minmax(250px,300px)} body.teyvat .gear-cols:not(:has(>.shell-col-side)):not(:has(>.shell-col-roster)){grid-template-columns:minmax(0,1fr)} /* Touch tablets keep every menu: status above, navigation and tools below. */ @media (min-width:761px) and (max-width:1180px){ body.teyvat{--hud-h:112px} body.teyvat main>aside.shell-hud{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:50px 48px;gap:4px 10px;align-items:center;padding:4px 12px} body.teyvat .shell-hud>.hud-info{grid-column:1;grid-row:1} body.teyvat .shell-hud>.hud-guide-slot{grid-column:2;grid-row:1} body.teyvat .shell-hud>.hud-me{grid-column:3;grid-row:1;margin-left:0;justify-self:end} body.teyvat .shell-hud>.hud-nav{grid-column:1/3;grid-row:2;justify-content:space-between;min-width:0;gap:2px} body.teyvat .shell-hud>.hud-tools{grid-column:3;grid-row:2;justify-self:end;gap:2px;padding-left:6px} body.teyvat .hud-tools .hud-tool{width:34px;height:40px;min-height:40px;flex:0 0 34px} body.teyvat nav.hud-nav button.hud-nav-button{width:36px;height:40px;min-height:40px;flex:0 1 42px} body.teyvat .hud-place-name{max-width:100%} } @media (max-width:760px) and (min-height:501px){ body.teyvat{--dock-h:calc(60px + env(safe-area-inset-bottom))} body.teyvat #root>main{padding-top:calc(var(--hud-h) + var(--crpg-top-inset) + 6px)} /* Chat occupies its own dock slot instead of covering the first item/quest in the scrolling page. */ body.teyvat:has(>.chat-fab) nav.hud-nav{padding-right:60px} body.teyvat>.chat-fab{left:auto;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:44px;height:44px} body.teyvat .content.shell-story{gap:10px;justify-content:flex-start} body.teyvat .content.shell-story>.shell-story-figure{position:relative;inset:auto;flex:0 1 clamp(140px,30dvh,250px);height:clamp(140px,30dvh,250px);min-height:100px;max-height:40%;overflow:hidden} body.teyvat .shell-story-figure .portrait-frame{width:100%;height:100%;min-height:0;max-width:100%;align-items:center} body.teyvat .shell-story-figure .portrait-frame img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;-webkit-mask-image:none;mask-image:none} body.teyvat .panel.shell-dialogue{flex:1 1 0;min-height:0;max-height:none;margin:0 -8px -8px;padding:14px 16px 12px;background:var(--t-glass-2);border-top:1px solid var(--t-line);border-radius:14px 14px 0 0} body.teyvat .content.shell-story>.panel.shell-dialogue{flex:1 1 0} body.teyvat .shell-story:not(:has(.shell-story-figure)){justify-content:flex-end} body.teyvat .shell-story:not(:has(.shell-story-figure))>.panel.shell-dialogue{flex:0 1 auto;max-height:100%} body.teyvat .shell-dialogue .speaker:after{flex:1 1 auto} body.teyvat .gear-cols:not(:has(>.shell-col-side)),body.teyvat .gear-cols:not(:has(>.shell-col-roster)){display:flex;flex-direction:column} } /* ---------- 0.15.21 전투 연출 (app_battle_fx_v01521.js) ---------- */ /* The attached element: an emblem in the badge, a breathing glow and the element's own particles on the card. */ body.teyvat .shell-aura-badge{display:inline-flex;align-items:center;animation:shellAuraIn .3s ease-out,fxBadgeGlow 2.4s ease-in-out .3s infinite} @keyframes fxBadgeGlow{0%,100%{box-shadow:0 0 8px var(--aura,#fff),0 2px 4px rgba(0,0,0,.5)}50%{box-shadow:0 0 16px var(--aura,#fff),0 2px 4px rgba(0,0,0,.5)}} body.teyvat .combat-panel .combatant-row>.aura-fx{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:1;animation:fxAuraBreath 2.6s ease-in-out infinite} body.teyvat .combat-panel .combatant-row>.aura-fx>i{position:absolute;display:block;left:calc(7% + var(--i)*15%);bottom:-10px;width:6px;height:6px;border-radius:50%;background:var(--aura);opacity:0;filter:drop-shadow(0 0 4px var(--aura));animation:fxRise 2.8s linear infinite;animation-delay:calc(var(--i)*-.47s)} body.teyvat .combat-panel .aura-fx.aura-pyro>i{width:5px;height:7px;border-radius:50% 50% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff3c4,#ff9a4a 55%,#ff5a2a);animation-duration:2.2s} body.teyvat .combat-panel .aura-fx.aura-hydro>i{width:8px;height:8px;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.9),rgba(76,194,241,.25) 45%,transparent 70%);border:1.5px solid rgba(76,194,241,.85);animation-name:fxBubble;animation-duration:3.2s} body.teyvat .combat-panel .aura-fx.aura-cryo>i{top:-10px;bottom:auto;width:8px;height:8px;border-radius:0;background:#e9fbff;clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%);animation-name:fxFall;animation-duration:3.4s} body.teyvat .combat-panel .aura-fx.aura-electro>i{top:calc(12% + var(--i)*13%);bottom:auto;width:14px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,#f1e2ff 30%,#c79bff 60%,transparent);transform:rotate(calc(var(--i)*47deg));animation-name:fxSpark;animation-duration:1.3s;animation-timing-function:steps(1,end)} body.teyvat .combat-panel .aura-fx.aura-dendro>i,body.teyvat .combat-panel .aura-fx.aura-anemo>i{width:9px;height:5px;border-radius:0 80% 0 80%;animation-name:fxLeaf;animation-duration:3.3s} body.teyvat .combat-panel .aura-fx.aura-geo>i{top:calc(14% + var(--i)*13%);bottom:auto;width:7px;height:7px;border-radius:1px;background:#ffe9a6;animation-name:fxTwinkle;animation-duration:2.1s} @keyframes fxAuraBreath{0%,100%{box-shadow:inset 0 0 14px -6px var(--aura)}50%{box-shadow:inset 0 0 26px -3px var(--aura)}} @keyframes fxRise{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.95}70%{opacity:.6}100%{transform:translate(6px,-130px) scale(.2);opacity:0}} @keyframes fxBubble{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}50%{transform:translate(5px,-62px)}100%{transform:translate(-4px,-135px);opacity:0}} @keyframes fxFall{0%{transform:translate(0,0) rotate(0);opacity:0}15%{opacity:.9}100%{transform:translate(-6px,140px) rotate(180deg);opacity:0}} @keyframes fxSpark{0%,100%{opacity:0}8%{opacity:1}16%{opacity:.15}24%{opacity:.9}32%{opacity:0}} @keyframes fxLeaf{0%{transform:translate(0,0) rotate(0);opacity:0}15%{opacity:.9}100%{transform:translate(16px,-125px) rotate(240deg);opacity:0}} @keyframes fxTwinkle{0%,100%{transform:scale(.3) rotate(45deg);opacity:0}50%{transform:scale(1) rotate(45deg);opacity:1}} /* A shield is a glassy bubble inside the card (user: 「그물망 같아」 — no lattice; it stays within the card, so no scroll bar appears), in its element's colour, with a slow sheen; it brightens when it soaks a hit. */ body.teyvat .combat-panel .combatant-row>.shield-fx{--sh:150,210,255;position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:2;border:1.5px solid rgba(var(--sh),.9);background:radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.3),transparent 50%),radial-gradient(140% 110% at 50% 120%,rgba(var(--sh),.24),transparent 60%),linear-gradient(rgba(var(--sh),.08),rgba(var(--sh),.08));box-shadow:0 0 12px rgba(var(--sh),.6),inset 0 0 20px rgba(var(--sh),.42);animation:fxShieldPulse 2.8s ease-in-out infinite} body.teyvat .combat-panel .combatant-row>.shield-fx::before{content:'';position:absolute;top:-40%;bottom:-40%;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:translateX(-140%) skewX(-18deg);animation:fxShieldSheen 3.6s ease-in-out infinite} body.teyvat .combat-panel .combatant-row>.shield-fx.shield-geo{--sh:245,197,66} body.teyvat .combat-panel .combatant-row>.shield-fx.shield-cryo{--sh:166,228,242} body.teyvat .combat-panel .combatant-row>.shield-fx.shield-electro{--sh:199,155,255} body.teyvat .combat-panel .combatant-row>.shield-fx.shield-pyro{--sh:255,138,80} body.teyvat .combat-panel .combatant-row>.shield-fx.shield-hydro{--sh:76,194,241} body.teyvat .combat-panel .combatant-row>.shield-fx.shield-dendro{--sh:165,214,59} body.teyvat .combat-panel .combatant-row>.shield-fx.hit{animation:fxShieldHit .45s ease-out} body.teyvat .combat-panel .combatant-row>.shield-fx.appear{animation:fxShieldAppear .55s ease-out} @keyframes fxShieldPulse{0%,100%{box-shadow:0 0 10px rgba(var(--sh),.5),inset 0 0 16px rgba(var(--sh),.36)}50%{box-shadow:0 0 16px rgba(var(--sh),.75),inset 0 0 26px rgba(var(--sh),.5)}} @keyframes fxShieldSheen{0%{transform:translateX(-140%) skewX(-18deg)}55%,100%{transform:translateX(420%) skewX(-18deg)}} @keyframes fxShieldHit{0%{filter:brightness(2.4)}100%{filter:brightness(1)}} @keyframes fxShieldAppear{0%{opacity:0;filter:brightness(2)}100%{opacity:1;filter:brightness(1)}} /* A card flashes red when hit and green when healed (user: 「공격 받은 인원은 잠깐 붉은 색으로, 회복하면 초록색으로」). */ body.teyvat .combat-panel .combatant-row>.hit-flash{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0} body.teyvat .combat-panel .combatant-row>.hit-flash.damage{background:rgba(255,46,46,.3);box-shadow:inset 0 0 26px rgba(255,40,40,.95)} body.teyvat .combat-panel .combatant-row>.hit-flash.heal{background:rgba(60,225,110,.34);box-shadow:inset 0 0 26px rgba(70,255,130,.9)}/* Statuses that change how a fighter looks. */ body.teyvat .combat-panel .combatant-row>.status-fx{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:1} body.teyvat .combat-panel .status-fx>.st{position:absolute;inset:0} body.teyvat .combat-panel .status-fx>.st-freeze{background:linear-gradient(140deg,rgba(225,248,255,.55),rgba(140,205,240,.22) 35%,rgba(210,245,255,.48) 60%,rgba(150,210,245,.2));border:2px solid rgba(200,240,255,.85);border-radius:inherit;box-shadow:inset 0 0 22px rgba(190,235,255,.75);clip-path:polygon(0 6%,8% 0,22% 4%,35% 0,52% 5%,66% 0,80% 4%,92% 0,100% 7%,98% 25%,100% 44%,97% 62%,100% 80%,95% 100%,74% 96%,55% 100%,36% 96%,18% 100%,3% 95%,0 76%,3% 55%,0 35%)} body.teyvat .combat-panel .status-fx>.st-burn{top:auto;height:46%;background:radial-gradient(ellipse at 20% 100%,rgba(255,140,60,.75),transparent 60%),radial-gradient(ellipse at 55% 100%,rgba(255,90,40,.7),transparent 55%),radial-gradient(ellipse at 85% 100%,rgba(255,170,70,.7),transparent 60%);animation:fxFlicker .5s steps(2,end) infinite alternate} body.teyvat .combat-panel .status-fx>.st-charged{border:2px solid rgba(199,155,255,.85);border-radius:inherit;box-shadow:inset 0 0 18px rgba(199,155,255,.65),0 0 12px rgba(199,155,255,.55);animation:fxCharged 1.1s steps(1,end) infinite} body.teyvat .combat-panel .status-fx>.st-wet::before,body.teyvat .combat-panel .status-fx>.st-wet::after{content:'';position:absolute;top:-8px;width:4px;height:7px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:rgba(120,205,255,.9);animation:fxDrip 1.6s linear infinite} body.teyvat .combat-panel .status-fx>.st-wet::before{left:24%} body.teyvat .combat-panel .status-fx>.st-wet::after{left:68%;animation-delay:-.8s} body.teyvat .combat-panel .status-fx>.st-poison{box-shadow:inset 0 0 22px rgba(120,210,80,.6);animation:fxAuraBreath 2s ease-in-out infinite;--aura:#7fd04f} body.teyvat .combat-panel .status-fx>.st-chill{background:linear-gradient(180deg,rgba(200,240,255,.28),transparent 45%);box-shadow:inset 0 0 16px rgba(190,235,255,.5)} body.teyvat .combat-panel .status-fx>.st-corrosion{box-shadow:inset 0 0 20px rgba(150,90,200,.6);background:radial-gradient(circle at 30% 80%,rgba(120,60,170,.3),transparent 50%)} body.teyvat .combat-panel .status-fx>.st-taunt{border:2px solid rgba(255,90,80,.85);border-radius:inherit;animation:fxTaunt 1.2s ease-in-out infinite} @keyframes fxFlicker{0%{opacity:.75;transform:scaleY(1)}100%{opacity:1;transform:scaleY(1.12)}} @keyframes fxCharged{0%,100%{opacity:.25}10%{opacity:1}20%{opacity:.35}35%{opacity:.95}50%{opacity:.3}} @keyframes fxDrip{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(130px);opacity:0}} @keyframes fxTaunt{0%,100%{box-shadow:0 0 0 rgba(255,90,80,0)}50%{box-shadow:0 0 16px rgba(255,90,80,.7)}} /* Playback bursts: reactions, a breaking shield and the elemental burst sweep (WAAPI on CombatFX's clock). */ .combat-light.bfx{width:14px;height:14px;border-radius:50%;margin:0} .combat-light.rfx-ring{width:46px;height:46px;border:3px solid currentColor;background:none;box-shadow:0 0 14px currentColor} .combat-light.rfx-flash{width:70px;height:70px;background:radial-gradient(circle,#fff6d6,rgba(255,150,60,.85) 40%,rgba(255,80,30,0) 70%)} .combat-light.rfx-spark{width:16px;height:4px;border-radius:2px;background:currentColor;box-shadow:0 0 8px currentColor} .combat-light.rfx-overload{color:#ff8a3d} .combat-light.rfx-vaporize{color:#e8f6ff} .combat-light.rfx-puff{width:26px;height:26px;background:radial-gradient(circle,rgba(255,255,255,.85),rgba(220,235,245,.4) 50%,transparent 70%)} .combat-light.rfx-melt-a{color:#ff9b54} .combat-light.rfx-melt-b{color:#9be6ff} .combat-light.rfx-drop{width:8px;height:11px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:currentColor} .combat-light.rfx-frozen{color:#bff0ff} .combat-light.rfx-crystal{width:12px;height:26px;border-radius:2px;background:linear-gradient(180deg,#f2fdff,#9fdcf5);clip-path:polygon(50% 0,100% 30%,80% 100%,20% 100%,0 30%);box-shadow:0 0 10px #bff0ff} .combat-light.rfx-superconduct{color:#d6b8ff} .combat-light.rfx-charged{color:#c79bff} .combat-light.rfx-arc{width:34px;height:10px;border-radius:0;background:none;border-top:2px solid #e6d2ff;border-bottom:2px solid #b07cff;transform-origin:center;filter:drop-shadow(0 0 6px #c79bff);clip-path:polygon(0 50%,20% 0,40% 100%,60% 0,80% 100%,100% 50%,80% 60%,60% 20%,40% 80%,20% 20%)} .combat-light.rfx-swirl{width:60px;height:60px;background:conic-gradient(from 0deg,rgba(116,224,194,0),rgba(116,224,194,.9),rgba(116,224,194,0) 40%,rgba(160,240,215,.85) 70%,rgba(116,224,194,0));-webkit-mask:radial-gradient(circle,transparent 32%,#000 34%,#000 62%,transparent 64%);mask:radial-gradient(circle,transparent 32%,#000 34%,#000 62%,transparent 64%)} .combat-light.rfx-leaf{width:10px;height:6px;border-radius:0 80% 0 80%;background:#8ff0cf} .combat-light.rfx-gem{width:24px;height:30px;border-radius:0;background:linear-gradient(160deg,#fff6c9,#f5c542 55%,#c98e1a);clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);filter:drop-shadow(0 0 10px #f5c542)} .combat-light.rfx-crystallize{color:#f5c542} .combat-light.rfx-flame{width:18px;height:26px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 75%,#fff2b8,#ffa14a 45%,rgba(255,80,40,.2) 75%,transparent)} .combat-light.rfx-orb{width:16px;height:16px;background:radial-gradient(circle at 35% 35%,#f4ffd6,#a5d63b 55%,rgba(120,180,40,.2))} .combat-light.rfx-bloom{color:#a5d63b} .combat-light.shield-shard{width:10px;height:16px;border-radius:0;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(150,210,255,.7));clip-path:polygon(50% 0,100% 40%,70% 100%,10% 85%,0 30%)} .combat-light.shield-shard.shard-geo{background:linear-gradient(180deg,#fff6c9,#f5c542)} .combat-light.shard-ring{color:#cfe9ff}.combat-light.shard-ring.shard-geo{color:#f5c542} /* Weapon blows, RPG Maker style, drawn where they land (--fx is the hit's element colour, white when physical). */ .combat-light.wfx-arc{width:170px;height:170px;border-radius:50%;background:none;border-top:8px solid #fff;border-right:3px solid transparent;border-left:3px solid transparent;filter:drop-shadow(0 0 2px rgba(0,0,0,.7)) drop-shadow(0 0 8px var(--fx,#fff)) drop-shadow(0 0 18px var(--fx,#fff));z-index:2} .combat-light.wfx-arc.heavy{width:230px;height:230px;border-top-width:13px} .combat-light.wfx-dust{width:150px;height:22px;border-radius:50%;background:radial-gradient(ellipse,rgba(230,220,200,.75),rgba(180,160,130,.25) 55%,transparent 72%)} .combat-light.wfx-streak{width:150px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4) 30%,#fff 80%,var(--fx,#fff));box-shadow:0 0 10px var(--fx,#fff)} .combat-light.wfx-spark{width:16px;height:3px;border-radius:2px;background:#fff;box-shadow:0 0 8px var(--fx,#fff)} .combat-light.wfx-star{width:80px;height:80px;border-radius:0;background:radial-gradient(circle,#fff 0 18%,var(--fx,#fff) 30%,transparent 62%);clip-path:polygon(50% 0,58% 36%,92% 18%,66% 46%,100% 54%,64% 60%,78% 94%,52% 68%,30% 100%,38% 64%,0 66%,34% 48%,8% 20%,42% 34%)} .combat-light.wfx-ring{width:60px;height:60px;border:3px solid var(--fx,#fff);background:none;box-shadow:0 0 12px var(--fx,#fff)} /* 약점 간파 (user: 「약점 간파 됐으면 디버프창에 디버프로 적혀있어야 되는거 아니야?」): a red sight locks on as it lands, and stays on the card while the target takes more damage. */ .combat-light.wfx-sight{width:84px;height:84px;border-radius:50%;border:3px solid #ff5a4a;background:linear-gradient(#ff5a4a,#ff5a4a) center/3px 100% no-repeat,linear-gradient(#ff5a4a,#ff5a4a) center/100% 3px no-repeat;-webkit-mask:radial-gradient(circle,transparent 26%,#000 27%);mask:radial-gradient(circle,transparent 26%,#000 27%);box-shadow:0 0 14px rgba(255,90,74,.8)} body.teyvat .combat-panel .status-fx>.st-exposed{border:2px solid rgba(255,90,74,.7);border-radius:inherit;box-shadow:inset 0 0 18px rgba(255,80,66,.4)} body.teyvat .combat-panel .status-fx>.st-exposed::before{content:'';position:absolute;left:50%;top:40%;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,96,84,.9);background:linear-gradient(rgba(255,96,84,.9),rgba(255,96,84,.9)) center/2px 100% no-repeat,linear-gradient(rgba(255,96,84,.9),rgba(255,96,84,.9)) center/100% 2px no-repeat;-webkit-mask:radial-gradient(circle,transparent 30%,#000 31%);mask:radial-gradient(circle,transparent 30%,#000 31%);box-shadow:0 0 10px rgba(255,80,66,.7);transform:translate(-50%,-50%);animation:fxSight 1.8s ease-in-out infinite} @keyframes fxSight{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:.75}50%{transform:translate(-50%,-50%) scale(.88) rotate(45deg);opacity:1}} .st-chip.fresh{animation:fxChipIn .55s cubic-bezier(.2,.8,.3,1.3)} @keyframes fxChipIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}} .combat-light.wfx-circle{width:120px;height:120px;background:radial-gradient(circle,transparent 0 46%,var(--fx,#fff) 47% 49%,transparent 50% 58%,var(--fx,#fff) 59% 60%,transparent 61%),repeating-conic-gradient(from 0deg,var(--fx,#fff) 0 4deg,transparent 4deg 30deg);-webkit-mask:radial-gradient(circle,transparent 40%,#000 41% 62%,transparent 63%);mask:radial-gradient(circle,transparent 40%,#000 41% 62%,transparent 63%);filter:drop-shadow(0 0 8px var(--fx,#fff))} .combat-light.wfx-orb{width:46px;height:46px;background:radial-gradient(circle,#fff 0 20%,var(--fx,#fff) 45%,transparent 70%)} .combat-light.wfx-claw{width:96px;height:5px;border-radius:3px;background:linear-gradient(90deg,transparent,#fff 25%,var(--fx,#ff8a7a) 80%,transparent);transform-origin:left center;box-shadow:0 0 8px rgba(255,90,80,.8)} .combat-light.wfx-arrow{width:56px;height:6px;border-radius:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 30%,#e8d4a8 60%,#fff 100%);clip-path:polygon(0 35%,80% 35%,80% 0,100% 50%,80% 100%,80% 65%,0 65%);filter:drop-shadow(0 0 6px var(--fx,#fff))} .combat-light.wfx-bolt{width:26px;height:26px;background:radial-gradient(circle,#fff 0 25%,var(--fx,#fff) 50%,transparent 72%);box-shadow:0 0 16px var(--fx,#fff)}/* Outside the fight: rewards pop in one by one, rarer ones with a sweep of light, and the level-up banner shines. */ .loot-grid>.loot-item{animation:fxLootPop .42s cubic-bezier(.2,.9,.3,1.25) both} .loot-grid>.loot-item:nth-child(2){animation-delay:.06s}.loot-grid>.loot-item:nth-child(3){animation-delay:.12s}.loot-grid>.loot-item:nth-child(4){animation-delay:.18s}.loot-grid>.loot-item:nth-child(5){animation-delay:.24s}.loot-grid>.loot-item:nth-child(6){animation-delay:.3s}.loot-grid>.loot-item:nth-child(7){animation-delay:.36s}.loot-grid>.loot-item:nth-child(8){animation-delay:.42s}.loot-grid>.loot-item:nth-child(n+9){animation-delay:.48s} .loot-grid>.loot-item.tier-4,.loot-grid>.loot-item.tier-5{position:relative;overflow:hidden} .loot-grid>.loot-item.tier-4::after,.loot-grid>.loot-item.tier-5::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);transform:translateX(-120%);animation:fxShine 1.6s ease-out .5s 2} @keyframes fxLootPop{0%{opacity:0;transform:translateY(10px) scale(.86)}100%{opacity:1;transform:none}} @keyframes fxShine{to{transform:translateX(120%)}} .shell-levelup::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 25%,rgba(243,223,174,.42) 50%,transparent 75%);transform:translateX(-110%);animation:fxShine 1.3s ease-out .25s 1 forwards} html.reduce-motion body.teyvat .combat-panel .aura-fx,html.reduce-motion body.teyvat .combat-panel .aura-fx>i,html.reduce-motion body.teyvat .combat-panel .shield-fx,html.reduce-motion body.teyvat .combat-panel .shield-fx::before,html.reduce-motion body.teyvat .combat-panel .status-fx>.st,html.reduce-motion body.teyvat .combat-panel .status-fx>.st::before,html.reduce-motion body.teyvat .combat-panel .status-fx>.st::after,html.reduce-motion body.teyvat .shell-aura-badge,html.reduce-motion .loot-grid>.loot-item,html.reduce-motion .loot-grid>.loot-item::after,html.reduce-motion .shell-levelup::after{animation:none!important} html.reduce-motion body.teyvat .combat-panel .aura-fx>i{display:none} /* The fighter whose turn it is glows as a whole card (user: 「차례인 인원은 아예 그 캐릭터 프로필 전체가 빛나는걸로」). */ body.teyvat .combat-panel .combatant-row.shell-acting{border-color:rgba(255,236,190,.95)!important;animation:fxActingGlow 1.5s ease-in-out infinite} body.teyvat .combat-panel .shell-enemies .combatant-row.shell-acting{animation-name:fxActingGlowFoe} @keyframes fxActingGlow{0%,100%{box-shadow:0 0 0 2px rgba(243,223,174,.7),0 0 14px rgba(243,223,174,.4),inset 0 0 16px rgba(243,223,174,.12)}50%{box-shadow:0 0 0 3px rgba(255,238,196,1),0 0 30px rgba(243,223,174,.85),inset 0 0 34px rgba(243,223,174,.32)}} @keyframes fxActingGlowFoe{0%,100%{box-shadow:0 0 0 2px rgba(255,170,130,.7),0 0 14px rgba(255,140,100,.4),inset 0 0 16px rgba(255,140,100,.12)}50%{box-shadow:0 0 0 3px rgba(255,200,160,1),0 0 30px rgba(255,140,100,.85),inset 0 0 34px rgba(255,140,100,.3)}} /* 「효과」 is an ⓘ button (user: 「글로 써져있는건 왠만하면 아이콘으로」); its name stays in aria-label and the title. */ body.teyvat .combat-panel .battle-effect-button{font-size:0!important;min-width:30px;padding:0!important;display:inline-grid;place-items:center} body.teyvat .combat-panel .battle-effect-button::before{content:'';width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1.2 15.5h-2.4v-7h2.4zm0-9h-2.4V6.2h2.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1.2 15.5h-2.4v-7h2.4zm0-9h-2.4V6.2h2.4z'/%3E%3C/svg%3E") center/contain no-repeat} /* 0.15.21 아이콘 (app_icons_v01521.js; user: 「원래 퍼즐때 쓰던 아이콘 있잖아 여기다가도 넣으면 되잖아」, then 「딴데서 에셋을 가져오는게 맞지 않아?」): the original game's element symbols, weapon kinds and talent pictures (content/genshin-ui-assets.json). */ .el-icon,.weapon-icon,.talent-icon{display:inline-grid;place-items:center;flex:none;vertical-align:-.3em} .el-icon>img,.weapon-icon>img,.talent-icon>img{width:100%;height:100%;object-fit:contain;pointer-events:none} .el-icon{width:1.3em;height:1.3em} .el-icon>img{filter:drop-shadow(0 0 1.5px rgba(0,0,0,.65))} .weapon-icon{width:1.6em;height:1.6em;border-radius:50%;background:rgba(14,17,27,.6);border:1px solid rgba(236,229,216,.22)} .weapon-icon>img{width:78%;height:78%} .talent-icon{width:1.9em;height:1.9em;border-radius:50%;background:rgba(14,17,27,.7);border:1.5px solid color-mix(in srgb,var(--c,#d3bc8e) 70%,transparent);box-shadow:0 0 8px color-mix(in srgb,var(--c,#d3bc8e) 30%,transparent)} .talent-icon>img{width:80%;height:80%} /* the puzzles' orbs: the element's symbol in white on the coloured ball */ .pz-orb>img.pz-glyph{width:66%;height:66%;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0,0,0,.35));pointer-events:none} .member-pick-meta .el-icon{margin-left:6px;font-size:1.1rem;vertical-align:-.4em} .member-pick-meta .pick-weapon{margin-left:4px;font-size:.95rem;vertical-align:-.45em} body.teyvat .combat-panel .combatant-copy strong .own-element{margin-right:4px;font-size:1.05em;vertical-align:-.28em} /* the aura badge and the floating 「부착」 are the element's colour, so its symbol sits on a dark disc */ body.teyvat .shell-aura-badge .el-icon,body.teyvat .combat-light.aura-tag .el-icon{width:17px;height:17px;margin:-1px 5px 0 -6px;padding:1.5px;border-radius:50%;background:rgba(21,18,14,.88);box-sizing:border-box} body.teyvat .combat-light.aura-tag{display:inline-flex;align-items:center} body.teyvat .gear-member-copy h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap} body.teyvat .gear-member-copy h2 .gear-element{font-size:1.2em;vertical-align:0} body.teyvat .gear-member-copy h2 .gear-weapon-kind{font-size:1rem} .gear-empty-mark.with-icon{position:relative;font-size:0} .gear-empty-mark.with-icon>.weapon-icon{width:30px;height:30px;background:none;border:0;opacity:.6} .gear-empty-mark.with-icon>i{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--t-gold,#d3bc8e);color:#1b1610;font:800 13px/1 sans-serif;font-style:normal} body.teyvat .premium-talent .talent-kind.as-icon{font-size:.95rem} body.teyvat .premium-talent span.talent-kind.as-icon:not(.talent-icon){display:inline-grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;font-size:.8rem;background:rgba(14,17,27,.7);border:1.5px solid color-mix(in srgb,var(--c,#d3bc8e) 70%,transparent)} body.teyvat .premium-talent .talent-kind.as-icon b{font-weight:900;color:var(--c,#d3bc8e)} body.teyvat .premium-talent .talent-kind.kind-q{border-width:2px} /* battle: the skill buttons carry the fighter's own talent pictures, E or Q on the corner */ body.teyvat .combat-panel .battle-cards button[data-card-id] .talent-icon.shell-card-glyph{position:relative;width:34px;height:34px;padding:0;font-size:1rem} body.teyvat .combat-panel .battle-cards button[data-card-id] .talent-icon.shell-card-glyph[data-key]::after{content:attr(data-key);position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--t-cream,#ece5d8);color:#1b1610;font:900 9px/1 sans-serif} body.teyvat .shell-roster-item{position:relative} body.teyvat .shell-roster-item>.shell-roster-element{position:absolute;left:36px;top:3px;width:19px;height:19px;padding:1px;border-radius:50%;background:rgba(14,17,27,.82);box-sizing:border-box;pointer-events:none} /* 0.15.21 버프 · 디버프 칩 (user: 「진형 효과는 뭐임 그냥 버프 디버프란을 좀 개선할 필요가 있어보이는데」): a press lists them. */ body.teyvat .combat-panel .combatant-copy>.status-chips,body.teyvat .combat-panel .combatant-copy>.status-chips:hover{display:flex;flex-wrap:wrap;gap:3px;width:auto;max-width:100%;min-height:0;margin:3px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;cursor:pointer;text-align:left} body.teyvat .combat-panel .combatant-copy>.status-chips:hover .st-chip{filter:brightness(1.18)} .st-chip{display:inline-flex;align-items:center;gap:3px;max-width:100%;padding:1px 6px 1px 5px;border-radius:8px;border:1px solid;font:700 .66rem/1.4 CRPGKorean,sans-serif;white-space:nowrap} .st-chip>span{overflow:hidden;text-overflow:ellipsis} .st-chip>b{margin-left:1px;padding:0 4px;border-radius:6px;background:rgba(0,0,0,.45);font-size:.6rem} .st-chip.buff::before{content:'▲';font-size:.5rem} .st-chip.debuff::before{content:'▼';font-size:.5rem} .st-chip.buff{color:#c8f5d2;border-color:rgba(126,220,154,.55);background:rgba(34,96,58,.55)} .st-chip.debuff{color:#ffcabd;border-color:rgba(240,128,104,.6);background:rgba(110,34,24,.6)} .st-chip.hold{color:#e6d0ff;border-color:rgba(190,146,255,.55);background:rgba(66,38,108,.6)} .st-chip.element{color:#eaf6ff;border-color:rgba(160,210,240,.5);background:rgba(28,52,78,.6)} .st-chip.role{color:#f3dfae;border-color:rgba(243,223,174,.45);background:rgba(84,68,36,.55)} .st-chip .el-icon{width:12px;height:12px;vertical-align:0} @media (max-width:760px) and (min-height:501px),(min-width:761px) and (max-height:820px){ body.teyvat .combat-panel .combatant-copy>.status-chips,body.teyvat .combat-panel .combatant-copy>.status-chips:hover{flex-wrap:nowrap;overflow:hidden;-webkit-mask:linear-gradient(90deg,#000 86%,transparent);mask:linear-gradient(90deg,#000 86%,transparent)} } .status-details{display:grid;gap:10px;min-width:min(420px,78vw)} .status-detail{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start} .status-detail>.st-chip{font-size:.78rem} .status-details p{margin:0;line-height:1.55;font-size:.9rem} /* The formation tag at the top is a button that explains itself; the turn order says 「×2」 for a boss that acts twice and comes in anew when the playback reaches a new round. */ body.teyvat .combat-panel>.battle-heading button.battle-formation{min-height:0;font:600 .78rem/1.3 CRPGKorean,sans-serif;color:var(--t-muted);cursor:pointer;box-shadow:none} body.teyvat .combat-panel>.battle-heading button.battle-formation.synergy{color:#8be39a} body.teyvat .combat-panel>.battle-heading button.battle-formation:hover{color:var(--t-cream);border-color:var(--t-gold)} body.teyvat .combat-panel>.battle-order li>.order-times{padding:0 6px;border-radius:8px;background:rgba(255,140,100,.25);color:#ffd2c2;font-weight:800;font-size:.7rem} body.teyvat .combat-panel>.battle-order li.current>.order-times{color:#7a2a10;background:rgba(255,140,100,.4)} body.teyvat .combat-panel>.battle-order.new-round{animation:fxOrderIn .45s ease-out} @keyframes fxOrderIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} html.reduce-motion body.teyvat .combat-panel>.battle-order.new-round{animation:none} /* PC: the commands are two short rows (whose turn · skills / target · run · speed) and the playback is a band along the bottom, so the fighters stay in view (user: 「사진에 보이듯이 모든것이 다 가려져」). */ @media (min-width:761px){ body.teyvat .combat-panel .compact-battle-stage{min-height:48%} body.teyvat .combat-panel .shell-battle-feed>p:not(:last-child){display:none} body.teyvat .combat-panel .combat-duo>.battle-command:has(>.battle-cards){display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"turn cards cards" "exec note speed";gap:6px 12px;padding:8px 12px;align-items:center} body.teyvat .combat-panel .battle-command>.battle-turn-banner{grid-area:turn;margin:0;padding:3px 12px 3px 3px;align-self:stretch} body.teyvat .combat-panel .battle-command>.battle-turn-banner .battle-turn-copy small{display:none} body.teyvat .combat-panel .battle-command>.battle-turn-banner .battle-turn-face{flex-basis:34px;width:34px;height:34px} body.teyvat .combat-panel .battle-command>.battle-cards{grid-area:cards;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:2px;min-width:0} body.teyvat .combat-panel .battle-command>.battle-execute{grid-area:exec;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0} body.teyvat .combat-panel .battle-command>.battle-target-warning{grid-area:note;margin:0;font-size:.78rem;line-height:1.35;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body.teyvat .combat-panel .battle-command>.combat-speed{grid-area:speed;justify-self:end;margin:0} body.teyvat .combat-panel .battle-cards button[data-card-id]{min-height:46px;max-width:230px;padding:4px 12px 4px 4px} body.teyvat .combat-panel .battle-cards button[data-card-id] .shell-card-glyph{width:36px;height:36px} body.teyvat .combat-panel .battle-cards button[data-card-id] small{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.teyvat .combat-playback{left:50%;right:auto;bottom:10px;transform:translateX(-50%);width:min(1060px,calc(100vw - 24px));max-height:none;overflow:visible;padding:8px 12px;display:grid;grid-template-columns:minmax(220px,1.1fr) minmax(0,1.5fr) auto auto;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center} body.teyvat .combat-playback>.combat-skill-banner{grid-column:1;grid-row:1/span 2;margin:0;padding:6px 10px;gap:8px} body.teyvat .combat-playback .combat-skill-name{font-size:17px;margin:1px 0} body.teyvat .combat-playback .combat-skill-target{max-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.teyvat .combat-playback .combat-skill-banner>button{min-height:32px;padding:4px 10px} body.teyvat .combat-playback>.playback-outcomes{grid-column:2;grid-row:1;max-height:46px;overflow:auto;font-size:.76rem;margin:0} body.teyvat .combat-playback>.playback-message{grid-column:2;grid-row:2;margin:0;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.teyvat .combat-playback>.playback-position{grid-column:3;grid-row:1;font-size:.72rem;white-space:nowrap} body.teyvat .combat-playback>.combat-speed{grid-column:3;grid-row:2;margin:0} body.teyvat .combat-playback>.playback-buttons{grid-column:4;grid-row:1/span 2} } /* A short PC window: smaller party cards and enemy pictures, so all four allies fit. */ @media (min-width:761px) and (max-height:820px){ body.teyvat .combat-panel .shell-allies .combatant-row{min-height:0;padding:4px 10px 4px 4px} body.teyvat .combat-panel .shell-allies .combat-portrait,body.teyvat .combat-panel .shell-allies .combat-player-mark{width:40px;height:40px;flex-basis:40px} body.teyvat .combat-panel .shell-allies .combatant-copy .battle-position,body.teyvat .combat-panel .shell-allies .combatant-copy>small{display:none} body.teyvat .combat-panel .shell-enemies{--enemy-h:108px} } /* 0.15.24 전투 화면 (docs/handoffs/UI_INSTALLED_LANDSCAPE_KO.md; user: 「0.15.22 이전에 쓰던 전투 구도를 선호」): the 0.15.21 composition, with as many cards as there are fighters — 1–4 enemies in one row, 5–8 in two (app_battle_layout_v01522.js sets data-rows and --cols) — and a fight never scrolls the page. */ html:has(body.battle-screen),body.battle-screen{overflow:hidden} body.teyvat.battle-screen .combat-panel .compact-battle-stage{overflow:hidden} body.teyvat .combat-panel .shell-enemies[data-count]{grid-template-columns:repeat(var(--cols,4),minmax(0,var(--enemy-w,240px)));grid-auto-rows:max-content;justify-content:center;align-content:center} body.teyvat .combat-panel .shell-enemies[data-rows="1"]{--enemy-h:clamp(110px,30vh,260px);--enemy-w:250px} body.teyvat .combat-panel .shell-enemies[data-rows="2"]{--enemy-h:clamp(70px,15vh,150px);--enemy-w:200px;gap:6px 10px} body.teyvat .combat-panel>.battle-objective-strip{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 4px;padding:4px 12px;border-radius:10px;background:rgba(10,13,21,.62);border:1px solid var(--t-line);font-size:.8rem;color:var(--t-cream)} body.teyvat .combat-panel>.battle-objective-strip small{color:var(--t-muted)} body.teyvat .combat-panel .battle-heading>.battle-objective-strip{display:flex;gap:8px;align-items:center;flex:0 1 auto;min-width:0;flex-wrap:nowrap;margin:0;padding:2px 10px;border-radius:10px;background:rgba(10,13,21,.62);border:1px solid var(--t-line);font-size:.78rem;color:var(--t-cream);white-space:nowrap;overflow:hidden} body.teyvat .combat-panel .battle-heading>.battle-objective-strip>*{overflow:hidden;text-overflow:ellipsis} body.teyvat .combat-panel .battle-heading>.battle-objective-strip small{color:var(--t-muted)} body.teyvat .combat-panel>.battle-heading .battle-head-button{min-height:0;padding:3px 12px;font-size:.78rem;border-radius:10px;box-shadow:none} /* Turn order: the fighter's face and name (the position number is kept for screen readers only). */ body.teyvat .combat-panel>.battle-order li.with-face{padding-left:3px} body.teyvat .combat-panel>.battle-order li.with-face>small:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} body.teyvat .combat-panel>.battle-order li>.order-face{width:26px;height:26px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 18%;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08)} body.teyvat .combat-panel>.battle-order li.enemy>.order-face{border-color:rgba(255,155,138,.55)} body.teyvat .combat-panel>.battle-order li.ally>.order-face{border-color:rgba(143,198,230,.55)} body.teyvat .combat-panel>.battle-order li.current>.order-face{border-color:var(--t-gold)} body.teyvat .combat-panel>.battle-order li>.order-face.mark{display:grid;place-items:center;box-sizing:border-box;font-size:.8rem;line-height:1;color:var(--t-gold-hi);background:rgba(236,229,216,.14)} body.teyvat .combat-panel>.battle-order li.current>.order-face.mark{color:var(--t-ink);background:rgba(57,64,79,.12)} /* ---------- 0.15.25 비경 입구 (app_growth_v01522.js domainGate): pictures to press, no lists, no paragraphs ---------- */ body.teyvat .domain-gate{--dg:185,162,255;display:grid;gap:10px;padding:12px 14px;border-radius:16px;background:radial-gradient(ellipse at 100% 0%,rgba(var(--dg),.18),transparent 60%),linear-gradient(160deg,rgba(26,32,52,.94),rgba(12,15,26,.94));border:1px solid rgba(var(--dg),.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 10px 24px rgba(0,0,0,.3)} body.teyvat .domain-gate[data-kind=ASCENSION]{--dg:127,224,200} body.teyvat .domain-gate[data-kind=GEAR]{--dg:240,196,106} body.teyvat .domain-gate-head{display:flex;align-items:center;gap:10px;height:auto;padding:0;background:none;border:0} body.teyvat .domain-gate-name{display:flex;flex-direction:column;min-width:0;flex:1} body.teyvat .domain-gate-name h2{margin:0;font-size:1.14rem;color:#fff;font-family:var(--font-display);text-shadow:0 0 14px rgba(var(--dg),.45)} body.teyvat .domain-gate-name small{color:rgb(var(--dg));font-size:.72rem;letter-spacing:.08em} body.teyvat .domain-gate-bonus{flex:0 0 auto;padding:2px 10px;border-radius:12px;background:linear-gradient(90deg,#f3dfae,#e9c26a);color:#3b2f15;font-weight:800;font-size:.86rem;white-space:nowrap} body.teyvat .domain-gate-bonus small{color:#5a4515;font-size:.7rem;font-weight:700} body.teyvat .domain-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} body.teyvat :where(#root) button.domain-stage{min-height:50px;padding:4px 2px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(236,229,216,.18)} body.teyvat .domain-stage b{font-family:var(--font-latin);font-size:1.05rem;line-height:1.15} body.teyvat .domain-stage small{font-size:.66rem;color:var(--t-muted)} body.teyvat :where(#root) button.domain-stage.selected{background:var(--t-cream);color:var(--t-ink);border-color:var(--t-cream);box-shadow:0 0 0 2px rgba(var(--dg),.55)} body.teyvat :where(#root) button.domain-stage.selected small{color:var(--t-ink-2)} body.teyvat :where(#root) button.domain-stage.locked{opacity:.38;border-style:dashed} body.teyvat .domain-elements{display:flex;flex-wrap:wrap;gap:6px} body.teyvat :where(#root) button.domain-element{width:38px;height:38px;min-height:38px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(236,229,216,.18)} body.teyvat :where(#root) button.domain-element.selected{background:rgba(236,229,216,.2);border-color:var(--t-gold-hi);box-shadow:0 0 0 2px rgba(243,223,174,.45)} body.teyvat .domain-element-icon{width:24px;height:24px;object-fit:contain} body.teyvat .domain-element-icon.mark{display:grid;place-items:center;color:var(--t-gold-hi);font-size:1rem;line-height:1} body.teyvat .domain-gate-body{display:grid;gap:8px} body.teyvat :is(.domain-foes,.domain-rewards){display:flex;flex-wrap:wrap;gap:8px;align-items:center} body.teyvat :is(.domain-foe,.domain-reward){position:relative;display:inline-grid;place-items:center} body.teyvat .domain-foe-face{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 30%;background:rgba(255,120,90,.12);border:1.5px solid rgba(255,155,138,.5)} body.teyvat .domain-foe-face.blank{display:grid;place-items:center;color:#ffd2c2;font-weight:700} body.teyvat :is(.domain-foe,.domain-reward)>b{position:absolute;right:-5px;bottom:-5px;padding:0 5px;border-radius:8px;background:rgba(10,12,20,.92);color:#fff;font-size:.66rem;line-height:1.5;border:1px solid rgba(236,229,216,.25);font-variant-numeric:tabular-nums} body.teyvat .domain-reward{width:46px;height:46px;border-radius:10px;background:linear-gradient(160deg,#7a64a8,#3d3160);border:1px solid rgba(243,223,174,.35)} body.teyvat .domain-reward.mora{width:auto;padding:0 10px 0 6px;display:inline-flex;gap:4px;background:rgba(255,255,255,.06)} body.teyvat .domain-reward.mora>b{position:static;border:0;background:none;font-size:.8rem} body.teyvat .domain-reward-icon{width:36px;height:36px;object-fit:contain} body.teyvat .domain-reward.mora .domain-reward-icon{width:26px;height:26px} body.teyvat .domain-gate-body>.domain-go{width:100%;min-height:44px;margin:0} /* The map marks a place where a domain stands. */ body.teyvat .terrain-node.domain-host::after{content:'';position:absolute;right:-5px;top:-5px;width:9px;height:9px;transform:rotate(45deg);border-radius:2px;background:#b9a2ff;box-shadow:0 0 0 1.5px rgba(10,12,20,.85),0 0 8px rgba(185,162,255,.8);pointer-events:none} /* ---------- 0.15.25 no drop-down lists (app_choice_v01525.js): what a