@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --ink:#241c14;
  --paper:#e9ddc0;
  --paper-dark:#dccfa9;
  --board:#171310;
  --board-2:#221b15;
  --brass:#b8934f;
  --red:#8f2b22;
  --red-bright:#b8392c;
  --ok:#5c7a4f;
  --line:#4a3d2a;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Libre Baskerville', Georgia, 'Times New Roman', serif;
  background:
    radial-gradient(ellipse at 20% 0%, #23180f 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, #1c140d 0%, transparent 50%),
    var(--board);
  color:var(--paper);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.stamp{font-family:'Special Elite','Courier New',monospace; letter-spacing:.03em;}
a{color:inherit;}

#sitebar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 20px 12px;
  background:linear-gradient(180deg,#14100b 0%, rgba(20,16,11,.94) 85%, transparent);
  border-bottom:1px solid #000;
  flex-wrap:wrap;
}
#sitebar .brand{font-family:'Special Elite',monospace; color:#f2e7c9; text-decoration:none; font-size:1rem;}
#sitebar nav{display:flex; align-items:center; gap:14px; font-size:.85rem;}
#sitebar nav a{text-decoration:none; color:#cbb98a;}
#sitebar nav a:hover{color:#fff;}
#sitebar .who{color:#8a7a58; font-size:.8rem;}
#sitebar .cta{
  background:var(--red-bright); color:#fff5e6; padding:6px 12px; border-radius:2px;
}
#sitebar .logout{color:#a56a63;}

main.wrap{max-width:960px; margin:0 auto; padding:26px 18px 60px;}

