:root {
  --sand:#c59a5b; --sand-light:#e1bd79; --ink:#1d1510; --cream:#f2dec0;
  --stone:#403128; --stone-dark:#17110d; --red:#9e251f; --red-bright:#d64b35;
  --bronze:#be7d32; --steel:#b9c0bd; --paper:#d9bd8d; --purple:#ae8cff;
}
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; margin:0; overflow:hidden; background:#090706; }
body { color:var(--cream); font-family:"Courier New", ui-monospace, monospace; image-rendering:pixelated; }
button,a,input { font:inherit; }
button { border:0; }
#game-shell { position:relative; width:100vw; height:100dvh; min-height:540px; overflow:hidden; background:#17110d; isolation:isolate; }
#game { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; image-rendering:pixelated; }
.top-strip { position:absolute; z-index:30; inset:0 0 auto 0; height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; background:linear-gradient(#0c0908e8,#0c0908b8); border-bottom:2px solid #6c4b2c; box-shadow:0 4px 0 #0005; }
.back,.icon-button,.save-state { color:#d9c7aa; font-size:10px; font-weight:900; letter-spacing:.13em; text-decoration:none; }
.back:hover { color:#fff; }
.save-state { display:flex; gap:7px; align-items:center; opacity:.72; }
.save-state i { width:7px; height:7px; background:#78a969; box-shadow:0 0 8px #78a969; }
.icon-button { padding:8px 10px; background:#211811; border:1px solid #684c31; color:#e5cfae; cursor:pointer; }
.icon-button:hover { background:#332419; }
#ui { position:absolute; z-index:12; inset:46px 0 0; pointer-events:none; display:flex; align-items:center; justify-content:center; padding:22px; }
#ui > * { pointer-events:auto; }
.screen { width:min(1060px,94vw); max-height:calc(100dvh - 78px); overflow:auto; scrollbar-width:thin; scrollbar-color:#795633 #19110c; }
.title-screen { align-self:stretch; display:grid; grid-template-columns:minmax(330px,1fr) minmax(290px,420px); gap:32px; align-items:center; overflow:visible; }
.brand-block { align-self:end; padding-bottom:8vh; text-shadow:4px 4px 0 #120b08; }
.brand-block .kicker { margin:0 0 9px; color:#d6ae6d; font-size:11px; font-weight:900; letter-spacing:.28em; }
.brand-block h1 { margin:0; font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size:clamp(64px,9vw,132px); line-height:.73; letter-spacing:-.045em; text-transform:uppercase; color:#f5dfb9; -webkit-text-stroke:2px #2b170f; }
.brand-block h1 span { color:#bd3728; }
.brand-block .tagline { margin:24px 0 0; max-width:560px; color:#c8a87a; font-size:12px; line-height:1.65; letter-spacing:.1em; }
.menu-panel,.panel { background:linear-gradient(145deg,#2b2017ed,#130f0bea); border:3px solid #725033; box-shadow:0 0 0 2px #160e09,10px 12px 0 #0006; }
.menu-panel { padding:19px; }
.menu-panel h2,.panel-title { margin:0 0 14px; color:#dfbd81; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.menu-stack { display:grid; gap:9px; }
.menu-button,.stone-button,.choice-card,.tab-button,.shop-item,.crew-card,.book-skill,.prep-card { position:relative; padding:15px 17px; color:#f4e1c1; background:linear-gradient(#55402d,#39291e); border:2px solid #806044; box-shadow:inset 0 1px #bb9666,0 3px 0 #160f0b; text-align:left; cursor:pointer; font-weight:900; letter-spacing:.08em; text-transform:uppercase; transition:transform .12s,filter .12s; }
.menu-button:hover,.stone-button:hover,.choice-card:hover,.tab-button:hover,.shop-item:hover,.crew-card:hover,.book-skill:hover,.prep-card:hover { filter:brightness(1.16); transform:translateY(-1px); }
.menu-button:active,.stone-button:active { transform:translateY(2px); box-shadow:inset 0 1px #bb9666,0 1px 0 #160f0b; }
.menu-button.primary,.stone-button.primary { color:#fff0d0; background:linear-gradient(#ad3a2b,#77231d); border-color:#d16d49; }
.menu-button small { display:block; margin-top:5px; color:#b89e7b; font-size:9px; letter-spacing:.08em; text-transform:none; }
.menu-button.primary small { color:#e6b6a3; }
.menu-meta { display:flex; justify-content:space-between; margin-top:15px; padding-top:12px; border-top:1px solid #6a4b3180; color:#9b8264; font-size:9px; letter-spacing:.08em; }
.screen-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:15px; padding:13px 16px; background:#1a120de8; border:2px solid #67482d; box-shadow:0 4px 0 #0006; }
.screen-heading h1 { margin:0; font:900 clamp(24px,4vw,43px)/.9 Impact, sans-serif; letter-spacing:.02em; color:#f2d8ab; text-transform:uppercase; }
.screen-heading p { margin:5px 0 0; color:#ac8d68; font-size:10px; letter-spacing:.09em; }
.resource-bar { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.resource { min-width:84px; padding:8px 10px; color:#bda17d; background:#0d0907d9; border:1px solid #614329; font-size:9px; letter-spacing:.1em; text-align:center; }
.resource b { display:block; margin-top:3px; color:#f3d69d; font-size:15px; }
.panel { padding:18px; }
.difficulty-row,.mode-row,.tabs,.action-row { display:flex; flex-wrap:wrap; gap:8px; }
.difficulty-row { margin:12px 0 18px; }
.tab-button { flex:1; min-width:120px; padding:10px; text-align:center; font-size:10px; }
.tab-button.active { color:#fff; background:#8b2a21; border-color:#c65e43; }
.choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.choice-card { min-height:250px; padding:18px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.choice-card .card-back { width:100%; height:122px; display:grid; place-items:center; background:repeating-linear-gradient(45deg,#241912 0 8px,#322217 8px 16px); border:3px solid #9b7046; box-shadow:inset 0 0 0 5px #1a110c; color:#b58950; font:900 38px Georgia,serif; }
.choice-card h3 { margin:13px 0 5px; font-size:14px; }
.choice-card p { margin:0; color:#c5a980; font-size:10px; line-height:1.5; }
.choice-card strong { margin-top:13px; color:#f2c66f; font-size:18px; }
.choice-card.locked { opacity:.35; pointer-events:none; }
.reveal-layout,.management-layout { display:grid; grid-template-columns:minmax(260px,39%) 1fr; gap:14px; }
.portrait-stage,.room-stage { position:relative; min-height:430px; overflow:hidden; background:linear-gradient(#786345b8 0 46%,#493526c4 46% 49%,#332319c9 49%); border:3px solid #765435; box-shadow:inset 0 0 70px #0007; }
.portrait-stage canvas,.room-stage canvas { width:100%; height:100%; image-rendering:pixelated; }
.paper-panel { padding:22px; color:#352318; background:linear-gradient(92deg,#c6a777,#e0c798 48%,#c6a777); border:3px solid #4f3320; box-shadow:inset 18px 0 25px #70502a3d,inset -18px 0 25px #70502a3d,8px 9px 0 #0005; }
.paper-panel h2 { margin:0 0 5px; font:900 30px Georgia,serif; color:#4f281d; }
.paper-panel .subtitle { margin:0 0 18px; color:#7e5637; font-size:10px; letter-spacing:.12em; }
.stat-list { display:grid; gap:8px; }
.stat-line { display:grid; grid-template-columns:78px 1fr 32px; align-items:center; gap:8px; color:#6c482d; font-size:10px; font-weight:900; }
.stat-meter { height:9px; background:#7b5c3d52; border:1px solid #7a5639; }
.stat-meter i { display:block; height:100%; background:#8c2b21; }
.field { display:grid; gap:5px; margin:12px 0; color:#6e492f; font-size:9px; font-weight:900; letter-spacing:.1em; }
.field input,.field select { width:100%; padding:11px 12px; color:#2d1d14; background:#ead2a6; border:2px solid #7b5537; outline:none; }
.cost-note { color:#7e4b2f; font-size:10px; line-height:1.5; }
.hub-nav { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-top:10px; }
.hub-nav .stone-button { padding:11px 6px; text-align:center; font-size:9px; }
.crew-grid,.shop-grid,.prep-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.crew-card,.shop-item,.prep-card { min-height:92px; text-transform:none; }
.crew-card h3,.shop-item h3,.prep-card h3 { margin:0 0 5px; color:#f0d4a3; font-size:12px; text-transform:uppercase; }
.crew-card p,.shop-item p,.prep-card p { margin:0; color:#b99d78; font-size:9px; line-height:1.45; }
.crew-card strong,.shop-item strong,.prep-card strong { display:block; margin-top:8px; color:#e9ba63; font-size:11px; }
.crew-card.disabled,.shop-item.disabled,.prep-card.disabled { filter:saturate(.25); opacity:.52; pointer-events:none; }
.section-note { margin:11px 0; color:#a88b68; font-size:10px; line-height:1.55; }
.book { display:grid; grid-template-columns:1fr 1fr; min-height:480px; color:#382319; background:linear-gradient(90deg,#c7a675,#e5c995 48.5%,#85633e 49.5%,#85633e 50.5%,#e5c995 51.5%,#c7a675); border:8px solid #3a2518; box-shadow:12px 15px 0 #0005; }
.book-page { padding:28px 34px; border:1px solid #8a6744; }
.book h2 { margin:0 0 18px; font:900 26px Georgia,serif; color:#4d2b20; }
.book p,.book li { color:#62432e; font-size:10px; line-height:1.65; }
.book-skill { width:100%; margin-bottom:8px; color:#3a2417; background:#d4b47f; border-color:#8f6841; box-shadow:0 2px #75502f; text-transform:none; }
.book-skill strong { display:block; color:#76271f; text-transform:uppercase; }
.book-skill small { display:block; margin-top:4px; }
.opponent-file { padding:16px; color:#3b2419; background:#d4b789; border:3px solid #5f3e26; transform:rotate(-.35deg); }
.opponent-file h2 { margin:0; font:900 27px Georgia,serif; }
.opponent-file .redacted { display:inline-block; min-width:82px; color:transparent; background:#33221a; user-select:none; }
.combat-hud { position:absolute; z-index:18; inset:57px 18px auto; display:grid; grid-template-columns:minmax(220px,1fr) 180px minmax(220px,1fr); gap:20px; pointer-events:none; transition:opacity .2s; }
.fighter-hud { padding:8px 10px 11px; background:linear-gradient(#17100de8,#251912df); border:2px solid #765334; box-shadow:0 4px 0 #0006; }
.enemy-hud { text-align:right; }
.hud-line { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; color:#d9b983; font-size:10px; letter-spacing:.1em; }
.hud-line strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f4deba; }
.health { position:relative; height:14px; overflow:hidden; background:#24100f; border:2px solid #59382b; }
.health i,.health b { position:absolute; inset:0 auto 0 0; width:100%; transition:width .18s; }
.health b { background:#e6af65; opacity:.55; transition:width .6s .08s; }
.health i { z-index:1; background:linear-gradient(90deg,#7e1e1b,#c7422e); }
.enemy-hud .health i,.enemy-hud .health b { left:auto; right:0; }
.injury-row { height:5px; margin-top:5px; display:flex; gap:2px; }
.enemy-hud .injury-row { justify-content:flex-end; }
.injury-row i { width:16%; background:#6f5134; }
.injury-row i.hurt { background:#ab382a; }
.fight-mark { align-self:start; text-align:center; color:#c09b6b; font-size:8px; letter-spacing:.18em; }
.fight-mark b { display:block; width:74px; margin:7px auto 0; padding:5px; color:#24150f; background:#d8ad69; border:2px solid #704926; font-size:9px; }
.touch-controls { position:absolute; z-index:25; inset:auto 10px 10px; display:flex; align-items:end; justify-content:space-between; gap:10px; pointer-events:none; }
.touch-cluster { display:flex; gap:6px; pointer-events:auto; }
.touch-controls button,.pause-button { min-width:54px; min-height:48px; padding:7px; color:#ecd6b4; background:#1f160fd8; border:2px solid #805b39; box-shadow:0 3px #0007; font-size:9px; font-weight:900; letter-spacing:.06em; touch-action:none; }
.touch-controls .attack { width:72px; height:64px; color:#fff0d2; background:#8d281fdd; border-color:#d56146; }
.pause-button { position:absolute; z-index:26; top:54px; left:50%; min-width:34px; min-height:31px; transform:translateX(-50%); }
.toast { position:absolute; z-index:45; left:50%; bottom:24px; max-width:80vw; padding:10px 15px; color:#f1d5aa; background:#21150fed; border:2px solid #8d6038; font-size:10px; font-weight:900; letter-spacing:.08em; opacity:0; transform:translate(-50%,12px); transition:.2s; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.hidden { display:none !important; }
.result-panel { width:min(720px,92vw); padding:22px; text-align:center; background:#19100ee8; border:4px solid #7b5333; box-shadow:0 0 0 3px #140c08,10px 12px 0 #0006; }
.result-panel h1 { margin:0; font:900 clamp(48px,8vw,82px)/.9 Impact,sans-serif; color:#d8b276; letter-spacing:.04em; }
.result-panel.defeat h1 { color:#b43a2b; }
.result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:18px 0; }
.result-stats div { padding:11px 6px; background:#2c1d15; border:1px solid #65462e; color:#9e8264; font-size:8px; }
.result-stats b { display:block; margin-top:4px; color:#f1cf99; font-size:14px; }
.pause-panel { width:min(420px,90vw); text-align:center; }
.pause-panel h1 { margin:0 0 17px; font:900 48px Impact,sans-serif; }
@media (hover:hover) and (pointer:fine) { .touch-controls { display:none !important; } }
@media (max-width:780px) {
  #game-shell { min-height:480px; }
  .top-strip { height:40px; padding:0 9px; }
  #ui { inset:40px 0 0; padding:10px; }
  .save-state { display:none; }
  .title-screen { grid-template-columns:1fr; align-content:center; gap:18px; }
  .brand-block { align-self:auto; padding:0; text-align:center; }
  .brand-block h1 { font-size:clamp(54px,17vw,90px); }
  .brand-block .tagline { margin:15px auto 0; max-width:440px; }
  .menu-panel { width:min(480px,100%); margin:auto; }
  .choice-grid { grid-template-columns:1fr; }
  .choice-card { min-height:132px; display:grid; grid-template-columns:110px 1fr; gap:12px; text-align:left; }
  .choice-card .card-back { grid-row:1/5; height:100%; }
  .choice-card strong { margin:0; }
  .reveal-layout,.management-layout { grid-template-columns:1fr; }
  .portrait-stage,.room-stage { display:none; }
  .hub-nav { grid-template-columns:repeat(3,1fr); }
  .crew-grid,.shop-grid,.prep-grid { grid-template-columns:1fr; }
  .book { grid-template-columns:1fr; max-height:72vh; overflow:auto; }
  .book-page { padding:20px; }
  .combat-hud { inset:47px 8px auto; grid-template-columns:1fr 1fr; gap:8px; }
  .fight-mark { display:none; }
  .hud-line { font-size:8px; }
  .fighter-hud { padding:6px; }
  .health { height:11px; }
  .result-stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-height:620px) and (orientation:landscape) {
  .top-strip { height:34px; }
  #ui { inset:34px 0 0; padding:7px; }
  .brand-block { padding-bottom:0; }
  .brand-block h1 { font-size:72px; }
  .brand-block .tagline { display:none; }
  .menu-panel { padding:10px; }
  .menu-button { padding:9px 12px; }
  .menu-meta { margin-top:8px; padding-top:7px; }
  .combat-hud { top:40px; }
  .touch-controls { bottom:5px; }
  .touch-controls button { min-height:38px; }
  .touch-controls .attack { height:50px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }