/* ========================================================================
   BLACKTHORN MANOR · v0.22 Alpha 1 visual redesign
   Presentation-only layer. Existing game engine / Supabase behaviour retained.
   ======================================================================== */
:root{
  --bm-black:#0b0a08;
  --bm-ink:#17130e;
  --bm-charcoal:#12110f;
  --bm-charcoal-2:#191714;
  --bm-panel:#171512;
  --bm-gold:#b88b45;
  --bm-gold-bright:#d0a664;
  --bm-gold-dim:#755b31;
  --bm-burgundy:#5a1119;
  --bm-burgundy-2:#731b25;
  --bm-burgundy-dark:#360b10;
  --bm-parchment:#ddc79f;
  --bm-parchment-light:#eadbbd;
  --bm-parchment-dark:#bda47d;
  --bm-parchment-ink:#241a10;
  --bm-muted:#a7977f;
  --bg:var(--bm-black);
  --panel:var(--bm-panel);
  --panel2:var(--bm-charcoal-2);
  --line:rgba(184,139,69,.48);
  --ink:#efe2ca;
  --muted:var(--bm-muted);
  --accent:var(--bm-gold);
  --danger:#8b3038;
  --ok:#6f826d;
  --shadow:0 18px 45px rgba(0,0,0,.38);
}

html{background:#070705}
body{
  background:
    radial-gradient(circle at 50% -15%,rgba(111,69,28,.24),transparent 35%),
    radial-gradient(circle at 5% 20%,rgba(88,18,26,.16),transparent 30%),
    linear-gradient(135deg,#090806,#12100d 48%,#070706);
  color:var(--ink);
  font-family:Georgia,'Palatino Linotype','Book Antiqua',Palatino,serif;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.2;z-index:-1;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.02) 0 1px,transparent 1px 5px);
}

.app-shell{max-width:1220px}
.app-shell.theme-dead{filter:saturate(.28)}