h1.page-title{font-family:'Special Elite',monospace; font-size:1.5rem; color:#f2e7c9; margin:0 0 6px;}
p.page-sub{color:#b8a97e; margin:0 0 24px; font-style:italic;}

/* forms */
.formcard{
  max-width:420px; margin:20px auto; background:var(--paper); color:var(--ink);
  border-radius:3px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.formcard h2{font-family:'Special Elite',monospace; font-size:1.1rem; margin:0 0 16px;}
.formcard label{display:block; font-family:'Special Elite',monospace; font-size:.7rem; color:var(--red); margin:14px 0 5px;}
.formcard input{
  width:100%; padding:10px 12px; border:1px solid #b7a675; border-radius:2px;
  background:#fbf5e3; font-family:inherit; font-size:.92rem; color:var(--ink);
}
.formcard button{
  margin-top:18px; width:100%; font-family:'Special Elite',monospace;
  background:var(--red-bright); color:#fff5e6; border:none; padding:12px; border-radius:2px;
  font-size:.9rem; cursor:pointer;
}
.formcard .alt{margin-top:14px; font-size:.82rem; text-align:center;}
.error-box{
  background:#3a1c17; border:1px solid var(--red-bright); color:#f0c6bf;
  padding:10px 12px; border-radius:2px; font-size:.85rem; margin-bottom:14px;
}
.ok-box{
  background:#1e2c1a; border:1px solid var(--ok); color:#cfe3c4;
  padding:10px 12px; border-radius:2px; font-size:.85rem; margin-bottom:14px;
}

/* case cards */
.case-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; margin-top:6px;}
.case-card{
  background:var(--paper); color:var(--ink); border-radius:3px; padding:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.4); border:1px solid #c8b988;
  display:flex; flex-direction:column; gap:10px;
}
.case-card .genre{font-family:'Special Elite',monospace; font-size:.62rem; color:var(--red); letter-spacing:.05em;}
.case-card h3{font-family:'Special Elite',monospace; font-size:1rem; margin:0;}
.case-card p{font-size:.85rem; line-height:1.5; color:#4a3d24; margin:0; flex:1;}
.case-card .meta{font-size:.72rem; color:#6b5c3e; display:flex; gap:10px; flex-wrap:wrap;}
.stars{color:var(--red);}
.case-card .actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.btn{
  font-family:'Special Elite',monospace; font-size:.74rem; text-decoration:none;
  padding:8px 12px; border-radius:2px; border:1px solid var(--ink); color:var(--ink);
  background:transparent; cursor:pointer;
}
.btn.primary{background:var(--ink); color:#f2e8cd; border-color:var(--ink);}
.btn.red{background:var(--red-bright); color:#fff5e6; border-color:var(--red-bright);}

/* stats strip */
.stats-strip{
  display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px;
}
.stat-pill{
  background:var(--paper-dark); color:var(--ink); border-radius:2px; padding:10px 16px;
  font-family:'Special Elite',monospace; font-size:.78rem;
}
.stat-pill b{display:block; font-size:1.1rem; font-family:'Libre Baskerville',serif;}

/* history table */
table.history{width:100%; border-collapse:collapse; margin-top:10px; font-size:.86rem;}
table.history th, table.history td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:left;}
table.history th{font-family:'Special Elite',monospace; font-size:.68rem; color:var(--brass);}
.tag-win{color:#8fc47c;}
.tag-lose{color:#c9615a;}
.tag-progress{color:#c9a35a;}

/* room / lobby */
.room-code{
  font-family:'Special Elite',monospace; font-size:2rem; letter-spacing:.15em;
  text-align:center; color:#f2e7c9; margin:10px 0;
}
.player-list{list-style:none; padding:0; margin:14px 0;}
.player-list li{
  background:var(--paper); color:var(--ink); border-radius:2px; padding:10px 14px; margin-bottom:8px;
  display:flex; justify-content:space-between; font-size:.88rem;
}
.player-list li .badge{font-family:'Special Elite',monospace; font-size:.65rem; color:var(--red);}

/* generic panel reused from single-player engine */
.panel{background:var(--paper); color:var(--ink); border-radius:3px; box-shadow:0 10px 30px rgba(0,0,0,.5); overflow:hidden; margin-bottom:20px;}
.panel-head{display:flex; align-items:center; gap:10px; padding:14px 18px; background:var(--paper-dark); border-bottom:1px solid #b7a675;}
.panel-head h2{font-family:'Special Elite',monospace; font-size:1rem; margin:0; flex:1;}
.panel-body{padding:18px;}
.backbtn{font-family:'Special Elite',monospace; background:none; border:1px solid var(--ink); color:var(--ink); border-radius:2px; padding:5px 10px; font-size:.72rem; cursor:pointer;}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:18px;}
.pin-card{position:relative; background:var(--paper); color:var(--ink); border-radius:2px; padding:16px 14px 14px; cursor:pointer; box-shadow:0 8px 16px rgba(0,0,0,.4); border:1px solid #c8b988;}
.pin-card:hover{transform:translateY(-3px);}
.pin-card .pin{position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:14px;height:14px;border-radius:50%; background:radial-gradient(circle at 35% 30%, #e2867a, var(--red)); box-shadow:0 2px 3px rgba(0,0,0,.5);}
.pin-card h3{font-family:'Special Elite',monospace; font-size:.92rem; margin:6px 0 6px;}
.pin-card p{font-size:.8rem; line-height:1.4; margin:0; color:#3a2f20;}
.pin-card .count{font-family:'Special Elite',monospace; font-size:.68rem; color:var(--red); margin-top:8px; display:block;}

.spot-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px;}
.spot{background:#f2e8cd; border:1px solid #c8b988; border-radius:2px; padding:14px; cursor:pointer; text-align:left;}
.spot h4{font-family:'Special Elite',monospace; font-size:.82rem; margin:0 0 6px;}
.spot p{font-size:.76rem; color:#5a4c34; margin:0;}
.spot.done{opacity:.55;}
.spot.locked{opacity:.4; cursor:default;}
.spot .tag{font-family:'Special Elite',monospace; font-size:.62rem; color:var(--red);}

.sus-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px;}
.sus-card{background:#f2e8cd; border:1px solid #c8b988; border-radius:2px; padding:14px; cursor:pointer;}
.sus-card .avatar{width:52px;height:52px;border-radius:50%; background:linear-gradient(135deg,#7a6446,#3d3222); display:flex;align-items:center;justify-content:center; font-family:'Special Elite',monospace; color:#f2e8cd; font-size:1.2rem; margin-bottom:10px;}
.sus-card h4{font-family:'Special Elite',monospace; font-size:.85rem; margin:0 0 3px;}
.sus-card .role{font-size:.74rem; color:#6b5c3e; font-style:italic;}

.detail-top{display:flex; gap:14px; align-items:flex-start; margin-bottom:14px;}
.detail-top .avatar-lg{width:68px;height:68px;border-radius:50%; flex:none; background:linear-gradient(135deg,#7a6446,#3d3222); display:flex;align-items:center;justify-content:center; font-family:'Special Elite',monospace; color:#f2e8cd; font-size:1.5rem;}
.detail-top h3{font-family:'Special Elite',monospace; margin:0 0 4px; font-size:1.05rem;}
.field{margin:12px 0;}
.field .k{font-family:'Special Elite',monospace; font-size:.66rem; color:var(--red); display:block; margin-bottom:3px;}

.qbtn{display:block; width:100%; text-align:left; background:#e3d6ac; border:1px solid #b7a675; border-radius:2px; padding:10px 12px; margin-bottom:8px; cursor:pointer; font-size:.86rem; color:var(--ink); font-family:inherit;}
.qbtn.asked{opacity:.5; cursor:default;}
.answer{background:#fbf5e3; border-left:3px solid var(--red); padding:10px 12px; margin:0 0 14px; font-size:.88rem; line-height:1.55; font-style:italic;}
.clue-toast{font-family:'Special Elite',monospace; font-size:.68rem; background:var(--ok); color:#fff; padding:6px 10px; border-radius:2px; display:inline-block; margin-top:6px;}

.ev-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px;}
.ev-card{background:#f2e8cd; border:1px solid #c8b988; border-radius:2px; padding:14px;}
.ev-card h4{font-family:'Special Elite',monospace; font-size:.82rem; margin:0 0 6px;}
.ev-card p{font-size:.78rem; color:#5a4c34; margin:0; line-height:1.45;}
.locked{background:#191410; border:1px dashed #5a4c34; color:#7a6f56; border-radius:2px; padding:14px; font-size:.78rem; font-style:italic;}

.note-list{list-style:none; padding:0; margin:0;}
.note-list li{background:#f2e8cd; border-left:3px solid var(--brass); padding:10px 12px; margin-bottom:10px; font-size:.86rem; line-height:1.5;}
.note-list li .src{display:block; font-family:'Special Elite',monospace; font-size:.62rem; color:var(--red); margin-top:5px;}

.pick-row{display:flex; flex-wrap:wrap; gap:8px;}
.pick{border:1px solid #b7a675; background:#e3d6ac; color:var(--ink); border-radius:2px; padding:8px 12px; font-size:.82rem; cursor:pointer; font-family:inherit;}
.pick.sel{background:var(--red); color:#fff5e6; border-color:var(--red);}
.pick[disabled]{opacity:.4; cursor:not-allowed;}
.acc-label{font-family:'Special Elite',monospace; font-size:.78rem; color:var(--red); display:block; margin-bottom:8px;}
.submitbtn{font-family:'Special Elite', monospace; background:var(--ink); color:#f2e8cd; border:none; border-radius:2px; padding:12px 22px; font-size:.86rem; cursor:pointer; margin-top:8px;}
.submitbtn[disabled]{opacity:.4; cursor:not-allowed;}

.ending{text-align:center; padding:40px 20px; background:var(--paper); color:var(--ink); border-radius:3px;}
.ending h2{font-family:'Special Elite',monospace; font-size:1.5rem; margin-bottom:14px;}
.ending.win h2{color:#3e6b2c;}
.ending.lose h2{color:#8f2b22;}
.ending.neutral h2{color:#8a6a1f;}
.ending p{max-width:560px; margin:0 auto 12px; line-height:1.7;}
.stampmark{display:inline-block; border:2px solid var(--red-bright); color:var(--red-bright); font-family:'Special Elite',monospace; font-size:.72rem; padding:6px 14px; margin:14px 0; letter-spacing:.1em;}

/* rpg */
.stat-alloc{display:flex; flex-direction:column; gap:10px; margin:14px 0;}
.stat-row{display:flex; align-items:center; gap:10px; background:#f2e8cd; padding:10px 12px; border-radius:2px;}
.stat-row label{font-family:'Special Elite',monospace; font-size:.78rem; flex:1;}
.stat-row button{width:28px;height:28px;border-radius:50%; border:1px solid var(--ink); background:none; cursor:pointer; font-family:monospace;}
.stat-row .val{width:26px; text-align:center; font-family:'Special Elite',monospace;}
.points-left{font-family:'Special Elite',monospace; font-size:.8rem; color:var(--red); margin-bottom:10px;}
.rpg-text{background:var(--paper); color:var(--ink); border-radius:3px; padding:20px; line-height:1.7; font-size:.95rem; box-shadow:0 10px 30px rgba(0,0,0,.5);}
.rpg-choices{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.rpg-choice{text-align:left; background:#e3d6ac; border:1px solid #b7a675; border-radius:2px; padding:12px 14px; font-size:.88rem; cursor:pointer; color:var(--ink); font-family:inherit;}
.rpg-choice:hover{background:#d8ca9c;}
.roll-toast{font-family:'Special Elite',monospace; font-size:.72rem; background:var(--brass); color:#2a2114; padding:6px 10px; border-radius:2px; display:inline-block; margin-bottom:10px;}

/* chat (multijugador) */
.chatbox{background:#0f0c09; border:1px solid var(--line); border-radius:3px; height:180px; overflow-y:auto; padding:10px; font-size:.82rem; margin-bottom:10px;}
.chatbox .msg{margin-bottom:6px;}
.chatbox .msg b{color:var(--brass);}
.chat-input{display:flex; gap:8px;}
.chat-input input{flex:1; padding:9px 10px; border-radius:2px; border:1px solid var(--line); background:#1c1712; color:#f0e6cc; font-family:inherit;}
.chat-input button{font-family:'Special Elite',monospace; background:var(--brass); border:none; border-radius:2px; padding:0 14px; cursor:pointer;}

.vote-row{display:flex; gap:10px; align-items:center; margin-top:10px;}

.hide{display:none !important;}

footer.credit{text-align:center; font-family:'Special Elite',monospace; font-size:.65rem; color:#5a4d38; margin-top:40px; padding-bottom:20px;}

@media (max-width:480px){
  #sitebar{padding-left:14px; padding-right:14px;}
  h1.page-title{font-size:1.25rem;}
}