[data-window-type="equilibrium"] .retro-window { box-sizing: border-box; background: #d5c9ab; box-shadow: 0 16px 42px #171b1dcc, inset 1px 1px #f8f1dd, inset -1px -1px #302e2b; }
[data-window-type="equilibrium"] .title-bar { flex-shrink: 0; background: linear-gradient(90deg, #172c31, #355057); color: #f9efda; border-bottom: 1px solid #b69458; }
[data-window-type="equilibrium"] .retro-window.show-content .equilibrium-content { flex: 1; min-height: 0; height: auto; overflow: auto; padding: 0; background: #efe7d6; }
.equilibrium { --ink: #263b3d; --brass: #b79759; box-sizing: border-box; min-height: 100%; padding: 11px 18px 12px; color: var(--ink); background: radial-gradient(circle at 50% -10%, #fffdf4 0, transparent 45%), repeating-linear-gradient(0deg, transparent 0 3px, #80735207 3px 4px), #efe7d6; font: 13px/1.35 "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.eq-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 7px; border-bottom: 3px double #b6a681; }
.eq-brand { min-width: 0; }
.eq-brand small, .eq-board-heading, .eq-seal small { color: #6b675b; font: 700 9px/1.4 "Courier New", monospace; letter-spacing: 1.3px; }
.eq-brand h1 { margin: 2px 0 0; color: #233a3d; font: 400 34px/.95 "Iowan Old Style", "Palatino Linotype", Georgia, serif; letter-spacing: -1.5px; }
.eq-brand h1 span { margin-left: 8px; color: var(--brass); font-size: 23px; vertical-align: 5px; }
.eq-brand p { margin: 2px 0 0; color: #756d5f; font-size: 11px; font-style: italic; }
.eq-seal { display: grid; justify-items: center; align-content: center; flex: 0 0 72px; width: 72px; height: 72px; border: 2px double #ad9365; border-radius: 50%; background: radial-gradient(circle, #fffaf0 50%, #e7dcc2); box-shadow: 0 0 0 3px #efe7d6, 0 0 0 4px #b6a681; }
.eq-seal > span { color: #a48247; font-size: 18px; line-height: 1; }
.eq-seal strong { font: 19px/1.2 Georgia, serif; white-space: nowrap; }
.eq-seal small { font-size: 7px; letter-spacing: .8px; }
.eq-rule { padding: 6px 0; text-align: center; color: #555d59; font-size: 12px; }
.eq-rule strong { color: #405c58; }
.eq-resonance { display: flex; align-items: center; gap: 11px; padding: 7px 10px; min-height: 57px; border: 1px solid #af986a; border-top: 3px solid #a27d43; background: radial-gradient(circle at 7% 50%, #d8c8a7 0, transparent 25%), linear-gradient(110deg, #f6f0e0, #e8dfc9); box-shadow: inset 0 1px #fff8e7, 0 2px 5px #51472e20; }
.eq-resonance-mark { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid #ae8c58; border-radius: 50%; color: #8b6b3b; background: radial-gradient(circle, #fff9e9, #ded0b0); box-shadow: 0 0 0 3px #ecdfc7, 0 0 0 4px #ae8c5866; font: 27px/1 Georgia, serif; }
.eq-resonance-copy { display: grid; gap: 1px; min-width: 0; flex: 1; }
.eq-resonance-copy small, .eq-echo small, .eq-charge small { color: #856c48; font: bold 9px/1.2 "Courier New", monospace; letter-spacing: 1px; }
.eq-resonance-copy strong { color: #243d40; font: 17px/1.15 Georgia, serif; }
.eq-resonance-copy span { color: #6c675b; font: 10px/1.25 "Courier New", monospace; }
.eq-echo { display: grid; justify-items: center; align-content: center; flex: 0 0 76px; min-height: 51px; border-left: 1px solid #beaa82; border-right: 1px solid #beaa82; }
.eq-echo strong { color: #9a7135; font: 25px/1 Georgia, serif; }
.eq-charge { display: grid; justify-items: center; flex: 0 0 74px; gap: 1px; }
.eq-charge span { display: flex; gap: 3px; }
.eq-charge i { color: #b6ae9a; font: normal 17px Georgia, serif; text-shadow: 0 1px #fff8ea; }
.eq-charge i.lit { color: #bd7838; text-shadow: 0 0 8px #e9a553; }
.eq-charge b { color: #6c624f; font: bold 9px "Courier New", monospace; }
.eq-spell { display: flex; align-items: center; gap: 11px; min-height: 57px; margin: 7px 0 8px; padding: 6px 9px; border: 1px solid #a88752; background: radial-gradient(circle at 48% 50%, #31595c, #1d3539 70%); color: #f6e9ca; box-shadow: inset 0 0 0 3px #284549, 0 3px 6px #2c322b26; }
.eq-spell-mark { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border: 1px double #d5b679; border-radius: 50%; color: #e4c98c; font: 28px Georgia, serif; box-shadow: 0 0 0 3px #b8a27055, inset 0 0 8px #d7a9516b; }
.eq-spell-sides { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; gap: 5px; flex: 1; min-width: 0; font: bold 11px/1.25 "Courier New", monospace; }
.eq-spell-sides span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-spell-sides b { color: #d8b97d; font: 24px Georgia, serif; text-align: center; }
.eq-spell button { flex: 0 0 110px; padding: 9px 5px; border: 1px solid #d9ac6f; border-radius: 3px; background: linear-gradient(#e5be83, #b9814c); color: #2c2c26; box-shadow: inset 0 1px #ffe7b9, 0 2px 3px #0f2228; font: bold 11px "Courier New", monospace; cursor: pointer; }
.eq-spell button:hover, .eq-spell button:focus-visible { background: linear-gradient(#f3d3a0, #c98b55); }
.eq-spell button:disabled { opacity: .48; cursor: default; }
.eq-cast-flash .eq-spell { animation: eq-spell-flare .6s ease-out; }
.eq-cast-flash .eq-spell-mark { animation: eq-glyph-flare .6s ease-out; }
@keyframes eq-spell-flare { 35% { box-shadow: inset 0 0 0 3px #284549, 0 0 19px 5px #dda95f; } }
@keyframes eq-glyph-flare { 35% { color: #fff6cb; text-shadow: 0 0 14px #ffe09d; transform: rotate(45deg) scale(1.15); } }
.eq-board-heading { display: flex; justify-content: space-between; gap: 8px; padding: 0 2px 5px; border-bottom: 1px solid #b8a985; }
.eq-board-heading span:first-child { color: #354e50; }
.eq-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; padding: 8px 7px 10px; border: 1px solid #a28b61; border-top: 0; background: radial-gradient(circle at 50% 45%, #315354, #223d40 75%); box-shadow: inset 0 2px 9px #0c202788; }
.eq-column { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; min-width: 0; min-height: 214px; padding: 4px 2px 5px; border: 1px solid #b7a06c8c; border-radius: 18px 18px 5px 5px; background: linear-gradient(#1830339c, #4d5b4d5c); box-shadow: inset 0 0 0 2px #254549, 0 1px 3px #172b2c8c; }
.eq-column > * + * { margin-top: -75px; }
.eq-column-empty { display: grid; place-items: center; width: 100%; min-height: 90px; color: #d0b77c; font: 26px Georgia, serif; }
.eq-card-back, .eq-card { box-sizing: border-box; width: 72px; max-width: 100%; height: 101px; flex: 0 0 101px; border-radius: 4px; }
.eq-card-back { position: relative; border: 2px solid #cab47f; background: radial-gradient(circle at 50% 50%, transparent 17px, #b8a16a 18px 19px, transparent 20px 25px, #9f895d 26px 27px, transparent 28px), repeating-linear-gradient(135deg, #27474b 0 3px, #203b3f 3px 6px); box-shadow: 0 2px 4px #0e2528a0, inset 0 0 0 3px #25494d, inset 0 0 0 4px #b6a16b; }
.eq-card-back::after { content: "◈"; position: absolute; inset: 0; display: grid; place-items: center; color: #cfbc88; font-size: 25px; text-shadow: 0 0 8px #e6cf8d8a; }
.eq-card { --accent: #777; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 5px 5px 4px; border: 2px solid #c5aa76; background: radial-gradient(circle at 50% 53%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 48%), linear-gradient(145deg, #fffdf1, #e9ddc1); color: var(--accent); box-shadow: 0 2px 5px #0c22258a, inset 0 0 0 2px #f9f3e1; text-align: left; font-family: Georgia, serif; }
.eq-card::before { content: ""; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--accent) 58%, #d3bd8c); border-radius: 2px; pointer-events: none; }
.eq-card:is(button) { cursor: pointer; }
.eq-card:is(button):hover { transform: translateY(-3px); box-shadow: 0 5px 10px #071a1cad, inset 0 0 0 2px #f9f3e1; }
.eq-card.selected { z-index: 2; outline: 3px solid #ecc678; outline-offset: 1px; transform: translateY(-4px); }
.eq-card.eq-deep-card { box-shadow: 0 0 0 2px #e6c47c, 0 0 13px #d7a45c88, inset 0 0 0 2px #f9f3e1; }
.eq-card.eq-preview-card { filter: saturate(.75); }
.eq-card:focus-visible { outline: 3px solid #eac777; outline-offset: 2px; }
.eq-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1px; min-height: 24px; }
.eq-card-name { padding-top: 3px; font: bold 8px/1 "Courier New", monospace; text-transform: uppercase; letter-spacing: .2px; }
.eq-card-rank { font: 24px/.9 Georgia, serif; }
.eq-card-symbol { display: grid; place-items: center; align-self: center; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; background: #fff8e783; box-shadow: 0 0 0 3px #cfbd9c55; font: 24px/1 Georgia, serif; }
.eq-card-footer { align-self: center; color: #82755d; font: 7px/1 "Courier New", monospace; letter-spacing: 1px; }
.eq-water { --accent: #356d80; } .eq-fire { --accent: #a95d43; } .eq-earth { --accent: #69734a; } .eq-air { --accent: #77668d; }
.eq-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 7px; }
.eq-bottom p { margin: 0; color: #455a55; font-style: italic; }
.eq-bottom p::before { content: "✦"; margin-right: 7px; color: #a78950; font-style: normal; }
.eq-bottom > div { display: flex; gap: 7px; flex-shrink: 0; }
.eq-bottom button { padding: 6px 10px; border: 1px solid #8c826e; border-radius: 2px; background: #f8f3e7; color: #2e4648; font: bold 11px "Courier New", monospace; cursor: pointer; }
.eq-bottom button:hover, .eq-bottom button:focus-visible { background: #e7dfcb; }
.eq-bottom button:disabled { opacity: .42; cursor: default; }
.eq-footnote { margin: 6px 0 0; color: #777367; font: 10px/1.3 "Courier New", monospace; }
@media (max-width: 700px) { .equilibrium { padding: 10px 9px; } .eq-resonance { gap: 7px; } .eq-resonance-mark { display: none; } .eq-resonance-copy strong { font-size: 14px; } .eq-echo { flex-basis: 64px; } .eq-charge { flex-basis: 59px; } .eq-spell-mark { display: none; } .eq-spell button { flex-basis: 98px; } .eq-board { gap: 2px; padding: 6px 2px 8px; } .eq-column { padding: 2px 1px; } .eq-card, .eq-card-back { height: 90px; flex-basis: 90px; padding: 4px 2px; } .eq-column > * + * { margin-top: -66px; } .eq-card-name { font-size: 7px; } .eq-card-rank { font-size: 21px; } .eq-card-symbol { width: 27px; height: 27px; font-size: 19px; } }
@media (max-width: 540px) { .eq-brand h1 { font-size: 26px; } .eq-brand small { font-size: 7px; } .eq-seal { flex-basis: 62px; width: 62px; height: 62px; } .eq-seal strong { font-size: 15px; } .eq-rule { text-align: left; } .eq-resonance { flex-wrap: wrap; } .eq-resonance-copy { flex-basis: 100%; } .eq-echo, .eq-charge { flex: 1; min-height: 38px; } .eq-spell { flex-wrap: wrap; } .eq-spell-sides { flex-basis: 100%; } .eq-spell button { flex: 1; } .eq-board { overflow-x: auto; grid-template-columns: repeat(8, minmax(60px, 1fr)); } .eq-bottom { align-items: stretch; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .eq-card:is(button):hover, .eq-card.selected { transform: none; } .eq-cast-flash .eq-spell, .eq-cast-flash .eq-spell-mark { animation: none; } }