/* ===== Dusthollow — sepia dust palette, blood-red accents, western slab serif ===== */
@font-face { font-family:'Rye'; src:url('../fonts/rye.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Roboto Slab'; src:url('../fonts/roboto-slab-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Roboto Slab'; src:url('../fonts/roboto-slab-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Caveat'; src:url('../fonts/caveat-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Caveat'; src:url('../fonts/caveat-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --paper:#e6d5ae; --paper-dark:#cfb98c; --ink:#33251a; --ink-soft:#5a4630;
  --dust:#c9a76f; --blood:#8e1f1f; --blood-bright:#b32424;
  --night:#10141f; --gold:#d9a441;
  --serif:'Roboto Slab',Georgia,serif; --display:'Rye',var(--serif); --hand:'Caveat',cursive;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{width:100%;height:100%;overflow:hidden;background:#0c0a07;font-family:var(--serif);color:var(--paper);}
#app,#app canvas{position:fixed;inset:0;width:100%;height:100%;display:block;}
.hidden{display:none !important;}
.key{display:inline-block;min-width:1.6em;padding:.1em .45em;border:1px solid rgba(230,213,174,.55);border-bottom-width:3px;border-radius:4px;font-family:var(--serif);font-weight:700;font-size:.85em;text-align:center;color:var(--paper);background:rgba(30,22,14,.7);}
button{font-family:var(--serif);cursor:pointer;}

/* ===== HUD (diegetic, fades when idle) ===== */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:1;transition:opacity 1.2s ease;}
#hud.idle{opacity:0;}
#hud-topright{position:absolute;top:18px;right:22px;text-align:right;text-shadow:0 1px 3px rgba(0,0,0,.8);}
#hud-clock{font-size:14px;letter-spacing:.12em;color:var(--paper);opacity:.9;}
#hud-wanted{margin-top:6px;font-family:var(--display);font-size:15px;color:var(--blood-bright);letter-spacing:.18em;text-shadow:0 0 12px rgba(179,36,36,.5);}
#hud-bottomleft{position:absolute;left:22px;bottom:20px;}
.bar-row{display:flex;align-items:center;gap:8px;margin-top:6px;}
.bar-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(230,213,174,.75);width:52px;text-align:right;text-shadow:0 1px 2px #000;}
.bar{width:120px;height:5px;background:rgba(12,10,7,.65);border:1px solid rgba(230,213,174,.35);border-radius:3px;overflow:hidden;}
.bar-fill{height:100%;width:100%;transition:width .25s ease;}
.bar-fill.health{background:linear-gradient(90deg,#7e1d1d,#b32424);}
.bar-fill.stamina{background:linear-gradient(90deg,#8f7434,#d9a441);}
.bar-fill.horse{background:linear-gradient(90deg,#6f5138,#a97d4e);}
#hud-bottomright{position:absolute;right:22px;bottom:20px;text-align:right;text-shadow:0 1px 3px #000;}
#hud-money{font-family:var(--display);font-size:20px;color:var(--paper);letter-spacing:.06em;}
#hud-ammo{font-size:14px;margin-top:4px;color:rgba(230,213,174,.9);}
.ammo-icon{color:var(--gold);}
#hud-honor{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(230,213,174,.6);margin-top:4px;}
#prompt,#prompt2{position:absolute;left:50%;transform:translateX(-50%);background:rgba(20,15,9,.78);border:1px solid rgba(230,213,174,.3);padding:7px 14px;border-radius:4px;font-size:14px;letter-spacing:.04em;text-shadow:0 1px 2px #000;}
#prompt{bottom:96px;} #prompt2{bottom:140px;}
#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:26px;color:rgba(230,213,174,.85);text-shadow:0 0 4px #000;}
#hitmarker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:20px;color:var(--blood-bright);text-shadow:0 0 6px #000;}

/* banner + toast + dialog */
#banner{position:fixed;top:22%;left:0;right:0;text-align:center;z-index:11;pointer-events:none;animation:bannerIn 4.2s ease forwards;}
#banner-title{font-family:var(--display);font-size:52px;letter-spacing:.28em;color:var(--paper);text-shadow:0 2px 14px rgba(0,0,0,.85);}
#banner-sub{font-family:var(--hand);font-size:26px;color:var(--dust);letter-spacing:.1em;}
@keyframes bannerIn{0%{opacity:0;transform:translateY(8px);}12%{opacity:1;transform:none;}80%{opacity:1;}100%{opacity:0;}}
#toast-wrap{position:fixed;top:14%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:11;pointer-events:none;}
.toast{background:rgba(20,15,9,.82);border:1px solid rgba(230,213,174,.28);border-left:3px solid var(--gold);padding:7px 16px;font-size:13.5px;letter-spacing:.05em;border-radius:3px;animation:toastIn 4.5s ease forwards;text-shadow:0 1px 2px #000;}
.toast.crime{border-left-color:var(--blood-bright);color:#f0c9c0;}
@keyframes toastIn{0%{opacity:0;transform:translateY(-6px);}8%{opacity:1;transform:none;}85%{opacity:1;}100%{opacity:0;}}
#dialog-line{position:fixed;bottom:170px;left:0;right:0;text-align:center;font-family:var(--hand);font-size:24px;color:var(--paper);text-shadow:0 1px 4px #000;z-index:11;pointer-events:none;}

/* ===== Title screen ===== */
#title-screen{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(ellipse at 50% 68%, rgba(217,164,65,.22), transparent 55%),
  linear-gradient(180deg,#1a130c 0%,#3d2b18 46%,#7a5a30 72%,#b5854a 100%);}
.title-vignette{position:absolute;inset:0;box-shadow:inset 0 0 220px 60px rgba(0,0,0,.85);}
.title-inner{position:relative;text-align:center;padding:24px;max-width:760px;}
.title-eyebrow{font-family:var(--hand);font-size:26px;color:var(--dust);letter-spacing:.12em;}
.title-logo{font-family:var(--display);font-size:clamp(34px,8vw,96px);letter-spacing:.14em;color:var(--paper);text-shadow:0 3px 0 #6b4c26,0 6px 24px rgba(0,0,0,.7);margin:6px 0 2px;white-space:nowrap;}
.title-sub{font-size:15px;letter-spacing:.5em;text-transform:uppercase;color:rgba(230,213,174,.85);}
.title-rule{color:var(--gold);margin:18px 0;letter-spacing:1.2em;text-indent:1.2em;}
#begin-btn{font-family:var(--display);font-size:22px;letter-spacing:.2em;color:var(--paper);background:linear-gradient(180deg,#7c221d,#5c1713);border:1px solid #d9a44155;border-bottom:3px solid #2c0c0a;padding:12px 46px;border-radius:3px;text-shadow:0 1px 3px #000;transition:transform .15s ease,filter .15s;}
#begin-btn:hover{transform:translateY(-2px);filter:brightness(1.15);}
.title-controls{display:flex;gap:38px;justify-content:center;margin-top:30px;text-align:left;font-size:13.5px;line-height:2.05;color:rgba(230,213,174,.9);}
.title-note{margin-top:22px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(230,213,174,.45);}

/* ===== Pause menu ===== */
#pause-menu{position:fixed;inset:0;z-index:30;background:rgba(10,8,5,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;}
.pause-frame{width:min(1000px,94vw);height:min(720px,92vh);background:linear-gradient(160deg,#e2d0a6,#cbb488);color:var(--ink);border:1px solid #8a6d3f;box-shadow:0 20px 80px rgba(0,0,0,.8), inset 0 0 90px rgba(122,90,48,.28);border-radius:3px;display:flex;flex-direction:column;overflow:hidden;}
.pause-tabs{display:flex;border-bottom:2px solid #8a6d3f;background:rgba(51,37,26,.08);}
.ptab{font-family:var(--display);font-size:15px;letter-spacing:.14em;padding:14px 26px;background:none;border:none;color:var(--ink-soft);border-right:1px solid rgba(138,109,63,.4);}
.ptab.active{color:var(--ink);background:rgba(51,37,26,.12);box-shadow:inset 0 -3px 0 var(--blood);}
#resume-btn{margin-left:auto;font-family:var(--display);font-size:15px;letter-spacing:.12em;padding:0 26px;background:var(--blood);color:var(--paper);border:none;}
.pause-body{flex:1;overflow:hidden;padding:14px;}
.ptab-page{height:100%;}
#map-canvas{width:100%;height:100%;display:block;border:1px solid rgba(138,109,63,.55);background:#e6d5ae;}
#tab-journal{display:flex;gap:18px;}
#journal-side{width:230px;flex:none;}
#journal-side h3{font-family:var(--display);letter-spacing:.14em;font-size:15px;margin:12px 0 8px;color:var(--ink);border-bottom:1px solid rgba(138,109,63,.6);padding-bottom:4px;}
#honor-meter{position:relative;height:12px;background:linear-gradient(90deg,#8e1f1f,#c9a76f 50%,#3f6f3f);border:1px solid #8a6d3f;border-radius:6px;}
#honor-needle{position:absolute;top:-4px;width:3px;height:18px;background:var(--ink);left:50%;transition:left .4s;}
#honor-label{font-family:var(--hand);font-size:22px;text-align:center;margin-top:6px;}
#journal-stats{font-size:13px;line-height:1.9;color:var(--ink-soft);}
#journal-list{flex:1;overflow-y:auto;font-family:var(--hand);font-size:21px;line-height:1.5;color:#2e2115;padding-right:8px;}
.journal-entry{margin-bottom:10px;padding-left:14px;border-left:2px solid rgba(142,31,31,.5);}
.journal-entry .jtime{font-family:var(--serif);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:block;}
.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;font-size:14px;line-height:2;padding:10px;color:var(--ink);}
.controls-grid .key{border-color:rgba(51,37,26,.5);color:var(--ink);background:rgba(255,250,235,.5);}

/* ===== Panel UIs (shop / sheriff / campfire) ===== */
.panel-ui{position:fixed;inset:0;z-index:28;background:rgba(10,8,5,.6);display:flex;align-items:center;justify-content:center;}
.panel-frame{width:min(560px,92vw);max-height:86vh;overflow-y:auto;background:linear-gradient(160deg,#e2d0a6,#cbb488);color:var(--ink);border:1px solid #8a6d3f;box-shadow:0 16px 60px rgba(0,0,0,.75);border-radius:3px;padding:22px 26px;}
.panel-frame h2{font-family:var(--display);letter-spacing:.14em;font-size:22px;border-bottom:2px solid #8a6d3f;padding-bottom:8px;margin-bottom:10px;}
.panel-money{font-size:13.5px;margin-bottom:12px;color:var(--ink-soft);}
.shop-item{display:flex;align-items:center;justify-content:space-between;padding:9px 4px;border-bottom:1px dashed rgba(138,109,63,.5);font-size:14.5px;}
.shop-item .si-name{font-weight:700;}
.shop-item .si-desc{font-size:12px;color:var(--ink-soft);}
.shop-item button{font-family:var(--serif);font-weight:700;font-size:13px;padding:5px 14px;background:var(--ink);color:var(--paper);border:none;border-radius:3px;}
.shop-item button:disabled{opacity:.4;cursor:default;}
.shop-item button.sell{background:var(--blood);}
.panel-close{margin-top:16px;width:100%;padding:10px;font-family:var(--display);letter-spacing:.14em;font-size:15px;background:var(--ink);color:var(--paper);border:none;border-radius:3px;}
.wanted-poster{text-align:center;border:2px solid var(--blood);padding:16px;margin:8px 0;background:rgba(142,31,31,.06);}
.wanted-poster .wp-title{font-family:var(--display);font-size:26px;color:var(--blood);letter-spacing:.2em;}
.wanted-poster .wp-amt{font-size:20px;margin:8px 0;}
.camp-btn{display:block;width:100%;margin:8px 0;padding:10px;font-family:var(--serif);font-weight:700;font-size:14.5px;background:var(--ink);color:var(--paper);border:none;border-radius:3px;text-align:left;padding-left:16px;}
.camp-btn:disabled{opacity:.4;}
.camp-btn small{display:block;font-weight:400;font-size:11.5px;opacity:.75;}

/* ===== Poker ===== */
#poker-ui{position:fixed;inset:0;z-index:29;background:rgba(8,6,4,.78);display:flex;align-items:center;justify-content:center;}
.poker-frame{width:min(760px,95vw);background:radial-gradient(ellipse at 50% 30%,#3d5a40,#233528 70%);border:6px solid #4a3319;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.9), inset 0 0 60px rgba(0,0,0,.5);padding:20px 26px;color:var(--paper);text-align:center;}
.poker-frame h2{font-family:var(--display);letter-spacing:.2em;font-size:20px;color:var(--gold);}
#poker-pot{font-family:var(--display);font-size:16px;margin:6px 0 10px;}
#poker-table{display:flex;justify-content:center;gap:22px;margin-bottom:12px;}
.poker-opp{font-size:12.5px;opacity:.95;}
.poker-opp .opp-name{font-weight:700;letter-spacing:.06em;}
.poker-opp .opp-cards{display:flex;gap:3px;justify-content:center;margin:5px 0;min-height:44px;}
.pcard{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:34px;height:46px;background:#f3ead2;color:#2a2016;border-radius:4px;border:1px solid #b8a67e;font-weight:700;font-size:15px;box-shadow:0 2px 4px rgba(0,0,0,.5);user-select:none;}
.pcard.red{color:#a12222;}
.pcard.back{background:repeating-linear-gradient(45deg,#6d1f1f,#6d1f1f 4px,#551616 4px,#551616 8px);border-color:#8a6d3f;}
.pcard.selected{transform:translateY(-9px);box-shadow:0 0 0 2px var(--gold),0 4px 8px rgba(0,0,0,.6);}
#poker-hand{display:flex;gap:8px;justify-content:center;margin:10px 0 6px;min-height:64px;}
#poker-hand .pcard{width:46px;height:64px;font-size:19px;cursor:pointer;}
#poker-msg{min-height:22px;font-family:var(--hand);font-size:21px;color:#e8d8b8;}
#poker-actions{display:flex;gap:10px;justify-content:center;margin-top:8px;min-height:38px;}
#poker-actions button{font-family:var(--serif);font-weight:700;font-size:14px;padding:8px 20px;border:none;border-radius:4px;background:var(--paper);color:var(--ink);}
#poker-actions button.act-blood{background:var(--blood);color:var(--paper);}
#poker-actions button:disabled{opacity:.4;cursor:default;}

/* ===== Death / fade / mobile ===== */
#death-screen{position:fixed;inset:0;z-index:38;background:radial-gradient(ellipse at center,rgba(70,8,8,.88),rgba(12,2,2,.97));display:flex;flex-direction:column;align-items:center;justify-content:center;animation:deathIn 2.5s ease;}
.death-word{font-family:var(--display);font-size:96px;letter-spacing:.3em;color:#caa;}
.death-sub{font-family:var(--hand);font-size:26px;color:rgba(230,213,174,.7);margin-top:8px;}
@keyframes deathIn{from{opacity:0;}to{opacity:1;}}
#fade{position:fixed;inset:0;z-index:36;background:#000;opacity:0;pointer-events:none;transition:opacity .6s ease;}
#fade.on{opacity:1;pointer-events:all;}
#mobile-note{display:none;position:fixed;inset:auto 0 0 0;z-index:50;background:var(--blood);color:var(--paper);text-align:center;font-size:13px;padding:8px 14px;letter-spacing:.04em;}
@media (max-width:820px), (pointer:coarse) and (max-width:1024px){
  #mobile-note{display:block;}
  .title-controls{flex-direction:column;gap:8px;align-items:center;text-align:center;}
  #banner-title{font-size:34px;}
  .controls-grid{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .pause-frame{height:96vh;}
  #tab-journal{flex-direction:column;}
  #journal-side{width:100%;}
  #hud-bottomleft{left:12px;bottom:34px;} #hud-bottomright{right:12px;bottom:34px;}
}