@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 { 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; } }