/* Illustrated action, combat and loot presentation layer. */

.item-art {
  display: block;
  width: 54px;
  height: 72px;
  flex: 0 0 auto;
  background-image: url("./assets/images/item-atlas.webp");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  overflow: hidden;
  border: 1px solid rgba(108,224,214,.24);
  border-radius: 3px 14px 3px 14px;
  box-shadow: inset 0 0 16px rgba(88,211,201,.12);
  filter: drop-shadow(0 7px 12px rgba(6, 51, 52, .22));
}
.item-art--hemostatic { background-position: 0 0; }
.item-art--qi-pill { background-position: 33.333% 0; }
.item-art--spirit-dew { background-position: 66.666% 0; }
.item-art--jade-slip { background-position: 100% 0; }
.item-art--merchant-token { background-position: 0 100%; }
.item-art--old-talisman { background-position: 33.333% 100%; }
.item-art--star-sand { background-position: 66.666% 100%; }
.item-art--frost-scale { background-position: 100% 100%; }
.item-art.item-art--spirit-stones {
  background-color: transparent;
  background-image: url("./assets/images/spirit-stones.webp");
  background-position: center;
  background-size: contain;
  border-color: transparent;
  border-radius: 14px;
  box-shadow: none;
  filter: drop-shadow(0 7px 12px rgba(14, 92, 98, .28));
}

