/* Final interface refinement: one visual language, readable type, lighter motion. */

.combat-card--cinematic {
  max-width: 940px;
  overflow: hidden;
  color: #e9fbf6;
  background: linear-gradient(150deg, rgba(5, 43, 43, .985), rgba(8, 62, 58, .97));
  border: 1px solid rgba(151, 216, 202, .5);
  border-radius: 5px 24px 5px 24px;
  box-shadow: 0 34px 90px rgba(2, 27, 25, .42), inset 0 0 0 1px rgba(239, 255, 250, .08);
}

.combat-visual {
  height: clamp(248px, 28vh, 300px);
  background: #092f35;
  border-bottom: 1px solid rgba(166, 225, 211, .24);
}

.combat-visual__image {
  inset: -2%;
  background-position: center 44%;
  filter: saturate(.91) contrast(1.03) brightness(.92);
  animation-duration: 15s;
}

.combat-visual__veil {
  background:
    linear-gradient(180deg, rgba(2, 25, 30, .03), rgba(2, 27, 30, .08) 48%, rgba(2, 28, 30, .84) 100%),
    linear-gradient(90deg, rgba(3, 36, 37, .34), transparent 30% 70%, rgba(3, 30, 34, .36));
}

.combat-visual > .dynamic-world { opacity: .76; }
.combat-visual::after { box-shadow: inset 0 0 82px rgba(2, 24, 28, .32); }

.combat-fighter {
  bottom: 15px;
  width: min(280px, 36%);
  gap: 4px 10px;
}

.combat-fighter--player { left: 22px; }
.combat-fighter--enemy { right: 22px; }
.combat-fighter small { color: rgba(229, 249, 244, .76); font-size: 10px; font-weight: 700; }
.combat-fighter b { font-size: 21px; letter-spacing: .06em; }
.combat-fighter em { color: rgba(237, 252, 248, .88); font-size: 10px; }
.combat-fighter > span { height: 6px; border: 1px solid rgba(223, 251, 245, .1); }

.combat-round {
  bottom: 12px;
  width: 64px;
  height: 64px;
  background: radial-gradient(circle, rgba(15, 105, 96, .94), rgba(4, 43, 44, .84));
  border-color: rgba(176, 238, 224, .56);
  box-shadow: 0 0 28px rgba(87, 220, 195, .26), inset 0 0 20px rgba(122, 231, 210, .08);
}

.combat-round small { top: 10px; font-size: 7px; font-weight: 700; }
.combat-round b { font-size: 14px; }
.combat-round i { bottom: -7px; width: 24px; height: 24px; font-size: 14px; }

.combat-card__body {
  padding: 17px 22px 20px;
  background:
    radial-gradient(circle at 92% 0, rgba(125, 211, 191, .09), transparent 32%),
    linear-gradient(145deg, rgba(7, 54, 53, .98), rgba(5, 42, 44, .99));
}

.combat-card--cinematic .combat-card__head h2 {
  margin: 3px 0 7px;
  color: #f0fffb !important;
  font-size: 25px;
  letter-spacing: .07em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .28) !important;
}

.combat-card--cinematic .combat-card__head p {
  color: #8fd5c8 !important;
  font-size: 10px;
  letter-spacing: .13em;
}

.combat-card--cinematic .combat-card__head > span {
  padding: 5px 10px;
  color: #ffd0c4 !important;
  background: rgba(154, 63, 58, .25) !important;
  border-color: rgba(239, 143, 128, .52) !important;
  font-size: 10px;
  letter-spacing: .1em;
}

.combat-forecast {
  margin: 2px 0 10px;
  padding: 10px 12px;
  gap: 10px 13px;
  color: #e9faf6;
  background: rgba(207, 244, 235, .055);
  border-color: rgba(144, 213, 198, .2);
  border-left-color: #65c8b5;
  border-radius: 2px 10px 2px 10px;
}

