/* ===================================================================
   THE THREE — Council of the Wicked Gods
   happystoner5420 Games
   Dark photoreal evil-fantasy UI
==================================================================== */

:root{
  --bg:#05060a;
  --ink:#e9e2d0;
  --blood:#b3122a;
  --blood-glow:#ff2e44;
  --gold:#c9a24a;
  --gold-glow:#ffd877;
  --water:#3fd0ff;
  --fire:#ff6a1a;
  --earth:#7bd14a;
  --frame:#1a1206;
  --panel:rgba(10,8,12,0.86);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 30%, #14101a 0%, #05060a 60%, #000 100%);
  color:var(--ink);
  overflow:hidden;
  user-select:none;
  cursor:default;
}

/* ---- FX layers ---- */
#fxCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;}
#vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.75) 100%);}
#scanlines{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.10;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 1px, transparent 1px 3px);}
#flash{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;
  transition:opacity .12s ease;mix-blend-mode:screen;}

/* ---- screens ---- */
.screen{position:fixed;inset:0;z-index:5;display:none;align-items:center;justify-content:center;}
.screen.active{display:flex;}
#game.active{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;}

/* shake */
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-6px,3px)}
  40%{transform:translate(5px,-4px)}
  60%{transform:translate(-4px,-3px)}
  80%{transform:translate(4px,4px)}
}
.shake{animation:shake .4s ease;}

/* =================== MENU =================== */
.menu-glow{position:absolute;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle, rgba(179,18,42,.22), transparent 65%);
  filter:blur(20px);animation:pulse 6s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}
.menu-inner{position:relative;text-align:center;z-index:6;}

.title{margin:0 0 26px;line-height:1;}
.title-sub{display:block;font-size:22px;letter-spacing:14px;color:var(--gold);opacity:.8;}
.title-main{display:block;font-size:104px;font-weight:900;letter-spacing:10px;
  color:#f3ead2;text-shadow:0 0 26px var(--blood-glow),0 0 60px rgba(179,18,42,.6),0 4px 0 #000;
  animation:flicker 5s infinite;}