.inventory-list--illustrated { gap: 10px; }
.inventory-list--illustrated article {
  position: relative;
  min-height: 106px;
  padding: 9px 12px 9px 8px;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  overflow: hidden;
  background: linear-gradient(118deg, rgba(244,251,247,.86), rgba(210,237,231,.62));
  border-color: rgba(49,128,118,.24);
  border-radius: 3px 16px 3px 16px;
}
.inventory-list--illustrated article::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -35px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(64,199,191,.16), transparent 68%);
  pointer-events: none;
}
.inventory-list--illustrated article > .item-art { position: relative; z-index: 1; display: block; width: 62px; height: 83px; color: transparent; background-color: transparent; background-image: url("./assets/images/item-atlas.webp"); background-repeat: no-repeat; background-size: 400% 200%; border-radius: 3px 14px 3px 14px; font-size: 0; }
.inventory-list--illustrated .item-art--hemostatic { background-position: 0 0; }
.inventory-list--illustrated .item-art--qi-pill { background-position: 33.333% 0; }
.inventory-list--illustrated .item-art--spirit-dew { background-position: 66.666% 0; }
.inventory-list--illustrated .item-art--jade-slip { background-position: 100% 0; }
.inventory-list--illustrated .item-art--merchant-token { background-position: 0 100%; }
.inventory-list--illustrated .item-art--old-talisman { background-position: 33.333% 100%; }
.inventory-list--illustrated .item-art--star-sand { background-position: 66.666% 100%; }
.inventory-list--illustrated .item-art--frost-scale { background-position: 100% 100%; }
.inventory-list--illustrated article > div { position: relative; z-index: 1; min-width: 0; }
.inventory-list--illustrated article > div > small { color: #2a8178; font-size: 8px; letter-spacing: .13em; }
.inventory-list--illustrated h3 { margin: 4px 0 5px; color: #174a43; font-size: 16px; }
.inventory-list--illustrated h3 em { color: #2a7770; font: 12px Georgia, serif; font-style: normal; }
.inventory-list--illustrated p { margin: 0; color: #58776f; line-height: 1.55; }
.inventory-list--illustrated article[data-rarity="玄"],
.inventory-list--illustrated article[data-rarity="珍"] { box-shadow: inset 3px 0 #5faca2, 0 8px 24px rgba(33,102,94,.07); }

.mobile-action-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mobile-action-menu button { position: relative; display: grid; min-height: 98px; padding: 13px 11px; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 10px; color: #24564f; text-align: left; background: linear-gradient(130deg,rgba(255,255,255,.7),rgba(204,237,230,.55)); border: 1px solid rgba(43,129,119,.18); border-radius: 3px 15px 3px 15px; overflow: hidden; cursor: pointer; transition: .25s ease; }
.mobile-action-menu button:hover { background: linear-gradient(130deg,rgba(255,255,255,.92),rgba(189,233,224,.7)); border-color: rgba(43,143,132,.45); box-shadow: 0 12px 28px rgba(27,101,93,.11); transform: translateY(-2px); }
.mobile-action-menu button > i { display: grid; width: 40px; height: 40px; place-items: center; color: #277e75; background: rgba(73,184,171,.1); border: 1px solid rgba(48,145,134,.25); border-radius: 50%; }
.mobile-action-menu .ui-icon { width: 19px; height: 19px; }
.mobile-action-menu button > span { display: grid; min-width: 0; gap: 3px; }.mobile-action-menu b { color: #174b45; font: 400 16px "STKaiti","KaiTi",serif; }.mobile-action-menu small { color: #6c8982; font-size: 7px; line-height: 1.4; }.mobile-action-menu em { position: absolute; right: 8px; bottom: 2px; color: rgba(43,122,113,.11); font: 35px "STKaiti","KaiTi",serif; font-style: normal; }

.settlement-result--item {
  min-height: 92px;
  padding: 8px 13px 8px 7px;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  background: linear-gradient(118deg, rgba(240,251,247,.88), rgba(214,240,234,.76));
  overflow: hidden;
}
.settlement-result--item::after {
  content: "";
  position: absolute;
  left: -24px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(49,190,179,.18), transparent 68%);
  animation: item-aura 2.8s ease-in-out infinite;
}
.settlement-result--item .item-art { position: relative; z-index: 1; width: 58px; height: 77px; animation: item-arrive .62s cubic-bezier(.18,.84,.2,1.08) both; }
.settlement-result__rarity { display: block; margin-top: 3px; color: #298176 !important; font-size: 7px !important; letter-spacing: .13em; }
.settlement-result--item[data-rarity="玄"],
.settlement-result--item[data-rarity="珍"] { border-color: rgba(43,145,134,.38); box-shadow: inset 3px 0 #51a99e, 0 8px 24px rgba(29,111,101,.08); }
.settlement-result--item.settlement-result--cost { background: linear-gradient(118deg, rgba(255,246,242,.96), rgba(244,226,219,.9)); border-color: rgba(166,82,71,.3); }
.settlement-result--victory { background: linear-gradient(115deg, rgba(224,244,239,.92), rgba(224,235,250,.88)); border-color: rgba(55,132,153,.3); }

.combat-card--cinematic {
  width: min(900px, 100%);
  max-width: 900px;
  padding: 0;
  color: #dff7f4;
  background: linear-gradient(145deg, rgba(7,33,38,.98), rgba(7,49,51,.97));
  border: 1px solid rgba(121,211,210,.46);
  border-radius: 4px 22px 4px 22px;
  box-shadow: 0 34px 94px rgba(2,20,27,.52), inset 0 0 0 1px rgba(218,252,248,.08);
  backdrop-filter: none;
}
.combat-visual { position: relative; height: 238px; overflow: hidden; isolation: isolate; background: #0a3140; }
.combat-visual__image { position: absolute; z-index: -3; inset: -4%; background-position: center; background-size: cover; animation: battle-camera 9s ease-in-out infinite alternate; }
.combat-visual--wolf .combat-visual__image { background-image: url("./assets/images/combat-wolf.webp"); }
.combat-visual--bandit .combat-visual__image { background-image: url("./assets/images/combat-bandit.webp"); }
.combat-visual--serpent .combat-visual__image { background-image: url("./assets/images/combat-serpent.webp"); }
.combat-visual__veil { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(4,24,31,.04), rgba(3,26,34,.02) 44%, rgba(3,26,33,.74) 100%), linear-gradient(90deg, rgba(2,29,36,.22), transparent 34% 67%, rgba(2,24,31,.24)); }
.combat-visual::after { content: ""; position: absolute; z-index: -1; inset: 0; box-shadow: inset 0 0 70px rgba(3,24,31,.25); pointer-events: none; }
.combat-fighter { position: absolute; z-index: 3; bottom: 12px; display: grid; width: min(250px, 34%); grid-template-columns: 1fr auto; gap: 2px 9px; color: #e9fbfa; text-shadow: 0 2px 12px rgba(0,0,0,.85); }
.combat-fighter--player { left: 17px; }
.combat-fighter--enemy { right: 17px; text-align: right; }
.combat-fighter small { grid-column: 1 / 3; color: rgba(222,248,247,.68); font-size: 7px; letter-spacing: .12em; }
.combat-fighter b { overflow: hidden; font: 400 18px "STKaiti","KaiTi",serif; text-overflow: ellipsis; white-space: nowrap; }
.combat-fighter em { align-self: end; color: rgba(231,250,248,.82); font: 8px Georgia,serif; font-style: normal; }
.combat-fighter > span { position: relative; grid-column: 1 / 3; height: 4px; overflow: hidden; background: rgba(218,250,247,.2); border-radius: 99px; }
.combat-fighter > span i { display: block; height: 100%; background: linear-gradient(90deg,#5fd5c8,#b7fff6); box-shadow: 0 0 12px #68ddd0; transition: width .4s ease; }
.combat-fighter--enemy > span i { margin-left: auto; background: linear-gradient(90deg,#d95c68,#ffab91); box-shadow: 0 0 12px #e7676d; }
.combat-round { position: absolute; z-index: 4; bottom: 10px; left: 50%; display: grid; width: 58px; height: 58px; place-items: center; color: #d9ffff; background: radial-gradient(circle,rgba(15,88,96,.86),rgba(5,38,46,.7)); border: 1px solid rgba(141,234,229,.42); border-radius: 50%; box-shadow: 0 0 24px rgba(69,202,198,.2); transform: translateX(-50%); }
.combat-round::before { content: ""; position: absolute; inset: -6px; border: 1px dashed rgba(137,229,225,.26); border-radius: inherit; animation: battle-orbit 9s linear infinite; }
.combat-round small { position: absolute; top: 9px; color: rgba(205,244,241,.52); font-size: 5px; letter-spacing: .1em; }
.combat-round b { margin-top: 6px; font: 12px Georgia,serif; }
.combat-round i { position: absolute; bottom: -6px; display: grid; width: 22px; height: 22px; place-items: center; color: #06353a; background: #b4eee7; border-radius: 50%; font: normal 13px "STKaiti","KaiTi",serif; }
.combat-card__body { padding: 12px 18px 16px; }
.combat-card--cinematic .combat-card__head h2 { margin: 2px 0 5px; color: #eafffc; font-size: 22px; }
.combat-card--cinematic .combat-card__head p { color: #7dcac5; }
.combat-card--cinematic .combat-card__head > span { color: #f1bab3; background: rgba(153,54,60,.18); border-color: rgba(234,133,123,.42); }
.combat-card--cinematic .combat-message { display: grid; min-height: 0; margin: 6px 0 10px; padding: 8px 10px; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; color: #bfded9; background: rgba(182,241,235,.06); border-left: 2px solid #66c8bf; font-size: 11px; line-height: 1.5; }
.combat-message > i { color: #74cec5; font: normal 9px "STKaiti","KaiTi",serif; letter-spacing: .08em; }
.combat-actions { gap: 7px; }
.combat-card--cinematic .combat-actions button { min-height: 58px; padding: 7px 9px; grid-template-columns: 34px 1fr; place-items: center stretch; gap: 7px; text-align: left; background: linear-gradient(130deg,rgba(94,201,191,.09),rgba(255,255,255,.025)); border-color: rgba(132,218,210,.14); }
.combat-card--cinematic .combat-actions button:hover { background: linear-gradient(130deg,rgba(93,216,202,.18),rgba(255,255,255,.05)); border-color: rgba(128,231,220,.46); box-shadow: 0 8px 24px rgba(0,20,25,.2); }
.combat-card--cinematic .combat-actions button > b { display: grid; width: 31px; height: 31px; place-items: center; color: #bdf3ec; background: rgba(82,189,178,.1); border: 1px solid rgba(120,224,214,.3); border-radius: 50%; font-size: 16px; }
.combat-card--cinematic .combat-actions span { display: grid; color: #ddf6f2; font-size: 10px; gap: 2px; }
.combat-card--cinematic .combat-actions small { color: rgba(202,234,230,.48); font-size: 7px; }
.combat-card--cinematic .combat-actions button.is-lacking { opacity: .48; }
.combat-visual__impact { position: absolute; z-index: 5; top: 42%; left: 50%; width: 8px; height: 8px; opacity: 0; transform: translate(-50%,-50%); }
.combat-visual__impact i { position: absolute; top: 3px; left: -55px; width: 118px; height: 2px; background: linear-gradient(90deg,transparent,#d9ffff,transparent); box-shadow: 0 0 10px #89ffff; }
.combat-visual__impact i:nth-child(2) { transform: rotate(60deg); }.combat-visual__impact i:nth-child(3) { transform: rotate(-60deg); }
.combat-visual__slash { position: absolute; z-index: 5; top: 30%; left: 34%; width: 38%; height: 3px; opacity: 0; background: linear-gradient(90deg,transparent,#e8ffff 35% 62%,transparent); filter: drop-shadow(0 0 10px #71e9e0); transform: rotate(-12deg); }
.combat-motion--attack .combat-visual__slash,
.combat-motion--spell .combat-visual__slash { animation: battle-slash .62s cubic-bezier(.18,.84,.22,1) both; }
.combat-motion--attack .combat-visual__impact,
.combat-motion--spell .combat-visual__impact { animation: battle-impact .68s .16s ease-out both; }
.combat-motion--guard .combat-visual::before { content: ""; position: absolute; z-index: 2; inset: 12% 27%; border: 2px solid rgba(130,241,229,.7); border-radius: 50%; box-shadow: 0 0 36px rgba(88,222,208,.55),inset 0 0 36px rgba(88,222,208,.24); animation: battle-guard .8s ease-out both; }
.combat-motion--flee .combat-visual__image { animation: battle-flee .7s ease-out both; }

.ritual-backdrop { position: fixed; z-index: 94; inset: 0; background: rgba(4,37,43,.56); backdrop-filter: blur(13px) saturate(.92); animation: ritual-fade .25s ease both; }
.ritual-modal { position: fixed; z-index: 95; top: 50%; left: 50%; display: grid; width: min(1080px,calc(100vw - 32px)); height: min(680px,calc(100dvh - 32px)); grid-template-columns: minmax(0,1.22fr) minmax(380px,.78fr); overflow: hidden; color: #1e4b48; background: linear-gradient(145deg,#eef9f7,#d9eeea); border: 1px solid rgba(89,178,168,.56); border-radius: 5px 28px 5px 28px; box-shadow: 0 42px 120px rgba(3,31,40,.48),inset 0 0 0 1px rgba(255,255,255,.5); transform: translate(-50%,-50%); animation: ritual-rise .48s cubic-bezier(.16,.84,.18,1) both; }
.ritual-art { position: relative; min-width: 0; overflow: hidden; isolation: isolate; background: #a9d7e2; }
.ritual-art__image { position: absolute; z-index: -3; inset: -3%; background: url("./assets/images/action-cultivate.webp") center / cover no-repeat; animation: ritual-camera 11s ease-in-out infinite alternate; }
.ritual-art__light { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg,rgba(228,253,255,.04),rgba(9,74,87,.02) 52%,rgba(4,43,54,.72) 100%),radial-gradient(circle at 62% 46%,rgba(208,255,255,.32),transparent 28%); mix-blend-mode: screen; }
.ritual-art::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg,transparent 45%,rgba(6,49,59,.08) 58%,rgba(3,40,50,.82) 100%); box-shadow: inset -26px 0 55px rgba(12,72,79,.16); pointer-events: none; }
.ritual-art__caption { position: absolute; z-index: 3; right: 34px; bottom: 92px; left: 34px; display: grid; color: #efffff; text-shadow: 0 3px 18px rgba(2,39,48,.88); }
.ritual-art__caption small { color: rgba(225,253,255,.72); font-size: 8px; letter-spacing: .2em; }
.ritual-art__caption b { margin: 5px 0 0; font: 400 clamp(42px,5vw,70px) "STKaiti","KaiTi",serif; letter-spacing: .14em; }
.ritual-art__caption span { color: rgba(235,255,255,.82); font: 13px "STKaiti","KaiTi",serif; letter-spacing: .1em; }
.ritual-art__orbit { position: absolute; z-index: 2; top: 44%; left: 60%; width: 330px; height: 330px; border: 1px solid rgba(188,255,250,.34); border-radius: 50%; box-shadow: 0 0 50px rgba(89,225,218,.18),inset 0 0 50px rgba(89,225,218,.11); transform: translate(-50%,-50%); animation: ritual-orbit 20s linear infinite; }
.ritual-art__orbit::before,.ritual-art__orbit::after { content: ""; position: absolute; border: 1px dashed rgba(204,255,252,.28); border-radius: inherit; }
.ritual-art__orbit::before { inset: 28px; }.ritual-art__orbit::after { inset: 72px; }
.ritual-art__orbit i { position: absolute; width: 7px; height: 7px; background: #bafff7; border-radius: 50%; box-shadow: 0 0 16px #83f4e9; }
.ritual-art__orbit i:nth-child(1){top:28px;left:70px}.ritual-art__orbit i:nth-child(2){right:-3px;top:50%}.ritual-art__orbit i:nth-child(3){bottom:25px;left:84px}
.ritual-progress { position: absolute; z-index: 4; right: 28px; bottom: 24px; left: 28px; display: grid; padding: 10px 13px; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: #e8fffd; background: rgba(5,54,64,.56); border: 1px solid rgba(186,244,239,.25); border-radius: 2px 12px 2px 12px; backdrop-filter: blur(12px); }
.ritual-progress > span { display: grid; }.ritual-progress small { color: rgba(219,250,248,.58); font-size: 6px; letter-spacing: .12em; }.ritual-progress span b { font: 13px Georgia,serif; }.ritual-progress span em { opacity: .54; font-size: 8px; font-style: normal; }
.ritual-progress > i { height: 5px; overflow: hidden; background: rgba(220,255,251,.16); border-radius: 99px; }.ritual-progress > i b { display: block; width: var(--cultivation-progress); height: 100%; background: linear-gradient(90deg,#58d8cc,#b8fff7); box-shadow: 0 0 12px #79e9df; animation: ritual-progress 1s .3s ease both; }.ritual-progress > strong { font: 11px Georgia,serif; }
.ritual-content { min-width: 0; padding: 27px 25px 22px; overflow-y: auto; background: linear-gradient(155deg,rgba(247,253,251,.98),rgba(220,241,236,.97)); }
.ritual-content > header { display: flex; padding-bottom: 16px; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid rgba(40,119,111,.16); }
.ritual-content > header small { color: #27857c; font-size: 7px; letter-spacing: .2em; }.ritual-content > header h2 { margin: 5px 0 3px; color: #164f49; font: 400 30px "STKaiti","KaiTi",serif; letter-spacing: .1em; }.ritual-content > header p { max-width: 315px; margin: 0; color: #6b8982; font-size: 9px; line-height: 1.55; }
.ritual-content > header button { display: grid; width: 34px; height: 34px; place-items: center; color: #2c6b65; background: rgba(255,255,255,.44); border: 1px solid rgba(46,124,116,.2); border-radius: 50%; cursor: pointer; }
.ritual-context { display: grid; margin: 13px 0; grid-template-columns: 1fr 1fr; gap: 7px; }
.ritual-context > span { display: grid; min-width: 0; padding: 8px 9px; grid-template-columns: 24px 1fr; column-gap: 7px; color: #466f69; background: rgba(255,255,255,.42); border: 1px solid rgba(49,127,118,.13); }
.ritual-context i { grid-row: 1 / 3; display: grid; width: 23px; height: 23px; place-items: center; color: #26887d; border: 1px solid rgba(43,139,128,.3); border-radius: 50%; font: normal 11px "STKaiti","KaiTi",serif; }.ritual-context small { font-size: 6px; letter-spacing: .09em; }.ritual-context b { overflow: hidden; color: #24554f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ritual-methods { display: grid; gap: 8px; }
.ritual-methods button { position: relative; display: grid; min-height: 86px; padding: 11px 10px; grid-template-columns: 43px minmax(0,1fr) 24px; align-items: center; gap: 10px; color: #285c57; text-align: left; background: linear-gradient(120deg,rgba(255,255,255,.62),rgba(208,237,231,.44)); border: 1px solid rgba(47,132,123,.17); border-radius: 3px 13px 3px 13px; cursor: pointer; transition: .25s ease; overflow: hidden; }
.ritual-methods button::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; opacity: 0; background: #3bb5a8; transition: opacity .25s; }.ritual-methods button:hover { border-color: rgba(43,145,134,.48); background: linear-gradient(120deg,rgba(255,255,255,.88),rgba(194,235,227,.62)); box-shadow: 0 12px 27px rgba(27,104,96,.12); transform: translateX(-3px); }.ritual-methods button:hover::before { opacity: 1; }
.ritual-methods button > i { display: grid; width: 42px; height: 42px; place-items: center; color: #277e74; background: radial-gradient(circle,rgba(79,200,187,.17),transparent 70%); border: 1px solid rgba(42,139,128,.3); border-radius: 50%; font: normal 19px "STKaiti","KaiTi",serif; }.ritual-methods button > span { display: grid; gap: 2px; }.ritual-methods small { color: #34887f; font-size: 6px; letter-spacing: .11em; }.ritual-methods b { color: #1b514b; font: 400 17px "STKaiti","KaiTi",serif; }.ritual-methods em { color: #698780; font-size: 8px; font-style: normal; line-height: 1.4; }.ritual-methods strong { color: #6b918b; font: 400 15px "STKaiti","KaiTi",serif; }
.ritual-methods button[data-cultivate-method="surge"] { border-color: rgba(171,91,86,.2); }.ritual-methods button[data-cultivate-method="surge"] > i { color: #a55752; border-color: rgba(170,84,78,.32); }.ritual-methods button[data-cultivate-method="surge"] small { color: #9b5b57; }
.ritual-cancel { width: 100%; margin-top: 10px; padding: 8px; color: #6f8984; background: transparent; border: 0; cursor: pointer; font-size: 8px; letter-spacing: .1em; }
.ritual-resolving { position: absolute; z-index: 9; inset: 0; display: grid; opacity: 0; place-content: center; place-items: center; color: #e8ffff; background: rgba(5,60,71,.44); backdrop-filter: blur(9px); pointer-events: none; transition: opacity .3s ease; }
.ritual-resolving i { width: 108px; height: 108px; border: 1px solid rgba(187,255,248,.5); border-top-color: #d7fffb; border-radius: 50%; box-shadow: 0 0 44px rgba(91,231,218,.35),inset 0 0 32px rgba(91,231,218,.14); animation: resolving-orbit 1.7s linear infinite; }.ritual-resolving span { margin-top: -70px; font: 20px "STKaiti","KaiTi",serif; letter-spacing: .18em; text-shadow: 0 2px 18px #06424c; }.ritual-resolving b { margin-top: 54px; color: rgba(226,255,252,.72); font-size: 7px; letter-spacing: .24em; }
.ritual-modal.is-resolving .ritual-resolving { opacity: 1; }.ritual-modal.is-resolving .ritual-art__image { transform: scale(1.08); filter: saturate(1.18) brightness(1.05); }.ritual-modal.is-resolving .ritual-art__orbit { animation-duration: 2.2s; }

@keyframes item-aura { 50% { opacity:.5; transform:scale(1.12); } }
@keyframes item-arrive { from { opacity:0; filter:blur(5px) drop-shadow(0 0 18px #71e5db); transform:translateY(12px) scale(.72); } }
@keyframes battle-camera { to { transform:scale(1.045) translate3d(-.6%,.4%,0); } }
@keyframes battle-orbit { to { transform:rotate(360deg); } }
@keyframes battle-slash { 0% { opacity:0; transform:translateX(-45px) rotate(-12deg) scaleX(.3); } 40% { opacity:1; } 100% { opacity:0; transform:translateX(70px) rotate(-12deg) scaleX(1.25); } }
@keyframes battle-impact { 0% { opacity:0; transform:translate(-50%,-50%) scale(.1); } 40% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.8); } }
@keyframes battle-guard { from { opacity:0; transform:scale(.45); } 45% { opacity:1; } to { opacity:0; transform:scale(1.15); } }
@keyframes battle-flee { to { opacity:.22; filter:blur(7px); transform:translateX(-7%) scale(1.07); } }
@keyframes ritual-fade { from { opacity:0; } }
@keyframes ritual-rise { from { opacity:0; transform:translate(-50%,calc(-50% + 24px)) scale(.98); } }
@keyframes ritual-camera { to { transform:scale(1.045) translate3d(-.8%,.3%,0); } }
@keyframes ritual-orbit { from { transform:translate(-50%,-50%) rotate(0); } to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes ritual-progress { from { width:0; } }
@keyframes resolving-orbit { to { transform:rotate(360deg); } }

@media (max-width: 760px) {
  .mobile-tabs--systems .mobile-primary-action { color:#f4ffff; background:linear-gradient(180deg,#278d83,#1c706b); border-radius:9px 9px 0 0; box-shadow:0 -6px 18px rgba(31,132,122,.2); }
  .mobile-tabs--systems .mobile-primary-action i { color:#edfffd; }
  .combat-card--cinematic { border-radius: 3px 16px 3px 16px; }
  .combat-visual { height: 172px; }
  .combat-fighter { bottom: 9px; width: 37%; }
  .combat-fighter--player { left: 10px; }.combat-fighter--enemy { right: 10px; }
  .combat-fighter small { font-size: 5px; }.combat-fighter b { font-size: 14px; }.combat-fighter em { font-size: 6px; }
  .combat-round { bottom: 7px; width: 48px; height: 48px; }.combat-round small { top:6px; }.combat-round i { width:19px;height:19px;font-size:11px; }
  .combat-card__body { padding: 9px 10px 10px; }
  .combat-card--cinematic .combat-card__head h2 { font-size: 18px; }
  .combat-card--cinematic .combat-message { max-height: 52px; margin: 4px 0 7px; overflow-y: auto; font-size: 9px; }
  .combat-actions { grid-template-columns: 1fr 1fr; }
  .combat-card--cinematic .combat-actions button { min-height: 47px; padding: 5px 7px; grid-template-columns: 29px 1fr; }
  .combat-card--cinematic .combat-actions button > b { width:27px;height:27px;font-size:14px; }.combat-card--cinematic .combat-actions span { font-size:9px; }.combat-card--cinematic .combat-actions small { font-size:6px; }

  .ritual-modal { display: block; width: calc(100vw - 16px); height: calc(100dvh - 16px); overflow-y: auto; border-radius: 3px 18px 3px 18px; }
  .ritual-art { min-height: 285px; }
  .ritual-art__image { background-position: 58% center; }
  .ritual-art__orbit { top:45%; left:59%; width:210px; height:210px; }
  .ritual-art__caption { right:18px; bottom:76px; left:18px; }.ritual-art__caption b { font-size:42px; }.ritual-art__caption span { font-size:10px; }
  .ritual-progress { right:12px;bottom:12px;left:12px;padding:8px 9px;grid-template-columns:auto 1fr auto; }
  .ritual-content { padding: 18px 14px 16px; overflow: visible; }
  .ritual-content > header h2 { font-size:25px; }.ritual-content > header p { font-size:8px; }
  .ritual-methods button { min-height:76px; padding:9px; grid-template-columns:38px 1fr 20px; gap:8px; }.ritual-methods button > i { width:36px;height:36px;font-size:17px; }.ritual-methods b { font-size:15px; }.ritual-methods em { font-size:7px; }
}

@media (max-width: 420px) {
  .mobile-action-menu { grid-template-columns:1fr; }
  .mobile-action-menu button { min-height:78px; }
  .combat-visual { height: 146px; }
  .combat-card--cinematic .combat-card__head p { display:none; }
  .combat-card--cinematic .combat-message { grid-template-columns:24px 1fr; }
  .ritual-art { min-height:250px; }
  .ritual-context { grid-template-columns:1fr; }
  .ritual-context > span:last-child { display:none; }
  .inventory-list--illustrated article { grid-template-columns:60px minmax(0,1fr) auto; }
  .inventory-list--illustrated article > .item-art { width:55px;height:73px; }
  .settlement-result--item { grid-template-columns:58px minmax(0,1fr) auto; }
  .settlement-result--item .item-art { width:52px;height:69px; }
}

@media (prefers-reduced-motion: reduce) {
  .item-art,.settlement-result--item::after,.combat-visual__image,.combat-round::before,.combat-visual__slash,.combat-visual__impact,.ritual-backdrop,.ritual-modal,.ritual-art__image,.ritual-art__orbit,.ritual-progress > i b,.ritual-resolving i { animation:none !important; }
}