:root {
  --void: #070809;
  --void-soft: #0d0f11;
  --iron: #181b1f;
  --iron-light: #2c3034;
  --steel: #a6abad;
  --silver: #e1e3df;
  --bone: #d9d2c3;
  --gold: #b98738;
  --gold-light: #e1b961;
  --oxblood: #78181b;
  --blue: #294f91;
  --green: #245c39;
  --dust: #aaa394;
  --line: rgba(212,205,188,.2);
  --line-hard: rgba(219,180,91,.52);
  --serif: "Cormorant Garamond", Georgia, serif;
  --condensed: "IBM Plex Sans Condensed", Arial, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --notch: polygon(13px 0, calc(50% - 8px) 0, 50% 6px, calc(50% + 8px) 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, calc(50% + 8px) 100%, 50% calc(100% - 6px), calc(50% - 8px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--gold) var(--void); }
body { margin: 0; min-width: 320px; color: var(--bone); background: radial-gradient(circle at 50% 10%, #15191d, #070809 42%); font-family: var(--condensed); }
body.locked { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { color: #090a0b; background: var(--gold-light); }
.grain { position: fixed; z-index: 1000; inset: 0; pointer-events: none; opacity: .065; background-image: repeating-radial-gradient(circle at 23% 61%, transparent 0, rgba(255,255,255,.58) .35px, transparent .75px, transparent 5px); background-size: 7px 8px; mix-blend-mode: soft-light; }
.folio { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-light); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.folio::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--gold); background: var(--oxblood); transform: rotate(45deg); }

.archive-header { position: sticky; z-index: 100; top: 0; height: 82px; padding: 0 27px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #51565a; background: linear-gradient(90deg, rgba(9,10,11,.97), rgba(37,41,45,.97) 50%, rgba(8,9,10,.97)); box-shadow: 0 9px 35px rgba(0,0,0,.52), inset 0 -3px 0 #090a0b, inset 0 -4px 0 rgba(195,158,76,.38); backdrop-filter: blur(18px); }
.archive-header::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; border: 1px solid var(--gold-light); background: var(--oxblood); transform: translateX(-50%) rotate(45deg); }
.archive-brand { display: flex; align-items: center; gap: 12px; width: max-content; color: #eee8da; font: 600 20px/1 var(--serif); }
.archive-brand img { width: 52px; height: 52px; object-fit: cover; }
.mode-switch { height: 100%; display: flex; align-items: center; gap: 8px; }
.mode-switch button { position: relative; min-width: 155px; height: 52px; padding: 0 20px; border: 0; color: #a5a092; background: linear-gradient(#2d3135, #111315); clip-path: var(--notch); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .3s, filter .3s, transform .3s; }
.mode-switch button::before { content: ""; position: absolute; inset: 3px; border: 1px solid #51565a; clip-path: inherit; }
.mode-switch button:hover, .mode-switch button.active { color: #fff0ca; filter: brightness(1.15); transform: translateY(-2px); background: linear-gradient(#a1282b, #5d0e11); }
.mode-switch button.active::before { border-color: var(--gold); }
.mode-switch button span { margin-right: 7px; color: var(--gold-light); }
.mode-switch button b { display: inline-grid; place-items: center; min-width: 21px; height: 21px; margin-left: 7px; border: 1px solid #e5bd66; border-radius: 50%; color: #17110a; background: var(--gold-light); font-size: 10px; }
.archive-actions { justify-self: end; display: flex; align-items: center; gap: 17px; }
.archive-actions button, .archive-actions a { min-height: 38px; padding: 0 11px; border: 0; color: #b2ab9d; background: transparent; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .3s; }
.archive-actions button:hover, .archive-actions a:hover { color: var(--gold-light); }

.archive-view, .forge-view { display: none; }
.archive-view.active, .forge-view.active { display: block; animation: view-in .5s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(12px); } }

.archive-masthead { position: relative; min-height: 520px; padding: 100px clamp(38px,6vw,112px) 62px; display: grid; grid-template-columns: 1fr auto; align-content: end; gap: 24px 85px; overflow: hidden; border-bottom: 1px solid #454a4e; background: #090b0c; isolation: isolate; }
.archive-masthead::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("../assets/game/news-crystal.jpg") 77% center / cover no-repeat; filter: saturate(.75) contrast(1.1) brightness(.62); }
.archive-masthead::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #070809 0 32%, rgba(7,8,9,.62) 57%, rgba(7,8,9,.18)), linear-gradient(180deg, rgba(7,8,9,.15), #070809 100%); }
.archive-masthead > div:first-child::before { content: ""; position: absolute; inset: 20px; pointer-events: none; border: 1px solid rgba(212,180,105,.32); clip-path: var(--notch); }
.archive-masthead h1 { margin: 29px 0 0; color: #f0eadf; font: 500 clamp(96px,11vw,175px)/.65 var(--serif); letter-spacing: -.07em; text-shadow: 0 10px 45px #000; }
.archive-masthead h1 em { color: var(--gold-light); font-weight: 400; }
.archive-masthead > p { grid-column: 1; width: min(510px,100%); margin: 27px 0 0; color: #c1b9a9; font: 500 18px/1.58 var(--serif); text-shadow: 0 2px 10px #000; }
.archive-stats { grid-column: 2; grid-row: 1 / 3; align-self: end; display: flex; gap: 10px; }
.archive-stats div { position: relative; width: 126px; height: 132px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px); background: linear-gradient(145deg, rgba(55,59,63,.9), rgba(11,12,14,.93)); }
.archive-stats div::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(210,177,100,.52); clip-path: inherit; }
.archive-stats b { color: #f0eadf; font: 500 40px/1 var(--serif); }
.archive-stats span { margin-top: 10px; color: #aaa395; font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }

.archive-tools { position: sticky; z-index: 50; top: 82px; min-height: 82px; padding: 14px clamp(24px,4vw,66px); display: grid; grid-template-columns: minmax(290px,650px) auto; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid #454a4e; background: linear-gradient(90deg, rgba(13,15,17,.97), rgba(28,31,34,.97), rgba(10,11,12,.97)); backdrop-filter: blur(16px); }
.archive-search { position: relative; height: 54px; padding: 0 18px; display: flex; align-items: center; gap: 13px; background: linear-gradient(#292d31,#111315); clip-path: var(--notch); }
.archive-search::before { content: ""; position: absolute; inset: 3px; border: 1px solid #565c5f; clip-path: inherit; }
.archive-search:focus-within::before { border-color: var(--gold); }
.archive-search > span { position: relative; color: var(--gold-light); font: 27px/1 Georgia, serif; transform: rotate(-13deg); }
.archive-search input { position: relative; z-index: 2; width: 100%; border: 0; outline: 0; color: #f0eadf; background: transparent; font-size: 14px; letter-spacing: .03em; }
.archive-search input::placeholder { color: #959083; }
.archive-search kbd { position: relative; min-width: 26px; padding: 5px; border: 1px solid #5b6164; color: #b8b1a2; background: #0a0b0c; font: 11px/1 var(--condensed); text-align: center; }
.archive-sort { display: flex; align-items: center; gap: 18px; }
.archive-sort > label { color: #a49d8e; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.archive-sort select { min-height: 42px; padding: 0 38px 0 15px; border: 1px solid #4b5155; color: #eee6d5; background: #181b1e; font: 600 12px/1 var(--condensed); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.archive-sort button { min-height: 42px; padding: 0 16px; border: 0; color: #eee6d5; background: linear-gradient(#393e42,#151719); clip-path: var(--notch); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.archive-sort button b { margin-left: 10px; color: var(--gold-light); font-weight: 400; }

.archive-body { display: grid; grid-template-columns: 290px 1fr; min-height: 850px; }
.filters { position: sticky; top: 164px; align-self: start; height: calc(100svh - 164px); padding: 31px 28px; overflow: auto; border-right: 4px ridge #4b5053; background: linear-gradient(90deg,#111316,#1c1f22 50%,#0d0f11); }
.filters::before { content: ""; position: absolute; inset: 14px; pointer-events: none; border: 1px solid rgba(207,175,101,.22); clip-path: var(--notch); }
.filter-head { position: relative; padding: 0 8px 21px; display: flex; justify-content: space-between; border-bottom: 1px solid #3f4447; }
.filter-head span { color: #eee7da; font: 600 21px/1 var(--serif); }
.filter-head button, .records-empty button { padding: 0; border: 0; color: #aaa395; background: none; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.filters fieldset { position: relative; margin: 0; padding: 26px 7px; border: 0; border-bottom: 1px solid #3d4245; }
.filters legend { margin-bottom: 14px; color: var(--gold-light); font-size: 11px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.filters fieldset > button { position: relative; width: 100%; min-height: 39px; margin-bottom: 4px; padding: 0 10px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; border: 0; color: #aaa395; background: transparent; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); text-align: left; font-size: 13px; cursor: pointer; transition: color .25s, background .25s; }
.filters fieldset > button i { width: 9px; height: 9px; border: 1px solid #8a8f91; background: #101214; transform: rotate(45deg); }
.filters fieldset > button b { color: #8b867a; font-size: 11px; font-weight: 500; }
.filters fieldset > button:hover, .filters fieldset > button.active { color: #f1e7d1; background: linear-gradient(90deg, rgba(124,25,27,.72), transparent); }
.filters fieldset > button.active i { border-color: var(--gold-light); background: var(--oxblood); box-shadow: 0 0 10px rgba(201,166,107,.35); }
.filters label { min-height: 34px; display: flex; align-items: center; gap: 11px; color: #aaa395; font-size: 13px; cursor: pointer; }
.filters input[type="checkbox"] { appearance: none; width: 14px; height: 14px; margin: 0; border: 1px solid #8a8f91; background: #101214; transform: rotate(45deg); }
.filters input[type="checkbox"]:checked { border-color: var(--gold-light); background: var(--oxblood); box-shadow: inset 0 0 0 3px #151719; }
.cost-pills { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; }
.cost-pills button { height: 35px; padding: 0; border: 1px solid #4c5255; color: #b0aa9c; background: linear-gradient(#292d31,#111315); clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px); font-size: 13px; cursor: pointer; }
.cost-pills button:hover, .cost-pills button.active { color: #17110a; border-color: var(--gold-light); background: linear-gradient(#edc66e,#a9792f); }
.filter-note { margin: 27px 8px 0; color: #948d7e; font: italic 15px/1.55 var(--serif); }
.filter-note b { color: var(--gold-light); font-style: normal; }

.records { min-width: 0; padding: 34px clamp(24px,3vw,52px) 100px; }
.records-head { min-height: 48px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; }
.records-head p { margin: 0; color: #a49d8e; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.records-head p b { color: #f0e8d9; }
.records-head > div { display: flex; gap: 5px; }
.records-head button { min-height: 36px; padding: 0 15px; border: 0; color: #a29c8e; background: linear-gradient(#2b2f33,#111315); clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); font-size: 11px; font-weight: 600; text-transform: uppercase; cursor: pointer; }
.records-head button.active { color: #f4e7ca; background: linear-gradient(#852024,#4b0d0f); }
.record-grid { display: grid; grid-template-columns: repeat(4,minmax(190px,1fr)); align-items: start; gap: 31px 24px; }
.record-grid.list { grid-template-columns: 1fr; gap: 8px; }
.record-item { position: relative; min-width: 0; padding: 0; border: 0; color: inherit; background: none; text-align: left; cursor: pointer; perspective: 1200px; animation: record-in .45s both var(--ease); }
.record-item.landscape { grid-column: span 2; align-self: center; }
@keyframes record-in { from { opacity: 0; transform: translateY(16px); } }
.record-item:focus-visible { outline: 1px solid var(--gold-light); outline-offset: 7px; }
.record-item:hover .game-card { transform: translateY(-9px) rotateX(1.5deg) rotateY(-1deg); filter: drop-shadow(0 32px 38px rgba(0,0,0,.78)); }
.record-item:hover .card-sheen, .forge-pick:hover .card-sheen { opacity: .43; transform: translateX(160%) skewX(-15deg); }
.record-list-copy { display: none; }

.game-card { position: relative; width: 100%; overflow: hidden; border-radius: 22px; background: #070809; filter: drop-shadow(0 20px 22px rgba(0,0,0,.62)); transform-style: preserve-3d; transition: transform .45s var(--ease), filter .45s; }
.game-card.portrait { aspect-ratio: 1080 / 1514; }
.game-card.landscape { aspect-ratio: 1514 / 1080; }
.card-image { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.card-sheen { position: absolute; inset: -30% auto -30% -55%; width: 32%; pointer-events: none; opacity: 0; background: linear-gradient(90deg,transparent,rgba(255,250,226,.7),transparent); transform: translateX(0) skewX(-15deg); transition: transform .8s var(--ease), opacity .25s; mix-blend-mode: screen; }
.placeholder-card { --race-accent: #969da0; aspect-ratio: 1080 / 1514; padding: 12px; border: 1px solid color-mix(in srgb,var(--race-accent) 70%,#d4b56d); background: radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--race-accent) 20%,transparent),transparent 34%),linear-gradient(145deg,#2a2e32,#0d0f11 58%,#1b1e21); }
.placeholder-card[data-faction="human"] { --race-accent: #315b9d; }
.placeholder-card[data-faction="dwarf"] { --race-accent: #a67527; }
.placeholder-card[data-faction="elf"] { --race-accent: #2c7148; }
.placeholder-card[data-faction="orc"] { --race-accent: #9a292d; }
.placeholder-card-inner { position: relative; width: 100%; height: 100%; padding: 18%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; border: 1px solid color-mix(in srgb,var(--race-accent) 64%,#a7abad); border-radius: 14px; background: repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 1px,transparent 1px 13px); }
.placeholder-card-inner::before,.placeholder-card-inner::after { content: ""; position: absolute; left: 50%; width: 42%; height: 1px; background: linear-gradient(90deg,transparent,var(--race-accent),transparent); transform: translateX(-50%); }
.placeholder-card-inner::before { top: 11%; }.placeholder-card-inner::after { bottom: 11%; }
.placeholder-card-inner > span { color: #a9a293; font-size: clamp(10px,.65vw,12px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.placeholder-card-inner h3 { display: -webkit-box; margin: 19px -10% 13px; overflow: hidden; color: #f0e8da; font: 600 clamp(18px,1.5vw,29px)/1.05 var(--serif); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.placeholder-card-inner p { margin: 0; color: color-mix(in srgb,var(--race-accent) 58%,#d8d1c3); font-size: clamp(10px,.72vw,14px); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.placeholder-card-inner small { position: absolute; left: 10%; right: 10%; bottom: 5%; overflow: hidden; color: #7f7b72; font-size: clamp(9px,.56vw,11px); letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }

.record-grid.list .record-item { min-height: 92px; padding: 9px 18px; display: grid; grid-template-columns: 64px 1fr 28px; align-items: center; gap: 20px; background: linear-gradient(90deg,#202429,#0e1012); clip-path: polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px); }
.record-grid.list .record-item::before { content: ""; position: absolute; inset: 3px; border: 1px solid #41474a; clip-path: inherit; }
.record-grid.list .record-item.landscape { grid-column: auto; }
.record-grid.list .game-card { width: 64px; height: 72px; aspect-ratio: auto; border-radius: 8px; filter: none; }
.record-grid.list .game-card.landscape { height: 50px; align-self: center; }
.record-grid.list .record-list-copy { position: relative; display: grid; gap: 6px; }
.record-grid.list .record-list-copy b { color: #eee7d9; font: 600 21px/1 var(--serif); }
.record-grid.list .record-list-copy small { color: #aaa395; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.record-grid.list .record-item::after { content: "↗"; position: relative; grid-column: 3; color: var(--gold-light); font-size: 20px; }
.records-empty { min-height: 520px; display: grid; place-content: center; justify-items: center; text-align: center; }
.records-empty[hidden] { display: none; }
.records-empty span { color: var(--gold-light); font-size: 35px; }
.records-empty h2 { margin: 22px; color: #eee7da; font: 600 38px/1 var(--serif); }
.records-empty button { padding-bottom: 7px; border-bottom: 1px solid var(--line-hard); }

.forge-masthead { position: relative; height: 104px; padding: 0 31px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #454a4e; background: linear-gradient(90deg,#101214,#25292d 50%,#0b0d0e); }
.forge-masthead::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; border: 1px solid var(--gold); background: var(--oxblood); transform: rotate(45deg); }
.forge-masthead > div:first-child { display: grid; gap: 8px; }
.forge-masthead input { width: min(460px,55vw); padding: 0 0 4px; border: 0; border-bottom: 1px solid transparent; outline: 0; color: #f0e9dc; background: none; font: 600 31px/1 var(--serif); }
.forge-masthead input:focus { border-color: var(--gold); }
.forge-status { display: flex; align-items: center; gap: 19px; }
.forge-status span { color: #aaa395; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.forge-status button { min-height: 39px; padding: 0 13px; border: 0; color: #c2baaa; background: linear-gradient(#303438,#121416); clip-path: polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.forge-workspace { height: calc(100svh - 186px); display: grid; grid-template-columns: minmax(500px,1.15fr) minmax(370px,.74fr) minmax(280px,.48fr); }
.forge-library { min-width: 0; padding: 28px; overflow-y: auto; background: radial-gradient(circle at 50% 0,rgba(44,70,100,.11),transparent 25%); }
.forge-library-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.forge-library-head h2, .war-table-head h2 { margin: 0; color: #efe8da; font: 600 29px/1 var(--serif); }
.forge-library-head label { position: relative; width: min(300px,46%); height: 45px; padding: 0 14px; display: flex; align-items: center; gap: 10px; background: linear-gradient(#2a2e32,#101214); clip-path: var(--notch); }
.forge-library-head label::before { content: ""; position: absolute; inset: 3px; border: 1px solid #4d5356; clip-path: inherit; }
.forge-library-head label span { position: relative; color: var(--gold-light); }
.forge-library-head input { position: relative; z-index: 2; width: 100%; border: 0; outline: 0; color: #e7e0d2; background: none; font-size: 13px; }
.forge-factions { margin: 22px 0; padding-block: 9px; display: flex; gap: 5px; overflow-x: auto; border-block: 1px solid #3d4245; }
.forge-factions button { flex: 0 0 auto; height: 36px; padding: 0 12px; border: 0; color: #aaa395; background: linear-gradient(#292d31,#101214); clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; }
.forge-factions button.active { color: #f7e8c8; background: linear-gradient(#912326,#510d10); }
.forge-card-grid { display: grid; grid-template-columns: repeat(4,minmax(120px,1fr)); align-items: start; gap: 16px; }
.forge-pick { position: relative; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; }
.forge-pick.landscape { grid-column: span 2; align-self: center; }
.forge-pick .game-card { transition: transform .35s var(--ease), filter .3s; }
.forge-pick:hover .game-card { transform: translateY(-6px); }
.forge-pick.disabled .game-card { filter: grayscale(.7) brightness(.45); }
.forge-quantity { position: absolute; z-index: 15; right: 7px; top: 7px; width: 29px; height: 29px; display: none; place-items: center; border: 2px solid #e3c06b; border-radius: 50%; color: #f8e8c7; background: #721519; box-shadow: 0 5px 14px #000; font-size: 12px; font-weight: 600; }
.forge-quantity.visible { display: grid; }

.war-table { position: relative; min-height: 0; padding: 29px; display: flex; flex-direction: column; border-inline: 4px ridge #4e5457; background: radial-gradient(circle at 50% 25%,rgba(142,99,39,.11),transparent 36%),linear-gradient(90deg,#0d0f11,#1a1d20 50%,#0d0f11); transition: box-shadow .3s; }
.war-table::before { content: ""; position: absolute; inset: 13px; pointer-events: none; border: 1px solid rgba(209,177,103,.27); clip-path: var(--notch); }
.war-table.drop-ready { box-shadow: inset 0 0 0 3px var(--gold-light), inset 0 0 70px rgba(205,158,56,.12); }
.war-table-head { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; }
.war-table-head span { color: #a9a294; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.war-table-head h2 { margin-top: 7px; }
.war-table-head > i { width: 48%; height: 4px; overflow: hidden; background: #363b3f; transform: skewX(-18deg); }
.war-table-head > i b { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#6c1215,var(--gold-light)); transition: width .4s var(--ease); }
.legality { position: relative; z-index: 2; min-height: 64px; margin: 22px 0 15px; padding: 12px 14px; display: flex; align-items: center; gap: 13px; background: linear-gradient(#292d31,#111315); clip-path: polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); }
.legality::before { content: ""; position: absolute; inset: 2px; border: 1px solid #4e5457; clip-path: inherit; }
.legality > span { position: relative; color: var(--gold-light); }
.legality p { position: relative; margin: 0; color: #aaa395; font-size: 12px; line-height: 1.45; }
.legality p b { display: block; color: #eee6d7; }
.legality.valid { background: linear-gradient(#28553a,#112419); }
.deck-list { position: relative; z-index: 2; flex: 1; min-height: 140px; overflow-y: auto; }
.empty-legion { height: 100%; display: grid; place-content: center; justify-items: center; color: #8e887d; text-align: center; }
.empty-legion span { width: 52px; height: 52px; margin-bottom: 13px; display: grid; place-items: center; border: 1px solid #656b6e; color: var(--gold-light); background: #121416; transform: rotate(45deg); }
.empty-legion p { font: italic 15px/1.5 var(--serif); }
.deck-row { position: relative; min-height: 56px; margin-bottom: 6px; padding-right: 7px; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 11px; overflow: hidden; background: linear-gradient(90deg,#282c30,#111315); clip-path: polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px); animation: row-in .3s var(--ease); }
.deck-row::before { content: ""; position: absolute; inset: 2px; border: 1px solid #41474a; clip-path: inherit; pointer-events: none; }
@keyframes row-in { from { opacity: 0; transform: translateX(8px); } }
.deck-row img { width: 45px; height: 56px; object-fit: cover; border-radius: 7px; }
.deck-row-placeholder { width: 45px; height: 56px; display: grid; place-items: center; border: 1px solid #555b5f; border-radius: 7px; color: #aaa395; background: linear-gradient(#292d31,#101214); font-size: 9px; font-weight: 600; text-transform: uppercase; }
.deck-row-copy { position: relative; min-width: 0; }
.deck-row-copy b { display: block; overflow: hidden; color: #eee7d8; font: 600 15px/1.2 var(--serif); white-space: nowrap; text-overflow: ellipsis; }
.deck-row-copy span { color: #aaa395; font-size: 10px; text-transform: uppercase; }
.deck-row-controls { position: relative; display: flex; align-items: center; }
.deck-row-controls button { width: 28px; height: 30px; padding: 0; border: 0; color: #d8cfbd; background: #202428; cursor: pointer; }
.deck-row-controls b { min-width: 21px; font-size: 12px; text-align: center; }
.seal-deck { position: relative; z-index: 2; height: 57px; margin-top: 17px; padding: 0 21px; display: flex; align-items: center; justify-content: space-between; border: 0; color: #f7ead0; background: linear-gradient(#a3292c,#681114 54%,#3e090b); clip-path: var(--notch); font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; }
.seal-deck::before { content: ""; position: absolute; inset: 3px; border: 1px solid #d5a650; clip-path: inherit; }

.forge-analysis { position: relative; padding: 34px 29px; overflow-y: auto; background: linear-gradient(90deg,#0b0d0f,#191c1f); }
.forge-analysis::before { content: ""; position: absolute; inset: 14px; pointer-events: none; border: 1px solid rgba(209,177,103,.24); clip-path: var(--notch); }
.forge-analysis > * { position: relative; z-index: 2; }
.analysis-block { margin-top: 38px; padding-bottom: 31px; border-bottom: 1px solid #3d4245; }
.analysis-head { display: flex; align-items: baseline; justify-content: space-between; }
.analysis-head h3 { margin: 0; color: #eee7da; font: 600 21px/1 var(--serif); }
.analysis-head b { color: #aaa395; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.curve { height: 112px; margin-top: 20px; display: grid; grid-template-columns: repeat(7,1fr); align-items: end; gap: 6px; }
.curve-col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; }
.curve-col i { width: 100%; min-height: 3px; background: linear-gradient(var(--gold-light),#6e4d1c); clip-path: polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%,0 5px); transition: height .4s var(--ease); }
.curve-col span { color: #9d9688; font-size: 10px; }
.composition { margin-top: 19px; display: grid; gap: 10px; }
.composition-row { display: grid; grid-template-columns: 72px 1fr 20px; align-items: center; gap: 9px; color: #aaa395; font-size: 11px; text-transform: uppercase; }
.composition-row i { height: 4px; background: #353a3d; transform: skewX(-18deg); }
.composition-row i b { display: block; height: 100%; background: linear-gradient(90deg,#6d1417,var(--gold)); transition: width .4s; }
.composition-row > b { color: #e4dcce; text-align: right; }
.allegiances { margin-top: 18px; display: grid; gap: 8px; }
.allegiances p { margin: 0; color: #918b80; font: italic 14px/1 var(--serif); }
.allegiance { position: relative; padding: 12px 14px; display: flex; justify-content: space-between; color: #ded7c9; background: linear-gradient(#292d31,#111315); clip-path: polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px); font: 600 14px/1 var(--serif); }
.allegiance b { color: var(--gold-light); font: 600 11px/1 var(--condensed); }
.forge-analysis blockquote { margin: 48px 0 0; color: #888277; font: italic 18px/1.45 var(--serif); }

.record-dialog { width: min(1110px,calc(100vw - 34px)); max-height: calc(100svh - 28px); padding: 54px; grid-template-columns: minmax(300px,430px) 1fr; gap: 70px; align-items: center; overflow: auto; color: var(--bone); border: 0; background: linear-gradient(135deg,#292d31,#0c0e10 55%,#171a1d); clip-path: polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px); box-shadow: 0 60px 150px rgba(0,0,0,.86); }
.record-dialog::before { content: ""; position: absolute; inset: 5px; pointer-events: none; border: 1px solid rgba(222,186,102,.55); clip-path: inherit; }
.record-dialog[open] { display: grid; animation: dialog-in .45s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.record-dialog::backdrop { background: rgba(3,4,5,.9); backdrop-filter: blur(13px); }
.record-close { position: absolute; z-index: 20; right: 19px; top: 19px; width: 44px; height: 44px; border: 1px solid #71777a; color: #f0e6d4; background: linear-gradient(#34383c,#111315); clip-path: polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); font-size: 23px; cursor: pointer; }
.record-card .game-card { width: 100%; filter: drop-shadow(0 30px 30px rgba(0,0,0,.72)); }
.record-folio-head { padding-bottom: 17px; display: flex; justify-content: space-between; border-bottom: 1px solid #44494c; }
.record-folio-head span { color: #aaa395; font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.record-folio-head button { padding: 0; border: 0; color: #bbb3a4; background: none; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.record-folio > .folio { display: inline-flex; margin-top: 30px; }
.record-folio h2 { margin: 19px 0; color: #f0eadd; font: 600 clamp(52px,5vw,78px)/.86 var(--serif); letter-spacing: -.05em; }
.record-folio blockquote { margin: 27px 0; color: #b3ac9f; font: italic 18px/1.52 var(--serif); }
.record-folio dl { margin: 31px 0; display: grid; grid-template-columns: repeat(4,1fr); background: linear-gradient(#292d31,#111315); clip-path: var(--notch); }
.record-folio dl div { padding: 18px 13px; border-right: 1px solid #44494c; }
.record-folio dl div:last-child { border-right: 0; }
.record-folio dt { color: #9f988b; font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.record-folio dd { margin: 6px 0 0; color: #eee6d7; font: 600 18px/1 var(--serif); }
.record-rule small { color: var(--gold-light); font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.record-rule h3 { margin: 11px 0 7px; color: #efe7d9; font: 600 26px/1 var(--serif); }
.record-rule p { color: #aaa395; font: 500 16px/1.6 var(--serif); }
.add-from-record { position: relative; width: 100%; height: 58px; margin-top: 24px; padding: 0 21px; display: flex; align-items: center; justify-content: space-between; border: 0; color: #f7ead0; background: linear-gradient(#a4292c,#691114 54%,#3e090b); clip-path: var(--notch); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.add-from-record::before { content: ""; position: absolute; inset: 3px; border: 1px solid #d4a550; clip-path: inherit; }
.toast { position: fixed; z-index: 500; left: 50%; bottom: 27px; min-height: 48px; padding: 0 20px; display: flex; align-items: center; border: 1px solid var(--line-hard); color: #f0e7d6; background: linear-gradient(#2d3135,#101214); clip-path: polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); font-size: 12px; letter-spacing: .05em; transform: translate(-50%,18px); opacity: 0; pointer-events: none; transition: .35s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1320px) {
  .record-grid { grid-template-columns: repeat(3,minmax(180px,1fr)); }
  .forge-workspace { grid-template-columns: 1fr 390px; }
  .forge-analysis { display: none; }
  .forge-card-grid { grid-template-columns: repeat(4,minmax(115px,1fr)); }
}

@media (max-width: 940px) {
  .archive-header { grid-template-columns: 1fr auto; padding-inline: 18px; }
  .archive-brand img { width: 45px; height: 45px; }
  .mode-switch { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; height: 66px; padding: 6px; background: #0c0e10; border-top: 1px solid #4d5356; }
  .mode-switch button { flex: 1; height: 54px; }
  .archive-actions button { display: none; }
  .archive-actions a { font-size: 0; }
  .archive-actions a::after { content: "Return ↗"; font-size: 12px; }
  .archive-masthead { min-height: 500px; grid-template-columns: 1fr; padding: 110px 30px 50px; }
  .archive-stats { grid-column: 1; grid-row: auto; }
  .archive-tools { top: 82px; }
  .archive-body { grid-template-columns: 230px 1fr; }
  .filters { top: 164px; }
  .record-grid { grid-template-columns: repeat(2,minmax(160px,1fr)); }
  .forge-workspace { height: auto; min-height: calc(100svh - 250px); grid-template-columns: 1fr; }
  .forge-library { overflow: visible; }
  .forge-card-grid { grid-template-columns: repeat(4,minmax(120px,1fr)); }
  .war-table { min-height: 760px; border: 4px ridge #4e5457; }
  .record-dialog { gap: 38px; padding: 50px 32px; }
}

@media (max-width: 650px) {
  :root { --notch: polygon(9px 0,calc(50% - 6px) 0,50% 4px,calc(50% + 6px) 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px); }
  body { padding-bottom: 66px; }
  .archive-header { height: 70px; }
  .archive-brand span { display: none; }
  .archive-actions a::after { font-size: 12px; }
  .archive-tools { top: 70px; grid-template-columns: 1fr; padding: 10px 13px; }
  .archive-sort { display: none; }
  .archive-masthead { min-height: 520px; padding-inline: 20px; }
  .archive-masthead h1 { font-size: 96px; }
  .archive-stats { gap: 5px; }
  .archive-stats div { width: 95px; height: 103px; padding: 16px; }
  .archive-stats b { font-size: 29px; }
  .archive-body { display: block; }
  .filters { position: relative; top: 0; height: auto; padding: 18px 13px; border-right: 0; border-bottom: 4px ridge #4b5053; }
  .filters::before, .filter-head, .filters fieldset:not(:first-of-type), .filter-note { display: none; }
  .filters fieldset:first-of-type { padding: 0; display: flex; gap: 6px; overflow-x: auto; border: 0; }
  .filters fieldset:first-of-type legend { display: none; }
  .filters fieldset > button { flex: 0 0 auto; width: auto; padding: 0 12px; grid-template-columns: 12px 1fr; }
  .filters fieldset > button b { display: none; }
  .records { padding: 22px 12px 85px; }
  .record-grid { gap: 19px 12px; }
  .record-grid.list .record-item { grid-template-columns: 55px 1fr 24px; padding-inline: 10px; }
  .record-grid.list .game-card { width: 55px; }
  .record-grid.list .record-list-copy b { font-size: 18px; }
  .forge-masthead { height: 90px; padding-inline: 15px; }
  .forge-masthead input { font-size: 25px; }
  .forge-status span, .forge-status button:first-of-type { display: none; }
  .forge-library { padding: 20px 12px; }
  .forge-library-head { align-items: stretch; flex-direction: column; }
  .forge-library-head label { width: 100%; }
  .forge-card-grid { grid-template-columns: repeat(2,1fr); gap: 13px; }
  .war-table { padding: 23px 15px; }
  .record-dialog[open] { display: block; padding: 58px 21px 28px; }
  .record-card { width: min(320px,84vw); margin: 0 auto 38px; }
  .record-card:has(.landscape) { width: min(520px,88vw); }
  .record-folio dl { grid-template-columns: repeat(2,1fr); }
  .toast { bottom: 76px; max-width: calc(100vw - 30px); white-space: nowrap; }
}

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