h1,h2,h3,.brand,.kicker,button,.tabs{font-family:Georgia,'Palatino Linotype','Book Antiqua',Palatino,serif}
h1{font-weight:500;letter-spacing:.07em}
h2{font-weight:500;color:#f1dcb6;letter-spacing:.035em}
h3{font-weight:500;color:#ead3aa}

/* Decorative frame language borrowed from the printed cards */
.card,
.event-strip,
.setup-modal{
  position:relative;
  border-radius:2px;
  border:1px solid var(--bm-gold-dim);
  background:
    linear-gradient(90deg,rgba(184,139,69,.045),transparent 14%,transparent 86%,rgba(184,139,69,.045)),
    linear-gradient(180deg,rgba(25,23,20,.98),rgba(11,10,8,.99));
  box-shadow:0 14px 38px rgba(0,0,0,.32),inset 0 0 0 3px rgba(0,0,0,.28);
}
.card::before,.card::after,.setup-modal::before,.setup-modal::after{
  content:"";position:absolute;width:20px;height:20px;pointer-events:none;opacity:.85;
}
.card::before,.setup-modal::before{left:6px;top:6px;border-left:1px solid var(--bm-gold);border-top:1px solid var(--bm-gold)}
.card::after,.setup-modal::after{right:6px;bottom:6px;border-right:1px solid var(--bm-gold);border-bottom:1px solid var(--bm-gold)}
.card>*{position:relative;z-index:1}

.topbar{
  position:relative;padding:15px 18px;margin:0 0 12px;
  border:1px solid var(--bm-gold-dim);border-radius:2px;
  background:linear-gradient(180deg,rgba(17,16,14,.98),rgba(8,8,7,.98));
  box-shadow:inset 0 -1px 0 rgba(184,139,69,.25),0 12px 28px rgba(0,0,0,.2);
}
.topbar::before,.topbar::after{content:"";position:absolute;top:7px;bottom:7px;width:1px;background:linear-gradient(transparent,var(--bm-gold),transparent);opacity:.7}
.topbar::before{left:8px}.topbar::after{right:8px}
.brand h1,.character-banner h1{color:#e2bd82;text-shadow:0 1px 0 #000;margin-bottom:4px}
.brand small,.character-banner small{color:#b8a88e}
.character-banner{border-left:0;padding-left:0}
.character-banner .kicker,.brand .kicker{color:#b88b45}

.kicker{color:#b88b45;letter-spacing:.19em;font-size:.7rem}
.code{color:#e4c18a}

button,input,select,textarea{border-radius:2px}
button{
  color:#ead8b8;border:1px solid #6c5734;
  background:linear-gradient(180deg,#1e1b16,#11100e);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.28);
  letter-spacing:.02em;
}
button:hover:not(:disabled){filter:none;background:linear-gradient(180deg,#292319,#15120e);border-color:#a57d3f}
button.primary{
  color:#f2ddba;border-color:#9a6f32;
  background:linear-gradient(180deg,var(--bm-burgundy-2),var(--bm-burgundy-dark));
  text-shadow:0 1px 0 #000;
}
button.primary:hover:not(:disabled){background:linear-gradient(180deg,#8a2833,#4b0c13)}
button.ghost-btn{border-color:#51442f;background:rgba(255,255,255,.02);color:#cab99b}
button.danger,.danger-btn{background:linear-gradient(180deg,#602026,#351013);border-color:#8c3e44;color:#f0d7d2}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #c99a50;outline-offset:2px}

input,select,textarea{
  background:#0f0e0c;border-color:#5f513a;color:#eee0c8;
  box-shadow:inset 0 1px 8px rgba(0,0,0,.5);
}
input::placeholder,textarea::placeholder{color:#786f62}
label{color:#ad9a7c;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem}

.tabs{gap:0;border:1px solid var(--bm-gold-dim);background:#0e0d0b;padding:3px;margin-bottom:14px}
.tabs button{border:0;border-right:1px solid #443720;border-radius:0;background:transparent;color:#ac9a7d;min-height:42px;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem}
.tabs button:last-child{border-right:0}
.tabs button.active{background:linear-gradient(180deg,#681923,#3c0d12);color:#efd7ad;box-shadow:inset 0 -2px 0 #b88b45}

.pill{border-color:#59492f;border-radius:2px;background:#11100e;color:#b7a98f;text-transform:uppercase;letter-spacing:.08em}
.pill.live,.pill.success{color:#dce7d5;border-color:#5e7456;background:#202a1d}

.notice{
  border-radius:2px;border-color:#5a4b32;background:linear-gradient(180deg,#211c14,#17140f);
  color:#d9c7a8;box-shadow:inset 3px 0 0 rgba(184,139,69,.45);
}
.notice.success{border-color:#536846;background:#192017;box-shadow:inset 3px 0 0 #6e865e}
.notice.error{border-color:#7b3e42;background:#2a1316;box-shadow:inset 3px 0 0 #9b4b53}
.pause-banner{background:#2d2411;border-color:#a6813e}

/* Parchment treatment for informational surfaces */
.parchment,.action-help,.brief-step,.setup-hand,.private-card-selection{
  color:var(--bm-parchment-ink);
  background:
    radial-gradient(circle at 10% 8%,rgba(98,56,19,.10),transparent 22%),
    radial-gradient(circle at 90% 88%,rgba(98,56,19,.08),transparent 25%),
    linear-gradient(135deg,var(--bm-parchment-light),var(--bm-parchment) 52%,#cfb68e);
  border-color:#8e7044;
  box-shadow:inset 0 0 22px rgba(86,50,20,.12);
}
.action-help strong,.brief-step strong,.setup-hand strong,.private-card-selection strong{color:#342313}
.action-help p,.brief-step p,.setup-hand .muted,.private-card-selection .muted{color:#5b4934}

/* Home / entry */
.hero{margin-top:min(11vh,90px);max-width:760px;padding:42px 34px}
.hero::after{content:"PEOPLE LIE · ROOMS REMEMBER";position:relative;display:block;width:auto;height:auto;border:0!important;color:#8f7041;font-size:.68rem;letter-spacing:.25em;margin-top:26px;text-align:center}
.hero .kicker{font-size:.8rem}.hero h1{font-size:clamp(2.1rem,8vw,4.4rem);line-height:.9;color:#ddb476;margin:12px 0 18px}
.hero p{color:#c3b69f;line-height:1.55}
.hero .actions button{min-height:54px}

/* Player round card */
.round-clock{
  min-width:110px;border:1px solid #7e5b2f;border-radius:2px;padding:10px 14px;
  background:linear-gradient(180deg,#631822,#390d12);color:#f1d6a6;
  font-variant-numeric:tabular-nums;font-size:1.35rem;text-align:center;letter-spacing:.05em;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.28);
}
.stat-grid>div{border-color:#4f422f;background:#11100e;border-radius:2px}
.stat-grid span{color:#9e8e73}.stat-grid strong{color:#ead3aa}

/* Player identity colour is restrained to accents, matching the card tabs */
.player-card{border-top:1px solid var(--accent)}
.character-dot{box-shadow:0 0 0 2px #111,0 0 0 3px var(--accent)}
.theme-blackwood{--accent:#743040;--character-base:#3F1717;--character-dark:#2D1111;--character-soft:#b88c95}
.theme-ash{--accent:#456f68;--character-base:#26413D;--character-dark:#1B2F2C;--character-soft:#92A09E}
.theme-vale{--accent:#68536d;--character-base:#3A2834;--character-dark:#2A1D25;--character-soft:#9C949A}
.theme-winters{--accent:#a5793f;--character-base:#87602D;--character-dark:#614520;--character-soft:#C3B096}
.theme-hartwell{--accent:#526d84;--character-base:#3E4C57;--character-dark:#2D373F;--character-soft:#9EA6AB}
.theme-silver{--accent:#777b58;--character-base:#4A4B35;--character-dark:#353626;--character-soft:#A4A59A}

/* Chat resembles note slips laid over the black evidence-card field */
.chat-window{
  background:
    radial-gradient(circle at 20% 0%,rgba(184,139,69,.055),transparent 35%),
    #0a0a09;
  border-color:#514329;border-radius:2px;padding:12px;gap:11px;
}
.message{
  max-width:92%;align-self:flex-start;
  color:#271c11;background:linear-gradient(135deg,#e4d0ac,#d3b98e);
  border:1px solid #9d7b49;border-radius:2px;padding:10px 13px;
  box-shadow:0 4px 10px rgba(0,0,0,.2),inset 0 0 12px rgba(98,56,19,.08);
}
.message.mine{align-self:flex-end;border-color:var(--accent);background:linear-gradient(135deg,#ead7b4,#d8bf96)}
.message .who{color:#6a4f31;text-transform:uppercase;letter-spacing:.06em;font-size:.68rem}
.adjacent-message{border-style:dashed;opacity:.9}
.composer{gap:8px}.composer input{min-height:48px}.composer button{min-width:72px}

/* Evidence/event presentation */
.event-card{border:1px solid #4f4028;background:#0f0e0c;border-radius:2px;padding:14px;margin-top:10px}
.event-card>div:first-child strong{color:#e5c18a;font-size:1.05rem}
.event-layer{border-left-color:#8c6a37}.event-layer>span{color:#c19959}
.murder-secret{border-color:#7c2631;background:radial-gradient(circle at 80% 0%,rgba(122,27,38,.24),transparent 35%),linear-gradient(180deg,#1b1011,#0d0a09)}
.murder-secret h2{color:#e2a0a7}
.case-solution{border:1px solid #6d3837;background:#170d0e;padding:12px;line-height:1.6}

/* Canonical manor map */
.manor-map-card{padding:14px}
.manor-map-title{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:10px}
.manor-map-title h2{margin:0}
.manor-map-wrap{
  position:relative;width:100%;aspect-ratio:2048/1448;overflow:hidden;
  border:1px solid #84683b;background:#d8c59f;
  box-shadow:inset 0 0 30px rgba(70,42,18,.2);
}
.manor-map-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 58%,rgba(63,38,17,.16));mix-blend-mode:multiply}
.manor-map-image{display:block;width:100%;height:100%;object-fit:contain;filter:none}
.manor-pin{
  position:absolute;z-index:2;transform:translate(-50%,-50%);width:30px;height:30px;min-height:30px;padding:0;
  border-radius:50%;border:2px solid #d0a664;background:var(--character-base,#4d3420);color:#f3deb8;
  display:grid;place-items:center;font-size:.68rem;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.55),0 0 0 2px rgba(0,0,0,.46);
}
.manor-pin.dead{filter:grayscale(1);opacity:.7;border-color:#8c877f}
.manor-body-pin{position:absolute;z-index:3;transform:translate(-50%,-50%);padding:3px 6px;border:1px solid #b7494d;background:#361013;color:#f0cccc;font-size:.66rem;letter-spacing:.05em;box-shadow:0 2px 7px rgba(0,0,0,.45)}
.manor-map-legend{display:flex;gap:14px;flex-wrap:wrap;color:#a9977c;font-size:.75rem;margin-top:9px}
.manor-map-legend span{display:inline-flex;align-items:center;gap:6px}
.manor-map-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid #d0a664;background:#5a1119}
.manor-room-roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.manor-room-roster .room-tile{padding:11px;min-height:94px}
.manor-room-roster .room-tile h3{margin:3px 0 8px;font-size:.96rem}

/* Player mini movement map uses the same exact floor plan asset */
.player-move-map{border:1px solid #725a35;background:#0e0d0b;padding:10px;position:relative}
.player-move-map .move-map-wrap{position:relative;width:100%;aspect-ratio:2048/1448;background:#d7c39d;border:1px solid #7e6338;overflow:hidden}
.player-move-map img{display:block;width:100%;height:100%;object-fit:contain;filter:none}
.move-map-button,.move-map-current{
  position:absolute;z-index:3;transform:translate(-50%,-50%);border-radius:50%;
  width:30px;height:30px;min-height:30px;padding:0;display:grid;place-items:center;
}
.move-map-button{background:#17130e;color:#e8cc9a;border:2px solid #bd8d45;font-size:.74rem}
.move-map-button:hover{background:#5a1119!important}
.move-map-button.selected{background:#6c1721!important;box-shadow:0 0 0 3px rgba(184,139,69,.28)}
.move-map-current{background:#641722;color:#f0d6aa;border:2px solid #d0a664;font-size:.68rem;font-weight:700;box-shadow:0 0 0 3px rgba(90,17,25,.25)}
.move-map-key{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;color:#9f8c70;font-size:.72rem}
.move-map-key strong{color:#d2b27c}

/* Butler console reads like the wide mockup */
@media(min-width:900px){
  .app-shell:has(.tabs) .topbar{padding-left:24px;padding-right:24px}
  .app-shell:has(.tabs) .grid.two{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.ledger{border:1px solid #4b3e2a}.ledger-row{border-color:#352d22}
.occupant{border-left-color:var(--accent)}
.audio-panel,.butler-trade-queue{border-color:#745c35}

/* Trade and modal surfaces */
.trade-private{border-color:#8a6a37;background:radial-gradient(circle at 85% 0%,rgba(184,139,69,.1),transparent 28%),linear-gradient(180deg,#17140f,#0d0c0a)}
.trade-offer,.butler-trade-item{border-radius:2px;border-color:#57472e;background:#100f0c}
.setup-modal-backdrop{background:rgba(5,4,3,.88);backdrop-filter:blur(5px)}
.setup-modal{background:#0c0b09;border-color:#8a6b3e;border-radius:2px}

/* Dead / ghost mode */
.theme-dead .topbar,.theme-dead .card{border-color:#5b5852}
.theme-dead .card{background:linear-gradient(180deg,#161616,#090909)}
.theme-dead .round-clock{background:linear-gradient(180deg,#3b3a3b,#171717);border-color:#777;color:#ddd}
.whisper-message{border-radius:2px;border-color:#706d73;background:radial-gradient(circle at 50% 0%,#343238,#151416 72%)}

/* Responsive */
@media(max-width:900px){.manor-room-roster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  body{background:linear-gradient(180deg,#0c0b09,#080807)}
  .topbar{padding:13px 14px}
  .topbar .top-actions{display:flex;gap:7px;width:100%}.topbar .top-actions button{flex:1}
  .hero{margin-top:4vh;padding:30px 20px}.hero h1{font-size:2.6rem}
  .card{padding:14px 13px}
  .tabs{position:sticky;top:0;z-index:20;background:#0b0a08;border-left:0;border-right:0}
  .manor-room-roster{grid-template-columns:1fr}
  .manor-pin,.move-map-button,.move-map-current{width:26px;height:26px;min-height:26px;font-size:.62rem}
  .player-move-map{padding:7px}
  .message{max-width:96%}
}
@media(max-width:430px){
  .brand h1,.character-banner h1{font-size:1.55rem}
  .round-clock{min-width:96px;font-size:1.15rem}
  .hero h1{font-size:2.25rem}
  .tabs button{font-size:.69rem;padding-left:11px;padding-right:11px}
  .manor-pin,.move-map-button,.move-map-current{width:23px;height:23px;min-height:23px;font-size:.56rem;border-width:1px}
}

/* Alpha 1.7: visible co-located guests and default-open illustrated map */
.room-presence{margin:14px 0;padding:13px 16px;border-color:#8a6b3e}
.room-presence-names{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.presence-guest{display:inline-flex;padding:7px 11px;background:#2b2119;border:1px solid #93784e;color:#eadab6;font-weight:600;font-size:.9rem}
.presence-note{margin:8px 0 0;font-size:.75rem}
.chat-room-presence{padding:8px 10px;background:#201d18;border-left:3px solid #a68553;font-size:.85rem}
.map-toggle-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.map-toggle-heading button{min-height:36px;white-space:nowrap}
.submission-step-label{font-weight:700;margin-top:8px}
@media(max-width:480px){.room-presence{padding:11px}.map-toggle-heading{align-items:center}}