/* Field journal: original etched artwork, warm gunmetal, red ink and stamped edges.
   Decorative layers never intercept controls or add per-frame canvas work. */
:root { --panel: #1b1a18; --panel-2: #292521; --line: #51463c; --muted: #b3aaa0; --paper: #eadbc3; }
#home { isolation: isolate; }
#home::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #111310dd, #1413109c 30%, #0d0e0de8), url('../assets/ui/command-etch.svg') center 100px / 900px auto no-repeat; }
.topbar { border-bottom: 1px solid #d4b68925; background: linear-gradient(180deg,#0c0e0be8,transparent); }
.page { gap: 17px; }
.card { position: relative; background: linear-gradient(115deg,#322c2345,transparent 45%), #1b1a18;
  border: 1px solid #b49b7238; box-shadow: 0 3px 0 #080908, 0 0 0 2px #151410, inset 0 1px #eddbc012; }
.card::before { content: ''; position: absolute; pointer-events: none; inset: 4px; border: 1px solid #d9bd8b0c; }
.card h3, .section-title { color: #f27661; letter-spacing: .065em; }
.card h3 { padding-bottom: 9px; border-bottom: 1px solid #9f897234; }
.home-profile { border-left: 3px solid #c8483f; background: url('../assets/ui/command-etch.svg') right 40% / 450px auto, linear-gradient(115deg,#33291f,#1c1b19 65%); }
.home-profile .avatar { background: #0b0e0c; outline: 1px solid #b6a18067; outline-offset: 3px; }
.who-name { text-shadow: 1px 2px #070907; }
.lvl .bar { background: #090c0b; height: 6px; }
.lvl .bar i { background: linear-gradient(90deg,#a52628,#e96e51); box-shadow: 0 0 9px #e753383b; }
.rank-badge { filter: drop-shadow(0 3px 0 #0008); }
.chip { background: linear-gradient(160deg,#30281f,#171815); border: 1px solid #84705766; box-shadow: 0 2px #050705, inset 0 1px #ead3a824; }
.play-stack { position: relative; }
.play-stack .play { overflow: hidden; isolation: isolate; min-height: 126px; padding: 23px 12px 20px;
  background: linear-gradient(100deg,#ba2229b0,#e13035db 48%,#b71f2790), url('../assets/ui/command-etch.svg') center / cover, #c02a2d;
  border: 1px solid #ffab8c; box-shadow: 0 4px #5e171b, 0 0 0 3px #221b17, inset 0 2px #ffd9b65c, inset 0 -5px #77171d;
  transition: transform .14s, filter .18s, box-shadow .18s; }
.play-stack .play::before { content: ''; position: absolute; pointer-events: none; inset: 7px 6px 11px;
  border: 1px solid #ffe0c04a; transform: rotate(-.4deg); z-index: -1; }
.play-stack .play::after { content: ''; position: absolute; pointer-events: none; bottom: 12px; left: 14px; width: 26px; height: 3px; background: #f8c89b75; box-shadow: 0 -5px #f8c89b35; }
.play-stack .play b { text-shadow: 2px 3px #791d20; letter-spacing: .055em; }
.play-stack .play small { color: #ffe5cc; }
.play-stack .play:active { transform: translateY(3px); filter: brightness(1.12); }
.play-stack .mode-pick.attached { background: linear-gradient(120deg,#30291f,#1c1b18); box-shadow: 0 3px #080b08, inset 0 -1px #bca47c7a; padding-top: 14px; }
.mp-label { color: #dfa882; letter-spacing: .16em; }
.mode-opt { border: 1px solid #8c76534d; background: #29261f; }
.mode-opt.on { background: linear-gradient(100deg,#8d272b,#4c2324); border-color: #f17d62; }
.btn:not(.ghost) { background-image: linear-gradient(160deg,#fff1d010,#0002); border: 1px solid #d0b59030;
  box-shadow: 0 3px #080a07, inset 0 1px #fff0d025, inset 0 -3px #0004; }
.btn.primary { background-color: #b93135; border-color: #ed987f; }
.btn:not(.ghost):active { box-shadow: 0 1px #080a07, inset 0 1px #fff0d025; }
.btn.ghost { color: #c6bcac; }
.save-chip { background: linear-gradient(110deg,#28251f,#171a16); border-color: #ae8b6877; }
.tabbar { background: linear-gradient(#24251f,#111410); border-top: 1px solid #ab92635c; box-shadow: 0 -6px 18px #0005; }
.tabbar button { min-height: 52px; color: #b6ad9c; transition: background .18s, color .18s, transform .14s; }
.tabbar button.on { background: linear-gradient(150deg,#aa272d,#651d24); box-shadow: inset 0 2px #fa9a79, inset 0 0 0 1px #d55a4344; }
.tabbar button:active { transform: translateY(2px); }
.sheet-box { background: linear-gradient(130deg,#30291f,#181b17 65%); border: 1px solid #b59a7366; box-shadow: 0 10px 45px #0009, inset 0 1px #efd3a72b; }
.subtabs button, .slots button, .locker-arrow { background-color: #25291f; border-bottom: 2px solid #85715344; }
.subtabs button.on, .slots button.on { background: #89282c; border-color: #f3aa7c; }
.ab { outline: 1px solid #e6ce9b3a; outline-offset: 2px; }
.tac, .perk, .wrow { border-color: #ad977038; }
.tactic-loadout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.tactic-loadout .slot { min-width: 0; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 8px; padding: 10px 8px; border: 1px solid #c4a77835; }
.tactic-loadout .slot .ab { width: 30px; height: 34px; }
.tactic-loadout .slot .wi { width: 26px; height: 26px; }
.tactic-loadout .slot > span { min-width: 0; }
.tactic-loadout .slot b { font-size: 20px; overflow-wrap: anywhere; }
.tactic-loadout .slot small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; }
.tactic-loadout .slot.on { background: linear-gradient(140deg,#aa3032,#592325); border-color: #ed987f; }
.preview, .loadout, .locker-selector { background-color: #171c1680; }
.item { border-color: #a08a6455; }
.day.next { background-color: #3e3023; box-shadow: inset 0 0 0 1px #efbd68; }
.house-promo { background: #161914; }
/* Keep the battlefield clear; material/detail lives on the command console. */
.dock { background-image: linear-gradient(150deg,#2b2a23eb,#101410f2); border-top-color: #c1a87b65; }
.tbtn { border-color: #ab98713f; box-shadow: inset 0 1px #ead3a822, 0 2px #0005; transition: transform .12s, background .15s; }
.tbtn:active { transform: translateY(2px); }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #ffca8c; outline-offset: 4px; }
@media (hover:hover) { .btn:not(:disabled):hover, .chip:hover, .mode-pick:hover { filter: brightness(1.16); } .play-stack .play:hover { filter: brightness(1.08); } }
@media (prefers-reduced-motion:no-preference) {
  .play-stack .play { animation: field-ready 5s ease-in-out infinite; }
  @keyframes field-ready { 50% { box-shadow: 0 4px #5e171b, 0 0 0 3px #221b17, 0 0 22px #e3402426, inset 0 2px #ffd9b65c, inset 0 -5px #77171d; } }
}
@media (prefers-reduced-motion:reduce) { .play-stack .play, .tabbar button, .tbtn { animation: none; transition: none; } }
@media (max-width:350px) { .page { padding-left: 12px; padding-right: 12px; } .play-stack .play { min-height: 116px; } }

/* Field intelligence stays compact and expands only when requested. */
.war-more, .war-condition-sheet { margin:10px 0; border:1px solid #766246; background:#181713; box-shadow:2px 2px 0 #080807; }
.war-more > summary, .war-condition-sheet > summary { padding:12px; min-height:44px; box-sizing:border-box; cursor:pointer; color:#eed9ad; }
.war-condition-sheet .bc-conditions, .wc-in > .bc-conditions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; }
.war-condition-sheet .bc-condition small, .wc-in .bc-condition small { display:block; font-size:11px; line-height:1.3; color:#ddd3bd; }
.war-condition-sheet .bc-condition b, .wc-in .bc-condition b { color:#e6c783; }
.war-more > summary:focus-visible, .war-condition-sheet > summary:focus-visible { outline:2px solid #f4cf80; outline-offset:2px; }

.war-service { padding:0 12px 8px; color:#d9d0be; font-size:13px; line-height:1.4; }

@keyframes war-front-gain { from { width:var(--from); } }
@media (prefers-reduced-motion:reduce) { .wr-pbar > i { animation:none !important; } }

.pf-service { padding:10px; margin:10px 0; border:1px solid #6d5c3f; background:linear-gradient(115deg,#24231b,#141512); box-shadow:2px 2px 0 #070807; }
.pf-service h3 { display:flex; gap:6px; align-items:center; margin:0; color:#e5cc92; font-size:17px; } .pf-service h3 b { margin-left:auto; }
.pf-service p { margin:6px 0; font-size:12px; color:#d6d0bd; } .pf-service > small { display:block; font-size:11px; color:#aaa28d; }
.pf-war-ribbon { display:flex; gap:8px; align-items:center; margin-top:9px; padding:7px; border-left:3px solid #a19577; background:#0c0e0b; color:#e4d4b0; }
.pf-war-ribbon.victory { border-color:#e2bd65; } .pf-war-ribbon small { display:block; font-size:11px; color:#b2ad98; }

.war-spoil-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; } .war-spoil-grid > div { padding:8px; background:#151711; border:1px solid #766648; } .war-spoil-grid canvas { width:100%; height:66px; image-rendering:pixelated; } .war-spoil-grid b, .war-spoil-grid small { display:block; font-size:12px; } .war-spoil-grid small { color:#c9af77; }

.wr-cine-close { pointer-events:auto; align-self:flex-start; min-height:32px; padding:4px 7px; border:1px solid #a88c59; background:#292017; color:#ecd4a2; font:12px var(--display); cursor:pointer; } .wr-cine-close:focus-visible { outline:2px solid #f2d283; }