:root{
    --ink:#1a1814;
    --paper:#f7f1e4;
  }
  html,body{
    margin:0; padding:0; width:100%; height:100%; overflow:hidden;
    background:#0c0b09; color:var(--ink);
    font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  }
  #stage{
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
  }
  #game{
    image-rendering:pixelated;
    image-rendering:crisp-edges;
    background:#000;
  }
  #nameOverlay{
    position:fixed; inset:0; z-index:20;
    background:rgba(12,11,9,.92);
    display:flex; align-items:center; justify-content:center;
  }
  #nameCard{
    background:var(--paper); color:var(--ink);
    border:1px solid rgba(26,24,20,.25);
    border-radius:8px; padding:1.2rem 1.4rem;
    width:min(20rem,88vw); text-align:center;
  }
  #nameCard h1{
    font-size:1.05rem; margin:0 0 .6rem; font-weight:700;
  }
  #nameCard p{
    font-size:.8rem; margin:0 0 .8rem; color:#6b6458;
  }
  #nameInput{
    width:100%; box-sizing:border-box; font-size:1rem;
    padding:.5rem .6rem; border:1px solid rgba(26,24,20,.3);
    border-radius:6px; margin-bottom:.7rem; background:#fff;
  }
  #nameGo{
    width:100%; font-size:.95rem; padding:.55rem 0;
    border:1px solid var(--ink); border-radius:6px;
    background:var(--ink); color:var(--paper); cursor:pointer;
  }
  #nameCard .toSite{
    margin:.75rem 0 0; font-size:.75rem;
  }
  #nameCard .toSite a{ color:#6b6458; }
  #siteLink{
    position:fixed;
    top:calc(.55rem + env(safe-area-inset-top,0px));
    right:calc(.6rem + env(safe-area-inset-right,0px));
    z-index:14;
    padding:.28rem .7rem; border:1px solid var(--ink); border-radius:999px;
    background:var(--paper); color:var(--ink);
    font-size:.75rem; line-height:1.2; font-weight:600;
    text-decoration:none;
    box-shadow:0 1px 4px rgba(26,24,20,.35);
  }
  /* "Reconnecting…": top centre, well away from the bottom-anchored d-pad and Enter button, above them (15) but under the
     name overlay (20). Empty = hidden (netStatusTick writes the text only while the problem lasts); it never takes a tap. */
  #connStatus{
    position:fixed; top:calc(.6rem + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%);
    z-index:15; max-width:calc(100% - 2rem);
    padding:.3rem .8rem; border:1px solid var(--ink); border-radius:999px;
    background:var(--paper); color:var(--ink);
    font-size:.85rem; line-height:1.2; white-space:nowrap;
    box-shadow:0 1px 4px rgba(26,24,20,.35);
    pointer-events:none; user-select:none; -webkit-user-select:none;
  }
  #connStatus:empty{ display:none; }
  /* What you hold: a strip of chips, top-left, under the reconnect badge. Empty = hidden.
     Tap a chip to put that item in hand (wall/floor place the last picked). Not a menu. */
  #invHud{
    position:fixed; top:calc(2.4rem + env(safe-area-inset-top,0px)); left:calc(.6rem + env(safe-area-inset-left,0px));
    z-index:14; max-width:min(16rem, 62vw);
    display:flex; flex-wrap:wrap; gap:4px;
    pointer-events:auto; user-select:none; -webkit-user-select:none;
  }
  #invHud:empty{ display:none; }
  #invHud .invChip{
    display:flex; align-items:center; gap:4px;
    margin:0; padding:3px 6px 3px 4px;
    border:1px solid rgba(26,24,20,.45); border-radius:999px;
    background:rgba(247,241,228,.88); color:var(--ink);
    font-size:.7rem; line-height:1.2; cursor:pointer;
  }
  #invHud .invChip i,
  #invHud .invChip canvas{
    display:block; width:10px; height:10px; border-radius:2px;
    border:1px solid rgba(26,24,20,.35); flex:none;
    image-rendering:pixelated;
  }
  #invHud .invChip em{ font-style:normal; color:#6b6458; }
  #invHud .invChip.held{
    border-color:var(--ink); box-shadow:0 0 0 1px var(--ink);
    background:var(--paper);
  }
  /* Toasts used to be 8px canvas text on the grass. Same paper pill as the
     reconnect badge, bottom-centre, above the d-pad. Empty = hidden. */
  #toast{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(8.4rem + env(safe-area-inset-bottom,0px));
    z-index:15; max-width:calc(100% - 2rem);
    padding:.3rem .85rem; border:1px solid var(--ink); border-radius:999px;
    background:var(--paper); color:var(--ink);
    font-size:.8rem; line-height:1.2; white-space:nowrap;
    box-shadow:0 1px 4px rgba(26,24,20,.35);
    pointer-events:none; user-select:none; -webkit-user-select:none;
  }
  #toast:empty{ display:none; }
  /* FireRed-style place banner. Names used to be ink stamped on the grass
     (a P0 debug leftover). Empty = hidden. Sits under the reconnect badge. */
  #placeName{
    position:fixed; left:50%; transform:translateX(-50%);
    top:calc(.6rem + env(safe-area-inset-top,0px));
    z-index:14; max-width:calc(100% - 2rem);
    padding:.28rem .9rem; border:1px solid var(--ink); border-radius:6px;
    background:var(--paper); color:var(--ink);
    font-size:.82rem; font-weight:700; letter-spacing:.03em; line-height:1.2;
    white-space:nowrap;
    box-shadow:0 1px 4px rgba(26,24,20,.35);
    pointer-events:none; user-select:none; -webkit-user-select:none;
  }
  #placeName:empty{ display:none; }
  #connStatus:not(:empty) ~ #placeName{
    top:calc(2.6rem + env(safe-area-inset-top,0px));
  }
  #dpad{
    position:fixed; left:0; right:0;
    bottom:calc(.8rem + env(safe-area-inset-bottom,0px));
    z-index:10;
    display:grid;
    grid-template-columns:44px 44px 44px;
    grid-template-rows:44px 44px 44px;
    gap:4px;
    width:136px; margin:0 auto;
    user-select:none; -webkit-user-select:none;
    touch-action:none;
  }
  #dpad button{
    grid-column:var(--c); grid-row:var(--r);
    border:1px solid rgba(26,24,20,.55);
    background:rgba(247,241,228,.28);
    color:var(--paper);
    border-radius:8px;
    font-size:1.1rem;
    display:flex; align-items:center; justify-content:center;
    padding:0;
  }
  #dpad button:active{ background:rgba(247,241,228,.55); }
  #dUp{ --c:2; --r:1; }
  #dLeft{ --c:1; --r:2; }
  #dRight{ --c:3; --r:2; }
  #dDown{ --c:2; --r:3; }
  #interactBtn{
    position:fixed;
    right:calc(.9rem + env(safe-area-inset-right,0px));
    bottom:calc(1.6rem + env(safe-area-inset-bottom,0px));
    z-index:11;
    width:64px; height:64px; border-radius:50%;
    border:1px solid rgba(26,24,20,.55);
    background:rgba(196,165,116,.55);
    color:var(--ink);
    font-size:.85rem; font-weight:700;
    display:none; align-items:center; justify-content:center;
    user-select:none; -webkit-user-select:none;
    touch-action:none;
  }
  #interactBtn.show{ display:flex; }
  #interactBtn:active{ background:rgba(196,165,116,.85); }
  /* Keyboard has arrows. The on-screen pad is for touch (art.md). Hiding it
     on a fine pointer uncovers the bottom of the Square. */
  @media (hover: hover) and (pointer: fine) {
    #dpad{ display:none; }
    #interactBtn{ display:none !important; }
    #toast{ bottom:calc(1.2rem + env(safe-area-inset-bottom,0px)); }
  }