.combat-forecast--deadly { background: rgba(101, 38, 39, .3); border-color: rgba(233, 132, 118, .34); }
.combat-forecast small { color: #8dd2c5; font-size: 9px; letter-spacing: .05em; }
.combat-forecast b { color: #effcf8; font-size: 11px; line-height: 1.42; }
.combat-forecast p { color: #c9e7df; font-size: 11px; line-height: 1.58; }

.combat-card--cinematic .combat-message {
  min-height: 44px;
  margin: 7px 0 12px;
  padding: 9px 11px;
  grid-template-columns: 36px 1fr;
  color: #d3ebe5 !important;
  background: rgba(199, 239, 230, .065);
  border-left-color: #6bc8b5;
  font-size: 12px;
  line-height: 1.62;
}

.combat-message > i { color: #8cd6c8; font-size: 10px; }
.combat-actions { gap: 8px; }

.combat-card--cinematic .combat-actions button {
  min-height: 66px;
  padding: 9px 11px;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  color: #eafffa !important;
  background: linear-gradient(135deg, rgba(130, 214, 197, .095), rgba(225, 248, 242, .025)) !important;
  border-color: rgba(145, 218, 203, .22) !important;
  border-radius: 3px 11px 3px 11px;
  box-shadow: none;
}

.combat-card--cinematic .combat-actions button:hover {
  color: #f7fffc !important;
  background: linear-gradient(135deg, rgba(126, 226, 204, .19), rgba(235, 255, 249, .06)) !important;
  border-color: rgba(150, 234, 215, .52) !important;
  box-shadow: 0 10px 24px rgba(1, 24, 25, .24);
  transform: translateY(-1px);
}

.combat-card--cinematic .combat-actions button > b {
  width: 36px;
  height: 36px;
  color: #c7f5eb !important;
  background: rgba(108, 206, 187, .1) !important;
  border-color: rgba(139, 226, 208, .34) !important;
  font-size: 17px;
}

.combat-card--cinematic .combat-actions button > span { color: #eafaf6 !important; font-size: 12px; line-height: 1.25; }
.combat-card--cinematic .combat-actions button small { color: #a9cbc3 !important; font-size: 10px; line-height: 1.35; }
.combat-card--cinematic .combat-actions button:disabled { opacity: .42; filter: saturate(.45); }

/* Readability and finish pass for system panels and secondary screens. */
.side-panel { width: min(700px, 96vw); }
.side-panel > header { min-height: 88px; padding-block: 17px; }
.side-panel > header p { font-size: 10px; }
.side-panel > header h2 { font-size: 27px; }
.side-panel__body { padding: 22px 24px 30px; font-size: 13px; line-height: 1.65; }
.side-panel__body h3 { font-size: 18px; line-height: 1.35; }
.side-panel__body :is(p, dd, span) { line-height: 1.6; }
.side-panel__body :is(small, time, dt) { font-size: 10px !important; line-height: 1.45; }
.side-panel__body :is(p, dd) { font-size: 12px !important; }
.side-panel__body button { min-height: 36px; font-size: 11px !important; line-height: 1.35; }
.panel-intro, .empty-state { font-size: 13px !important; line-height: 1.75 !important; }

.hint-card { min-height: 104px; padding: 14px; }
.hint-card small, .dungeon-card small, .technique-card small, .inventory-list--illustrated small, .people-list small, .map-place small { font-size: 10px !important; }
.hint-card p, .dungeon-card p, .technique-card p, .inventory-list--illustrated p, .people-list p, .map-place p { font-size: 12px !important; }
.hint-card button, .dungeon-card button, .technique-card button, .inventory-list--illustrated button, .people-list button, .map-place button { font-size: 11px !important; }

.inventory-list--illustrated article { min-height: 104px; }
.inventory-list--illustrated article > div > h3 { font-size: 17px; }
.people-list span { font-size: 12px; }
.log-list time { font-size: 10px; }
.log-list p { font-size: 12px; line-height: 1.6; }

.settlement-modal > header > span { font-size: 10px; }
.settlement-modal > header p { font-size: 12px; }
.settlement-result small, .settlement-result p, .settlement-time small { font-size: 10px; }

.ritual-art__caption small { font-size: 10px; }
.ritual-progress small, .ritual-context small, .ritual-methods small { font-size: 9px; }
.ritual-content > header small { font-size: 9px; }
.ritual-content > header p { font-size: 11px; }
.ritual-context b { font-size: 11px; }
.ritual-methods em { font-size: 10px; }
.ritual-cancel { font-size: 10px; }

.mobile-action-menu small { font-size: 10px; }
.world-node small { font-size: 9px; }
.world-node-card small { font-size: 10px; }
.world-node-card p { font-size: 12px; }
.action-dock > p { font-size: 10px; }
.action-dock > button b { font-size: 12px; }
.action-dock > button small { font-size: 10px; }
.story-choice > small { font-size: 10px !important; }
.choice-forecast { font-size: 9px; }

@media (max-width: 760px) {
  .combat-card--cinematic { border-radius: 3px 18px 3px 18px; }
  .combat-visual { height: 190px; }
  .combat-fighter { bottom: 11px; width: 39%; }
  .combat-fighter--player { left: 12px; }
  .combat-fighter--enemy { right: 12px; }
  .combat-fighter small { font-size: 8px; letter-spacing: .06em; }
  .combat-fighter b { font-size: 16px; }
  .combat-fighter em { font-size: 8px; }
  .combat-round { bottom: 9px; width: 54px; height: 54px; }
  .combat-round small { top: 7px; font-size: 6px; }
  .combat-round b { font-size: 12px; }
  .combat-card__body { padding: 13px 12px 15px; }
  .combat-card--cinematic .combat-card__head h2 { font-size: 21px; }
  .combat-forecast { grid-template-columns: 1fr 1fr; padding: 9px 10px; }
  .combat-forecast > p { grid-column: 1 / -1; }
  .combat-forecast small { font-size: 8px; }
  .combat-forecast b, .combat-forecast p { font-size: 10px; }
  .combat-card--cinematic .combat-message { max-height: none; overflow: visible; font-size: 11px; }
  .combat-actions, .combat-card--cinematic .combat-actions { grid-template-columns: 1fr 1fr; max-height: none; overflow: visible; }
  .combat-card--cinematic .combat-actions button { min-height: 60px; padding: 8px; grid-template-columns: 34px minmax(0, 1fr); }
  .combat-card--cinematic .combat-actions button > b { width: 32px; height: 32px; font-size: 16px; }
  .combat-card--cinematic .combat-actions button > span { font-size: 11px; }
  .combat-card--cinematic .combat-actions button small { font-size: 9px; }

  .side-panel { width: 100vw; }
  .side-panel > header { min-height: 82px; }
  .side-panel > header h2 { font-size: 25px; }
  .side-panel__body { height: calc(100% - 82px); padding: 18px 15px 94px; font-size: 14px; }
  .side-panel__body :is(small, time, dt) { font-size: 11px !important; }
  .side-panel__body :is(p, dd) { font-size: 13px !important; }
  .side-panel__body button { min-height: 40px; font-size: 12px !important; }
  .panel-intro, .empty-state { font-size: 13px !important; }

  .ritual-progress small, .ritual-context small, .ritual-methods small { font-size: 9px; }
  .ritual-content > header p { font-size: 11px; }
  .ritual-methods em { font-size: 10px; }
  .world-node small { font-size: 9px; }
}

@media (max-width: 420px) {
  .combat-visual { height: 176px; }
  .combat-card--cinematic .combat-card__head p { display: block; }
  .combat-card--cinematic .combat-message { grid-template-columns: 30px 1fr; }
  .combat-card--cinematic .combat-actions button { min-height: 64px; }
  .side-panel__body { padding-inline: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .combat-visual__image { animation: none !important; }
  .combat-card--cinematic .combat-actions button:hover { transform: none; }
}