@font-face { font-family: 'XingKai'; src: local('STXingkai'), local('Xingkai SC'), local('KaiTi'); }
@font-face { font-family: 'Song'; src: local('Songti SC'), local('STSong'), local('Noto Serif CJK SC'); }
:root { color-scheme: dark; font-family: Song, serif; color: #e8decb; background: #100d0a; font-synthesis: none; --ink: #100d0a; --paper: #d8c7a8; --paper-dark: #ab9671; --red: #9d2d23; --bright-red: #d04b32; --gold: #c6a15b; --muted: #8f8575; --line: rgba(218, 193, 148, .18); }
* { box-sizing: border-box; }
html, body, #root { margin: 0; min-width: 320px; width: 100%; min-height: 100%; overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible { outline: 2px solid #e5c97f; outline-offset: 3px; }
.camp-shell { height: 100vh; min-height: 650px; display: grid; grid-template-columns: 250px minmax(0, 1fr); background: radial-gradient(circle at 72% 42%, #2c1713 0, #17120e 35%, #0d0b09 76%); position: relative; }
.grain { position: fixed; inset: 0; opacity: .2; pointer-events: none; z-index: 20; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"); }
.camp-nav { border-right: 1px solid var(--line); padding: 34px 22px 24px; display: flex; flex-direction: column; z-index: 2; background: linear-gradient(90deg, rgba(9,8,6,.94), rgba(20,16,12,.78)); box-shadow: 20px 0 70px rgba(0,0,0,.28); }
.brand-seal { width: 62px; height: 62px; display: grid; place-items: center; font: 35px XingKai, cursive; color: #f1dfbd; border: 2px solid #85291f; background: #7b221c; box-shadow: inset 0 0 0 5px #611c17, 0 10px 30px #000; transform: rotate(-3deg); }
.brand-copy { margin: 15px 0 38px; display: flex; flex-direction: column; letter-spacing: .24em; }.brand-copy span { font: 23px XingKai, cursive; }.brand-copy small { font: 8px Georgia, serif; color: #746b5e; letter-spacing: .32em; margin-top: 3px; }
.camp-nav nav { display: flex; flex-direction: column; gap: 7px; }.camp-nav nav button { position: relative; border: 0; background: transparent; height: 55px; display: flex; align-items: center; padding: 0 14px; gap: 13px; color: #8e8577; cursor: pointer; text-align: left; transition: .25s ease; }.camp-nav nav button::before { content: ''; position: absolute; left: -22px; top: 8px; bottom: 8px; width: 3px; background: transparent; }.camp-nav nav button i { font: normal 17px XingKai; width: 29px; height: 29px; border: 1px solid #40382e; display: grid; place-items: center; transform: rotate(-4deg); }.camp-nav nav button span { letter-spacing: .1em; }.camp-nav nav button b { margin-left: auto; min-width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--red); }.camp-nav nav button:hover, .camp-nav nav button.active { color: #f0e3ca; background: linear-gradient(90deg, rgba(138,43,31,.24), transparent); }.camp-nav nav button.active::before { background: var(--red); }.camp-nav nav button.active i { border-color: #9a352a; color: #d8b273; }
.resource { margin-top: auto; border-top: 1px solid var(--line); padding: 20px 7px 14px; display: flex; justify-content: space-between; color: #81776a; }.resource strong { color: #d4b36b; }.save-actions { display: flex; gap: 8px; }.save-actions button { flex: 1; border: 1px solid #342d25; background: #15120f; color: #6f665a; padding: 7px 4px; font-size: 11px; cursor: pointer; }
.camp-content { min-width: 0; padding: 30px clamp(30px, 5vw, 80px) 52px; position: relative; overflow: hidden; }.camp-header { height: 78px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); position: relative; z-index: 3; }.camp-header::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 94px; height: 3px; background: var(--red); }.camp-header small, .eyebrow { color: #8f7655; text-transform: uppercase; letter-spacing: .25em; font-size: 10px; }.camp-header h1 { margin: 5px 0 0; font: 30px XingKai, cursive; font-weight: 400; letter-spacing: .12em; }.camp-header p { color: #756c61; font-size: 12px; letter-spacing: .08em; }
.outing-view { height: calc(100vh - 160px); display: grid; grid-template-columns: minmax(450px, 1.15fr) minmax(340px, .85fr); align-items: center; position: relative; }.blood-moon { height: 100%; position: relative; display: grid; place-items: center; }.moon { width: min(34vw, 470px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #e1664a 0, #b23828 36%, #6e1f19 69%, #311414 100%); box-shadow: 0 0 70px rgba(179,50,37,.28), inset -30px -28px 60px rgba(23,8,7,.45); position: relative; transform: translateY(-3%); }.moon::before, .moon::after { content: ''; position: absolute; border-radius: 50%; background: rgba(44,17,14,.2); }.moon::before { width: 24%; height: 17%; left: 18%; top: 22%; transform: rotate(-18deg); }.moon::after { width: 17%; height: 24%; right: 18%; bottom: 24%; }.moon span { position: absolute; right: 10%; top: 14%; font: 30px XingKai; line-height: 1.2; color: rgba(41,13,10,.64); }.mountains { position: absolute; inset: auto 3% 10% -7%; height: 40%; background: linear-gradient(145deg, transparent 0 22%, #0c0c0a 22.5% 38%, transparent 38.5%), linear-gradient(35deg, transparent 0 38%, #14130f 38.5% 63%, transparent 63.5%), linear-gradient(155deg, transparent 0 32%, #1b1712 32.5% 60%, transparent 60.5%); filter: drop-shadow(0 -22px 28px rgba(0,0,0,.4)); opacity: .96; }
.outing-copy { padding: 2vw 0 0 3vw; position: relative; z-index: 2; }.outing-copy h2 { font: clamp(38px, 3.8vw, 62px)/1.13 XingKai, cursive; font-weight: 400; margin: 15px 0 16px; letter-spacing: .07em; color: #eee2ca; text-shadow: 0 10px 34px #000; }.outing-copy > p { max-width: 480px; color: #9c9181; line-height: 1.72; font-size: 13px; }.region-facts { display: flex; margin: 18px 0; gap: 30px; color: #817768; }.region-facts span { display: flex; align-items: baseline; gap: 6px; }.region-facts b { font: 26px Georgia, serif; color: #d1b16c; }.difficulty-picker { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; }.difficulty-picker label { color: #8b7b65; letter-spacing: .25em; margin-right: 8px; }.difficulty-picker button { width: 34px; height: 34px; border: 1px solid #4b3c2c; background: #17120e; cursor: pointer; color: #8c7b66; }.difficulty-picker button.active { background: #8a291f; color: #f6e6c8; border-color: #b44636; box-shadow: 0 0 22px rgba(171,50,36,.35); }.difficulty-picker button:disabled { opacity: .25; cursor: not-allowed; }
.primary-cta { min-width: 270px; border: 1px solid #b54b38; background: linear-gradient(105deg, #8f271e, #611b18); box-shadow: inset 0 0 0 3px #4b1512, 0 15px 35px rgba(0,0,0,.35); padding: 14px 25px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; position: relative; overflow: hidden; }.primary-cta::after { content: '〉'; position: absolute; right: 20px; top: 13px; font: 34px XingKai; color: #d6a25f; transition: transform .25s; }.primary-cta:hover::after { transform: translateX(5px); }.primary-cta span { font: 22px XingKai; letter-spacing: .16em; }.primary-cta small { color: #bf9080; margin-top: 3px; font-size: 9px; letter-spacing: .12em; }.primary-cta:disabled { filter: grayscale(1); opacity: .4; cursor: not-allowed; }
.equipment-view, .forge-view { height: calc(100vh - 140px); display: grid; grid-template-columns: minmax(440px, 1fr) minmax(400px, 1.05fr); gap: 28px; padding-top: 26px; }.paper-panel { background: radial-gradient(circle at 50% 46%, rgba(95,67,42,.26), transparent 45%), linear-gradient(120deg, #18140f, #211a13); border: 1px solid var(--line); }.character-sheet { position: relative; min-height: 580px; overflow: hidden; }.character-sheet::before { content: ''; position: absolute; width: 390px; height: 390px; border: 1px solid rgba(171,131,71,.18); border-radius: 50%; left: 50%; top: 49%; transform: translate(-50%,-50%); box-shadow: 0 0 0 25px rgba(168,128,68,.03), 0 0 0 50px rgba(168,128,68,.025); }.hero-figure { position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%); width: 150px; height: 360px; filter: drop-shadow(0 25px 25px #000); }.hero-figure > div { position: absolute; left: 50%; transform: translateX(-50%); }.hero-hat { top: 25px; width: 120px; height: 34px; clip-path: polygon(50% 0,100% 100%,0 100%); background: #3d3328; }.hero-head { top: 59px; width: 42px; height: 50px; border-radius: 45%; background: #806e56; }.hero-body { top: 96px; width: 125px; height: 210px; clip-path: polygon(34% 0,66% 0,100% 100%,0 100%); background: linear-gradient(90deg, #2b2923, #585047 48%, #292621); }.hero-staff { width: 9px; height: 285px; background: #8b5a32; top: 57px; left: 90%!important; transform: rotate(-8deg)!important; transform-origin: bottom; }.hero-figure > span { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font: 23px XingKai; width: 100px; text-align: center; color: #cfb47f; }.slot { position: absolute; width: 145px; }.slot-weapon { left: 18px; top: 44%; }.slot-head { left: 50%; top: 18px; transform: translateX(-50%); }.slot-armor { right: 18px; top: 23%; }.slot-bracers { left: 18px; top: 23%; }.slot-boots { left: 50%; bottom: 25px; transform: translateX(-50%); }.slot-amulet { right: 18px; top: 44%; }.slot-ring1 { left: 18px; bottom: 19%; }.slot-ring2 { right: 18px; bottom: 19%; }.empty-slot { border: 1px solid #3a3127; background: rgba(10,9,7,.7); height: 57px; padding: 8px 11px; display: flex; justify-content: space-between; align-items: center; color: #675d50; }.empty-slot small { font: 20px XingKai; opacity: .35; }.build-tags { position: absolute; left: 20px; right: 20px; bottom: 12px; display: flex; gap: 7px; justify-content: center; }.build-tags span { font-size: 10px; color: #a49070; border: 1px solid #4a3b2b; padding: 4px 9px; }
.inventory-panel { position: relative; border-left: 1px solid var(--line); padding-left: 28px; overflow: auto; }.section-title { display: flex; align-items: end; justify-content: space-between; min-height: 58px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }.section-title small { color: #7d705e; letter-spacing: .22em; font-size: 9px; }.section-title h3 { margin: 5px 0 0; font-size: 19px; font-weight: 400; }.section-title > span, .section-title > strong { color: #8d7f6d; font-size: 11px; }.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 9px; padding: 15px 0 260px; }.item-card { width: 100%; min-height: 142px; text-align: left; border: 1px solid #3c342b; background: linear-gradient(145deg, #201b16, #12100d); padding: 14px; position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; }.item-card::before { content: ''; position: absolute; inset: 0; opacity: .15; background: radial-gradient(circle at 100% 0, currentColor, transparent 54%); }.item-card:hover, .item-card.active { transform: translateY(-2px); border-color: currentColor; box-shadow: 0 8px 30px rgba(0,0,0,.32); }.item-card.compact { min-height: 78px; padding: 9px 10px; }.item-card.compact strong { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%; }.item-rarity { font-size: 8px; letter-spacing: .13em; opacity: .7; }.item-card strong { font-size: 14px; font-weight: 500; margin: 7px 0 4px; }.item-card small { color: #776e63; font-size: 9px; }.item-card.rarity-common { color: #b2aa9e; }.item-card.rarity-magic { color: #69a6c9; }.item-card.rarity-rare { color: #e0b760; }.item-card.rarity-unique { color: #d77932; }.item-card.rarity-set { color: #59a56b; }.affix-list { margin-top: 12px; border-top: 1px solid currentColor; padding-top: 7px; width: 100%; }.affix-list p { margin: 5px 0; font-size: 10px; color: #baa98f; }.affix-list .unique-power { color: #de843a; line-height: 1.5; }.seal-mark { position: absolute; right: 8px; bottom: -8px; font: 48px XingKai; opacity: .08; }.inspect-panel { position: absolute; left: 28px; right: 0; bottom: 0; background: rgba(13,11,9,.96); border-top: 1px solid #5e4a30; padding: 15px; display: grid; grid-template-columns: 1fr 160px; gap: 15px; z-index: 3; }.inspect-actions { display: flex; flex-direction: column; gap: 8px; justify-content: end; }.inspect-actions button, .forge-detail > button { border: 1px solid #46382a; background: #211a14; padding: 10px; cursor: pointer; font-size: 11px; }.inspect-actions button.primary-small { background: #7e281f; border-color: #a54535; }.empty-copy { color: #60574c; line-height: 2; text-align: center; padding: 80px 20px; grid-column: 1/-1; }
.mirror-view { height: calc(100vh - 140px); display: grid; grid-template-columns: 1fr .8fr .7fr; align-items: center; gap: 4vw; }.mirror-object { min-width: 350px; height: 590px; position: relative; display: grid; place-items: center; }.mirror-glass { width: 285px; height: 410px; border-radius: 47%; border: 18px solid #6d4a27; outline: 2px solid #c0924e; background: radial-gradient(circle at 45% 40%, rgba(205,92,61,.34), rgba(30,28,24,.72) 50%, #070706 82%); box-shadow: inset 0 0 45px #000, 0 22px 65px #000, 0 0 70px rgba(186,66,42,.15); position: relative; }.mirror-glass::before { content: ''; position: absolute; inset: 13px; border: 1px solid #805a34; border-radius: 47%; }.mirror-glass span { position: absolute; inset: 0; display: grid; place-items: center; font: 50px XingKai; color: rgba(190,76,50,.28); line-height: 1.1; }.mirror-base { position: absolute; width: 240px; height: 90px; background: linear-gradient(#684725,#251a11); clip-path: polygon(30% 0,70% 0,80% 65%,100% 100%,0 100%,20% 65%); bottom: 25px; }.mirror-copy h2 { font: 38px XingKai; font-weight: 400; margin: 20px 0; }.mirror-copy p { color: #8e8476; line-height: 2; font-size: 13px; max-width: 390px; }.mirror-copy .primary-cta { margin-top: 30px; }.unidentified-stack { height: 430px; position: relative; }.unidentified-stack > div { position: absolute; top: calc(var(--stack) * 58px); left: calc(var(--stack) * 5px); width: 210px; transform: rotate(calc((var(--stack) - 2) * 1.8deg)); }
.forge-view { grid-template-columns: .62fr 1.05fr .9fr; align-items: center; }.forge-flame { width: 260px; aspect-ratio: 1; border-radius: 50% 50% 45% 55%; background: radial-gradient(circle at 50% 64%, #ffbc52, #d54c27 35%, #6e1c18 65%, transparent 68%); filter: drop-shadow(0 0 30px rgba(218,69,37,.4)); display: grid; place-items: center; animation: breathe 2.5s ease-in-out infinite; }.forge-flame span { font: 70px XingKai; color: #2b100d; }.forge-list { align-self: stretch; overflow: auto; padding-top: 20px; }.forge-list .item-grid { padding-bottom: 20px; }.forge-detail { min-height: 500px; border-left: 1px solid var(--line); padding-left: 28px; display: flex; flex-direction: column; gap: 9px; justify-content: center; }.forge-rule { color: #776c5d; line-height: 1.7; font-size: 11px; }
.codex-view { height: calc(100vh - 140px); display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 22px; padding-top: 24px; overflow: hidden; }.codex-column { overflow: auto; padding-right: 10px; }.codex-column article { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 15px 4px; border-bottom: 1px solid var(--line); }.codex-column article i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #553b2a; color: #c19253; font: normal 19px XingKai; transform: rotate(-2deg); }.codex-column article h4 { margin: 1px 0 5px; font-weight: 400; }.codex-column article p { margin: 0; color: #83796c; font-size: 10px; line-height: 1.7; }.codex-column article small { color: #9b744d; font-size: 8px; }.codex-column.uniques article i { color: #d77834; border-color: #67381d; }
.battle-shell { position: fixed; inset: 0; background: #171411; overflow: hidden; }.battle-shell canvas { display: block; width: 100%; height: 100%; }.hud { position: absolute; inset: 0; pointer-events: none; font-family: Song, serif; text-shadow: 0 2px 4px #000; }.hud-top { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 28px; }.stage-plaque { min-width: 210px; text-align: right; padding-right: 25px; border-right: 1px solid rgba(231,206,161,.3); display: flex; flex-direction: column; }.stage-plaque small, .kill-count small { color: #a99271; font-size: 9px; letter-spacing: .2em; }.stage-plaque strong { font: 21px XingKai; letter-spacing: .18em; }.timer { font: 32px Georgia, serif; color: #e8d8b8; min-width: 94px; text-align: center; }.kill-count { min-width: 100px; display: flex; flex-direction: column; }.kill-count strong { font: 22px Georgia, serif; }.hud-left { position: absolute; left: 25px; bottom: 27px; display: grid; grid-template-columns: 54px 280px; align-items: center; gap: 10px; }.level-medallion { width: 54px; height: 54px; border-radius: 50%; border: 2px solid #b69252; background: #2c2017; display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(15,12,9,.8); }.level-medallion small { position: absolute; font-size: 8px; margin-top: -25px; color: #a98b5c; }.level-medallion strong { font: 23px Georgia, serif; }.bar { width: 280px; height: 19px; background: rgba(11,9,7,.9); border: 1px solid #5f4a35; position: relative; overflow: hidden; }.bar span { display: block; height: 100%; transition: width .2s; }.bar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 400; }.bar.hp span { background: linear-gradient(90deg, #692019, #b63b2e); }.bar.xp { height: 7px; margin-top: 4px; }.bar.xp span { background: #c49a51; box-shadow: 0 0 8px #e2be73; }.skill-rack { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 8px; }.skill-rack > div { width: 58px; height: 58px; border: 1px solid #5b4a34; background: rgba(17,13,10,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }.skill-rack kbd, .skill-rack i { font: normal 15px XingKai; color: #deb96e; }.skill-rack span { font-size: 8px; color: #a59884; margin-top: 4px; }.skill-rack .evolved { border-color: #e7b757; box-shadow: 0 0 20px rgba(223,168,71,.25); }.loot-counter { position: absolute; right: 26px; bottom: 35px; color: #9b8d7a; font-size: 11px; }.loot-counter b { color: #ddb764; font: 22px Georgia; margin-left: 8px; }.boss-bar { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); width: min(620px, 70vw); text-align: center; }.boss-bar small { color: #a67f65; font-size: 9px; letter-spacing: .4em; }.boss-bar strong { display: block; font: 24px XingKai; margin: 4px 0 8px; }.boss-bar > div { height: 10px; background: rgba(10,7,6,.8); border: 1px solid #6e322a; }.boss-bar span { display: block; height: 100%; background: linear-gradient(90deg,#7d1d18,#d7513b); }.control-hint { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); color: rgba(223,211,189,.36); font-size: 9px; letter-spacing: .1em; }
.levelup-overlay { position: absolute; inset: 0; background: radial-gradient(circle, rgba(75,32,21,.58), rgba(8,7,6,.94) 66%); display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: auto; z-index: 10; }.ink-rays { position: absolute; width: 750px; height: 750px; opacity: .25; background: repeating-conic-gradient(from 4deg, transparent 0 9deg, #9c442e 10deg 11deg, transparent 12deg 18deg); border-radius: 50%; animation: turn 80s linear infinite; }.levelup-title { text-align: center; z-index: 1; margin-bottom: 28px; }.levelup-title h2 { font: 40px XingKai; margin: 8px 0; letter-spacing: .18em; }.choice-row { display: flex; gap: 20px; z-index: 1; }.choice-row button { width: 250px; min-height: 320px; border: 1px solid #77522f; background: linear-gradient(165deg, rgba(61,43,29,.96), rgba(21,16,12,.98)); padding: 28px 24px; cursor: pointer; position: relative; color: #d7cab4; transition: .25s; }.choice-row button:hover { transform: translateY(-12px); border-color: #d1a35d; box-shadow: 0 24px 60px #000, inset 0 0 40px rgba(193,128,61,.11); }.choice-row button i { width: 86px; height: 86px; display: grid; place-items: center; margin: 0 auto 18px; border: 1px solid #996234; font: normal 40px XingKai; color: #e0ac61; transform: rotate(-3deg); }.choice-row button small { color: #8f7555; letter-spacing: .25em; }.choice-row h3 { font: 25px XingKai; margin: 9px 0 17px; }.choice-row p { color: #958977; font-size: 11px; line-height: 1.8; min-height: 62px; }.choice-row b { font-size: 9px; color: #c18f50; font-weight: 400; }.choice-number { position: absolute; left: 13px; top: 11px; color: #6d5d49; font: 14px Georgia; }
.result-shell { min-height: 100vh; background: radial-gradient(circle at 22% 45%, #3b1d18, #13100d 40%, #090806 75%); position: relative; display: grid; place-items: center; overflow: auto; }.result-moon { position: fixed; width: 66vh; height: 66vh; border-radius: 50%; left: -18vh; top: 17vh; background: radial-gradient(circle at 40% 35%, #bd4b38, #6e211c 62%, #240f0e); box-shadow: 0 0 90px rgba(147,43,31,.22); }.result-shell section { width: min(800px, 82vw); margin-left: 12vw; z-index: 1; padding: 60px 0; }.result-shell h1 { font: clamp(38px, 5vw, 68px) XingKai; font-weight: 400; margin: 17px 0 30px; }.result-stats { display: flex; border-block: 1px solid var(--line); padding: 18px 0; gap: 55px; }.result-stats span { display: flex; flex-direction: column; }.result-stats small { color: #7f7363; font-size: 9px; letter-spacing: .2em; }.result-stats b { font: 24px Georgia; color: #d1b06c; margin-top: 5px; }.haul h2 { font: 18px XingKai; letter-spacing: .12em; font-weight: 400; }.haul { margin: 30px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 9px; }.haul h2 { grid-column: 1/-1; }.result-shell .primary-cta { margin-top: 20px; }
.header-tools { display: flex; align-items: center; gap: 18px; }.header-tools p { max-width: 430px; margin: 7px 0 0; text-align: right; }.audio-toggles { display: flex; gap: 5px; }.audio-toggles button { border: 1px solid #3f3529; background: #15110e; color: #675f54; padding: 7px 9px; cursor: pointer; font-size: 10px; }.audio-toggles button.on { color: #d3b46f; border-color: #76542d; box-shadow: inset 0 0 14px rgba(186,126,47,.08); }
.inventory-tools { display: flex; align-items: center; gap: 10px; }.inventory-tools span { color: #766b5d; font-size: 10px; }.inventory-tools button { border: 1px solid #6f3b2a; background: linear-gradient(#351b16,#21130f); color: #cfaa70; padding: 8px 11px; cursor: pointer; font-size: 10px; }.inventory-tools button:disabled, .inspect-actions button:disabled { opacity: .35; cursor: not-allowed; }
.lock-mark { position: absolute; right: 8px; top: 8px; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #b58a43; background: #211810; color: #e1bd72; font: 12px XingKai; box-shadow: 0 0 12px rgba(197,145,60,.18); z-index: 2; }
@keyframes breathe { 50% { transform: scale(1.06); filter: drop-shadow(0 0 50px rgba(232,78,40,.5)); } }
@keyframes turn { to { transform: rotate(360deg); } }
@media (max-width: 980px) { .camp-shell { grid-template-columns: 195px minmax(0,1fr); }.camp-nav { padding-inline: 15px; }.outing-view { grid-template-columns: 1fr; }.blood-moon { position: absolute; inset: 0 42% 0 -15%; opacity: .55; }.outing-copy { margin-left: 35%; }.equipment-view { grid-template-columns: 1fr; overflow: auto; }.character-sheet { min-height: 620px; }.inventory-panel { border: 0; padding: 0; min-height: 600px; }.mirror-view { grid-template-columns: 1fr 1fr; }.mirror-object { min-width: 0; }.unidentified-stack { display: none; }.codex-view { grid-template-columns: 1fr 1fr; overflow: auto; }.codex-column { overflow: visible; }.forge-view { grid-template-columns: .6fr 1fr; overflow: auto; }.forge-detail { grid-column: 1/-1; }.choice-row button { width: 210px; }.choice-row { gap: 10px; } }
@media (max-width: 720px) { html, body, #root { overflow: auto; }.camp-shell { display: block; min-height: 100vh; }.camp-nav { position: fixed; left: 0; right: 0; bottom: 0; height: 66px; z-index: 50; padding: 5px; flex-direction: row; border-top: 1px solid var(--line); }.brand-seal, .brand-copy, .resource, .save-actions { display: none; }.camp-nav nav { width: 100%; flex-direction: row; justify-content: space-around; }.camp-nav nav button { flex: 1; height: 55px; padding: 0; flex-direction: column; gap: 2px; justify-content: center; font-size: 9px; }.camp-nav nav button i { height: 24px; border: 0; }.camp-nav nav button::before { left: 25%; right: 25%; top: -5px; bottom: auto; width: auto; height: 2px; }.camp-content { padding: 18px 16px 85px; min-height: 100vh; }.camp-header { height: 64px; }.camp-header p { display: none; }.outing-view { height: calc(100vh - 150px); display: flex; }.blood-moon { inset: 0; }.moon { width: 80vw; }.outing-copy { margin: auto 0 5vh; padding: 20px; background: linear-gradient(90deg, rgba(12,10,8,.9), transparent); }.outing-copy h2 { font-size: 42px; }.equipment-view, .mirror-view, .forge-view, .codex-view { height: auto; min-height: calc(100vh - 160px); display: block; }.character-sheet { min-height: 620px; }.mirror-object { height: 460px; transform: scale(.78); margin: -40px 0; }.mirror-copy { padding-bottom: 60px; }.forge-flame { margin: 20px auto; width: 190px; }.forge-detail { border: 0; padding: 25px 0 80px; }.codex-column { margin-bottom: 40px; }.hud-left { left: 10px; bottom: 85px; grid-template-columns: 44px 180px; }.level-medallion { width: 44px; height: 44px; }.bar { width: 180px; }.skill-rack { bottom: 18px; transform: translateX(-50%) scale(.78); transform-origin: bottom; }.control-hint, .loot-counter { display: none; }.hud-top { top: 10px; gap: 10px; }.stage-plaque { min-width: 140px; }.timer { font-size: 24px; }.choice-row { flex-direction: column; max-height: 70vh; overflow: auto; }.choice-row button { width: min(88vw, 420px); min-height: 145px; padding: 18px; display: grid; grid-template-columns: 72px 1fr; text-align: left; }.choice-row button i { grid-row: 1/5; width: 60px; height: 60px; margin: 0; }.choice-row h3, .choice-row p { margin: 3px 0; min-height: 0; }.result-shell section { margin: 0; }.result-stats { gap: 18px; flex-wrap: wrap; } }

/* 装备与 Build v2 */
.equipment-view{grid-template-columns:minmax(255px,.78fr) minmax(360px,1.15fr) minmax(330px,.92fr);gap:16px;height:calc(100vh - 136px);padding-top:18px;overflow:hidden}.character-stats,.inventory-panel,.equipment-detail{min-width:0;min-height:0}.character-stats{padding:16px;overflow:auto}.character-stats .section-title{min-height:48px}.stat-list{padding:8px 0 14px;border-bottom:1px solid var(--line)}.stat-list details{border-bottom:1px solid rgba(91,75,55,.36)}.stat-list summary{display:flex;justify-content:space-between;gap:12px;padding:8px 2px;cursor:pointer;list-style:none;font-size:12px}.stat-list summary::-webkit-details-marker{display:none}.stat-list summary span::after{content:'?';display:inline-grid;place-items:center;margin-left:6px;width:14px;height:14px;border:1px solid #5d4c38;border-radius:50%;color:#897963;font-size:10px}.stat-list summary strong{color:#e2c17d;font:14px Georgia,serif}.stat-list details p,.tag-stat-group p{margin:0 0 8px;color:#8f8372;font-size:12px;line-height:1.55}.tag-stat-group{padding:13px 0;display:flex;flex-wrap:wrap;gap:6px}.tag-stat-group>small{width:100%;color:#756b5e;font-size:12px}.tag-stat-group span{border:1px solid #4a3b2b;padding:5px 7px;font-size:12px}.tag-stat-group b{margin-left:7px;color:#c89c55}.equipped-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-bottom:12px}.equipped-grid>div>label{display:block;margin:8px 0 4px;color:#827563;font-size:12px}.equipped-grid .item-card.compact,.equipped-grid .empty-slot{min-height:66px}.inventory-panel{padding-left:16px;overflow:auto}.inventory-filters{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:10px 0;background:#100e0b;border-bottom:1px solid var(--line)}.inventory-filters label{color:#817665;font-size:12px}.inventory-filters select{display:block;width:100%;margin-top:4px;border:1px solid #44382c;background:#181410;color:#c5b59e;padding:7px 5px;font-size:12px}.inventory-panel .item-grid{padding:10px 0 30px;grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}.inventory-item{position:relative;min-width:0}.inventory-item .card-lock{position:absolute;right:6px;top:6px;z-index:3;width:28px;height:28px;border:1px solid #634c2d;background:#211810;color:#d5b269;cursor:pointer;font-size:12px}.inventory-item .item-card .lock-mark{display:none}.item-card,.item-card small,.item-card .item-rarity,.affix-list p{font-size:12px}.item-card strong{font-size:14px}.item-card.static-card{cursor:default}.item-card.static-card:hover{transform:none;box-shadow:none}.affix-list .implicit-power{color:#9fb1be}.affix-list .set-power{color:#65bd79}.affix-list .gem-power{color:#d4c58c}
.equipment-detail{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;border:1px solid var(--line);background:linear-gradient(145deg,#17130f,#0d0b09);overflow:hidden}.equipment-detail.empty-detail{place-items:center;padding:30px;color:#786d5e}.empty-detail h3{font:26px XingKai;margin:10px 0}.empty-detail p{max-width:260px;line-height:1.8;font-size:12px}.detail-close{display:none;position:absolute;right:8px;top:8px;z-index:8;width:34px;height:34px;border:1px solid #5c4935;background:#1c1611;color:#cdbb9d;cursor:pointer;font-size:22px}.detail-scroll{overflow:auto;padding:14px}.detail-scroll>.item-card{min-height:auto}.source-breakdown,.compare-block,.socket-detail,.set-detail{margin-top:14px;padding-top:12px;border-top:1px solid #4d3c29}.source-breakdown h4,.compare-block h4,.socket-detail h4,.set-detail h4{margin:0 0 9px;font:17px XingKai;color:#d3b372}.source-breakdown>div{margin:8px 0}.source-breakdown small{display:block;color:#766b5d;font-size:12px}.source-breakdown p{display:flex;justify-content:space-between;gap:8px;margin:5px 0;font-size:12px;color:#948777}.source-breakdown b{color:#c9b58f;text-align:right;font-weight:400}.compare-head,.compare-row{display:grid;grid-template-columns:1.2fr .75fr .75fr .7fr;gap:5px;align-items:center;padding:5px 0;font-size:12px}.compare-head{color:#6f665a;border-bottom:1px solid #352c23}.compare-row{color:#9b8f7e;border-bottom:1px solid rgba(51,43,34,.65)}.compare-row b{text-align:right;font-weight:500}.compare-row .up{color:#69bb7a}.compare-row .down{color:#d16d60}.compare-row .same{color:#6d675f}.socket-detail button,.detail-actions button{border:1px solid #4d3c2c;background:#201913;color:#c7b493;padding:8px;cursor:pointer;font-size:12px}.socket-detail button:disabled{opacity:.35;cursor:not-allowed}.socket-detail>div,.gem-choice{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.set-detail p{color:#70b67c;font-size:12px}.detail-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:12px;border-top:1px solid #4d3c29;background:#120f0c}.detail-actions .primary-small{background:#76261e;border-color:#a24435}.boss-bar.mini{width:min(480px,62vw)}.boss-bar.mini strong{font-size:20px}.boss-bar.mini>div{border-color:#7c5530}.boss-bar.mini span{background:linear-gradient(90deg,#76501f,#d0913f)}
@media(max-width:1180px) and (min-width:721px){.equipment-view{display:grid;grid-template-columns:270px minmax(0,1fr);overflow:hidden;height:calc(100vh - 136px)}.character-stats,.inventory-panel{overflow:auto}.equipment-detail.empty-detail{display:none}.equipment-detail:not(.empty-detail){position:fixed;right:18px;top:106px;bottom:18px;width:min(390px,calc(100vw - 230px));z-index:45;box-shadow:-24px 0 60px #000}.equipment-detail .detail-close{display:block}.detail-scroll{padding-top:48px}}
@media(max-width:720px){.camp-nav{height:calc(66px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}.camp-content{padding-bottom:calc(86px + env(safe-area-inset-bottom))}.equipment-view{display:block;height:auto;overflow:visible;padding-top:8px}.character-stats{padding:12px}.equipped-grid{grid-template-columns:1fr 1fr}.inventory-panel{padding:12px 0 0;min-height:0}.inventory-filters{grid-template-columns:1fr 1fr}.inventory-tools span{display:none}.inventory-tools button{max-width:165px}.inventory-panel .item-grid{grid-template-columns:1fr 1fr}.equipment-detail:not(.empty-detail){position:fixed;left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom));z-index:45;max-height:70dvh;border-inline:0;border-bottom:0;box-shadow:0 -20px 55px #000}.equipment-detail.empty-detail{display:none}.detail-close{display:block}.detail-scroll{padding-top:48px}.detail-actions{padding-bottom:max(12px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}