/* Baby Bunny: Quest for the Holy Cradle -- shared styles for all pages */
:root{
  --bg:#05050a;
  --panel:rgba(10,10,20,.93);
  --edge:#7777ff;
  --edge-dim:#4444aa;
  --text:#eeeeee;
  --gold:#ffd54a;
  --muted:#8f8fbf;
  --btn:#4444aa;
  --btn-hi:#5a5ad0;
  --btn-edge:#8888ff;
  --bad:#ff6666;
  --good:#66ff99;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--bg);
  color:var(--text);font-family:'Courier New',Courier,monospace;}

/* Full-window layers */
.fullscreen{position:fixed;inset:0;width:100vw;height:100vh;display:block;}
canvas.fullscreen{image-rendering:pixelated;}
#overlay{position:fixed;inset:0;pointer-events:none;z-index:20;}

/* Panels (dialogue boxes, text screens, menus) */
.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--panel);border:3px solid var(--edge);border-radius:10px;
  color:var(--text);padding:24px 32px;width:max-content;max-width:min(700px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 0 30px #000;pointer-events:auto;text-align:center;}
.panel .lines{text-align:left;}
.panel.center .lines{text-align:center;}
.panel.dialogue{cursor:pointer;min-width:min(460px,calc(100vw - 32px));}
.who{color:var(--gold);font-weight:bold;margin-bottom:8px;letter-spacing:1px;text-align:left;}
.lines div{margin:2px 0;white-space:pre-wrap;line-height:1.35;min-height:1.35em;}
.hint{margin-top:14px;color:var(--muted);font-size:12px;text-align:right;}
.dlg-art{text-align:center;margin-bottom:10px;}
.dlg-art img{image-rendering:pixelated;max-height:min(220px,32vh);max-width:100%;border:2px solid var(--edge-dim);border-radius:6px;background:#000;}
.title{font-size:22px;color:#fff;text-align:center;margin-bottom:10px;letter-spacing:2px;}
.big-gold{margin:10px 0;font-size:20px;color:var(--gold);}
.small-muted{font-size:12px;color:var(--muted);margin-top:6px;}
.btnrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px;}
.btnrow:empty{display:none;}

button.gamebtn{background:var(--btn);border:2px solid var(--btn-edge);color:#fff;font-family:inherit;
  padding:8px 18px;border-radius:6px;cursor:pointer;font-size:14px;outline:none;}
button.gamebtn:hover,button.gamebtn.sel{background:var(--btn-hi);box-shadow:0 0 0 2px var(--gold);}

input.code-input{font-family:inherit;font-size:18px;padding:10px;width:100%;text-align:center;letter-spacing:2px;
  background:#0a0a14;color:#fff;border:2px solid var(--edge);border-radius:6px;outline:none;}
input.code-input:focus{border-color:var(--gold);}
input.code-input.shake{animation:shake .35s;border-color:var(--bad);}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* ---------- Title page ---------- */
.title-screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(8px,2.2vh,22px);padding:16px;text-align:center;}
.logo-top{font-size:clamp(34px,8vw,92px);font-weight:bold;letter-spacing:.12em;color:#fff;line-height:1;
  text-shadow:4px 4px 0 var(--edge-dim),8px 8px 0 #1a1a44,0 0 30px rgba(119,119,255,.45);}
.logo-sub{font-size:clamp(14px,2.6vw,28px);letter-spacing:.3em;color:var(--gold);text-shadow:2px 2px 0 #6b4f00;}
#bunny-stage{width:min(560px,90vw);height:clamp(70px,14vh,130px);image-rendering:pixelated;}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;min-width:min(320px,90vw);}
.menu li{font-size:clamp(15px,2.2vw,20px);letter-spacing:.15em;padding:6px 14px;cursor:pointer;color:#c8c8ff;
  border:2px solid transparent;border-radius:6px;user-select:none;}
.menu li::before{content:'\25B6  ';visibility:hidden;color:var(--gold);}
.menu li.sel{color:#fff;border-color:var(--edge-dim);background:rgba(68,68,170,.25);}
.menu li.sel::before{visibility:visible;}
.menu li .note{display:block;font-size:.65em;letter-spacing:.08em;color:var(--muted);}
.foot{font-size:12px;color:var(--muted);}
.keys-hint{font-size:12px;color:#6f6f9f;}

/* ---------- Win page ---------- */
.gate{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:16px;}
.gate .panel{position:relative;left:auto;top:auto;transform:none;width:min(520px,100%);}
.gate .tries{margin-top:10px;font-size:13px;color:var(--muted);min-height:1.2em;}
.gate .tries.bad{color:var(--bad);}
.gate a{color:var(--muted);}
.hidden{display:none !important;}

@media (max-width:520px){
  .panel{padding:16px 16px;}
  .title{font-size:18px;}
}