:root { --ink:#2c2418; --cream:#f8f0d8; --bg:#14181e; --shell:#1e242c; --acc:#c8a03a; }
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html, body { height:100%; }
  body {
    background:var(--bg); color:var(--cream);
    font-family:'Press Start 2P', monospace;
    display:flex; flex-direction:column; align-items:center;
    height:100dvh; overflow:hidden;
    user-select:none; -webkit-user-select:none; touch-action:manipulation;
    padding-top:env(safe-area-inset-top);
  }
  #errbar { display:none; position:fixed; top:0; left:0; right:0; z-index:99; background:#a02020; color:#fff; font-size:9px; padding:6px 8px; line-height:1.5; }

  #stagewrap {
    position:relative; flex:0 1 auto;
    width:min(100vw, calc((100dvh - 190px) * 720 / 648), 560px);
    max-width:100vw; aspect-ratio:720/648; margin-top:4px;
    background:#000; border:3px solid #333c46; border-radius:8px; overflow:hidden;
  }
  #cv { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; image-rendering:crisp-edges; display:block; }

  #mapchip {
    position:absolute; top:6px; left:50%; transform:translate(-50%,-40px);
    background:rgba(20,24,30,.85); color:var(--cream); font-size:8px; padding:6px 10px;
    border:2px solid var(--acc); border-radius:4px; transition:transform .3s; pointer-events:none; white-space:nowrap;
  }
  #mapchip.show { transform:translate(-50%,0); }

  #dlg {
    position:absolute; left:2%; right:2%; bottom:2%;
    background:var(--cream); color:var(--ink);
    border:3px solid var(--ink); border-radius:6px; box-shadow:0 0 0 2px var(--cream);
    padding:9px 12px 14px; min-height:24%; cursor:pointer; z-index:5;
  }
  #dlgname { font-size:8px; color:#7a2c2c; margin-bottom:6px; }
  #dlgtext { font-size:10px; line-height:1.75; }
  #dlgnext { position:absolute; right:10px; bottom:5px; font-size:10px; animation:bl 1s steps(2) infinite; }
  @keyframes bl { 50% { opacity:0; } }

  /* Due colonne: i moduli hanno portato le azioni di duello da 4 a 6+, e in
     colonna singola la lista copriva la barra dello Spirito sul canvas. */
  /* Il menu azioni occupa la fascia bassa, dove starebbe il box di dialogo
     (che in quel momento è nascosto): così non copre mai la barra dello
     Spirito disegnata sul canvas. Due colonne perché i moduli hanno portato
     le azioni di duello da 4 a 6+. */
  #choices {
    position:absolute; right:2%; left:2%; bottom:2%; z-index:6;
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:5px; justify-content:end;
  }
  .cbtn {
    font-family:inherit; font-size:9px; text-align:center;
    background:var(--cream); color:var(--ink); border:3px solid var(--ink); border-radius:6px;
    padding:8px 6px; cursor:pointer; box-shadow:0 0 0 2px var(--cream);
  }
  /* mosse e voci di navigazione restano a tutta larghezza e allineate a sinistra */
  .movebtn, .smallbtn { grid-column:1 / -1; text-align:left; font-size:10px; padding:10px 12px; }
  .cbtn:active { transform:translateY(1px); }
  .movebtn { display:flex; align-items:center; gap:8px; }
  .mtag { font-size:7px; color:#fff; padding:3px 5px; border-radius:3px; }
  .mpow { margin-left:auto; font-size:9px; color:#7a2c2c; }
  .smallbtn { font-size:8px; padding:7px 10px; }

  #panel {
    position:absolute; inset:0; z-index:10; overflow:auto;
    background:rgba(16,20,26,.92); display:flex; align-items:center; justify-content:center; padding:10px;
  }
  .hidden { display:none !important; }

  .card, .quiz, .menu {
    background:var(--cream); color:var(--ink); border:3px solid var(--ink); border-radius:8px;
    box-shadow:0 0 0 3px var(--cream); padding:16px 14px; width:100%; max-width:440px;
    max-height:96%; overflow:auto; text-align:center;
  }
  .tsup { font-size:7px; color:#7a6a4a; margin-bottom:12px; letter-spacing:1px; }
  .tmain { font-size:30px; color:#7a2c2c; margin-bottom:8px; text-shadow:2px 2px 0 #d8c08a; }
  .tsub { font-size:9px; margin-bottom:14px; line-height:1.6; }
  .tdesc { font-size:8px; line-height:1.8; margin-bottom:14px; color:#4a4034; }
  .cnum { font-size:16px; color:#7a2c2c; margin-bottom:8px; }
  .csub { font-size:10px; margin-bottom:12px; }
  .cintro { font-size:9px; line-height:1.8; text-align:left; margin-bottom:12px; }
  .cmoves { font-size:8px; line-height:1.7; margin-bottom:10px; color:#2c4a2c; }
  .cname { font-size:8px; color:#7a6a4a; margin-bottom:12px; }
  .cstats { font-size:9px; line-height:2; margin-bottom:12px; }
  .qtitle { font-size:10px; color:#7a2c2c; margin-bottom:12px; }
  .qtext { font-size:10px; line-height:1.8; margin-bottom:14px; text-align:left; }
  .qbtns { display:flex; flex-direction:column; gap:8px; }
  .qbtn {
    font-family:inherit; font-size:9px; line-height:1.6; text-align:left;
    background:#fff8e8; color:var(--ink); border:3px solid var(--ink); border-radius:6px;
    padding:11px 12px; cursor:pointer; margin-top:8px; width:100%;
  }
  .qbtn:active { background:var(--acc); }

  .menu { text-align:left; }
  .mtabs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
  .mtab { font-family:inherit; font-size:7px; padding:7px 6px; border:2px solid var(--ink); background:#e8dcc0; border-radius:4px; cursor:pointer; }
  .mtab.on { background:var(--acc); }
  .mbody { max-height:52dvh; overflow:auto; }
  .strow { font-size:8px; line-height:1.9; margin-bottom:6px; }
  .dim { color:#7a6a4a; }
  .cathead { font-size:8px; color:#7a2c2c; margin:10px 0 4px; border-bottom:2px solid #d8c8a0; padding-bottom:3px; }
  .rowbtn {
    display:block; width:100%; text-align:left; font-family:inherit; font-size:8px; line-height:1.7;
    background:#fff8e8; border:2px solid var(--ink); border-radius:4px; padding:8px; margin-bottom:5px; cursor:pointer;
  }
  .rowbtn.locked { background:#e0d4b4; color:#9a8a6a; border-style:dashed; cursor:default; }
  .sig { display:inline-block; width:14px; height:14px; margin-right:5px; transform:rotate(45deg); background:#d8ccb0; border:2px solid #b0a488; }
  .sig.got { background:var(--c); border-color:var(--ink); }

  #controls {
    flex:1 0 auto; display:flex; align-items:center; justify-content:space-between;
    width:min(100vw, 560px); padding:10px 16px calc(12px + env(safe-area-inset-bottom));
    touch-action:none; gap:8px;
  }
  #dpad { display:grid; grid-template-columns:repeat(3, 52px); grid-template-rows:repeat(3, 52px); }
  .dbtn {
    background:var(--shell); border:2px solid #38424e; border-radius:8px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; color:#8a97a5; font-size:14px;
  }
  .dbtn.act, .dbtn:active { background:#38424e; color:var(--cream); }
  .dmid { background:none; border:none; }
  #abwrap { display:flex; flex-direction:column; align-items:center; gap:8px; }
  #btnMenu {
    font-family:inherit; font-size:8px; color:#8a97a5; background:var(--shell);
    border:2px solid #38424e; border-radius:12px; padding:8px 16px; cursor:pointer;
  }
  #abrow { display:flex; gap:14px; align-items:center; }
  .ab {
    width:62px; height:62px; border-radius:50%; font-family:inherit; font-size:16px; cursor:pointer;
    background:#7a2c3a; color:var(--cream); border:3px solid #5a1f2b; box-shadow:0 3px 0 #431722;
  }
  .ab:active { transform:translateY(2px); box-shadow:0 1px 0 #431722; }
  #btnB { background:#31435f; border-color:#243247; box-shadow:0 3px 0 #1b2635; }
  #btnB:active { box-shadow:0 1px 0 #1b2635; }
  #kbhint { display:none; font-size:7px; color:#5a6672; text-align:center; padding-bottom:6px; line-height:1.8; }
  @media (min-width:700px) and (min-height:700px) { #kbhint { display:block; } }