:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;padding:14px;background:#0c0d12;font:14px/1.65 system-ui,-apple-system,"Malgun Gothic",sans-serif;color:#ecebf1}.game{max-width:640px;margin:auto;background:#13141a;border:1px solid #373541;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:13px;min-height:350px}.row{display:flex;align-items:center;justify-content:space-between;gap:11px}.row>*{min-width:0}.stack{display:flex;flex-direction:column;gap:12px}.tight{gap:5px}.heading{margin:0;font-size:21px;letter-spacing:-.3px;line-height:1.4}.panel{background:#20212a;border:1px solid #3b3b47;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:11px}.panel.selected,.option.selected{border-color:#cdb683;background:#2b2d39}.gold{color:#dec68d}.muted{color:#a6a6b4}.small{font-size:12px}.tiny{font-size:11px}.center{text-align:center}.line{height:1px;background:#3e3d47;margin:3px 0}.up{color:#91d9ae}.down{color:#f0a5a7}.btn,.mini-btn,.time-choice,.filterbtn{cursor:pointer;font:inherit}.btn{background:#d8bf88;color:#241d12;border:0;border-radius:9px;padding:12px;font-weight:750;width:100%}.btn.alt{border:1px solid #595660;background:#2a2b36;color:#eeeaf1}.btn.back{background:none;color:#bcbac6;text-align:left;width:auto;padding:4px 0}.btn:disabled,.mini-btn:disabled,.option:disabled{opacity:.42;cursor:default}.mini-btn{border:1px solid #66606a;background:#34333e;border-radius:7px;color:#eee9ee;padding:7px 12px;font-size:12px;align-self:flex-start}.field{width:100%;padding:12px;border:1px solid #5c5965;border-radius:8px;color:#fff;background:#2a2b36;font:inherit}input[type=radio]{accent-color:#dac08c}.story{font-size:14px;line-height:1.92}.story p{margin:0 0 11px}.story p:last-child{margin:0}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.stat{background:#2b2b36;border-radius:9px;padding:10px;min-width:0}.stat-label{background:none;border:0;color:#d9d7e1;text-decoration:underline dotted;cursor:pointer;padding:0;font-size:12px}.stat-number{font-size:19px;font-weight:760;margin-top:5px;white-space:nowrap}.stat-number .small{font-size:12px}.explain{border-radius:9px;padding:11px;background:#2b2e3a;color:#e0dee8;font-size:12px}.option{width:100%;text-align:left;background:#252630;border:1px solid #4a4755;border-radius:10px;padding:13px;color:#f0ecf2;cursor:pointer;display:flex;flex-direction:column;gap:6px}.option strong,.option b{font-size:14px}.art-title{display:flex;flex-direction:column;gap:18px;padding:0 0 8px}.mountain-art{width:100%;height:auto;border-radius:11px;display:block}.inspect{padding:21px;background:#2b2a35;border-radius:10px;display:flex;flex-direction:column;gap:5px}.grade{font-size:11px;padding:2px 7px;border-radius:6px;border:1px solid currentColor;white-space:nowrap}.g0{color:#b7bbc5}.g1{color:#76cc9e}.g2{color:#76b9f6}.g3{color:#bd9aff;text-shadow:0 0 6px #9876da80}.g4{color:#f5d27b;text-shadow:0 0 7px #f4c87c99;box-shadow:inset 0 0 7px #ebbd6750}.g5{color:#ffa9c6;text-shadow:0 0 10px #f881b4;box-shadow:inset 0 0 10px #f3a3c099,0 0 5px #f3a3c055}.item{display:flex;flex-direction:column;gap:8px;background:#292a35;border:1px solid #474550;padding:11px;border-radius:9px}.item>div{overflow-wrap:anywhere}.event{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:10px;border:1px solid #43414b;background:#252630}.event b,.event div{overflow-wrap:anywhere}.changes{display:flex;flex-direction:column}.change{display:grid;grid-template-columns:1fr auto 42px;gap:10px;align-items:center;padding:9px 2px;border-bottom:1px solid #3c3b45}.change:last-child{border:0}.change>:last-child{text-align:right}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.summary-grid>div{background:#2d2d38;padding:9px 5px;border-radius:9px;display:flex;align-items:center;flex-direction:column;gap:2px}.summary-grid b{font-size:17px;color:#ead19a}.summary-grid span{font-size:11px;color:#aaa9b6}.subtle-tag{font-size:11px;color:#cbb47e}.event-link{width:100%;background:#292b36;border:1px solid #43414d;border-radius:8px;padding:10px;text-align:left;color:#e4e1eb;font-size:12px;display:flex;justify-content:space-between;gap:10px;cursor:pointer;align-items:center}.event-link>span:first-child{flex:1}.inline-link{background:none;border:0;color:#e2ca96;text-decoration:underline;cursor:pointer}.time-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.time-choice,.filterbtn{background:#2d2e39;border:1px solid #575461;color:#dddbe4;border-radius:8px;padding:9px 5px}.time-choice.active,.filterbtn.active{background:#564831;border-color:#d5b982;color:#f9e3ad;font-weight:730}.filterrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.filterbtn{font-size:12px}.bar{height:11px;border-radius:99px;background:#41414e;overflow:hidden}.fill{height:100%;width:0;background:linear-gradient(90deg,#856f49,#f0dca2);transition:width .09s ease}.months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}.month{background:#373744;color:#a6a4b1;text-align:center;font-size:9px;padding:6px 0;border-radius:3px}.month.done{background:#836d43;color:#fbecc7}.nav{border-top:1px solid #403d49;padding-top:11px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.navbtn{border:0;border-radius:8px;background:#252630;color:#b1aebd;padding:9px 2px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;cursor:pointer;font-size:11px}.navbtn.active{color:#e9d099;background:#39394a}.navbtn i{font-size:18px;font-style:normal}.end-panel{border-color:#756549;background:linear-gradient(180deg,#26252f,#1e2029)}.toast{background:#293a34;border:1px solid #5d937b;border-radius:8px;padding:11px;color:#b8f0ce;font-size:12px}.empty{padding:30px 10px}.pill{font-size:11px;color:#ddd2b6}.game button:focus-visible,.game input:focus-visible,.game select:focus-visible{outline:2px solid #e3c990;outline-offset:2px}@media(min-width:500px){.nav{grid-template-columns:repeat(7,minmax(0,1fr))}}@media(max-width:370px){.stat-number{font-size:16px}.change{font-size:12px}.game{padding:10px}}