.title-tag{display:block;margin-top:8px;font-size:18px;letter-spacing:6px;color:#b9a98a;}
@keyframes flicker{0%,19%,21%,55%,57%,100%{opacity:1}20%,56%{opacity:.72}}

.god-sigils{display:flex;gap:34px;justify-content:center;margin:14px 0 30px;}
.sigil{width:140px;text-align:center;opacity:.92;transition:transform .3s;}
.sigil:hover{transform:translateY(-6px) scale(1.04);}
.sigil img{width:120px;height:120px;object-fit:cover;border-radius:50%;
  border:3px solid var(--gold);box-shadow:0 0 22px rgba(201,162,74,.5),inset 0 0 30px rgba(0,0,0,.7);
  filter:contrast(1.1) saturate(1.05) brightness(.92);}
.sigil span{display:block;margin-top:8px;font-weight:800;letter-spacing:3px;color:#efe3c6;}
.sigil em{display:block;font-size:12px;color:#9b8b6b;font-style:normal;letter-spacing:2px;}

.menu-buttons{display:flex;flex-direction:column;gap:12px;align-items:center;}
.memory-line{margin-top:22px;color:#7d6f8a;font-size:13px;letter-spacing:1px;min-height:18px;}

/* =================== BUTTONS =================== */
.btn{
  font-family:inherit;cursor:pointer;color:#ecdfc4;letter-spacing:3px;font-weight:700;
  background:linear-gradient(180deg,#241726,#120a14);
  border:1px solid #4a3a2a;padding:13px 30px;min-width:280px;font-size:15px;
  border-radius:4px;transition:all .18s;text-transform:uppercase;
  box-shadow:0 2px 0 #000, inset 0 0 12px rgba(0,0,0,.6);
}
.btn:hover{color:#fff;border-color:var(--gold);
  box-shadow:0 0 18px rgba(201,162,74,.45), inset 0 0 16px rgba(179,18,42,.25);
  transform:translateY(-1px);}
.btn.primary{border-color:var(--blood);color:#ffe7ea;
  background:linear-gradient(180deg,#3a0d16,#1a060a);}
.btn.primary:hover{box-shadow:0 0 26px var(--blood-glow);border-color:var(--blood-glow);}
.btn.danger{border-color:#5a1320;color:#ffb3bd;}
.btn.danger:hover{border-color:var(--blood-glow);box-shadow:0 0 18px var(--blood-glow);}
.btn.small{min-width:auto;padding:8px 16px;font-size:12px;letter-spacing:2px;}
.btn.send{min-width:auto;padding:0 26px;border-color:var(--blood);}

/* =================== PANELS (howto/credits) =================== */
.panel{position:relative;z-index:6;width:min(720px,90vw);max-height:86vh;overflow:hidden;
  background:var(--panel);border:1px solid var(--gold);border-radius:8px;padding:30px 36px;
  box-shadow:0 0 50px rgba(0,0,0,.8), inset 0 0 60px rgba(40,20,10,.4);}
.panel.center{text-align:center;}
.panel h2{margin:0 0 18px;font-size:30px;letter-spacing:8px;color:var(--gold-glow);
  text-shadow:0 0 14px rgba(201,162,74,.6);}
.scrolltext{overflow-y:auto;max-height:64vh;padding-right:10px;line-height:1.65;font-size:15px;color:#d8cdb6;}
.scrolltext ul{margin:8px 0;padding-left:22px;}
.scrolltext li{margin:5px 0;}
.scrolltext b{color:#f0e4c6;}
.kbd{background:#1a1020;border:1px solid #4a3a2a;border-radius:4px;padding:2px 8px;color:var(--water);font-family:monospace;}
.warn{color:var(--blood-glow);font-weight:700;letter-spacing:1px;}
.back-btn{margin-top:20px;}

.credit-block{line-height:1.8;font-size:16px;color:#d8cdb6;}
.big-credit{font-size:34px;font-weight:900;letter-spacing:4px;color:#f3ead2;
  text-shadow:0 0 22px var(--blood-glow);margin:6px 0;}
.credit-role{color:var(--gold);letter-spacing:3px;}
.credit-block hr{border:none;border-top:1px solid #3a2c1c;margin:16px auto;width:60%;}
.dim{color:#9b8b6b;}
.small{font-size:12px;}

/* =================== GAME =================== */
.topbar{position:relative;z-index:7;display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;background:linear-gradient(180deg,rgba(20,12,20,.95),rgba(10,6,10,.6));
  border-bottom:1px solid #3a2c1c;}
.topbar-title{letter-spacing:6px;color:var(--gold);font-weight:800;font-size:15px;
  text-shadow:0 0 12px rgba(201,162,74,.5);}

.stage{position:relative;z-index:6;flex:1;display:flex;flex-direction:column;
  padding:14px 18px 18px;min-height:0;}

.gods-row{display:flex;gap:18px;justify-content:center;margin-bottom:12px;}
.god-card{width:180px;text-align:center;transition:transform .25s;}
.portrait-frame{position:relative;width:150px;height:150px;margin:0 auto;border-radius:10px;overflow:hidden;
  border:3px solid #5a4528;box-shadow:0 0 22px rgba(0,0,0,.8),inset 0 0 30px rgba(0,0,0,.7);}
.portrait-frame img{width:100%;height:100%;object-fit:cover;
  filter:contrast(1.12) saturate(1.05) brightness(.86);transition:filter .3s,transform .3s;}
.aura{position:absolute;inset:0;pointer-events:none;border-radius:8px;
  box-shadow:inset 0 0 0 0 transparent;transition:box-shadow .3s,opacity .3s;opacity:0;}
.god-name{margin-top:8px;font-weight:800;letter-spacing:4px;color:#efe3c6;}
.god-mood{font-size:12px;color:#9b8b6b;letter-spacing:1px;font-style:italic;min-height:15px;}
.god-element{font-size:11px;letter-spacing:2px;color:#6b5d44;}

/* speaking / active states by element */
.god-card.speaking{transform:translateY(-6px) scale(1.05);}
.god-card.speaking .portrait-frame img{filter:contrast(1.2) saturate(1.3) brightness(1.05);}
.god-card[data-element="water"].speaking .aura{opacity:1;box-shadow:inset 0 0 40px var(--water),0 0 30px var(--water);}
.god-card[data-element="fire"].speaking  .aura{opacity:1;box-shadow:inset 0 0 40px var(--fire),0 0 30px var(--fire);}
.god-card[data-element="earth"].speaking .aura{opacity:1;box-shadow:inset 0 0 40px var(--earth),0 0 30px var(--earth);}
.god-card[data-element="water"].speaking .portrait-frame{border-color:var(--water);}
.god-card[data-element="fire"].speaking  .portrait-frame{border-color:var(--fire);}
.god-card[data-element="earth"].speaking .portrait-frame{border-color:var(--earth);}

/* =================== CONVERSATION =================== */
.convo-wrap{flex:1;display:flex;gap:16px;min-height:0;}
.chat-col{flex:1.4;display:flex;flex-direction:column;min-height:0;
  background:rgba(8,6,10,.7);border:1px solid #2a2018;border-radius:8px;overflow:hidden;}
.council-col{flex:1;display:flex;flex-direction:column;min-height:0;
  background:rgba(8,6,10,.7);border:1px solid #2a2018;border-radius:8px;overflow:hidden;}
.chat-header{padding:8px 14px;font-size:12px;letter-spacing:3px;color:var(--gold);
  background:rgba(30,18,10,.6);border-bottom:1px solid #2a2018;text-transform:uppercase;}

.chat-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;}
.msg{max-width:88%;line-height:1.5;font-size:15px;animation:rise .35s ease;}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg .who{font-size:11px;letter-spacing:2px;font-weight:800;display:block;margin-bottom:3px;text-transform:uppercase;}
.msg .txt{padding:9px 13px;border-radius:10px;display:inline-block;}
.msg.player{align-self:flex-end;text-align:right;}
.msg.player .who{color:#8aa0c0;}
.msg.player .txt{background:linear-gradient(180deg,#1c2740,#101826);border:1px solid #2e4060;color:#dfe7f5;}
.msg.god .txt{background:linear-gradient(180deg,#231326,#140a16);border:1px solid #3a2030;}
.msg.god.Zella .who{color:var(--water);}    .msg.god.Zella .txt{box-shadow:inset 0 0 18px rgba(63,208,255,.12);border-color:#1c4a5a;}
.msg.god.Hevana .who{color:var(--fire);}     .msg.god.Hevana .txt{box-shadow:inset 0 0 18px rgba(255,106,26,.12);border-color:#5a3318;}
.msg.god.Brizella .who{color:var(--earth);}  .msg.god.Brizella .txt{box-shadow:inset 0 0 18px rgba(123,209,74,.12);border-color:#3a5a22;}
.msg.system{align-self:center;color:#7d6f8a;font-size:12px;font-style:italic;letter-spacing:1px;}

.input-row{display:flex;gap:8px;padding:10px;border-top:1px solid #2a2018;background:rgba(20,12,18,.6);}
#chatInput{flex:1;background:#0c0810;border:1px solid #3a2c1c;border-radius:6px;color:#eadfc6;
  padding:11px 14px;font-family:inherit;font-size:15px;outline:none;}
#chatInput:focus{border-color:var(--blood);box-shadow:0 0 14px rgba(179,18,42,.4);}

/* =================== COUNCIL =================== */
.council-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px;}
.cmsg{font-size:13px;line-height:1.45;animation:rise .35s ease;opacity:.96;}
.cmsg .cwho{font-weight:800;letter-spacing:1px;}
.cmsg.Zella .cwho{color:var(--water);}
.cmsg.Hevana .cwho{color:var(--fire);}
.cmsg.Brizella .cwho{color:var(--earth);}
.cmsg .arrow{color:#6b5d44;}

.lexicon{border-top:1px solid #2a2018;padding:10px 12px;background:rgba(20,12,18,.5);}
.lex-title{font-size:10px;letter-spacing:2px;color:#6b5d44;margin-bottom:6px;}
.lex-words{display:flex;flex-wrap:wrap;gap:6px;max-height:70px;overflow-y:auto;}
.lex-words span{font-size:11px;background:#1a1020;border:1px solid #3a2c1c;border-radius:10px;
  padding:2px 8px;color:#b9a98a;}
.lex-words span.invented{color:var(--gold-glow);border-color:var(--gold);
  box-shadow:0 0 8px rgba(201,162,74,.4);}

/* =================== OVERLAY =================== */
.overlay{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.78);backdrop-filter:blur(3px);}
.overlay.active{display:flex;}
.overlay-box{background:var(--panel);border:1px solid var(--blood);border-radius:8px;padding:30px 40px;
  text-align:center;box-shadow:0 0 40px rgba(179,18,42,.5);}
.overlay-box h3{margin:0 0 8px;letter-spacing:5px;color:#ffe7ea;font-size:22px;}
.overlay-buttons{display:flex;gap:14px;justify-content:center;margin-top:20px;}
.overlay-buttons .btn{min-width:160px;}

/* scrollbars */
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:#0a0710;}
::-webkit-scrollbar-thumb{background:#3a2c1c;border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold);}

/* responsive */
@media(max-width:880px){
  .title-main{font-size:64px;}
  .convo-wrap{flex-direction:column;}
  .gods-row{gap:8px;}
  .god-card{width:110px;}
  .portrait-frame{width:96px;height:96px;}
}