@font-face { font-family: Iansui; src: url("../fonts/Iansui-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#07111d;color:#e9f3fb;font-family:system-ui,'Microsoft JhengHei',sans-serif}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.38;cursor:default}.app{width:100%;max-width:390px;height:min(var(--game-height,100vh),844px);height:min(100dvh,844px);margin:auto;background:#0a1421;display:flex;flex-direction:column;overflow:hidden;border-left:1px solid #2c4256;border-right:1px solid #2c4256}header{flex:0 0 58px;background:#10283b;border-bottom:1px solid #314e62;display:flex;align-items:center;justify-content:space-between;padding:8px 13px}.logo{font-weight:800;letter-spacing:1px;font-size:17px}.sub{font-size:10px;color:#a3bacb;margin-top:3px}.menuBtn{width:40px;height:39px;border:1px solid #506b7e;background:#1a394e;border-radius:9px;font-size:22px;line-height:1}.resources{height:37px;flex:0 0 37px;display:flex;justify-content:space-around;gap:6px;align-items:center;padding:0 5px;background:#14293a;border-bottom:1px solid #304a5d;font-size:11px;white-space:nowrap}.resources b{color:#ebd59f}.screen{position:relative;flex:1;min-height:0}.content{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:12px 11px 16px;scrollbar-width:thin;scrollbar-color:#53798a #152a3b}.toast{flex:0 0 34px;height:34px;padding:8px 11px;color:#a6e4cb;background:#183346;border-top:1px solid #34556b;font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.h{font-size:16px;font-weight:800;margin:0 0 10px}.box{background:#142a3c;border:1px solid #355267;border-radius:11px;padding:12px;margin-bottom:10px}.box.alt{background:#1a3447}.row{display:flex;align-items:center;justify-content:space-between;gap:9px}.muted{color:#a1b9c9}.small{font-size:11px}.gold{color:#ebcf95}.green{color:#8fe0be}.desc{font-size:11px;line-height:1.65;color:#a5bbca}.btn{border:1px solid #49677a;border-radius:8px;background:#2a4559;padding:10px 9px;font-size:12px;font-weight:700}.btn.primary{background:#237c6f;border-color:#3eab94}.btn.goldbtn{background:#6b5638;border-color:#aa8854}.btn.tiny{padding:6px 9px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.progress{height:8px;background:#31495a;border-radius:10px;overflow:hidden;margin:12px 0 6px}.progress div{height:100%;background:#5bb6a2;transition:width .25s}.item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid #314b5d}.item:last-child{border-bottom:0}.pill{font-size:10px;border:1px solid #468b77;color:#a4e8cc;padding:3px 6px;border-radius:5px}.filters{display:flex;gap:5px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}.filter{border:1px solid #406074;background:#223b4e;padding:6px 10px;border-radius:7px;white-space:nowrap;font-size:11px}.filter.on{background:#246a61;border-color:#58bfa4}.menuGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.menuGroup{color:#a0b9c9;font-size:11px;font-weight:800;margin:8px 0}.menuCell{background:#1a3346;border:1px solid #3c5d71;border-radius:9px;text-align:left;padding:14px 10px;font-weight:700}.menuCell.on{background:#24524f;border-color:#68b9a5}.roster{height:155px;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start;scrollbar-width:thin;scrollbar-color:#517d8c #162b3c}.hero{background:#193447;border:1px solid #415f73;padding:9px 7px;border-radius:8px;text-align:left;min-width:0}.hero.in{border-color:#55a28b}.hero strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}.hero span{display:block;color:#9eb8c7;font-size:10px;margin-top:5px}.formation{height:218px;position:relative;border:1px solid #365367;border-radius:10px;background:radial-gradient(ellipse,#253e53,#101b2b);overflow:hidden}.formSlot{position:absolute;transform:translate(-50%,-50%);width:40%;height:46px;border:1px solid #4b6b7e;background:#182f42;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.formSlot.selected{border:2px solid #7ce1c9;background:#24544f}.formSlot small{font-size:9px;color:#aabfcf}.formSlot strong{font-size:12px}.lane{position:absolute;top:5px;transform:translateX(-50%);font-size:10px;color:#bdd3df}.line{position:absolute;top:8%;bottom:4%;left:50%;border-left:1px dashed #557084;opacity:.4}.statGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.statBox{background:#1c374b;border-radius:8px;padding:10px}.statBox b{display:block;font-size:16px;margin-top:5px}.battleArena{height:350px;position:relative;overflow:hidden;border:1px solid #354b5c;border-radius:12px;background:radial-gradient(ellipse,#22394d,#0d1928)}.battleUnit{position:absolute;transform:translate(-50%,-50%);width:76px;text-align:center;z-index:2}.battleUnit .inner{animation:idle 2.8s ease-in-out infinite}.battleUnit:nth-child(3n) .inner{animation-delay:-1.1s}.battleUnit .name{font-weight:800;font-size:11px;white-space:nowrap}.battleUnit.enemy .name{color:#ffb3c0}.hpbar{height:5px;background:#344b5c;margin:4px 4px 2px;border-radius:5px;overflow:hidden}.hpfill{height:100%;background:#4bd2a1;transition:width .2s}.battleUnit.enemy .hpfill{background:#ed7b8d}.health,.skillpts,.effectsText{font-size:9px;min-height:11px}.skillpts{color:#a6bfff}.effectsText{color:#ffb77e}.battleUnit.dead{opacity:.15;filter:grayscale(1)}.battleUnit.active .name{text-decoration:underline;text-underline-offset:3px;text-shadow:0 0 9px #e8d094}.battleUnit.hit .inner{animation:hit .28s}.fx{position:absolute;z-index:10;transform:translate(-50%,-50%);font-size:12px;font-weight:800;white-space:nowrap;pointer-events:none;text-shadow:0 2px 7px #000}.float{animation:floatUp .8s forwards}.battleControl{display:flex;gap:7px;margin-top:9px}.battleControl button{flex:1}.battleMeta{display:flex;justify-content:space-between;color:#acc2d1;font-size:10px;margin:8px 0}.event{border:1px solid #3e5b6c;border-radius:9px;background:#183549;padding:12px;margin-bottom:9px}@keyframes idle{50%{transform:translateY(-5px)}}@keyframes hit{35%{transform:translateX(-7px)}70%{transform:translateX(5px)}}@keyframes floatUp{to{opacity:0;translate:0 -27px}}@media(max-width:370px){.battleUnit{width:66px}.battleUnit .name{font-size:10px}.battleArena{height:335px}.formSlot{height:43px}}

/* Portrait systems and settlement panels */
.resources { height: 43px; flex-basis: 43px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 2px; text-align: center; font-size: 10px; }
.resources span { min-width: 0; overflow: hidden; }
.resources b { display: block; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.formationContent { overflow: hidden; }
.formationPage { height: 100%; display: flex; flex-direction: column; gap: 7px; }
.formationPage .h, .formationPage .filters { margin: 0; flex-shrink: 0; }
.formationGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 7px; border: 1px solid #365367; border-radius: 10px; background: radial-gradient(ellipse,#253e53,#101b2b); }
.formationSlot { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 7px; min-height: 34px; border: 1px solid #415f73; border-radius: 7px; background: #193447; color: #c4d8e2; touch-action: none; }
.formationSlot:nth-child(odd) { transform: translateY(3px); }
.formationPage .rosterFlex { flex: 1; min-height: 0; height: auto; touch-action: pan-y; }
.rosterCard { display: flex; align-items: stretch; padding: 0; }
.heroInfoButton, .dragGrip { border: 0; background: transparent; color: inherit; }
.heroInfoButton { flex: 1; min-width: 0; padding: 7px 4px 7px 7px; text-align: left; }
.dragGrip { padding: 0 8px; min-width: 28px; color: #9eb8c7; cursor: grab; touch-action: none; }
.dragGhost { position: fixed; z-index: 10; transform: translate(-50%,-50%); pointer-events: none; background: #193447; border: 1px solid #55a28b; border-radius: 7px; padding: 5px 9px; }
.bagGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: minmax(64px,auto); gap: 7px; margin-bottom: 8px; }
.bagItem { display: grid; align-content: center; gap: 4px; margin: 0; }
.recipeList { max-height: 130px; overflow: auto; }
.gameDialog { width: min(350px,calc(100% - 28px)); max-height: min(75vh,620px); max-height: min(75dvh,620px); background: #14293a; color: #e9f3fb; border: 1px solid #51718a; border-radius: 12px; padding: 14px; overflow: auto; }
.gameDialog::backdrop { background: #050b13c9; }
.gameDialog form { margin-top: 10px; }
.gameDialog #resultItems { margin: 8px 0; padding-left: 23px; line-height: 1.65; }
.battleUnit.bossUnit { width: 88px; }
.battleUnit.bossUnit .name { font-size: 14px; color: #ffc784; }
.battleUnit.bossUnit .hpbar { height: 7px; }
@media(max-width: 370px) { .battleUnit.bossUnit { width: 73px; } }
.breakthroughControl { display: flex; justify-content: center; margin-top: 22px; }
.breakthroughControl .btn { width: auto; min-width: 130px; }
details.box summary { cursor: pointer; font-weight: 700; color: #ebd59f; background: #193447; border: 1px solid #415f73; border-radius: 8px; padding: 8px; }
details.box[open] summary { margin-bottom: 12px; }
.stageGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.titleActive .resources, .titleActive .menuBtn, .titleActive .toast, .titleActive .sub { display: none; }
.titleScreen { min-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 12px; text-align: center; padding: 18px; }
.titleScreen h2, .titleScreen p { margin: 0; }
.titleScreen h2 { font-size: 30px; }
.battleIntro { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #07111dd9; color: #ffe2a8; }
.battleIntro strong { font-size: 27px; letter-spacing: .2em; text-shadow: 0 0 18px #df9d46; animation: battleCue 1.1s ease both; }
@keyframes battleCue {
  0% { opacity: 0; transform: scale(.78); }
  25%, 76% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.09); }
}
.skillTitle { font-size: 15px; margin: 8px 0 3px; }
.skillTitle + p { margin-top: 0; }
.activeSkill { color: #f7d391; }
.passiveSkill { color: #b7abff; }
.growthList { list-style: none; padding: 0; }
.growthList li { padding: 7px 0; border-bottom: 1px solid #304a5d; }
.summonOption { display: block; margin: 9px 0; }
#summonWish { display: block; width: 100%; padding: 8px; margin: 8px 0; background: #193447; color: #e9f3fb; border: 1px solid #415f73; border-radius: 7px; }
@media (prefers-reduced-motion: reduce) { .battleIntro strong { animation: none; } }
.headerControls { display: flex; gap: 6px; }
.titleActive .headerControls { display: none; }
#musicBtn { width: 35px; font-size: 18px; }
#musicBtn[aria-pressed="false"] { opacity: .65; }
#nameForm, .craftControl { display: grid; justify-items: center; gap: 8px; }
#playerName, .gameSelect { width: 100%; padding: 8px; border: 1px solid #415f73; border-radius: 7px; background: #193447; color: #e9f3fb; }
.gameSelect { margin-top: 7px; }
.craftControl { margin-top: 22px; }
.craftControl .btn { width: auto; min-width: 132px; }
.formationSlot strong, .battleUnit .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.formationSlot small { flex-shrink: 0; }
.unitCultivation { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; color: #aac3d5; line-height: 1.15; }
.qiScene { display: grid; place-items: center; margin-bottom: 8px; min-height: 105px; background: radial-gradient(ellipse, #1b4552, transparent 68%); }
.qiScene svg { width: min(220px, 100%); height: 115px; overflow: visible; }
.qiBody { fill: #203b50; stroke: #b5e3d3; stroke-width: 2; stroke-linecap: round; transform-origin: 50% 74%; animation: qiBreath 2.8s ease-in-out infinite; }
.qiRing { fill: none; stroke: #78dab9; stroke-width: 2; transform-origin: 50% 74%; animation: qiFlow 2.8s ease-out infinite; }
.qiRingOuter { animation-delay: -.9s; }
.qiSparks { fill: #aaf6d4; animation: qiRise 2.8s ease-in-out infinite; }
.qiBolt { fill: #fff2c3; opacity: 0; }
.qiBreakthrough .qiBolt { animation: qiLightning .85s ease both; }
.qiBreakthrough .qiRing { animation: qiBurst .85s ease-out both; stroke: #ffe7a3; }
.qiBreakthrough .qiBody { animation: qiBreath .85s ease-out both; stroke: #ffe7a3; }
@keyframes qiBreath { 50% { transform: translateY(-3px) scale(1.04); } }
@keyframes qiFlow { from { opacity: .8; transform: scale(.85); } to { opacity: .15; transform: scale(1.2); } }
@keyframes qiRise { from { opacity: .2; transform: translateY(5px); } 45% { opacity: 1; } to { opacity: .2; transform: translateY(-8px); } }
@keyframes qiLightning { 0%, 100% { opacity: 0; } 16%, 49% { opacity: 1; } 31%, 70% { opacity: .15; } }
@keyframes qiBurst { from { opacity: 1; transform: scale(.6); } to { opacity: .15; transform: scale(1.55); } }
@media (prefers-reduced-motion: reduce) {
  .qiBody, .qiRing, .qiSparks, .qiBreakthrough .qiBolt, .qiBreakthrough .qiRing, .qiBreakthrough .qiBody { animation: none; }
  .qiBreakthrough .qiBolt { opacity: 1; }
}
body, button, input, select, dialog { font-family: "Iansui", "DFKai-SB", "標楷體", "Kaiti TC", "STKaiti", "KaiTi", serif; }
.app { position: relative; }
.powerBar { padding: 5px 10px; text-align: center; background: #122438; font-size: 13px; }
.powerBar b { color: #f7d391; }
.titleActive .powerBar, .titleActive #powerNotice { display: none; }
.powerNotice { z-index: 7; text-align: center; pointer-events: none; opacity: 0; }
#powerNotice { position: absolute; top: 133px; inset-inline: 10px; }
#heroPowerNotice { position: sticky; top: 0; height: 0; }
.powerNotice div { width: fit-content; margin: 0 auto 3px; padding: 4px 9px; border-radius: 6px; background: #09151ff2; font-weight: bold; }
.powerUp { color: #8ff3ac; }
.powerDown { color: #ff9d9d; }
.exchangeControl { border-top: 1px solid #34536a; margin-top: 10px; padding-top: 10px; }
.exchangeControl label { display: grid; gap: 5px; }
.exchangeControl input { width: 100%; accent-color: #6bceb2; }
.exchangePreview { min-height: 1.4em; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .rainbowName {
    color: transparent !important;
    background: repeating-linear-gradient(90deg,#ff9c9c 0%,#ffd28a 10%,#a7e994 20%,#88dcf1 30%,#d7a8ff 40%,#ff9c9c 50%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: rainbowFlow 2.4s linear infinite;
  }
}
@keyframes rainbowFlow { to { background-position-x: -200%; } }
@media (prefers-reduced-motion: reduce) { .rainbowName { animation: none; } }
.bagScroll { max-height: min(56vh,465px); max-height: min(56dvh, 465px); overflow-y: auto; overscroll-behavior: contain; padding-right: 3px; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .giltName {
    color: transparent !important;
    background: linear-gradient(105deg,#b9791c,#ffe17e 35%,#fff5ca 52%,#e8b33d 68%,#a86615);
    background-size: 180% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: giltFlow 2.1s ease-in-out infinite alternate;
  }
}
@keyframes giltFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.stoneText { animation: stoneHue 2.6s ease-in-out infinite alternate; }
.stone-stones { --stone-a: #baa0ee; --stone-b: #f0caff; }
.stone-midStones { --stone-a: #68d6ad; --stone-b: #baf7ed; animation-delay: -.6s; }
.stone-highStones { --stone-a: #f8a45d; --stone-b: #ffe292; animation-delay: -1.2s; }
.stone-topStones { --stone-a: #ff858d; --stone-b: #ffdb92; animation-delay: -1.8s; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .stone-topStones {
    color: transparent;
    background: repeating-linear-gradient(90deg,#ff849d 0%,#ffdc6b 10%,#8ff3a4 20%,#83d7ff 30%,#c7a0ff 40%,#ff849d 50%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: rainbowFlow 2.4s linear infinite;
  }
}
@keyframes stoneHue { from { color: var(--stone-a); } to { color: var(--stone-b); } }
.materialCard { color: inherit; text-align: left; cursor: pointer; }
.materialCard:hover, .materialCard:focus-visible { border-color: #8ab8cd; }
.queueLine { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.dialogHint { text-align: center; opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .giltName, .stoneText { animation: none; }
  .stoneText { color: var(--stone-a); }
}

.fallbackDialog:not([open]) { display: none; }
.factionCard { min-height: 74px; padding: 10px 6px; }
.factionCard strong, .factionCard span { display: block; }
.factionCard strong { color: #ebcf95; font-size: 17px; margin-bottom: 5px; }
.factionCard span { font-size: 12px; line-height: 1.4; }
.fallbackDialog[open] { display: block; position: fixed; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); box-shadow: 0 0 0 100vmax #050b13c9; }