/* Albion: Land of Faerie — game.css */
:root{
  --ink:#241a10; --parch:#f3e9cf; --parch2:#e7d8b0;
  --gold:#c8a447; --gold-lt:#f4e6a1; --green:#2f5d3a; --green-d:#1d3c26;
  --sidhe:#2f6aa0; --fomor:#8e2f3c; --panel:#20301f; --panel2:#182617;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;color:var(--ink);background:#0e1710}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}

/* ---------- MENU ---------- */
#menu{
  min-height:100%;display:flex;align-items:center;justify-content:center;padding:30px 16px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(200,164,71,0.18), transparent 60%),
    linear-gradient(160deg,#12241a,#0b160f 60%);
}
.menu-inner{max-width:840px;width:100%;text-align:center;color:var(--parch)}
.crest{width:78px;height:78px;margin:0 auto 6px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, var(--gold-lt), var(--gold) 55%, #6f5320 100%);
  box-shadow:0 0 0 4px rgba(244,230,161,0.25), 0 8px 30px rgba(0,0,0,0.5);position:relative}
.crest::after{content:"❈";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:38px;color:#3a2b12}
h1{font-size:52px;margin:6px 0 0;letter-spacing:2px;color:var(--gold-lt);text-shadow:0 2px 0 #4a3714,0 0 24px rgba(200,164,71,0.4)}
h1 span{display:block;font-size:19px;letter-spacing:7px;text-transform:uppercase;color:var(--parch2);margin-top:4px}
.tagline{font-style:italic;color:#c9c3ad;margin:14px 0 26px;font-size:17px}
#menu h2{color:var(--gold-lt);font-size:16px;letter-spacing:3px;text-transform:uppercase;margin:8px 0 14px;font-weight:600}
#scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
.scn-card{background:linear-gradient(180deg,rgba(243,233,207,0.96),rgba(231,216,176,0.96));
  color:var(--ink);border:2px solid #7a5f24;border-radius:10px;padding:14px 15px;transition:transform .12s,box-shadow .12s,border-color .12s;position:relative}
.scn-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,0.45)}
.scn-card.chosen{border-color:var(--gold-lt);box-shadow:0 0 0 3px rgba(200,164,71,0.55),0 10px 24px rgba(0,0,0,0.5)}
.scn-card h3{margin:0 0 2px;font-size:20px;color:#5a3210}
.scn-turns{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#8a6a2a;margin-bottom:8px}
.scn-card p{margin:0;font-size:13.5px;line-height:1.4;color:#3c2e1c}
.side-choice{margin:26px auto 18px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;color:var(--parch)}
.side-choice>span{letter-spacing:2px;text-transform:uppercase;font-size:12px;color:var(--gold-lt)}
.side-choice label{cursor:pointer;font-size:15px}
.side-choice em{color:#a9c2a9;font-size:12px}
button.big{font-size:20px;letter-spacing:2px;padding:13px 34px;color:#2a1e0c;border:none;border-radius:40px;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));box-shadow:0 6px 20px rgba(0,0,0,0.5);text-transform:uppercase}
button.big:hover{filter:brightness(1.08)}
.foot{margin-top:22px;font-size:11.5px;color:#8c9a89}

/* ---------- GAME ---------- */
#game{display:flex;height:100vh;width:100vw;overflow:hidden}
#boardwrap{flex:1;position:relative;background:radial-gradient(900px 600px at 40% 30%, #16324a, #0c1b28 70%);overflow:hidden}
#board{position:absolute;inset:0;cursor:grab}
#board:active{cursor:grabbing}
.hex{transition:fill .15s}
.board-ctrls{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px}
.board-ctrls button{width:34px;height:34px;border-radius:8px;border:1px solid #7a5f24;background:rgba(20,30,20,0.85);color:var(--gold-lt);font-size:17px}
.board-ctrls button:hover{background:rgba(40,55,40,0.95)}
#toast{position:absolute;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;transition:.25s;
  background:rgba(16,24,16,0.94);color:var(--parch);border:1px solid var(--gold);padding:10px 18px;border-radius:24px;font-size:14px;max-width:80%;text-align:center;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

#sidebar{width:320px;flex-shrink:0;background:linear-gradient(180deg,var(--panel),var(--panel2));color:var(--parch);
  border-left:3px solid var(--gold);display:flex;flex-direction:column;padding:14px 14px 10px}
.hud-top{border:1px solid #3d5a3d;border-radius:8px;padding:10px;background:rgba(0,0,0,0.2)}
.hud-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:3px 0}
.hud-row b{color:var(--gold-lt)}
.side-fomor{color:#f0a9b3} .side-sidhe{color:#a9d0f0}
.power .pw{font-size:12px}
.pw b{font-size:15px;margin-left:4px}
.pw.sidhe b{color:#a9d0f0} .pw.fomor b{color:#f0a9b3}
.forts{font-size:11px;letter-spacing:1px;color:#cfe0cf}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.controls button{padding:10px 8px;border-radius:7px;border:1px solid #6f5524;background:#33472f;color:var(--parch);font-size:13px}
.controls button:hover:not(:disabled){background:#456139}
.controls button:disabled{opacity:.4;cursor:not-allowed}
.controls button.primary{grid-column:1/3;background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:#2a1e0c;border:none;font-weight:700;font-size:15px;letter-spacing:1px}
.log-title{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-lt);margin:4px 0 4px}
#log{flex:1;overflow-y:auto;font-size:12.5px;line-height:1.45;border:1px solid #3d5a3d;border-radius:8px;padding:8px;background:rgba(0,0,0,0.28)}
#log div{padding:2px 0;border-bottom:1px dotted rgba(255,255,255,0.06);color:#d8e2d3}
#log div:first-child{color:var(--gold-lt)}
.legend{font-size:10.5px;color:#9fb09b;margin-top:8px;line-height:1.5}
.legend b{color:var(--parch)}

/* ---------- OVERLAYS ---------- */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,10,7,0.82);z-index:30;padding:20px}
.panel{max-width:560px;background:linear-gradient(180deg,var(--parch),var(--parch2));color:var(--ink);
  border:3px solid var(--gold);border-radius:12px;padding:26px 28px;box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.panel h2{margin-top:0;color:#5a3210;letter-spacing:1px}
.panel p{font-size:14.5px;line-height:1.5}
.panel .primary{margin-top:10px;padding:11px 22px;border:none;border-radius:30px;background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:#2a1e0c;font-weight:700;letter-spacing:1px}
.panel.vic{text-align:center}
.panel.vic h1{font-size:46px;margin:0 0 8px;letter-spacing:2px}
.panel.vic h1.won{color:#2f6a34;text-shadow:0 0 18px rgba(80,180,90,0.4)}
.panel.vic h1.lost{color:#8e2f3c}
.panel.vic p{font-size:16px}

@media (max-width:820px){
  #scenarios{grid-template-columns:1fr}
  #game{flex-direction:column}
  #sidebar{width:100%;border-left:none;border-top:3px solid var(--gold);max-height:44vh}
  #boardwrap{min-height:56vh}
}