/* ============================================================
   RAMA V1 · css/style.css
   Extracted from index.html so markup/style/logic stay separate,
   matching the old game's convention. Palette matches
   src/art/palette.js (sampled from the reference boards).
============================================================ */
:root{ --gold:#f2c14e; --ink:#0b0714; }
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;background:var(--ink);overflow:hidden;font-family:monospace;
  -webkit-user-select:none;user-select:none;touch-action:none}
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;background:#0b0714}

/* ---------- gate (guest-first) ---------- */
#gate{position:fixed;inset:0;background:
  radial-gradient(ellipse 90% 60% at 50% 20%,#1c3a24 0%,#0d1d12 55%,#0b0714 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:50;
  text-align:center;padding:20px}
#gate h1{color:var(--gold);font-size:clamp(34px,8vw,60px);letter-spacing:.12em;
  text-shadow:0 0 26px rgba(242,193,78,.4),3px 3px 0 #7a4a12}
#gate .sub{color:#e8e0d0;font-size:clamp(10px,2.2vw,13px);letter-spacing:.3em}
#gate .frame{border:2px solid var(--gold);padding:6px 18px;border-radius:2px;position:relative}
#gate .frame::before,#gate .frame::after{content:'✦';color:var(--gold);position:absolute;top:-9px;font-size:12px}
#gate .frame::before{left:-6px} #gate .frame::after{right:-6px}
#gate .note{color:#8f86a8;font-size:11px;max-width:420px;line-height:1.7}
#playBtn{margin-top:10px;background:var(--gold);color:#241430;font-weight:bold;font-size:15px;
  padding:13px 40px;border:none;border-radius:4px;cursor:pointer;
  box-shadow:0 6px 0 #9a7c2e,0 10px 24px rgba(0,0,0,.5);transition:transform .08s}
#playBtn:active{transform:translateY(4px);box-shadow:0 2px 0 #9a7c2e}
#gbtn{display:flex;align-items:center;gap:10px;background:#fff;color:#1a1a1a;border:none;
  border-radius:4px;padding:9px 20px;font:bold 12px monospace;cursor:pointer;
  box-shadow:0 3px 0 #b0b0b0}
#gbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #b0b0b0}
#gbtn img{width:16px;height:16px}
#gate .who{color:var(--gold);font-size:12px}
#gate .err{color:#ff8a8a;font-size:11px;max-width:420px}
#gate .cfgNote{color:#6b7a8f;font-size:10px;max-width:400px}
#devEnter{margin-top:6px;background:none;border:1px dashed #6b5f8a;color:#8f86a8;
  padding:8px 18px;font:11px monospace;border-radius:4px;cursor:pointer}
#devEnter:hover{border-color:#f2c14e;color:#e8e0d0}

/* ---------- touch controls ---------- */
.tc{position:fixed;bottom:3.2vh;display:none;gap:3vw;z-index:40}
body.touch .tc{display:flex}
#tcL{left:3.5vw} #tcR{right:3.5vw}
.tb{width:15vw;height:15vw;max-width:72px;max-height:72px;border-radius:18%;
  background:rgba(255,255,255,.07);border:2px solid rgba(242,193,78,.35);color:#f2e9cf;
  display:flex;align-items:center;justify-content:center;font:bold 19px monospace}
.tb.on{background:rgba(242,193,78,.28)}

/* ---------- rotate prompt ---------- */
#rotate{position:fixed;inset:0;background:#0b0714;color:var(--gold);z-index:60;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:15px;text-align:center}
@media (orientation:portrait){ body.touch #rotate{display:flex} }