.battle-overlay[hidden] { display: none !important; }

body.seal-battle-open { overflow: hidden; }

.battle-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: auto;
  color: #263443;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 249, 224, .95), transparent 34rem),
    radial-gradient(circle at 90% 18%, rgba(178, 211, 219, .65), transparent 38rem),
    linear-gradient(135deg, #e9e2d3, #dce7e6 52%, #eee5d4);
  scrollbar-color: #aa9d83 #eee7d9;
}

.seal-battle {
  --seal-ink: #263443;
  --seal-muted: #5a6978;
  --seal-gold: #8c621b;
  --seal-gold-light: #b1812e;
  --seal-blue: #176997;
  --seal-red: #b33b36;
  --seal-green: #257555;
  --seal-brown: #95501a;
  --seal-line: #c7b994;
  --seal-paper: #fffdf7;
  --seal-paper-2: #eee8da;
  width: min(1880px, calc(100% - 18px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 7px 0 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.seal-battle *, .seal-battle *::before, .seal-battle *::after { box-sizing: border-box; }
.seal-battle button, .seal-battle input, .seal-battle select { font: inherit; }
.seal-battle button:focus-visible, .seal-battle input:focus-visible, .seal-battle select:focus-visible { outline: 3px solid #176997; outline-offset: 2px; }

.seal-frame {
  position: relative;
  border: 1px solid var(--seal-line);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.52) 0 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(145deg, var(--seal-paper), var(--seal-paper-2));
  box-shadow: inset 0 1px rgba(255,255,255,.96), 0 12px 32px rgba(48,58,63,.15);
}

.seal-frame::before, .seal-frame::after {
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 20px;
  content: "";
  pointer-events: none;
}
.seal-frame::before { top: 5px; left: 5px; border-top: 1px solid rgba(140,98,27,.58); border-left: 1px solid rgba(140,98,27,.58); }
.seal-frame::after { right: 5px; bottom: 5px; border-right: 1px solid rgba(140,98,27,.42); border-bottom: 1px solid rgba(140,98,27,.42); }

.seal-eyebrow {
  margin: 0 0 4px;
  color: var(--seal-gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.seal-header {
  display: grid;
  grid-template-columns: minmax(270px, 1fr) auto minmax(360px, 1fr);
  align-items: center;
  min-height: 62px;
  padding: 8px 14px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255,250,239,.98), rgba(235,231,218,.98) 55%, rgba(248,243,231,.98));
}

.seal-brand { display: flex; align-items: center; gap: 12px; }
.seal-brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 42px;
  border: 1px solid rgba(140,98,27,.62);
  transform: rotate(45deg);
  background: radial-gradient(circle, #7da1ad 0 18%, #284859 20% 51%, #c39a4e 53% 57%, #eff1e9 59%);
  box-shadow: 0 4px 18px rgba(66,82,88,.2);
}
.seal-brand-mark i { width: 12px; height: 12px; border: 2px solid #f7ddb0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.seal-brand h1 { margin: 0; color: var(--seal-ink); font: 600 clamp(20px,1.8vw,29px)/1 Georgia,serif; letter-spacing: .015em; }

.seal-round-state { text-align: center; }
.seal-round-state strong { display: block; color: var(--seal-ink); font: 600 18px/1.1 Georgia,serif; }
.seal-round-state span { display: block; margin-top: 4px; color: var(--seal-muted); font-size: 10px; }

.seal-header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 7px; }
.seal-updated { margin-right: 4px; color: #687583; font-size: 9px; }
.seal-button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #cabd9f;
  border-radius: 5px;
  color: #435363;
  background: rgba(255,253,248,.84);
  box-shadow: 0 2px 7px rgba(46,57,60,.07);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.seal-button:hover { border-color: #9d8451; color: #6f4d16; background: #f7eedb; }
.seal-button.is-danger { border-color: #d5aaa5; color: #9a342f; background: #fae5e2; }
.seal-button.is-primary { border-color: #7c5519; color: #fffdf5; background: linear-gradient(180deg,#b88936,#85601f); }
.seal-button:disabled { opacity: .45; cursor: not-allowed; }

.seal-main {
  display: grid;
  grid-template-columns: minmax(225px, 270px) minmax(620px, 1fr) minmax(225px, 270px);
  align-items: stretch;
  height: clamp(438px, 62vh, 570px);
  gap: 7px;
  margin-top: 7px;
}

.seal-fighter { display: flex; min-height: 0; padding: 12px; flex-direction: column; overflow: hidden; }
.seal-fighter.is-player { background: linear-gradient(145deg,#f8fcfc,#e8f1f1); }
.seal-fighter.is-enemy { background: linear-gradient(145deg,#fffaf5,#f1e7dc); }
.seal-fighter-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.seal-fighter-head h2 { margin: 0; color: var(--seal-ink); font: 600 clamp(17px,1.4vw,22px)/1.08 Georgia,serif; }
.seal-fighter-name-row { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 5px 7px; }
.seal-rating-pill {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid #c7a55d;
  border-radius: 999px;
  color: #795317;
  background: linear-gradient(180deg,#fff8e8,#f1e2bd);
  box-shadow: inset 0 1px rgba(255,255,255,.72);
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}
.seal-level {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  flex: 0 0 34px;
  border: 1px solid rgba(23,105,151,.4);
  border-radius: 50%;
  color: #155b83;
  background: #dceef7;
  font: 700 15px Georgia,serif;
}
.is-enemy .seal-level { border-color: rgba(179,59,54,.42); color: #9d312d; background: #fae5e2; }

.seal-portrait {
  position: relative;
  min-height: 0;
  margin: 10px 1px 9px;
  overflow: hidden;
  flex: 1 1 auto;
  border: 1px solid #c8b995;
  border-radius: 4px;
  background: #d8d2c4;
  box-shadow: inset 0 0 18px rgba(30,42,50,.24), 0 6px 17px rgba(45,55,60,.12);
}
.seal-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: saturate(.98) contrast(1.02) brightness(1.05); }
.seal-portrait::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,transparent 52%,rgba(24,34,38,.12) 68%,rgba(25,34,38,.84)); pointer-events: none; }
.seal-portrait-tag { position: absolute; right: 0; bottom: 9px; left: 0; z-index: 2; color: #fff8e9; font: 800 9px/1.2 Georgia,serif; letter-spacing: .12em; text-align: center; text-shadow: 0 1px 4px #000; text-transform: uppercase; }

.seal-hands {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 5px;
  margin: -1px 0 1px;
}
.seal-hand {
  display: grid;
  min-width: 0;
  min-height: 47px;
  grid-template-columns: 35px minmax(0,1fr);
  gap: 5px;
  align-items: center;
  padding: 4px;
  border: 1px solid #c7b994;
  border-radius: 5px;
  background: linear-gradient(145deg,rgba(255,253,247,.94),rgba(225,235,232,.9));
  box-shadow: inset 0 1px rgba(255,255,255,.92),0 2px 7px rgba(43,57,61,.08);
}
.seal-hand.is-right { background: linear-gradient(145deg,rgba(255,253,247,.94),rgba(238,227,208,.9)); }
.seal-hand-icon {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(92,111,116,.24);
  border-radius: 4px;
  background: radial-gradient(circle at 35% 28%,#fffdf5,#d9e2df);
}
.seal-hand.is-right .seal-hand-icon { background: radial-gradient(circle at 35% 28%,#fffdf5,#e6d8bf); }
.seal-hand-icon img { width: 100%; height: 100%; object-fit: contain; }
.seal-fist-icon { color: #795317; font-size: 20px; filter: sepia(.25) drop-shadow(0 2px 2px rgba(49,54,51,.18)); }
.seal-hand-copy { min-width: 0; }
.seal-hand-copy small,.seal-hand-copy strong,.seal-hand-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seal-hand-copy small { color: #78838a; font-size: 6px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.seal-hand-copy strong { margin: 1px 0; color: #2b4350; font: 700 9px/1.15 Georgia,serif; }
.seal-hand-copy span { color: #795317; font-size: 7px; font-weight: 900; }
.seal-hand-copy span i { color: #7b7161; font-size: 6px; font-style: normal; font-weight: 700; }
.seal-hands-total { grid-column: 1/-1; margin: -1px 2px 0; color: #718087; font-size: 6px; text-align: center; }
.seal-hands-total b { color: #795317; font-size: 7px; font-variant-numeric: tabular-nums; }

.seal-vital { margin-top: 7px; }
.seal-vital-label { display: flex; justify-content: space-between; margin-bottom: 4px; color: #536273; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.seal-vital-label strong { color: var(--seal-ink); font-size: 10px; }
.seal-meter { height: 8px; overflow: hidden; border: 1px solid rgba(75,83,88,.18); background: #d8d5cc; box-shadow: inset 0 1px 4px rgba(56,58,55,.18); }
.seal-meter i { display: block; width: 0; height: 100%; transition: width .25s ease; }
.seal-meter.is-health i { background: linear-gradient(90deg,#9f3031,#de6261 58%,#ef8580); }
.seal-meter.is-fury i { background: linear-gradient(90deg,#95611e,#d89a36,#f2ca62); }

.seal-zone-armor { margin-top: 8px; padding: 6px; border: 1px solid #d1c3a5; border-radius: 5px; background: rgba(255,253,247,.66); }
.seal-zone-armor-head { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 5px; margin-bottom: 5px; }
.seal-zone-armor-head strong { color: #4a5e6b; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.seal-zone-armor-head span { overflow: hidden; color: #8a8172; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.seal-zone-armor-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; }
.seal-zone-armor-grid > span { min-width: 0; padding: 4px 1px 3px; border: 1px solid rgba(126,111,83,.18); border-radius: 3px; background: rgba(255,255,255,.64); text-align: center; }
.seal-zone-armor-grid small { display: block; overflow: hidden; color: #667783; font-size: 6px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.seal-zone-armor-grid b { display: block; margin-top: 1px; color: #294c5d; font: 700 11px Georgia,serif; font-variant-numeric: tabular-nums; }

.seal-details { margin-top: 9px; border: 1px solid #d5cab3; border-radius: 4px; background: rgba(255,253,247,.62); }
.seal-details summary { padding: 8px 9px; color: #516473; font-size: 9px; font-weight: 800; cursor: pointer; }
.seal-details-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 0 7px 8px; }
.seal-stat { padding: 5px 3px; border: 1px solid rgba(126,111,83,.2); border-radius: 3px; text-align: center; background: rgba(255,255,255,.62); }
.seal-stat small { display: block; color: #657483; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.seal-stat b { display: block; margin-top: 1px; color: var(--seal-ink); font: 700 13px Georgia,serif; }

.seal-stage { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; }
.seal-stage-head { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 13px; border-bottom: 1px solid #d5cab4; background: linear-gradient(180deg,#fffaf0,#e9e2d5); }
.seal-stage-head h2 { margin: 0; color: var(--seal-ink); font: 600 19px/1.05 Georgia,serif; }
.seal-turn { display: flex; align-items: center; gap: 7px; color: #596879; font-size: 9px; }
.seal-turn i { width: 7px; height: 7px; border-radius: 50%; background: var(--seal-blue); box-shadow: 0 0 8px rgba(23,105,151,.55); }
.seal-math-toggle { display: flex; align-items: center; gap: 6px; color: #596879; font-size: 9px; cursor: pointer; }
.seal-math-toggle input { accent-color: var(--seal-blue); }

.seal-arena {
  position: relative;
  min-height: 250px;
  flex: 1 1 300px;
  overflow: hidden;
  background:
    linear-gradient(rgba(211,229,231,.27),rgba(244,226,184,.18)),
    url("assets/battle-arena.webp") center 53% / cover no-repeat;
  background-color: #8fa5aa;
  background-blend-mode: screen,normal;
  box-shadow: inset 0 0 0 1px rgba(239,246,242,.32), inset 0 -32px 55px rgba(24,42,48,.26);
}
.seal-arena::after { position: absolute; inset: 0; z-index: 2; content: ""; box-shadow: inset 0 0 72px 8px rgba(27,46,53,.22); pointer-events: none; }

.seal-board { position: absolute; z-index: 5; right: 0; bottom: 5%; left: 50%; width: min(88%,660px); aspect-ratio: 2.05681; transform: translateX(-50%); }
.seal-cell { position: absolute; padding: 0; border: 0; background: transparent; cursor: default; }
.seal-hex { position: absolute; inset: 3%; display: grid; place-items: center; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: rgba(226,237,231,.18); box-shadow: inset 0 0 0 1px rgba(238,247,240,.2); transition: filter .15s,transform .15s,background .15s; }
.seal-cell:nth-child(3n + 2) .seal-hex { background: rgba(235,220,184,.15); }
.seal-cell.is-reachable { cursor: pointer; }
.seal-cell.is-reachable .seal-hex { background: rgba(188,225,211,.4); box-shadow: inset 0 0 0 2px rgba(226,255,244,.72),0 0 15px rgba(65,148,115,.27); }
.seal-cell.is-reachable:hover .seal-hex, .seal-cell.is-selected .seal-hex { transform: scale(.95); background: rgba(240,211,140,.72); box-shadow: inset 0 0 0 2px #9b6b1c,0 0 20px rgba(155,107,28,.38); }
.seal-cell:focus-visible { outline: none; }
.seal-cell:focus-visible .seal-hex { box-shadow: inset 0 0 0 3px #fffdf7,inset 0 0 0 5px #176997,0 0 18px rgba(23,105,151,.38); }
.seal-coordinate { color: rgba(255,255,255,.42); font-size: 7px; }

.seal-token { position: absolute; z-index: 8; inset: 12%; border: 2px solid var(--token-color); border-radius: 50%; background: var(--token-image) center 18% / cover no-repeat #263943; box-shadow: 0 0 0 3px rgba(255,253,247,.9),0 7px 17px rgba(30,45,52,.36),0 0 17px var(--token-glow); pointer-events: none; transition: transform .25s ease,filter .25s ease; }
.seal-token.is-player { --token-color:#63b5df; --token-glow:rgba(74,174,229,.45); }
.seal-token.is-enemy { --token-color:#dd665e; --token-glow:rgba(218,74,66,.48); }
.seal-token.is-active { animation: sealPulse 1.4s ease-in-out infinite; }
.seal-token.is-attacking { animation: sealAttack .34s cubic-bezier(.18,.8,.28,1); }
.seal-token.is-hit { animation: sealHit .42s ease; }
.seal-token.is-critical { animation: sealCrit .52s ease; }
.seal-token.is-dodge { animation: sealDodge .48s ease; }
.seal-token.is-block { animation: sealBlock .42s ease; }
.seal-token.is-response { animation: sealResponse .48s ease; }

.seal-fx { position: absolute; inset: 0; z-index: 12; overflow: hidden; pointer-events: none; }
.seal-impact { --impact-color:#ffe0a2; position:absolute; inset:0; }
.seal-impact.is-critical { --impact-color:#ff665d; }
.seal-impact.is-lucky { --impact-color:#6fc7ff; }
.seal-impact.is-both { --impact-color:#df80d8; }
.seal-impact.is-dodge { --impact-color:#78d7a8; }
.seal-impact.is-block { --impact-color:#dce5e9; }
.seal-impact.is-critical-block { --impact-color:#ffc2b9; }
.seal-impact.is-response { --impact-color:#e2a468; }
.seal-impact.is-delayed .seal-floating,
.seal-impact.is-delayed .seal-strike-trail,
.seal-impact.is-delayed .seal-impact-burst { animation-delay:.42s; }
.seal-floating { position: absolute; top: var(--fx-y); left: var(--fx-x); color: var(--impact-color); font: 900 clamp(24px,3vw,42px)/1 Georgia,serif; letter-spacing:.03em; text-shadow: 0 3px 6px #000,0 0 19px currentColor; animation: sealFloat 1.05s ease-out both; }
.seal-impact.is-dodge .seal-floating { font-size: clamp(18px,2.2vw,29px); }
.seal-strike-trail { position:absolute; top:var(--fx-source-y); left:var(--fx-source-x); width:var(--trail-length,clamp(90px,18vw,230px)); height:7px; transform:rotate(var(--fx-angle)) scaleX(0); transform-origin:left center; border-radius:999px; opacity:0; background:linear-gradient(90deg,transparent 0 4%,#fff 36%,var(--impact-color) 68%,transparent); filter:drop-shadow(0 0 8px var(--impact-color)); animation:sealStrikeTrail .46s cubic-bezier(.2,.8,.25,1) both; }
.seal-impact.is-nondamage .seal-strike-trail { opacity:.45; filter:blur(1px) drop-shadow(0 0 8px var(--impact-color)); }
.seal-impact.is-no-trail .seal-strike-trail { display:none; }
.seal-impact-burst { position:absolute; top:var(--fx-y); left:var(--fx-x); width:72px; height:72px; transform:translate(-50%,-50%) scale(.2); border:3px solid var(--impact-color); border-radius:50%; opacity:0; box-shadow:0 0 22px var(--impact-color),inset 0 0 17px var(--impact-color); animation:sealImpactBurst .7s ease-out both; }
.seal-impact.is-nondamage .seal-impact-burst { border-style:dashed; }
.seal-impact-burst i { position:absolute; top:50%; left:50%; width:72px; height:3px; transform:translate(-50%,-50%) rotate(var(--spark-angle)); border-radius:4px; background:linear-gradient(90deg,transparent,var(--impact-color),#fff,var(--impact-color),transparent); box-shadow:0 0 7px var(--impact-color); }
.seal-impact-burst i:nth-child(1) { --spark-angle:0deg; }
.seal-impact-burst i:nth-child(2) { --spark-angle:45deg; }
.seal-impact-burst i:nth-child(3) { --spark-angle:90deg; }
.seal-impact-burst i:nth-child(4) { --spark-angle:135deg; }
.seal-impact-label { position:absolute; z-index:3; top:var(--fx-y); left:var(--fx-x); min-width:max-content; padding:3px 7px; transform:translate(-50%,20px); border:1px solid currentColor; border-radius:999px; color:var(--impact-color); background:rgba(18,29,35,.86); box-shadow:0 4px 12px rgba(8,16,20,.35),0 0 10px var(--impact-color); font-size:8px; font-weight:900; letter-spacing:.08em; text-shadow:0 1px 2px #000; animation:sealImpactLabel .92s ease-out both; }
.seal-arena.is-shaking { animation:sealArenaShake .32s ease-out; }
.seal-arena.is-critical-shake { animation-name:sealArenaCriticalShake; }
.seal-arena.is-both-shake { animation-name:sealArenaBothShake; }
.seal-arena.is-response-shake { animation-name:sealArenaResponseShake; }

.seal-arena-hint { position: absolute; z-index: 14; bottom: 6px; left: 50%; max-width: calc(100% - 18px); padding: 5px 10px; transform: translateX(-50%); border: 1px solid rgba(97,108,102,.26); border-radius: 18px; color: #334753; background: rgba(255,253,247,.88); box-shadow: 0 7px 20px rgba(45,59,63,.16); font-size: 9px; white-space: nowrap; pointer-events: none; }

.seal-forecast { display: grid; grid-template-columns: auto repeat(4,1fr); border-top: 1px solid #d2c7b2; border-bottom: 1px solid #d2c7b2; background: #f2ede3; }
.seal-forecast-title { display: flex; min-width: 108px; align-items: center; padding: 6px 9px; border-right: 1px solid #d2c7b2; color: #495b68; font-size: 8px; font-weight: 900; line-height: 1.25; text-transform: uppercase; }
.seal-chance { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; padding: 5px 8px; border-right: 1px solid #d2c7b2; }
.seal-chance:last-child { border-right: 0; }
.seal-chance span { color: #536273; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.seal-chance b { color: var(--chance); font-size: 10px; }
.seal-chance small { grid-column: 1/-1; color: #71808b; font-size: 7px; }
.seal-chance i { grid-column: 1/-1; height: 2px; background: linear-gradient(90deg,var(--chance) var(--value),rgba(72,82,84,.12) var(--value)); }
.seal-chance.is-critical { --chance:#b33b36; }
.seal-chance.is-lucky { --chance:#176997; }
.seal-chance.is-dodge { --chance:#257555; }
.seal-chance.is-response { --chance:#95501a; }

.seal-controls { display: grid; grid-template-columns: .9fr 1.15fr 1.15fr .82fr; gap: 6px; padding: 8px; background: linear-gradient(rgba(128,113,82,.035) 1px,transparent 1px) 0 0/100% 24px,linear-gradient(180deg,#fbf7ed,#e7e1d4); }
.seal-control { min-width: 0; padding-right: 6px; border-right: 1px solid rgba(119,102,67,.2); }
.seal-control:last-child { padding-right: 0; border-right: 0; }
.seal-control-head { display: flex; justify-content: space-between; gap: 5px; margin-bottom: 5px; color: #374957; font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.seal-control-head small { color: #667483; font-size: 7px; letter-spacing: 0; text-transform: none; }
.seal-segments { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
.seal-zones { display: grid; grid-template-columns: repeat(2,1fr); gap: 3px; }
.seal-segments button, .seal-zones button { height: 29px; padding: 2px 5px; border: 1px solid #c8c1b3; border-radius: 3px; color: #435363; background: rgba(255,253,248,.85); box-shadow: 0 2px 7px rgba(46,57,60,.06); font-size: 8px; font-weight: 800; cursor: pointer; }
.seal-segments button:hover, .seal-zones button:hover { border-color: #9d8451; color: #273845; }
.seal-segments button.is-selected { border-color: #9b6c20; color: #6f4d16; background: #f5ead1; }
.seal-zones.is-attack button.is-selected { border-color: #b33b36; color: #8f2c29; background: #fae5e2; }
.seal-zones.is-block button.is-selected { border-color: #176997; color: #155d86; background: #dceef7; }
.seal-segments button:disabled, .seal-zones button:disabled { opacity: .4; cursor: not-allowed; }
.seal-commit { display: flex; flex-direction: column; justify-content: center; }
.seal-equip-turn { display: block; margin-bottom: 4px; }
.seal-equip-turn span { display: block; margin-bottom: 2px; color: #667483; font-size: 7px; font-weight: 800; text-align: center; }
.seal-equip-turn select { width: 100%; height: 23px; padding: 1px 4px; overflow: hidden; border: 1px solid #c8c1b3; border-radius: 3px; color: #435363; background: rgba(255,253,248,.92); font-size: 7px; text-overflow: ellipsis; }
.seal-equip-turn option { color: #263443; background: #fffdf7; }
.seal-equip-turn select:focus { border-color: #9b6c20; outline: 2px solid rgba(155,108,32,.15); }
.seal-equip-turn select:disabled { opacity: .55; }
.seal-commit .seal-button { min-height: 38px; padding: 4px 6px; font: 700 11px Georgia,serif; }
.seal-validation { min-height: 20px; margin: 4px 2px 0; color: #667483; font-size: 7px; line-height: 1.3; text-align: center; }

.seal-log-panel { margin-top: 0; padding: 9px 11px 8px; background: radial-gradient(circle at 50% -70%,rgba(209,177,103,.24),transparent 52%),linear-gradient(145deg,#fffaf0,#e9e1cf); }
.seal-log-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.seal-log-head h2 { margin: 0; color: var(--seal-ink); font: 600 17px Georgia,serif; }
.seal-log-state { padding: 5px 8px; border: 1px solid rgba(37,117,85,.24); border-radius: 14px; color: #456052; background: #e7f2e8; font-size: 8px; }
.seal-log { height: clamp(210px,30vh,330px); margin-top: 7px; padding: 4px; overflow-y: auto; border: 1px solid #cfc3aa; border-radius: 4px; background: linear-gradient(rgba(105,93,65,.07) 1px,transparent 1px),#f4efe5; background-size: 100% 28px; box-shadow: inset 0 7px 17px rgba(88,75,48,.08); }
.seal-round-log { display: grid; grid-template-columns: minmax(105px,130px) minmax(0,1fr); margin-bottom: 4px; overflow: hidden; border: 1px solid #d7cbb3; border-radius: 3px; background: rgba(255,253,247,.86); }
.seal-round-log:first-child { border-color: rgba(140,98,27,.38); box-shadow: 0 2px 8px rgba(78,65,42,.08); }
.seal-round-label { padding: 7px 8px; color: #76531f; background: linear-gradient(135deg,#f3e7ca,#eadab9); font-size: 8px; font-weight: 900; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.seal-round-events { border-left: 1px solid #d7cbb3; }
.seal-log-line { position: relative; display: grid; grid-template-columns: 49px minmax(0,1fr); gap: 7px; min-height: 0; padding: 5px 8px 5px 38px; border-bottom: 1px solid rgba(128,112,79,.15); color: #263746; font-size: 11px; line-height: 1.32; }
.seal-log-line:last-child { border-bottom: 0; }
.seal-log-line::before { position: absolute; top: 5px; left: 6px; display: grid; width: 26px; height: 18px; place-items: center; border: 1px solid #c8bdac; border-radius: 3px; color: #607180; background: #f7f2e8; content: "•"; font-size: 8px; font-weight: 900; }
.seal-log-line.is-outgoing::before { border-color: rgba(23,105,151,.38); color: #155f89; background: #dceef7; content: "ВЫ"; }
.seal-log-line.is-incoming::before { border-color: rgba(179,59,54,.38); color: #9f322e; background: #fae5e2; content: "NPC"; }
.seal-log-line time { color: #5c6d79; font-size: 9px; font-variant-numeric: tabular-nums; }
.seal-log-line.is-critical, .seal-log-line.is-critical-block { background: linear-gradient(90deg,#fae5e2,rgba(250,229,226,.18) 68%,transparent); }
.seal-log-line.is-pierce { background: linear-gradient(90deg,#dceef7,rgba(220,238,247,.18) 68%,transparent); }
.seal-log-line.is-critical-lucky { background: linear-gradient(90deg,#fae5e2,#e6eef1 48%,#dceef7 70%,transparent); }
.seal-log-line.is-dodge { color: #245c47; background: linear-gradient(90deg,#e0f0e6,transparent 68%); }
.seal-log-line.is-block { color: #3f5362; background: linear-gradient(90deg,#e7ecef,transparent 68%); }
.seal-log-line.has-response { box-shadow: inset 3px 0 #c17a35; }
.seal-hp { display: inline-flex; gap: 3px; margin-left: 4px; padding: 0 4px; border: 1px solid #c9cec6; border-radius: 8px; color: #536273; background: #edf0eb; font-size: 8px; white-space: nowrap; }
.seal-hp .is-damaged { color: #a92e29; font-weight: 900; }
.seal-hp .is-steady { color: #354957; }
.seal-math { display: block; margin-top: 2px; padding-top: 2px; border-top: 1px dotted rgba(80,102,111,.2); color: #5f7280; font: 8px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace; }
.seal-log-legend { display: flex; gap: 10px; padding: 6px 2px 0; overflow-x: auto; color: #566675; font-size: 8px; white-space: nowrap; }
.seal-log-legend span { display: inline-flex; align-items: center; gap: 4px; }
.seal-log-legend i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.seal-legend-critical { color: var(--seal-red); }
.seal-legend-lucky { color: var(--seal-blue); }
.seal-legend-both { color: #8c3f86; text-shadow: 0 0 10px rgba(140,63,134,.12); }
.seal-legend-dodge { color: var(--seal-green); }
.seal-legend-response { color: var(--seal-brown); }
.seal-log .seal-log-nick { font-family: Georgia,serif; font-weight: 800; }
.seal-log .seal-log-nick.is-player { color: #176997; }
.seal-log .seal-log-nick.is-enemy { color: #b33b36; }

.seal-result { display: flex; min-height: 100%; align-items: center; justify-content: center; padding: 18px; overflow: auto; text-align: center; }
.seal-result-card { width: min(620px,100%); padding: 22px; }
.seal-result-card h2 { margin: 4px 0 10px; color: var(--seal-ink); font: 600 32px Georgia,serif; }
.seal-result-card p { color: var(--seal-muted); }
.seal-result-vitals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }
.seal-result-vitals div { padding: 11px; border: 1px solid #d5cab3; border-radius: 5px; background: rgba(255,253,247,.7); }
.seal-xp-breakdown { margin: 0 0 12px; padding: 9px; border: 1px solid #cdbb91; border-radius: 6px; color: var(--seal-ink); background: linear-gradient(145deg,#fffaf0,#eee4cc); text-align: left; }
.seal-xp-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.seal-xp-title span { color: #5c6d79; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.seal-xp-title strong { color: #257555; font: 700 15px Georgia,serif; }
.seal-xp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.seal-xp-grid div { min-width: 0; padding: 5px 6px; border: 1px solid rgba(126,111,83,.2); border-radius: 3px; background: rgba(255,255,255,.55); }
.seal-xp-grid small,.seal-xp-grid em { display: block; overflow: hidden; color: #667483; font-size: 7px; font-style: normal; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.seal-xp-grid b { display: block; margin: 1px 0; color: #354957; font-size: 10px; font-variant-numeric: tabular-nums; }
.seal-xp-grid .is-total { border-color: rgba(37,117,85,.35); background: #e7f2e8; }
.seal-xp-grid .is-total b { color: #257555; }
.seal-xp-breakdown code { display: block; margin-top: 5px; color: #596879; font: 7px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; text-align: center; }

@keyframes sealPulse { 50% { transform: scale(1.06); } }
@keyframes sealAttack { 45% { transform:translate(var(--attack-x),var(--attack-y)) scale(1.07); filter:brightness(1.22) saturate(1.15); } }
@keyframes sealHit { 35% { transform: translateX(-7px) rotate(-4deg); filter: brightness(1.3); } }
@keyframes sealCrit { 35% { transform: scale(1.2) rotate(5deg); filter: brightness(1.45) saturate(1.35); } }
@keyframes sealDodge { 45% { transform: translateX(18px) scale(.9); opacity: .55; } }
@keyframes sealBlock { 35% { transform: scale(.9); filter: sepia(.45) brightness(1.2); } }
@keyframes sealResponse { 30% { transform: translateX(8px) rotate(3deg); filter: sepia(.35) brightness(1.25); } 65% { transform: translateX(-4px) rotate(-2deg); } }
@keyframes sealFloat { 0% { opacity: 0; transform: translate(-50%,-5%) scale(.55); } 18% { opacity: 1; transform: translate(-50%,-65%) scale(1.18); } 58% { opacity: 1; transform: translate(-50%,-105%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-175%) scale(.94); } }
@keyframes sealStrikeTrail { 0% { opacity:0; transform:rotate(var(--fx-angle)) scaleX(0); } 22% { opacity:1; } 68% { opacity:.95; transform:rotate(var(--fx-angle)) scaleX(1); } 100% { opacity:0; transform:rotate(var(--fx-angle)) scaleX(1.08); } }
@keyframes sealImpactBurst { 0%,18% { opacity:0; transform:translate(-50%,-50%) scale(.12) rotate(-18deg); } 32% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.55) rotate(16deg); } }
@keyframes sealImpactLabel { 0% { opacity:0; transform:translate(-50%,28px) scale(.82); } 20%,72% { opacity:1; transform:translate(-50%,20px) scale(1); } 100% { opacity:0; transform:translate(-50%,11px) scale(.96); } }
@keyframes sealArenaShake { 28% { transform:translateX(-2px); filter:brightness(1.08); } 58% { transform:translateX(2px); } }
@keyframes sealArenaCriticalShake { 20% { transform:translate(-4px,1px); filter:brightness(1.17) saturate(1.12); } 45% { transform:translate(4px,-1px); } 68% { transform:translate(-2px,0); } }
@keyframes sealArenaBothShake { 18% { transform:translate(-5px,2px); filter:brightness(1.22) saturate(1.18); } 38% { transform:translate(5px,-2px); } 58% { transform:translate(-4px,1px); } 78% { transform:translate(2px,0); } }
@keyframes sealArenaResponseShake { 25% { transform:translateX(3px); filter:sepia(.16) brightness(1.1); } 55% { transform:translateX(-3px); } }

@media (max-width: 1180px) {
  .seal-main { grid-template-columns: 210px minmax(560px,1fr) 210px; }
  .seal-fighter { padding: 9px; }
  .seal-header { grid-template-columns: minmax(230px,1fr) auto minmax(310px,1fr); }
  .seal-board { width: min(94%,620px); }
}

@media (max-width: 1020px) {
  body.seal-battle-open { overflow: auto; }
  .battle-overlay { overflow: auto; }
  .seal-battle { width: min(100% - 10px,820px); }
  .seal-header { grid-template-columns: 1fr auto; }
  .seal-round-state { display: none; }
  .seal-main { height: auto; grid-template-columns: 1fr 1fr; }
  .seal-stage { grid-column: 1/-1; grid-row: 1; min-height: 500px; }
  .seal-fighter { min-height: 360px; }
  .seal-fighter.is-player { grid-column: 1; }
  .seal-fighter.is-enemy { grid-column: 2; }
  .seal-log-panel { margin-top: 7px; }
}

@media (max-width: 620px) {
  .seal-header { grid-template-columns: 1fr; gap: 7px; }
  .seal-header-actions { justify-content: flex-start; flex-wrap: wrap; }
  .seal-updated { width: 100%; }
  .seal-main { display: flex; flex-direction: column; }
  .seal-stage { order: 1; min-height: 560px; }
  .seal-fighter.is-player { order: 2; }
  .seal-fighter.is-enemy { order: 3; }
  .seal-fighter { min-height: 420px; }
  .seal-controls { grid-template-columns: 1fr; }
  .seal-control { padding-right: 0; border-right: 0; }
  .seal-segments button, .seal-zones button { min-height: 42px; }
  .seal-forecast { grid-template-columns: repeat(2,1fr); }
  .seal-forecast-title { grid-column: 1/-1; min-width: 0; border-right: 0; border-bottom: 1px solid #d2c7b2; }
  .seal-board { width: min(98%,470px); }
  .seal-arena-hint { width: max-content; white-space: normal; line-height: 1.25; text-align: center; }
  .seal-round-log { display: block; }
  .seal-round-events { border-top: 1px solid #d7cbb3; border-left: 0; }
  .seal-log-line { grid-template-columns: 44px minmax(0,1fr); padding-left: 37px; font-size: 10px; }
  .seal-result { padding: 8px; }
  .seal-result-card { padding: 15px; }
  .seal-xp-grid { grid-template-columns: repeat(2,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .seal-battle *, .seal-battle *::before, .seal-battle *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}