/* base.css — fondamenta: reset, canvas, elementi di scena */

@font-face{
  font-family:'Space Mono';
  font-style:normal; font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/SpaceMono-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal; font-weight:700;
  font-display:swap;
  src:url('../assets/fonts/SpaceMono-Bold.woff2') format('woff2');
}

  :root{ --nav-w:260px; --rail-w:54px; --stage-cx:calc(50% + 130px); }
  body.nav-collapsed{ --stage-cx:calc(50% + 27px); }
  html,body{margin:0;height:100%;background:#fff;overflow:hidden}
  #c{display:block;position:fixed;inset:0;background:#fff;pointer-events:none;z-index:0}
  body.plain-on #c{ visibility:hidden; }
  body.reading:not(.plain-on) #c{ pointer-events:auto; }
  #plain-stage{
    display:none; position:fixed; inset:0; z-index:30;
    background:#fff; cursor:grab; overflow:hidden;
  }
  #plain-stage.on{ display:block; }
  #plain-stage[hidden]{ display:none !important; }
  #plain-stage.panning{ cursor:grabbing; }
  body.plain-on #read-actions,
  body.plain-on #read-guide{ display:none !important; }
  #plain{
    display:none;
  }
  #plain-world3d{
    display:block; position:absolute; inset:0;
    width:100%; height:100%;
    background:#fff; touch-action:none; z-index:1;
  }
  #plain-world{
    position:absolute; left:0; top:0;
    width:0; height:0; overflow:visible;
    transform-origin:0 0; will-change:transform;
    z-index:2; pointer-events:none;
  }
  #plain-world .plane-layer{
    position:absolute; left:0; top:0;
    width:0; height:0; overflow:visible;
    transform-origin:0 0; will-change:transform;
    pointer-events:none;
  }
  #plain-world .sheet-block{
    pointer-events:none;
  }
  #plain-world .sheet-block-bar,
  #plain-world .sheet-block-resize{
    display:none !important;
  }
  #plain-world .sheet-block-body{
    caret-color:transparent;
  }
  #plain-close{
    position:fixed; top:16px; right:16px; z-index:31;
    appearance:none; cursor:pointer;
    font:700 10px/1 'Space Mono',monospace;
    letter-spacing:0.08em; text-transform:lowercase;
    color:#000; background:rgba(255,255,255,0.95);
    border:1.5px solid #000; border-radius:0;
    padding:8px 12px;
  }
  #plain-close:hover{ background:#000; color:#fff; }
  #rot{
    position:fixed; left:var(--stage-cx); bottom:28px; transform:translateX(-50%);
    font:400 11px/1 'Space Mono',monospace; color:rgba(0,0,0,0.36);
    pointer-events:none; letter-spacing:0.14em; text-transform:lowercase;
    opacity:0; transition:opacity .4s; z-index:8;
  }
  body.reading #rot{ display:none; }
  #rot.off{opacity:0 !important}
  #read-guide{
    position:fixed; left:var(--stage-cx); bottom:28px; transform:translateX(-50%);
    pointer-events:none; z-index:8;
    text-align:center; max-width:min(92vw,440px); padding:0 14px;
    opacity:0; transition:opacity .35s, bottom .25s;
  }
  body.reading #read-guide:not([hidden]){ opacity:1; }
  #read-guide[hidden]{ display:none !important; }
  #read-hint{
    font:400 11px/1.4 'Space Mono',monospace;
    letter-spacing:0.1em; text-transform:lowercase;
    color:rgba(0,0,0,0.55); margin-bottom:8px;
  }
  #read-keys{
    font:400 10px/1.35 'Space Mono',monospace;
    letter-spacing:0.08em; text-transform:lowercase;
    color:rgba(0,0,0,0.34);
  }
  #read-keys .hint-touch{ display:none; }
  @media (hover:none) and (pointer:coarse){
    #read-keys .hint-mouse{ display:none; }
    #read-keys .hint-touch{ display:inline; }
  }
  body.reading #read-guide{ bottom:78px; }
  #shape{
    position:fixed; left:var(--stage-cx); bottom:52px; transform:translateX(-50%);
    font:400 11px/1 'Space Mono',monospace; color:rgba(0,0,0,0.5);
    pointer-events:none; letter-spacing:0.14em; text-transform:lowercase;
    opacity:0; transition:opacity .35s; z-index:8;
  }
  body.reading #shape{ bottom:auto; top:18px; }
  #shape.on{opacity:1}
  #read-actions{
    position:fixed; left:var(--stage-cx); bottom:28px; transform:translateX(-50%);
    display:flex; gap:10px; align-items:center; z-index:9;
  }
  #read-actions[hidden]{ display:none !important; }
  #read-verify, #read-cta{
    appearance:none; cursor:pointer;
    font:700 12px/1 'Space Mono',monospace; letter-spacing:0.14em;
    text-transform:lowercase;
    color:#000; background:rgba(255,255,255,0.95);
    border:1.5px solid #000; border-radius:0;
    padding:12px 20px;
    transition:background .15s, color .15s, opacity .3s;
  }
  #read-verify:hover, #read-cta:hover{ background:#000; color:#fff; }
  #read-cta[hidden]{ display:none !important; }
  #ctrls{ position:fixed; left:22px; bottom:22px; z-index:5 }
  #ctrls #modes{ display:flex; gap:8px }
  #modes div{
    font:400 10px/1 Helvetica,Arial,sans-serif; letter-spacing:0.14em;
    text-transform:lowercase; color:rgba(0,0,0,0.34);
    background:rgba(255,255,255,0.72); border:1px solid rgba(0,0,0,0.12);
    padding:8px 11px; cursor:pointer; user-select:none;
    transition:color .25s, border-color .25s, background .25s;
  }
  #modes div.on{ color:#000; border-color:rgba(0,0,0,0.55); background:rgba(255,255,255,0.95) }
  #nogpu{
    position:fixed; inset:0; display:none; place-items:center;
    background:#fff; font:400 13px/1.8 Helvetica,Arial,sans-serif;
    color:rgba(0,0,0,0.6); letter-spacing:0.08em; text-align:center;
  }