:root{
    --chrome:#c6c6be;
    --chrome-dk:#8a8a82;
    --chrome-lt:#ffffff;
    --ink:#000000;
    --void:#0e5c5c;
    --neon:#ff2e88;
    --lcd:#b9e6c8;
    --gold:#ffd23f;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html{background:#0e5c5c;}
  html,body{height:100%;margin:0;padding:0;overflow:hidden;}
  body{
    position:fixed; top:0; left:0; right:0; bottom:0;
    background-color:#0e5c5c;
    background-image:
      repeating-linear-gradient(45deg,  rgba(0,0,0,.16) 0 2px, transparent 2px 4px),
      repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0 2px, transparent 2px 4px);
    font-family:"Lucida Console","DejaVu Sans Mono","Courier New",monospace;
    font-size:12px;
    color:var(--ink);
    user-select:none;
    touch-action:none;
    cursor:url(assets/cursors/arrow.png) 0 0, default;
  }

  .out{border:2px solid;border-color:var(--chrome-lt) var(--chrome-dk) var(--chrome-dk) var(--chrome-lt);}
  .in{border:2px solid;border-color:var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);}

  #desk{position:absolute;top:0;left:0;right:0;bottom:30px;}
  #icons{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:2px;}
  .icon{width:78px;padding:6px 2px;text-align:center;color:#fff;cursor:pointer;border:1px dotted transparent;}
  .icon:hover,.icon:focus-visible{border-color:#fff;background:rgba(255,46,136,.35);outline:none;}
  .icon .glyph{display:block;margin:0 auto;image-rendering:pixelated;}
  .icon .cap{display:block;font-size:10px;margin-top:3px;text-shadow:1px 1px 0 #000;word-break:break-word;}

  .win{position:absolute;background:var(--chrome);display:flex;flex-direction:column;
       box-shadow:3px 3px 0 rgba(0,0,0,.55);min-width:180px;}
  .win.hidden{display:none;}
  .bar{display:flex;align-items:center;gap:4px;background:#000;color:#fff;padding:3px 3px 3px 6px;
       font-size:11px;letter-spacing:.5px;cursor:grab;}
  .win.blur .bar{background:#555;}
  .bar .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bar button{width:16px;height:16px;padding:0;background:var(--chrome);border:2px solid;
       border-color:var(--chrome-lt) var(--chrome-dk) var(--chrome-dk) var(--chrome-lt);
       font:bold 10px/10px monospace;cursor:pointer;color:#000;}
  .bar button:active{border-color:var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);}

  /* Touch targets. 16px is the right *look* and far too small for a finger —
     roughly 2.5mm, against the 44pt/48dp both platforms ask for. This is why
     closing a window did nothing on a phone while working fine with a mouse.
     Keep the painted button exactly as it is and grow only the hit area, on
     coarse pointers only, so the desktop chrome is untouched. Each button's
     extra room leans away from its neighbour, and the gap between them is
     widened to more than the two expansions, so the areas cannot overlap and
     steal each other's taps. */
  @media (pointer: coarse){
    .bar button{position:relative;}
    .bar button + button{margin-left:8px;}
    .bar button::after{content:'';position:absolute;top:-11px;bottom:-11px;left:-3px;right:-3px;}
    .bar button:first-of-type::after{left:-11px;}
    .bar button:last-of-type::after{right:-11px;}
    /* the resize grip has the same problem */
    .grip{width:22px;height:22px;}
  }

  .body{flex:1;padding:6px;overflow:auto;}
  .grip{position:absolute;right:0;bottom:0;width:15px;height:15px;cursor:nwse-resize;touch-action:none;
    background:
      linear-gradient(135deg,transparent 46%,var(--chrome-dk) 46%,var(--chrome-dk) 58%,transparent 58%),
      linear-gradient(135deg,transparent 70%,var(--chrome-dk) 70%,var(--chrome-dk) 82%,transparent 82%);}

  button.btn, #menu button, .icon{cursor:url(assets/cursors/hand.png) 6 0, pointer;}
  button.btn{background:var(--chrome);border:2px solid;
    border-color:var(--chrome-lt) var(--chrome-dk) var(--chrome-dk) var(--chrome-lt);
    padding:4px 8px;font:11px/1 inherit;cursor:pointer;color:#000;}
  button.btn:active,button.btn[aria-pressed="true"]{border-color:var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);}
  button.btn:disabled{color:#8a8a82;cursor:default;}
  button.btn:focus-visible{outline:1px dotted #000;outline-offset:2px;}
  input.txt{background:#fff;border:2px solid;border-color:var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);
    padding:4px;font:12px/1 inherit;width:100%;color:#000;}
  input.txt:focus-visible{outline:1px dotted #000;outline-offset:1px;}
  fieldset{border:2px solid;border-color:var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);margin:0 0 8px;padding:8px;}
  legend{font-size:10px;padding:0 4px;}

  #stage{position:relative;background:#000;line-height:0;}
  canvas.screen{width:100%;height:auto;display:block;image-rendering:pixelated;
    cursor:url(assets/cursors/hand.png) 6 0, pointer;}
  .gamewrap{display:flex;flex-direction:column;gap:5px;}
  .say{display:flex;gap:4px;}
  .quick{display:flex;gap:3px;flex-wrap:wrap;}
  .quick button{font-size:10px;padding:3px 5px;}

  .sw{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;}
  .sw button{height:26px;border:2px solid;border-color:var(--chrome-lt) var(--chrome-dk) var(--chrome-dk) var(--chrome-lt);cursor:pointer;}
  .sw button[aria-pressed="true"]{border-color:#000;box-shadow:inset 0 0 0 2px #fff;}

  #logbox{background:#000;color:var(--lcd);padding:5px;height:100%;overflow:auto;font-size:11px;line-height:1.5;}
  #logbox b{color:var(--neon);}

  /* shop */
  .row{display:flex;align-items:center;gap:6px;padding:5px;border-bottom:1px solid var(--chrome-dk);}
  .row .nm{flex:1;font-size:11px;}
  .row .pr{font-size:11px;color:#5a4a00;white-space:nowrap;}
  .row canvas{width:32px;height:32px;image-rendering:pixelated;background:#8fbfd8;border:1px solid #000;}

  /* map */
  .mapgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .mapgrid button{padding:10px 6px;font-size:11px;}

  #bar{position:absolute;left:0;right:0;bottom:0;height:30px;background:var(--chrome);
       border-top:2px solid var(--chrome-lt);display:flex;align-items:center;gap:4px;padding:3px 4px;}
  #start{font-weight:bold;letter-spacing:1px;}
  #tasks{flex:1;display:flex;gap:3px;overflow:hidden;}
  #tasks button{flex:0 1 120px;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .tray{padding:4px 8px;font-size:11px;background:var(--chrome);white-space:nowrap;
    border:2px solid;border-color:var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);}
  #coins{color:#7a5c00;}
  #wx{color:#2a5a7a;letter-spacing:1px;}

  #menu{position:absolute;bottom:30px;left:4px;width:190px;background:var(--chrome);
    border:2px solid;border-color:var(--chrome-lt) var(--chrome-dk) var(--chrome-dk) var(--chrome-lt);
    box-shadow:3px 3px 0 rgba(0,0,0,.55);padding:3px;display:none;z-index:9000;}
  #menu.open{display:block;}
  #menu .head{background:#000;color:#fff;font-size:10px;padding:4px 6px;margin-bottom:3px;letter-spacing:2px;}
  #menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:6px 8px;
    font:12px/1 inherit;cursor:pointer;color:#000;}
  #menu button:hover,#menu button:focus-visible{background:#000;color:#fff;outline:none;}
  #menu hr{border:0;border-top:1px solid var(--chrome-dk);border-bottom:1px solid var(--chrome-lt);margin:3px 0;}

  #crt{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:9999;
    background:repeating-linear-gradient(to bottom,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);}
  #vig{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:9998;
    background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.42) 100%);}

  #err{position:absolute;left:8px;right:8px;bottom:34px;z-index:10001;background:#000;color:#ff2e88;
    padding:6px 8px;font-size:10px;line-height:1.45;display:none;white-space:pre-wrap;
    border:2px solid #ff2e88;max-height:56px;overflow:hidden;pointer-events:none;}
  #err.on{display:block;}
  #err b{color:#fff;float:right;padding-left:8px;}

  #off{position:absolute;top:0;left:0;right:0;bottom:0;background:#000;color:#e8a33d;display:none;z-index:10000;
    align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;padding:20px;}
  #off.on{display:flex;}
  #off p{max-width:340px;line-height:1.7;font-size:13px;}

  @media (prefers-reduced-motion: reduce){ #crt{display:none;} }
  @media (max-width:560px){ #icons{display:none;} #tasks button{flex:0 1 84px;} }