:root{color-scheme:dark;--bg:#090c09;--panel:#151b14f2;--panel2:#1b231af7;--line:#b8c8a523;--line2:#cfe1b348;--text:#edf2e5;--muted:#98a38e;--green:#8fb269;--red:#bd5d57;--gold:#d0ad65}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:1120px;background:radial-gradient(circle at 15% 0,#6c894a1c,transparent 30%),var(--bg);color:var(--text);font-family:Georgia,"Times New Roman",serif}button,input{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:7px;background:#ffffff08;padding:8px 10px}button:hover{border-color:var(--line2);background:#ffffff10}button:disabled{opacity:.38;cursor:not-allowed}.danger:hover{color:#ffaaa4;border-color:#bd5d5770}.primary{background:#78974f35;border-color:#a9cd795e}.big{width:100%;padding:13px;font-weight:bold}
#app{display:grid;grid-template-rows:64px minmax(0,1fr);height:100dvh;padding:7px;gap:7px}header,.panel{border:1px solid var(--line);background:var(--panel);box-shadow:0 22px 70px #0007;backdrop-filter:blur(12px)}header{display:grid;grid-template-columns:270px 1fr auto;align-items:center;padding:8px 12px;border-radius:12px}.brand b,.brand small{display:block}.brand b{letter-spacing:.12em}.brand small{margin-top:3px;color:var(--muted);font-size:10px}.world{display:flex;justify-content:center;gap:48px}.world span{color:var(--muted);font-size:9px;text-align:center;text-transform:uppercase}.world b{display:block;margin-top:2px;color:var(--text);font-size:13px}.buttons{display:flex;gap:6px}.buttons button{font-size:10px}
main{display:grid;grid-template-columns:235px minmax(610px,1fr) 290px;min-height:0;gap:7px}.panel{min-height:0;border-radius:12px}.hero,.side{padding:13px;overflow:hidden}.hero>small,.side>small,.card>small{color:var(--muted);font-size:9px;letter-spacing:.11em}.hero h2,.side h2{margin:3px 0}.hero>p{margin:0 0 12px;color:var(--muted);font-size:9px;line-height:1.4}.hero label,.side label,.fighter label{display:flex;justify-content:space-between;margin:8px 0 4px;color:var(--muted);font-size:9px}.bar{height:7px;overflow:hidden;border:1px solid #ffffff0d;border-radius:99px;background:#0006}.bar i{display:block;height:100%;width:0;transition:width .2s}.hp{background:linear-gradient(90deg,#682827,#c5564e)}.st{background:linear-gradient(90deg,#34593a,#7db570)}.xp{background:linear-gradient(90deg,#49446d,#8f85c8)}.exposure{background:linear-gradient(90deg,#557633,#c3d057)}.enemyHp{background:linear-gradient(90deg,#732e2b,#dd625c)}
.level{display:flex;justify-content:space-between;margin:11px 0 8px;padding:8px;border:1px solid var(--line);border-radius:7px;font-size:10px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:5px}.stat{display:flex;justify-content:space-between;padding:6px 7px;border-radius:6px;background:#ffffff06;font-size:9px}.stat span{color:var(--muted)}.hero h3,.side h3{margin:12px 0 7px;color:#c7cfbd;font-size:10px;text-transform:uppercase;letter-spacing:.07em}.derived{display:grid;grid-template-columns:1fr 1fr;gap:4px}.derived div{display:flex;justify-content:space-between;padding:5px 6px;border-radius:5px;background:#ffffff05;font-size:8px}.derived span{color:var(--muted)}.gear{display:grid;grid-template-columns:58px 1fr;gap:6px;margin-top:auto;font-size:8px}.gear span{color:var(--muted)}.gear b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.center{display:grid;grid-template-rows:minmax(0,1fr) 145px;min-height:0;gap:7px}.map{position:relative;overflow:hidden;background:#080b08}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.mapTitle{position:absolute;left:11px;top:11px;max-width:430px;padding:8px 10px;border:1px solid #ffffff14;border-radius:7px;background:#050805c7}.mapTitle b,.mapTitle span{display:block}.mapTitle b{font-size:12px}.mapTitle span{margin-top:2px;color:var(--muted);font-size:8px}.log{padding:10px 12px;overflow:hidden}.sectionTitle{display:flex;justify-content:space-between}.sectionTitle button{padding:0;border:0;background:none;color:var(--muted);font-size:8px}#log{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}.logEntry{padding:7px;border-left:2px solid var(--c);border-radius:0 6px 6px 0;background:#ffffff05}.logEntry b{display:block;overflow:hidden;font-size:8px;white-space:nowrap;text-overflow:ellipsis}.logEntry p{display:-webkit-box;margin:3px 0 0;overflow:hidden;color:var(--muted);font-size:7px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.mainQuest,.quest,.mutation{padding:9px;border:1px solid var(--line);border-radius:7px;background:#ffffff05}.mainQuest{border-color:#b45a543e;background:linear-gradient(145deg,#8b39351d,transparent)}.quest b,.mutation b,.mainQuest b{display:block;font-size:9px}.quest p,.mutation p,.mainQuest p{margin:3px 0;color:var(--muted);font-size:8px;line-height:1.4}.quest small,.mutation small,.mainQuest small{color:#b6bfaa;font-size:7px}.list{display:flex;flex-direction:column;gap:5px;max-height:165px;overflow:auto}.mutations{max-height:none;flex:1}.mutationHead{display:flex;justify-content:space-between;align-items:center;margin-top:12px;border-top:1px solid var(--line);padding-top:4px}.mutationHead b{font-size:9px}.mutation.good{border-left:2px solid #8caf5f}.mutation.bad{border-left:2px solid #b55d56}.mutation.mixed{border-left:2px solid #b59a58}.side{display:flex;flex-direction:column}.side .bar{margin-bottom:7px}
.modal{position:fixed;z-index:50;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:#030503df;backdrop-filter:blur(14px)}.modal.active{display:flex}.card{position:relative;width:min(900px,95vw);max-height:93vh;overflow:auto;padding:23px;border:1px solid var(--line2);border-radius:15px;background:radial-gradient(circle at 90% 0,#799b501c,transparent 28%),var(--panel2);box-shadow:0 35px 110px #000a}.card h1{margin:4px 0 8px;font-size:27px}.card>p{color:var(--muted);font-size:10px;line-height:1.55}.creationCard{width:min(1180px,98vw)}.createGrid{display:grid;grid-template-columns:1fr 310px;gap:18px;margin-top:15px}.createGrid label{display:block;margin-bottom:5px;color:var(--muted);font-size:9px}.createGrid input{width:100%;padding:9px;border:1px solid var(--line);border-radius:7px;background:#0005}.createGrid h3{margin:14px 0 6px;font-size:10px}.createGrid h3 small{float:right;color:var(--muted)}.options{display:grid;gap:6px}.options.four{grid-template-columns:repeat(4,1fr)}.options.three{grid-template-columns:repeat(3,1fr)}.option{padding:8px;text-align:left}.option.selected{border-color:#a9ce797a;background:#7b9c511c}.option b,.option span{display:block}.option b{font-size:8px}.option span{margin-top:2px;color:var(--muted);font-size:7px;line-height:1.35}.createStats{padding:13px;border:1px solid var(--line);border-radius:10px;background:#0003}.points{display:flex;justify-content:space-between;padding:8px;border-radius:7px;background:#78974f1e;font-size:9px}.points b{font-size:17px}.createStat{display:grid;grid-template-columns:1fr 27px 32px 27px;align-items:center;gap:4px;margin-top:5px;padding:6px;border-radius:6px;background:#ffffff05}.createStat b{font-size:11px;text-align:center}.createStat strong,.createStat small{display:block}.createStat strong{font-size:8px}.createStat small{color:var(--muted);font-size:6px}.createStat button{width:27px;height:27px;padding:0}.summary{margin:10px 0;padding:9px;border-top:1px solid var(--line);color:var(--muted);font-size:8px;line-height:1.55}
.battleCard{width:min(820px,95vw)}.fighters{display:grid;grid-template-columns:1fr 45px 1fr;align-items:center;gap:10px;margin:18px 0}.fighter{padding:14px;border:1px solid var(--line);border-radius:10px;background:#0003}.fighter h3{text-align:center}.portrait{display:grid;place-items:center;width:70px;height:70px;margin:auto;border:1px solid var(--line);border-radius:50%;font-size:27px;background:#ffffff05}.portrait.enemy{border-color:#b45d5754}.vs{text-align:center;color:#6f7869}.message{min-height:46px;padding:10px;border-left:2px solid var(--gold);background:#0003;color:#c5ccbb;font-size:9px;line-height:1.45}.battleActions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.battleAction,.choiceButton,.service,.questRow,.itemRow{padding:9px;border:1px solid var(--line);border-radius:7px;background:#ffffff05;text-align:left}.battleAction b,.battleAction span,.choiceButton b,.choiceButton span{display:block}.battleAction b,.choiceButton b{font-size:8px}.battleAction span,.choiceButton span{margin-top:2px;color:var(--muted);font-size:7px}.choiceCard{width:min(620px,94vw)}.choiceOptions{display:grid;gap:7px;margin-top:14px}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.close{position:absolute;right:16px;top:16px;width:32px;height:32px;padding:0;font-size:20px}.cityCard,.inventoryCard{width:min(860px,95vw)}.service,.questRow,.itemRow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-top:6px}.service b,.service span,.questRow b,.questRow span,.itemRow b,.itemRow span{display:block}.service b,.questRow b,.itemRow b{font-size:8px}.service span,.questRow span,.itemRow span{margin-top:2px;color:var(--muted);font-size:7px}.levelCard{width:min(650px,94vw);text-align:center}#toast{position:fixed;z-index:100;left:50%;bottom:20px;padding:8px 12px;border:1px solid var(--line2);border-radius:7px;background:#171e16f8;opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:.2s;font-size:8px}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-height:760px){#app{grid-template-rows:58px minmax(0,1fr);padding:5px;gap:5px}main,.center{gap:5px}.center{grid-template-rows:minmax(0,1fr) 118px}.hero,.side{padding:9px}.hero h3,.side h3{margin:8px 0 5px}.list{max-height:130px}}