/* v10: 장착 상태 및 사건 팝업 */
.item.worn,.panel.worn{border:2px solid #e1c58b!important;box-shadow:0 0 0 1px #a18a55,0 0 17px rgba(217,185,108,.13);background:#292a32}
.relation{text-align:left}.relation:hover{border-color:#b8a47b}
.modal-backdrop{position:fixed;inset:0;background:rgba(5,6,12,.79);z-index:1000;display:flex;align-items:center;justify-content:center;padding:14px}
.modal-body{width:min(100%,540px);max-height:86vh;overflow-y:auto;box-shadow:0 24px 90px rgba(0,0,0,.65);border-color:#98825c;gap:14px}
.modal-body .event{margin-top:3px}
.compact-meta{background:#24252d;border-radius:9px;padding:12px;color:#d7cfbf;font-size:12px}
.beast-art{width:92px;min-width:92px;height:75px;filter:drop-shadow(0 0 6px rgba(210,190,130,.18))}
.item .mini-btn{max-width:100%}
.event-link:hover{border-color:#b59e6d}

/* v11 responsive app-ready viewport: scrolling is contained inside the game */
html,body{width:100%;height:100%;overflow:hidden}
body{padding:8px;min-height:0}
.game{width:100%;height:calc(100dvh - 16px);max-height:900px;min-height:340px;overflow:hidden;padding:12px;gap:8px;overscroll-behavior:contain}
.content-scroll{min-height:0;flex:1;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable; padding-right:3px}
.nav{flex-shrink:0;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;padding-top:8px}
.navbtn{position:relative;font-size:10px;min-width:0;padding:7px 1px}
.navbtn i{font-size:16px}
.new-indicator{position:absolute;top:1px;right:0;font-size:8px;font-weight:800;letter-spacing:-.2px;color:#ffe0a0;background:#8a4c29;padding:0 2px;border-radius:3px}
.root-label{border:0;background:transparent;font:inherit;font-weight:800;cursor:pointer;text-decoration:underline dotted;white-space:normal;text-align:right}
.summary-line{background:#292a35;border:1px solid #40404e;padding:10px;border-radius:9px;line-height:1.85;font-size:12px}
.event-accordion{background:#272833;border:1px solid #44434d;border-radius:9px;padding:10px}
.event-accordion summary{cursor:pointer;list-style-position:inside;font-size:12px;font-weight:750}
.event-accordion .stack{padding-top:10px}
.result-proof{background:#333540;border-left:2px solid #dfbd83;border-radius:5px;padding:9px;font-size:11px;line-height:1.6;color:#d6d0c1}
.shop-actions{display:flex;gap:6px;flex-wrap:wrap}
.shop-actions .mini-btn{font-size:11px}
@media(max-width:460px){body{padding:0}.game{height:100dvh;max-height:none;border-radius:0;padding:9px}.panel{padding:11px}.navbtn{font-size:9px}.change{grid-template-columns:1fr auto 35px;gap:5px}}
@media(min-width:760px){.game{max-width:680px;margin:8px auto}}
/* v12: eight persistent tabs and compact results */
.nav{grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}.navbtn{padding:7px 0;font-size:9px}.navbtn i{font-size:15px}
.object-new{font-size:9px;background:#86502b;color:#ffe2a4;border:1px solid #d7ac6c;border-radius:4px;padding:1px 4px;vertical-align:middle;margin-left:3px;white-space:nowrap}
.effect-highlight{color:#d8e9e0;background:#26382f;border-left:3px solid #76cc9e;border-radius:6px;padding:8px;line-height:1.7}.compact-summary{gap:7px}.compact-summary .event-accordion{padding:7px}.advance-panel{border-color:#a8905f;box-shadow:inset 0 0 0 1px #9c84492b}
@media(max-width:460px){.navbtn{font-size:8px;padding:8px 0}.navbtn i{font-size:14px}.nav{gap:1px}.new-indicator{font-size:7px}}

/* v14 online ranking */
.ranking-entry{display:flex;align-items:center;gap:12px;background:#292a34;border:1px solid #484550;padding:10px 12px;border-radius:9px}.ranking-entry .rank-number{min-width:34px;color:#ddc78c}.rank-main{flex:1;min-width:0}.rank-main b{overflow-wrap:anywhere}

/* v16: highlight unmet cultivation requirements, tournament results, title biography. */
.tournament-card{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 12px;border:1px solid var(--border,#454352);border-radius:10px;background:rgba(244,202,119,.04)}
.tournament-card .tiny{grid-column:1/-1}
.tournament-result{border-left:3px solid #e2bc73;background:rgba(226,188,115,.075);padding:9px 10px;color:#f4d798;font-weight:700}
.title-summary{margin-top:8px;padding:10px;border:1px solid rgba(226,188,115,.27);border-radius:10px}
.life-biography{line-height:1.85;padding:12px 14px;border-left:3px solid #d7b970;background:rgba(235,198,115,.06);border-radius:7px}
.life-biography p{margin:10px 0}
.tiny.down{color:#ff7b86 !important;font-weight:700}


/* v16.2: four seasons cycle on the title screen only. */
.game.is-title {
  position: relative;
  isolation: isolate;
  background: #101422;
  border-color: #575069;
}
.game.is-title .content-scroll {
  justify-content: flex-end;
  padding: 20px 8px 30px;
  gap: 11px;
}
.game.is-title .art-title {
  padding: 0;
  gap: 0;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .9));
}
.game.is-title .mountain-art { display: none; }
.game.is-title .art-title > .center {
  border: 1px solid rgba(224, 203, 164, .24);
  border-radius: 14px;
  background: rgba(13, 19, 31, .58);
  backdrop-filter: blur(7px);
  padding: 18px 12px;
  text-shadow: 0 2px 10px rgba(0,0,0,.95);
}
.game.is-title .btn { box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.game.is-title .btn.alt { background: rgba(25, 29, 42, .86); border-color: rgba(230, 205, 156, .45); }
.game.is-title .tiny { color: #e0d7d3; text-shadow: 0 2px 7px black; }
@media (max-width: 460px) {
 .game.is-title .content-scroll { padding: 20px 4px max(22px, env(safe-area-inset-bottom)); }
 .game.is-title .art-title > .center { padding: 14px 9px; }
}


/* v16.3 — four seasons, lossless original PNGs and zero scaling up/crop.
   20-second loop: 5 seconds per season, with 1-second crossfade.
   Images always display at natural size or smaller, centered with letterboxing.
   This intentionally avoids cover and Ken Burns transforms. */
.game.is-title .season-slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: #131827;
}
.game.is-title .season-slide {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  animation: season-crossfade 20s linear infinite;
}
.game.is-title .season-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  flex-shrink: 1;
  transform: none;
  image-rendering: auto;
}
.game.is-title .season-spring {
  background: linear-gradient(180deg, #b3a6b5 0%, #6e7795 52%, #2a3c54 100%);
  animation-delay: 0s;
}
.game.is-title .season-summer {
  background: linear-gradient(180deg, #7ba9ca 0%, #477f93 52%, #274a5c 100%);
  animation-delay: -15s;
}
.game.is-title .season-autumn {
  background: linear-gradient(180deg, #b87c6c 0%, #86634b 52%, #513d43 100%);
  animation-delay: -10s;
}
.game.is-title .season-winter {
  background: linear-gradient(180deg, #465771 0%, #3a4a60 52%, #1c2539 100%);
  animation-delay: -5s;
}
@keyframes season-crossfade {
  0%, 20% { opacity: 1; }
  25%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
.game.is-title .season-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(7, 10, 18, .03) 0%,
      rgba(7, 10, 18, .06) 35%,
      rgba(7, 10, 18, .49) 68%,
      rgba(7, 9, 18, .86) 100%);
}
.game.is-title > .content-scroll,
.game.is-title > .toast {
  position: relative;
  z-index: 1;
}



/* v16.4: scale the overall app FRAME on desktop only (~15% reduction).
   Keep text and interactive controls at readable CSS pixel sizes; do not apply transform: scale().
   Mobile CSS (<760px) is unchanged. */
@media (min-width: 760px) {
  body { display: flex; align-items: center; justify-content: center; }
  .game {
    width: 100%; max-width: 580px;
    height: min(85dvh, 765px);
    max-height: 765px;
    min-height: min(340px, calc(100dvh - 16px));
    margin: 0;
  }
  .game.is-title .content-scroll { padding: 14px 8px 22px; }
  .game.is-title .art-title > .center { padding: 13px 10px; }
  .game.is-title .btn { padding: 10px 12px; }
}

/* v16.4: sex-specific character creation portraits; artwork is displayed uncropped. */
.creation-panel { gap: 0; }
.creation-layout {
  display: grid;
  grid-template-columns: minmax(0, 204px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.creation-portrait-frame {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid rgba(219, 194, 143, .45);
  border-radius: 12px;
  background: #222733;
}
.creation-portrait {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}
.creation-portrait-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 14px 8px 7px;
  text-align: center;
  color: #f1dfb9;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 5px #000;
  background: linear-gradient(180deg, transparent, rgba(9, 12, 20, .77));
}
.creation-fields { min-width: 0; }
.creation-fields > p { margin: 4px 0 0; }
.gender-options { display: flex; flex-wrap: wrap; gap: 8px; }
.gender-choice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid #595461;
  background: #2a2b36;
  cursor: pointer;
  white-space: nowrap;
}
.gender-choice:has(input:checked) { border-color: #d8bf88; background: #423b30; color: #f3dda9; }
@media (max-width: 540px) {
 .creation-layout { grid-template-columns: 1fr; gap: 13px; }
 .creation-portrait-frame { width: min(100%, 164px); margin: 0 auto; }
 .creation-fields { gap: 8px; }
}


/* v16.5 Desktop: restore full-height panel, preserve the preferred 580px width. */
@media (min-width: 760px) {
 body { align-items: center; }
 .game { width: 100%; max-width: 580px; height: calc(100dvh - 16px); max-height: 900px; min-height: min(340px, calc(100dvh - 16px)); margin: 0; }
}

/* v16.5: always show the three aptitude candidates and two action buttons at once on ordinary viewports. */
.game.is-stats .content-scroll { gap: 0; }
.stat-selection { display:flex; flex-direction:column; gap:8px; min-height:100%; }
.stat-selection > .stack.tight { gap:2px; }
.stat-selection .heading { font-size:19px; }
.candidate-list { display:flex; flex-direction:column; gap:7px; min-height:0; }
.candidate-card { padding:8px 10px; gap:5px; flex:0 0 auto; }
.candidate-title { min-height:28px; }
.candidate-card .stats { grid-template-columns: repeat(6,minmax(0,1fr)); gap:4px; }
.candidate-card .stat { padding:6px 5px; min-width:0; }
.candidate-card .stat-label { font-size:10px; white-space:nowrap; text-decoration:none; }
.candidate-card .stat-number { font-size:17px; line-height:1.25; margin-top:3px; }
.candidate-card .mini-btn { padding:3px 8px; }
.candidate-card .explain { padding:5px 7px; }
.candidate-actions { position:sticky; bottom:0; z-index:2; margin-top:auto; padding:8px 0 2px; background:#13141a; display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.candidate-actions .btn { padding:10px 7px; font-size:12px; }
@media(max-width:570px) {
 .candidate-card .stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .candidate-card .stat { padding:3px 7px; }
 .candidate-card .stat-label { font-size:10px; }
 .candidate-card .stat-number { font-size:15px; margin-top:1px; }
 .stat-selection { gap:6px; }
 .candidate-card { padding:7px 9px; gap:4px; }
 .candidate-list { gap:5px; }
 .candidate-actions .btn { padding:9px 3px; }
}
@media(max-height:700px) {
 .stat-selection { gap:4px; }
 .candidate-card { padding:5px 8px; gap:3px; }
 .candidate-card .stat { padding:3px 5px; }
 .candidate-card .stat-number { font-size:15px; margin-top:1px; }
 .candidate-actions { padding-top:5px; }
}

/* v16.5: portrait and in-world calendar in the gameplay home tab. */
.home-profile-top { display:grid; grid-template-columns:86px minmax(0,1fr); gap:13px; align-items:center; }
.home-avatar { display:block; width:86px; height:129px; object-fit:contain; object-position:center; border-radius:8px; border:1px solid #81725a; background:#252835; }
.home-identity { display:flex; flex-direction:column; min-width:0; gap:4px; }
.home-name { font-size:18px; line-height:1.3; overflow-wrap:anywhere; }
.home-realm { font-size:18px; line-height:1.3; }
.calendar-strip { display:grid; grid-template-columns:1.5fr .7fr 1fr; gap:5px; padding:9px; border:1px solid #61543e; border-radius:10px; background:linear-gradient(100deg,#252936,#282631); }
.calendar-strip > div { display:flex; flex-direction:column; gap:2px; align-items:flex-start; min-width:0; }
.calendar-strip b { font-size:12px; color:#ead6a7; white-space:normal; line-height:1.45; }
.calendar-label { color:#aeb2bd; font-size:10px; line-height:1.3; }
@media(max-width:400px) { .calendar-strip { grid-template-columns:1.35fr .65fr 1fr; padding:7px; } .calendar-strip b { font-size:11px; } .home-profile-top { grid-template-columns:73px minmax(0,1fr); gap:10px; } .home-avatar { width:73px; height:110px; } }


/* ------------------------------------------------------------
   v16.6 — Genuine DOM/CSS redesign (no generated artwork).
   Reference: midnight-blue translucent xianxia scrollwork with
   fine gold ornamental corners and parchment-gold buttons.
   ------------------------------------------------------------ */
:root {
  --x-bg: #0c131f;
  --x-surface: rgba(16, 25, 40, .90);
  --x-surface-inner: rgba(23, 33, 49, .90);
  --x-gold: #d9b875;
  --x-gold-bright: #f2d89d;
  --x-border: rgba(207, 164, 96, .58);
  --x-muted: #b8b9c3;
}
body {
  background: radial-gradient(ellipse at 50% 26%, #1b2739 0%, #0b101a 49%, #080c13 100%);
  color: #f1efe7;
}
.game {
  position: relative;
  isolation: isolate;
  background: linear-gradient(155deg, #162033, #0e1625 56%, #101420);
  border: 1px solid rgba(212, 172, 104, .52);
  border-radius: 12px;
  box-shadow: 0 12px 45px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 233, 173, .045);
}
.game > .content-scroll, .game > .nav, .game > .toast { position: relative; z-index: 1; }
.panel, .event, .item, .option, .inspect, .summary-line, .event-accordion, .compact-meta, .title-summary {
  background: linear-gradient(155deg, rgba(24,34,50,.94), rgba(13,22,37,.93));
  border: 1px solid rgba(195,153,84,.4);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(241,207,146,.045), 0 5px 14px rgba(0,0,0,.13);
  color: #eeeae2;
}
.panel { position: relative; }
/* Hand-coded ornamental corners: they are CSS, not image overlays. */
.panel::before, .panel::after {
  content: '';
  position: absolute;
  width: 15px; height: 15px;
  opacity: .79;
  pointer-events: none;
  z-index: 0;
}
.panel::before { left: 4px; top: 4px; border-left: 1px solid var(--x-gold); border-top: 1px solid var(--x-gold); }
.panel::after { right: 4px; bottom: 4px; border-right: 1px solid var(--x-gold); border-bottom: 1px solid var(--x-gold); }
.panel.selected, .option.selected, .candidate-card.selected {
  border-color: #dfbd7c;
  background: linear-gradient(155deg,rgba(44,44,49,.94),rgba(26,32,44,.95));
  box-shadow: inset 0 0 0 1px rgba(242,205,126,.15), 0 0 11px rgba(223,185,110,.09);
}
.gold, .heading { color: var(--x-gold-bright); }
.heading, .art-title .center b, .home-name, .home-realm, .btn, .mini-btn, .title-summary > b {
  font-family: 'Noto Serif KR','Nanum Myeongjo','Batang',serif;
}
.heading { font-weight: 750; letter-spacing: .035em; }
.muted { color: var(--x-muted); }
.line { background: linear-gradient(90deg,transparent,rgba(229,188,111,.55),transparent); }
.btn {
  border-radius: 5px;
  background: linear-gradient(180deg,#f4dda6 0%,#d9b976 48%,#c79a51 100%);
  color: #231d14;
  border: 1px solid #f7dc9e;
  box-shadow: inset 0 1px 0 rgba(255,251,220,.75), 0 3px 14px rgba(0,0,0,.24);
  font-weight: 800;
  letter-spacing: .025em;
  text-shadow: 0 1px 0 rgba(255,253,234,.36);
}
.btn.alt, .time-choice, .filterbtn, .mini-btn {
  background: linear-gradient(160deg,rgba(28,38,54,.95),rgba(18,27,43,.95));
  border: 1px solid rgba(220,179,110,.60);
  color: #ecddba;
  box-shadow: inset 0 0 0 1px rgba(219,185,122,.045);
}
.btn.back { background:none; border:0; box-shadow:none; color: #d9c59c; text-shadow:none; }
.btn:focus-visible, .mini-btn:focus-visible, .option:focus-visible { outline:2px solid #f5dc9e; outline-offset:2px; }
.option:hover, .mini-btn:hover, .navbtn:hover, .time-choice:hover { border-color:rgba(245,211,149,.83); }
.stat, .summary-grid > div, .calendar-strip, .field, .navbtn, .ranking-entry {
  background: rgba(17,28,45,.83);
  border: 1px solid rgba(190,152,93,.32);
  color: #f1ecdf;
}
.stat-label { color: #d6c9b8; }
.stat-number { color: #fff1d8; }
.nav { border-top: 1px solid rgba(217,179,106,.47); }
.navbtn { border-radius:5px; }
.navbtn.active { color: #f8d68f; border-color: #d2a662; background: rgba(110,76,38,.32); }
.time-choice.active, .filterbtn.active { background:#55442d; color:#f9dea8; border-color:#e0b969; }
.event-link, .summary-line, .title-summary, .tournament-card { border-color:rgba(195,153,84,.42); background:rgba(24,34,49,.90); }
.calendar-strip { background: linear-gradient(100deg,rgba(25,35,52,.95),rgba(33,33,44,.95)); }

/* START ONLY: frame aspect ratio exactly matches the 512x768 original
   seasonal PNGs. No image crop, stretch, zoom, or gray side gutters. */
.game.is-title {
  /* Match story panel height; derive exact width from 2:3 art ratio. */
  --title-height: min(900px, calc(100dvh - 16px));
  box-sizing: border-box;
  width: min(calc(var(--title-height) * 2 / 3), calc(100vw - 16px));
  max-width: none;
  height: var(--title-height);
  aspect-ratio: auto;
  max-height: 900px;
  min-height:0;
  padding:0;
  overflow:hidden;
  border-radius: 5px;
  border-color: rgba(232,197,125,.65);
  gap:0;
}
.game.is-title .season-slideshow { inset:0; border-radius:inherit; }
.game.is-title .season-slide { inset:0; align-items:stretch; justify-content:stretch; }
.game.is-title .season-image {
  display:block;
  flex:1 1 auto;
  width:100%;height:100%;
  max-width:none;max-height:none;
  object-fit:contain;
  transform:none;
}
.game.is-title .content-scroll {
  padding: clamp(8px, 2%, 13px) clamp(11px, 4%, 20px) clamp(15px, 3%, 23px);
  overflow-y: auto;
  scrollbar-gutter: auto;
  gap: 8px;
}
.game.is-title .art-title > .center {
  border: 1px solid rgba(240,203,137,.88);
  outline: 1px solid rgba(230,192,125,.36);
  outline-offset: -5px;
  border-radius:5px;
  background: rgba(12,19,32,.82);
  padding: 15px 11px;
  box-shadow: 0 8px 23px rgba(0,0,0,.38), inset 0 0 14px rgba(203,155,90,.075);
}
.game.is-title .art-title > .center::before {
  content: '✧ ━━━━ ✦ ━━━━ ✧';
  display:block;
  font-size:11px;
  color: #e4c084;
  letter-spacing:.12em;
  margin-bottom:4px;
}
.game.is-title .art-title > .center::after {
  content: '❖';
  display:block;
  color: #d3a865;
  font-size:13px;
  margin-top:5px;
}
.game.is-title .art-title .gold {
  color:#f6d891;
  font-family: 'Noto Serif KR','Batang',serif;
  text-shadow: 0 1px 10px rgba(226,173,83,.34);
}
.game.is-title .btn { padding: 10px 12px; }
.game.is-title .btn.alt { background:rgba(15,24,40,.93); }
.game.is-title .season-shade {
  background:linear-gradient(180deg,rgba(7,11,20,.02) 0%,rgba(8,12,22,.06) 46%,rgba(6,11,23,.65) 77%,rgba(6,10,19,.81) 100%);
}
@media (max-width: 460px) {
  .game.is-title {
    width:100vw; height:100dvh; max-width:none; max-height:none; aspect-ratio:auto;
    border:0; border-radius:0;
  }
  .game.is-title .season-slide { align-items:flex-start; }
  .game.is-title .season-image {
    width:100%; height:auto; aspect-ratio:2 / 3; flex:0 0 auto;
    object-fit:contain;
  }
  .game.is-title .content-scroll { padding: 12px 11px max(19px, env(safe-area-inset-bottom)); }
}

/* HOME: six attributes in compact two-row boxes without removing any data.
   The first story chapter's spiritual-root inspection action stays visible
   in the initial viewport at normal desktop resolutions. */
.game:not(.is-title) .content-scroll:has(.home-profile) { gap:7px; }
.home-profile { padding:9px 11px; gap:6px; }
.home-profile-top { grid-template-columns:62px minmax(0,1fr); gap:10px; }
.home-avatar { width:62px;height:84px; object-fit:cover; object-position:center 22%; border-radius:5px; }
.home-identity { gap:1px; }
.home-name { font-size:15px; line-height:1.15; }
.home-realm { font-size:15px; line-height:1.2; }
.home-profile .line { margin:0; }
.home-profile .stats { gap:4px; }
.home-profile .stat { padding:3px 6px; border-radius:5px; min-height:39px; }
.home-profile .stat-label { font-size:10px; line-height:1.1; }
.home-profile .stat-number { font-size:14px; line-height:1.12; margin-top:1px; }
.home-profile .stat-number .small { font-size:9px; }
.home-profile .option { min-height:0; padding:5px 8px; gap:1px; }
.home-profile .option b { font-size:12px; }
.home-profile .row.small { line-height:1.3; }
.home-profile .title-summary { margin-top:0; padding:5px 8px; }
.home-profile .title-summary .tiny { line-height:1.25; }
.home-profile .tiny { line-height:1.32; }
.home-profile .explain { padding:6px 8px; }
.game .calendar-strip { padding:6px 8px; gap:5px; }
.game .calendar-strip > div { gap:0; }
.game .calendar-strip b { font-size:11px; }
.game .calendar-label { font-size:9px; }
.game .content-scroll:has(.home-profile) > header { min-height:18px; }
.game .content-scroll:has(.home-profile) .panel:has(.story) { padding:10px; gap:8px; }
.game .content-scroll:has(.home-profile) .panel:has(.story) .story { font-size:13px; line-height:1.65; }
@media(max-width:400px) {
  .home-profile-top { grid-template-columns:58px minmax(0,1fr);gap:8px; }
  .home-avatar { width:58px;height:78px; }
  .home-profile { padding:8px; }
  .home-profile .stat { padding:3px 4px; }
  .home-profile .stat-number { font-size:13px; }
}

/* Short phone displays: preserve the chapter action above the bottom nav. */
@media (max-width: 400px) and (max-height: 740px) {
  .game .content-scroll:has(.home-profile) { gap:4px; }
  .game .content-scroll:has(.home-profile) > header { min-height:15px; font-size:11px; }
  .game .calendar-strip { padding:3px 5px; }
  .home-profile { padding:6px; gap:3px; }
  .home-profile-top { grid-template-columns:47px minmax(0,1fr); gap:6px; }
  .home-avatar { width:47px; height:65px; }
  .home-identity { gap:0; }
  .home-identity .small { font-size:10px; line-height:1.14; }
  .home-name,.home-realm { font-size:13px; }
  .home-profile .stats { grid-template-columns:repeat(6,minmax(0,1fr));gap:2px; }
  .home-profile .stat { padding:3px 2px;min-height:32px; }
  .home-profile .stat-label { font-size:9px; }
  .home-profile .stat-number { font-size:12px; }
  .home-profile .option { padding:4px 6px; }
  .home-profile .title-summary { padding:3px 5px; }
  .home-profile .title-summary .tiny { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .home-profile .tiny { font-size:10px; }
  .game .content-scroll:has(.home-profile) .panel:has([data-act='inspect']) { padding:7px 8px;gap:4px; }
  .game .content-scroll:has(.home-profile) .panel:has([data-act='inspect']) .story { font-size:11px;line-height:1.45; }
  .game .content-scroll:has(.home-profile) .panel:has([data-act='inspect']) .story p { margin-bottom:4px; }
  .game .content-scroll:has(.home-profile) .panel:has([data-act='inspect']) .heading { font-size:17px; }
  .game .content-scroll:has(.home-profile) .panel:has([data-act='inspect']) .btn { padding:8px 6px; }
}

/* v16.7: story & game screens are deliberately free of slideshow imagery. */
.game:not(.is-title) .season-slideshow { display:none !important; }


/* v16.8 — seasonal particle overlay, title screen ONLY.
   CSS compositor transforms and 4 modest sets of DOM shapes; no image downloads,
   canvas redraws or JavaScript animation loops. Never intercept UI interactions. */
.game.is-title .season-slideshow { --particle-fall: calc(min(900px, 100dvh - 16px) + 55px); }
.game.is-title .season-particles {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  animation:season-crossfade 20s linear infinite;
}
.game.is-title .season-particles-spring { animation-delay:0s; }
.game.is-title .season-particles-summer { animation-delay:-15s; }
.game.is-title .season-particles-autumn { animation-delay:-10s; }
.game.is-title .season-particles-winter { animation-delay:-5s; }
.game.is-title .season-particle {
  position:absolute;
  display:block;
  left:var(--x);
  top:-18px;
  width:var(--size);
  height:var(--size);
  pointer-events:none;
  will-change:transform;
  animation:shx-particle-fall var(--duration) linear var(--delay) infinite;
  transform:translate3d(0,-14px,0);
}
/* Petals and leaves are actual small CSS shapes, not emoji or image sprites. */
.game.is-title .season-particles-spring .season-particle {
  background:linear-gradient(135deg,#fff9fa 0%,#f6bed5 68%,#df8db4 100%);
  border:1px solid rgba(255,241,247,.75);
  border-radius:78% 10% 78% 14%;
  box-shadow:0 0 3px rgba(255,219,232,.22);
  opacity:.82;
}
.game.is-title .season-particles-summer .season-particle {
  background:linear-gradient(135deg,#b5d97a,#438a52 75%,#2c654a);
  border-radius:95% 0 95% 10%;
  opacity:.78;
}
.game.is-title .season-particles-autumn .season-particle {
  background:linear-gradient(120deg,#ffb852,#d95330 66%,#a73722);
  clip-path:polygon(50% 0%,61% 26%,76% 12%,77% 36%,99% 33%,81% 55%,91% 72%,60% 70%,53% 100%,46% 72%,17% 82%,24% 57%,2% 43%,27% 39%,21% 17%,43% 28%);
  opacity:.86;
}
.game.is-title .season-particles-winter .season-particle {
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 5px 1px rgba(242,248,255,.68);
  opacity:.75;
}
@keyframes shx-particle-fall {
  0%   {transform:translate3d(0,-22px,0) rotate(0deg);}
  50%  {transform:translate3d(var(--drift-mid),calc(var(--particle-fall) / 2),0) rotate(calc(var(--spin) / 2));}
  100% {transform:translate3d(var(--drift),var(--particle-fall),0) rotate(var(--spin));}
}
@media (max-width:600px) {
  .game.is-title .season-slideshow { --particle-fall: calc(100dvh + 48px); }
  .game.is-title .season-particles:not(.season-particles-winter) .season-particle:nth-child(n+17),
  .game.is-title .season-particles-winter .season-particle:nth-child(n+25) { display:none; }
}


/* v16.9 — rank tabs & visually distinguished top three; same live HTML buttons. */
.rank-filters {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex-shrink:0}
.rank-filter {cursor:pointer;min-height:40px;font-weight:800;font-size:13px;border:1px solid rgba(210,169,98,.5);color:#decbaa;background:linear-gradient(180deg,#182337,#11192a);border-radius:6px;font-family:inherit}
.rank-filter.active {color:#20170c;background:linear-gradient(135deg,#ffedbb,#d3a95a);box-shadow:0 0 12px rgba(229,183,99,.24);border-color:#f3d58c}
.rank-filter:focus-visible {outline:2px solid #fff0c2;outline-offset:2px}
.rank-panel {gap:7px}
.rank-panel .ranking-entry {position:relative;overflow:hidden;isolation:isolate;background:rgba(18,28,43,.93);border:1px solid rgba(177,146,96,.38);padding:11px 12px;gap:11px}
.rank-panel .ranking-entry.rank-top {border-width:2px;padding:13px 11px;background:linear-gradient(110deg,rgba(55,42,37,.95),rgba(21,31,47,.98) 68%)}
.rank-panel .ranking-entry.rank-top::before {content:'✦';position:absolute;top:0;right:9px;font-size:28px;opacity:.18;pointer-events:none}
.rank-panel .ranking-entry.rank-top::after {content:'';position:absolute;inset:3px;border:1px solid currentColor;opacity:.34;border-radius:5px;pointer-events:none}
.rank-panel .rank-top-1 {color:#ffe8af;border-color:#f7c35d;box-shadow:inset 0 0 17px rgba(244,192,85,.13),0 0 15px rgba(250,198,92,.27)}
.rank-panel .rank-top-2 {color:#e7efff;border-color:#c0d6f4;box-shadow:inset 0 0 13px rgba(210,225,248,.1),0 0 13px rgba(183,206,234,.23)}
.rank-panel .rank-top-3 {color:#f0c5a5;border-color:#d99b6a;box-shadow:inset 0 0 13px rgba(210,128,72,.12),0 0 13px rgba(206,133,79,.23)}
.rank-panel .rank-top .rank-number{font-size:17px;color:inherit;min-width:46px;text-shadow:0 1px 7px currentColor}
.rank-panel .rank-main b {color:#f6eddc;font-size:13px}
.rank-affiliation {font-size:11px;font-weight:700;color:#e4c58f;margin:3px 0;overflow-wrap:anywhere}
.rank-panel .rank-main .muted {color:#c6cbd2}
@media(max-width:460px){.rank-panel .ranking-entry {padding:9px 8px}.rank-panel .ranking-entry.rank-top{padding:11px 8px}.rank-panel .rank-top .rank-number{min-width:42px;font-size:15px}}

/* v17 RPG equipment slots, weather readout and public biography */
.equipment-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.equipment-slot{position:relative;min-height:116px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:9px 4px;text-align:center;background:linear-gradient(155deg,#1a2335,#131826);border:1px solid #64553c;border-radius:12px}
.equipment-slot.filled{border-color:#d9b86f;box-shadow:inset 0 0 0 1px #65512b,0 2px 12px #0005}
.equipment-slot .equip-glyph{font-size:25px;color:#d6bb84;line-height:1.1}
.equipment-slot .equip-slot-name{font-size:10px;color:#afbed0}
.equipment-slot b{font-size:10px;line-height:1.35;overflow-wrap:anywhere}
.equipment-slot .mini-btn{padding:2px 7px;font-size:10px}
.gear-item{display:flex;gap:10px;align-items:flex-start}
.gear-icon{width:57px;height:57px;min-width:57px;display:grid;place-items:center;border:1px solid #91774a;border-radius:9px;background:radial-gradient(circle at 50% 36%,#313a50,#131827);font-size:30px;color:#e6c78f}
.gear-item-body{flex:1;min-width:0}
.gear-item-body .row{flex-wrap:wrap;gap:6px}
.gear-actions{justify-content:flex-start}
.weather-effect{grid-column:1/-1;font-size:10px;color:#e8d8af;border-top:1px solid #5b4c32;padding-top:5px;line-height:1.5}
.ranking-click{width:100%;text-align:left;color:inherit;cursor:pointer;font:inherit}
.ranking-click:hover{filter:brightness(1.15)}
.rank-title{color:#e4bf7d;font-size:11px;font-weight:700}
.rank-biography{max-height:42vh;overflow:auto;line-height:1.9;white-space:normal}
@media(max-width:400px){.equipment-layout{gap:5px}.equipment-slot{min-height:104px}.gear-icon{width:46px;height:46px;min-width:46px;font-size:24px}}


/* v17.1 — applied art assets for equipment and spirit beasts */
.equip-art-wrap{display:grid;place-items:center;width:64px;height:64px;border:1px solid rgba(177,148,94,.65);border-radius:10px;background:radial-gradient(circle at 50% 35%,rgba(48,58,80,.95),rgba(17,24,39,.98));box-shadow:inset 0 0 0 1px rgba(255,223,165,.05)}
.gear-icon.image-icon{padding:0;overflow:hidden;background:radial-gradient(circle at 50% 35%,#313a50,#131827)}
.gear-art,.beast-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 4px 10px rgba(0,0,0,.28))}
.gear-icon .gear-art{width:100%;height:100%;padding:4px}
.equip-art-wrap .gear-art{width:100%;height:100%;padding:5px}
.gear-fallback{display:grid;place-items:center;width:100%;height:100%;font-size:28px;color:#e6c78f}
.beast-row{align-items:center}
.beast-art.beast-image{width:92px;min-width:92px;height:92px;padding:2px;border-radius:12px;background:radial-gradient(circle at 50% 32%,rgba(50,62,85,.52),rgba(17,24,36,.18))}
@media(max-width:400px){.equip-art-wrap{width:54px;height:54px}.beast-art.beast-image{width:76px;min-width:76px;height:76px}}


/* v17.3 — event reward art, shop preview, pill category iconography, mythic reveal */
.reward-art-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin:8px 0 2px}
.reward-art-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border:1px solid rgba(212,177,111,.52);border-radius:11px;background:radial-gradient(circle at 50% 35%,#2e3a50,#161d2c 85%);min-width:0}
.reward-art-item>img{height:98px;width:100%;object-fit:contain;border-radius:6px}
.reward-caption{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;text-align:center;font-size:11px;line-height:1.4}
.reward-art-item.reward-mythic{border-color:#f3cc77;box-shadow:0 0 17px #d29c3f22}
.mythic-grade{display:inline-flex;align-items:center;justify-content:center;color:#fff2c0;background:linear-gradient(120deg,#5b3820,#9b6c2d 52%,#423057);border:1px solid #f3d98f;border-radius:6px;padding:2px 8px;letter-spacing:.05em;text-shadow:0 0 5px #e6ac47;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:0 0 8px #dba14655}
.shop-item-top{display:flex;gap:12px;align-items:center}
.shop-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mystery-gear-art{width:68px;height:68px;min-width:68px;display:grid;place-items:center;border:1px solid #a08d69;border-radius:14px;background:radial-gradient(circle,#394762,#182032 76%);font-size:34px;color:#e4ce96;text-shadow:0 0 12px #ffda8b}
.pill-visual{--pill-main:#63d3a8;--pill-light:#e2ffe9;--pill-deep:#166d61;position:relative;display:inline-grid;place-items:center;width:66px;height:66px;min-width:66px;overflow:hidden;isolation:isolate;border:1px solid #a38b59;border-radius:14px;background:radial-gradient(circle at 50% 40%,#3c405a,#141a29 78%);box-shadow:inset 0 0 16px rgba(0,0,0,.48)}
.pill-orb{position:absolute;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 32% 22%,#fffdf7 0 6%,var(--pill-light) 10%,var(--pill-main) 48%,var(--pill-deep) 85%);box-shadow:0 0 10px var(--pill-main),inset -3px -4px 5px rgba(0,0,0,.35);z-index:1}
.pill-halo{position:absolute;width:46px;height:46px;border:1px solid var(--pill-main);border-radius:50%;opacity:.8;box-shadow:0 0 10px var(--pill-main);transform:rotate(30deg) skew(-12deg)}
.pill-sigil{position:absolute;z-index:2;width:16px;height:16px;border:1px solid #ffffffaa;border-radius:4px;transform:rotate(45deg);box-shadow:0 0 6px #fff9}
.pill-train{--pill-main:#58abf0;--pill-light:#d5f4ff;--pill-deep:#20459d}
.pill-break{--pill-main:#e5bc67;--pill-light:#fff3c3;--pill-deep:#a76625}
.pill-stat{--pill-main:#be8deb;--pill-light:#f0dfff;--pill-deep:#6640a4}
.pill-shield{--pill-main:#e68fae;--pill-light:#ffe6f0;--pill-deep:#a6436a}
.pill-tier-3,.pill-tier-4,.pill-tier-5{border-color:#c5acfa;box-shadow:inset 0 0 15px #9954c022,0 0 8px #b9a2f55e}
.pill-group-header{display:flex;gap:12px;align-items:center}
.reward-art-item>.pill-visual{width:96px;height:96px;min-width:96px;border-radius:12px}
.reward-art-item>.pill-visual .pill-orb{width:48px;height:48px}
.reward-art-item>.pill-visual .pill-halo{width:70px;height:70px}
.mythic-reveal{position:relative;overflow:hidden;isolation:isolate;text-align:center;display:flex;align-items:center;flex-direction:column;gap:9px;padding:6px 4px 12px}
.mythic-reveal-heading{color:#f6d68e;font-size:13px;font-weight:800;letter-spacing:.13em;text-shadow:0 0 11px #f3ae68;z-index:1}
.mythic-portrait{position:relative;display:grid;place-items:center;height:225px;width:min(100%,340px);overflow:hidden;border:1px solid #b99b5c;border-radius:16px;background:radial-gradient(circle at center,#3e486a 0%,#141b2c 63%,#11111d 100%);box-shadow:0 0 21px #cfb16b66, inset 0 0 18px #d1ab7133}
.mythic-portrait .beast-image{width:100%;height:100%;min-width:unset;padding:4px;background:transparent;filter:drop-shadow(0 2px 10px #fff5)}
.mythic-reveal h2{margin:0;font-size:23px;color:#fff0c9;z-index:1}
.mythic-reveal p{margin:0;z-index:1}
.mythic-reveal>.btn{z-index:1}
.mythic-starfield{pointer-events:none;position:absolute;inset:0;overflow:hidden;z-index:0}
.mythic-starfield i{position:absolute;top:calc((var(--i) * 17% + 5%) - (var(--i) / 3 * 100%));left:calc((var(--i) * 23% + 10%) - (var(--i) / 4 * 100%));width:4px;height:4px;border-radius:50%;background:#ffe3a5;box-shadow:0 0 10px #ffe3a5;animation:mythicSparkle 2.8s ease-in-out calc(var(--i) * -.2s) infinite alternate}
@keyframes mythicSparkle{from{opacity:.14;transform:scale(.7) translateY(4px)}to{opacity:1;transform:scale(1.5) translateY(-12px)}}
.mythic-portrait{animation:mythicRevealIn .7s ease-out both}
@keyframes mythicRevealIn{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-pet-art{display:grid;place-items:center;background:radial-gradient(circle,#2a3852,#151b2c);border-radius:10px;padding:8px}
.modal-pet-art .beast-image{width:min(100%,200px);height:180px}
@media(max-width:390px){.shop-item-top{gap:8px}.pill-visual,.mystery-gear-art{width:54px;height:54px;min-width:54px}.reward-art-grid{grid-template-columns:repeat(auto-fit,minmax(95px,1fr))}}
@media(prefers-reduced-motion:reduce){.mythic-starfield i,.mythic-portrait{animation:none!important}}

/* v17.5 weather evidence in monthly event history */
.weather-record{border-left:2px solid #b99d64;padding:5px 8px;margin:7px 0;background:rgba(191,160,96,.08);color:#dcd3bd;line-height:1.5}

.weather-history{padding:7px 0;border-top:1px solid rgba(186,159,108,.22)}
.weather-history-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:8px 0}
.weather-month{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid #564c3b;border-radius:6px;padding:4px 1px;background:#182132;min-width:0}
.weather-month b{font-size:10px;color:#e7cd92}.weather-month span{font-size:16px}.weather-month small{font-size:8px;color:#b6c5d8;overflow-wrap:anywhere;text-align:center}
@media (max-width:390px){.weather-month small{font-size:7px}}

/* v18 — gameplay-only seasonal scene & weather particles (game calendar, not real weather). */
.game{position:relative;isolation:isolate}
.game.is-game-home .content-scroll,.game.is-game-home .nav{position:relative;z-index:1}
.home-weather-stage{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;border-radius:inherit;contain:paint}
.home-weather-scenery{position:absolute;inset:0;background-position:50% 40%;background-size:cover;opacity:.11;filter:saturate(.78)}
.home-weather-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(12,20,34,.02) 45%,rgba(11,17,28,.20) 100%)}
.home-weather-particle{position:absolute;left:var(--x);top:-15%;width:var(--size);height:var(--size);display:block;animation:weather-fall var(--duration) linear var(--delay) infinite;opacity:0;will-change:transform,opacity}
.home-weather-rain .home-weather-particle{height:27px;border-left:1.8px solid #9cd8ff;background:linear-gradient(180deg,transparent,#c8ebffbf);transform:skewX(-15deg);filter:drop-shadow(0 0 2px #82cfff88)}
.home-weather-snow .home-weather-particle{border-radius:50%;background:#f0faff;box-shadow:0 0 5px #ffffffa0}
.home-weather-petals .home-weather-particle{border-radius:75% 2% 75% 9%;background:linear-gradient(140deg,#fff0f2,#e9a7bc);box-shadow:0 0 3px #ffaabb30}
.home-weather-leaves .home-weather-particle{border-radius:5% 75% 12% 75%;background:linear-gradient(135deg,#f7cb78,#bc683c);box-shadow:0 0 4px #fcb96922}
.home-weather-light .home-weather-particle,.home-weather-glitter .home-weather-particle{width:3px;height:3px;border-radius:50%;background:#fff0ac;box-shadow:0 0 9px 3px #f5e0ac77}
.home-weather-mist .home-weather-particle{height:13px;border-radius:50%;background:radial-gradient(ellipse,#e6f0ff44 12%,transparent 75%);filter:blur(5px)}
@keyframes weather-fall{0%{opacity:0;transform:translate3d(0,-6vh,0) rotate(var(--angle))}8%{opacity:.70}80%{opacity:.55}100%{opacity:0;transform:translate3d(var(--drift),110vh,0) rotate(calc(var(--angle) + 230deg))}}
@media(prefers-reduced-motion:reduce){.home-weather-particle{animation:none;opacity:.2;transform:translateY(40vh)}}
/* Bigger equipped weapon artwork without resizing all equipment slots. */
.equipment-slot[data-image-slot="weapon"]{min-height:167px;grid-row:span 1}
.equipment-slot[data-image-slot="weapon"] .equip-art-wrap{width:102px;height:104px}
.equipment-slot[data-image-slot="weapon"] .gear-art{padding:1px}
.beast-art.beast-image{width:146px;min-width:146px;height:146px;padding:0;object-fit:contain}
.beast-row{gap:12px;justify-content:flex-start}
@media(max-width:400px){.equipment-slot[data-image-slot="weapon"]{min-height:145px}.equipment-slot[data-image-slot="weapon"] .equip-art-wrap{width:84px;height:90px}.beast-art.beast-image{width:115px;min-width:115px;height:115px}}
/* Victory ceremony: triggered only for tournament first place. */
.tournament-fanfare{position:relative;isolation:isolate;overflow:hidden;text-align:center;min-height:170px;border:1px solid #f3d184;border-radius:13px;background:radial-gradient(ellipse at 50% 35%,#634e2e,#1b1c31 72%);padding:20px 7px 18px;box-shadow:0 0 22px #e1b85b55,inset 0 0 28px #eec76c44}
.victory-rays{position:absolute;inset:-70%;z-index:-1;background:repeating-conic-gradient(from 0deg,#ffe8aa26 0 8deg,transparent 8deg 24deg);animation:victory-spin 20s linear infinite}
.victory-crown{font-size:45px;color:#ffe5a0;text-shadow:0 0 19px #ffe39a,0 0 40px #f6b447;animation:victory-pulse 2s ease-in-out infinite alternate}
.victory-headline{font-size:19px;font-weight:850;color:#fff1c2;text-shadow:0 0 12px #e1a940}
.victory-subtitle{font-size:12px;color:#ead3a2;margin-top:7px}
@keyframes victory-spin{to{transform:rotate(360deg)}}
@keyframes victory-pulse{to{transform:scale(1.15);filter:brightness(1.3)}}
@media(prefers-reduced-motion:reduce){.victory-rays,.victory-crown{animation:none}}