:root{
    --ink:#0f3b4a; --ink-deep:#0a2a36; --sand:#f6dcab; --cream:#ffe9b8;
    --coral:#ff6b4a; --coral-dark:#c74a2e; --yellow:#ffc93c; --teal:#5fd4e6;
    --paper:#fff9ec; --muted:#7a8f7d; --copy:#33535f;
  }
  *{box-sizing:border-box}
  [hidden]{display:none !important}
  html,body{margin:0;height:100%;background:var(--sand);color:var(--ink);
    font-family:'Nunito',sans-serif;overflow:hidden;user-select:none}
  button,input,select,textarea{font-family:inherit}
  textarea,input{user-select:text}
  #app{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;height:100dvh}

  #top{
    display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;gap:12px;
    padding:8px 14px;background:var(--ink);color:var(--cream);z-index:5;
  }
  .logo{
    font-family:'Lilita One';font-size:20px;letter-spacing:1px;display:flex;align-items:center;gap:10px;
    white-space:nowrap;justify-self:start;min-width:0;
  }
  .logo .mark em{color:var(--yellow);font-style:normal}
  .logo-ball{
    width:15px;height:15px;border-radius:50%;flex:0 0 15px;
    background:conic-gradient(#ff5a4e 0 45deg,#fff 45deg 90deg,#ffc93c 90deg 135deg,#fff 135deg 180deg,#2f9dff 180deg 225deg,#fff 225deg 270deg,#3ec46d 270deg 315deg,#fff 315deg);
    animation:spin 5s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .top-cluster,.top-actions{display:flex;gap:7px;align-items:center;flex-wrap:nowrap}
  .top-cluster{justify-self:center}
  .top-actions{justify-self:end;min-width:0}
  .top-div{width:2px;height:22px;flex:0 0 2px;border-radius:1px;background:rgba(255,233,184,.28)}
  .btn{
    font-family:'Lilita One';font-size:13px;letter-spacing:1px;color:#fff;border:none;cursor:pointer;
    background:var(--coral);border-radius:999px;padding:8px 14px;
    box-shadow:0 3px 0 var(--coral-dark);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .12s, border-color .12s;
  }
  .btn:hover:not(:disabled){transform:translateY(-4px) scale(1.06);box-shadow:0 6px 0 var(--coral-dark);animation:btnHop .34s cubic-bezier(.22,1.5,.36,1)}
  .btn:active:not(:disabled){transform:translateY(2px) scale(.92);box-shadow:0 1px 0 var(--coral-dark);animation:none}
  .btn:disabled{opacity:.38;cursor:not-allowed;box-shadow:none;transform:none}
  .btn.ghost{background:transparent;color:var(--cream);box-shadow:none;border:2px solid rgba(255,233,184,.35)}
  .btn.ghost:hover:not(:disabled){box-shadow:none;border-color:var(--yellow)}
  .btn.ink{background:#1b5566;box-shadow:0 3px 0 #0a2a36}
  .btn.tiny{font-size:11px;padding:6px 10px;letter-spacing:.6px}
  .btn.quiet{background:#d5decc;color:var(--ink);box-shadow:none}
  a.btn{display:inline-block;text-decoration:none}
  .narrow{display:none}
  .panel .btn.ghost{color:var(--ink);border-color:rgba(15,59,74,.35)}
  #inspector .btn.ghost{
    background:#ffe9b8;color:var(--ink);border:2px solid var(--ink);
    box-shadow:0 3px 0 rgba(15,59,74,.28);
  }
  #inspector .btn.ghost:hover:not(:disabled){
    box-shadow:0 6px 0 rgba(15,59,74,.28);border-color:var(--ink);transform:translateY(-4px) scale(1.06);
  }
  #inspector .btn.ghost:active:not(:disabled){
    transform:translateY(2px) scale(.92);box-shadow:0 1px 0 rgba(15,59,74,.28);
  }
  .tour-bubble .btn.ink{
    background:#1b5566;color:#fff;box-shadow:0 3px 0 #0a2a36;
  }
  .tour-bubble .btn.ink:disabled{
    opacity:1;background:#8aa8b0;color:#fff;box-shadow:none;
  }

  #work{
    display:grid;grid-template-columns:56px minmax(0,1fr) 300px;
    min-height:0;overflow:hidden;
  }

  #rail{
    background:var(--paper);border-right:3px solid rgba(15,59,74,.18);
    display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:8px;
    overflow:visible;z-index:4;
  }
  #tools,#viewTogs{display:flex;flex-direction:column;gap:6px;align-items:center}
  .rail-div{width:28px;height:2px;background:rgba(15,59,74,.18);margin:2px 0}
  .icon-btn{
    position:relative;width:40px;height:40px;flex:0 0 40px;padding:0;
    border:3px solid var(--ink);background:#ffe9b8;border-radius:12px;cursor:pointer;
    color:var(--ink);display:grid;place-items:center;
    box-shadow:0 3px 0 rgba(15,59,74,.28);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .12s, background .12s;
  }
  .icon-btn svg{width:20px;height:20px;display:block;pointer-events:none;transition:transform .16s cubic-bezier(.34,1.56,.64,1)}
  .icon-btn.on, .icon-btn.tog.on{
    background:#ffd9c4;border-color:var(--coral);color:var(--coral-dark);
    animation:toolPop .28s cubic-bezier(.34,1.56,.64,1);
  }
  .icon-btn:hover:not(:disabled){transform:translateY(-4px) scale(1.1);animation:iconHop .34s cubic-bezier(.22,1.5,.36,1)}
  .icon-btn:hover:not(:disabled) svg{transform:rotate(-8deg)}
  .icon-btn:active:not(:disabled){transform:translateY(1px) scale(.9);animation:none}
  .icon-btn:disabled{opacity:.38;cursor:not-allowed;box-shadow:none;transform:none}
  .icon-btn[data-tip]::after{
    content:attr(data-tip);
    position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
    background:var(--ink);color:var(--cream);
    font-size:11px;font-weight:800;letter-spacing:.3px;white-space:nowrap;
    padding:6px 10px;border-radius:8px;
    opacity:0;pointer-events:none;
    box-shadow:0 3px 0 var(--ink-deep);
    z-index:12;transition:opacity .12s;
  }
  .icon-btn:hover:not(:disabled)[data-tip]::after,
  .icon-btn:focus-visible[data-tip]::after{opacity:1}
  #top .icon-btn[data-tip]::after{
    left:50%;top:calc(100% + 8px);transform:translate(-50%,0);
  }
  #top .icon-btn:hover[data-tip]::after,
  #top .icon-btn:focus-visible[data-tip]::after{opacity:1}
  #top .icon-btn.primary,
  #playBack{
    background:var(--coral);border-color:var(--coral-dark);color:#fff;
    box-shadow:0 3px 0 var(--coral-dark);
  }
  #inspector .icon-btn[data-tip]::after{
    left:50%;right:auto;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%);
  }

  #inspector{
    display:flex;flex-direction:column;min-width:0;min-height:0;
    background:var(--paper);border-left:3px solid rgba(15,59,74,.18);
  }
  #inspTabs{display:flex;gap:4px;padding:10px 10px 0;flex:0 0 auto}
  #inspPop{display:contents}
  .insp-tab{
    flex:1;border:2px solid var(--ink);background:#ffe9b8;color:var(--ink);
    border-radius:10px 10px 0 0;padding:7px 4px 6px;font-size:10px;font-weight:800;
    letter-spacing:1.2px;cursor:pointer;
    transition:transform .14s cubic-bezier(.34,1.56,.64,1), background .12s;
  }
  .insp-tab:hover{transform:translateY(-2px)}
  .insp-tab:active{transform:translateY(1px) scale(.98)}
  .insp-tab.on{background:var(--coral);border-color:var(--coral);color:#fff;animation:toolPop .28s cubic-bezier(.34,1.56,.64,1)}
  .tab-body{
    flex:1;overflow:auto;padding:10px 10px 16px;min-height:0;
    display:flex;flex-direction:column;gap:10px;
    background:rgba(246,220,171,.45);
  }
  .kicker{font-size:10px;font-weight:800;letter-spacing:2.4px;color:var(--coral);margin:0 0 10px}
  .sec{
    margin:0;
    background:#fff;
    border:2.5px solid var(--ink);
    border-radius:16px;
    padding:12px 12px 13px;
    box-shadow:0 3px 0 rgba(15,59,74,.2);
  }
  .sec .hint:last-child, .sec .warn:last-child, .sec .field:last-child, .sec .export-row:last-child{margin-bottom:0}
  .row2 label{font-size:12px;font-weight:800;color:var(--copy);display:grid;gap:4px}

  .th-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
  .th-group{
    grid-column:1 / -1;margin:8px 0 2px;padding:8px 2px 0;
    border-top:2px dashed rgba(15,59,74,.28);
    font-size:9px;font-weight:800;letter-spacing:1.1px;text-align:center;color:var(--coral);
  }
  .th-btn{
    border:2px solid var(--ink);border-radius:10px;cursor:pointer;padding:7px 2px 6px;
    font-size:10px;font-weight:800;color:var(--ink);line-height:1.1;
  }
  .th-btn.on{outline:3px solid var(--coral);outline-offset:0}
  .th-btn.beach{background:#f2d49c} .th-btn.sea{background:#8fd7e4}
  .th-btn.city{background:#d9d6cc} .th-btn.bowl{background:#e8d3a8}
  .th-btn.room{background:#f0d9e6} .th-btn.garden{background:#cfe9a8}
  .th-btn.farm{background:#f0dda6} .th-btn.sky{background:#cbe4f7}
  .th-btn.forest{background:#bfd9a6} .th-btn.polar{background:#d6eaf6}
  .th-btn.china{background:#e7b2a4} .th-btn.snow{background:#e7f2f8}
  .th-btn.old{background:#e4d3b8} .th-btn.isle{background:#f0e2b8}
  .th-btn.mart{background:#ece7dc} .th-btn.office{background:#d5dbe3}
  .th-btn.circus{background:#f6d2a8} .th-btn.island{background:#d8e2a8}
  .th-btn.harbour{background:#c5d5de} .th-btn.venice{background:#e4d4bc}
  .th-btn.night{background:#8aa0b4} .th-btn.jungle{background:#b7d6a4}
  .th-btn.castle{background:#d4d0c6} .th-btn.road{background:#e0d0b0}
  .th-btn.cave{background:#b0b8c0} .th-btn.dragon{background:#c8a0a8}
  .th-btn.volcano{background:#c8a090} .th-btn.dungeon{background:#b0b0b8}
  .th-btn.boss{background:#c8a0b0} .th-btn.forge{background:#d0b0a0}

  .field{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;margin:0 0 8px}
  .field span{font-size:12px;font-weight:800;color:var(--copy)}
  .field b{font-size:12px;min-width:32px;text-align:right;color:var(--ink)}
  .field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;grid-column:1/3}
  .field input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:7px;background:var(--cream);border:2px solid rgba(15,59,74,.3)}
  .field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:var(--coral);border:2px solid var(--ink)}
  .field input[type=range]:disabled{opacity:.4}
  .num, .field input[type=number]{
    border:2px solid rgba(15,59,74,.3);border-radius:8px;background:#fff;padding:5px 6px;font-weight:800;color:var(--ink);width:100%;
  }
  input.num[type=number]{cursor:ew-resize}
  body.num-scrub, body.num-scrub *{cursor:ew-resize !important;user-select:none}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mode-row{display:flex;gap:6px;margin:0 0 8px}
  .mode-row .btn{flex:1}

  .lv-list{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:auto}
  .lv{
    border:2px solid var(--ink);background:#ffe9b8;border-radius:10px;cursor:pointer;
    padding:6px 8px;text-align:left;font-weight:800;font-size:12px;color:var(--ink);
    display:flex;justify-content:space-between;gap:8px;align-items:center;
  }
  .lv.on{background:#ffd9c4;border-color:var(--coral)}
  .lv .n{font-family:'Lilita One';font-weight:400}
  .lv-x{border:none;background:transparent;cursor:pointer;font-weight:800;color:#c74a2e;font-size:14px;padding:0 4px}

  #stage{min-width:0;min-height:0;display:flex;flex-direction:column;background:#e8d0a0}
  #board{flex:1;min-height:0;display:flex;align-items:center;justify-content:flex-start;padding:12px;position:relative}
  #deny{
    position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:6;
    pointer-events:none;text-align:center;max-width:min(460px,86%);
    background:#fff9ec;border:3px solid var(--coral);border-radius:14px;
    box-shadow:0 4px 0 var(--coral-dark);padding:8px 14px 9px;
  }
  #deny b{display:block;font-family:'Lilita One';font-size:16px;letter-spacing:.5px;color:var(--coral-dark);font-weight:400}
  #deny span{display:block;margin-top:2px;font-size:12px;font-weight:800;color:#7a2e1c;line-height:1.35}
  #boardNotes{display:contents}
  .insp-close{display:none}
  .insp-topic{display:none}
  #selBar{
    display:none;align-items:center;gap:6px;position:absolute;z-index:6;pointer-events:auto;
    left:50%;bottom:18px;translate:-50% 0;width:max-content;max-width:calc(100% - 24px);
    background:var(--paper);border:3px solid var(--ink);border-radius:16px;
    padding:4px 4px 4px 14px;box-shadow:0 4px 0 rgba(15,59,74,.28);
    animation:toolPop .24s cubic-bezier(.34,1.56,.64,1);
  }
  #selBar b{
    font-family:'Lilita One';font-weight:400;font-size:14px;letter-spacing:.3px;color:var(--ink);
    min-width:0;max-width:min(210px,46vw);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:2px;
  }
  #selBar .btn{flex:none;padding:7px 12px}
  body.sheet-open #selBar, body.obj-open #selBar{display:none}
  #objSheet{
    flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;
    padding:10px 10px 16px;background:rgba(246,220,171,.45);
  }
  #inspector.obj-open .tab-body{display:none !important}
  .obj-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:0 0 10px}
  .obj-head .kicker{margin-bottom:2px}
  #secSel #selHint.sel-title{
    font-family:'Lilita One';font-weight:400;font-size:20px;letter-spacing:.3px;
    color:var(--ink);line-height:1.1;margin:0 0 10px;
  }
  #view{
    background:#cbb888;border:4px solid var(--ink);border-radius:16px;
    box-shadow:0 10px 0 rgba(15,59,74,.28);overflow:hidden;max-width:100%;max-height:100%;
  }
  #map{display:block;cursor:crosshair;touch-action:none}
  #status{
    display:flex;gap:12px;flex-wrap:wrap;align-items:center;
    padding:7px 14px 8px;font-size:12px;font-weight:800;color:#3d5a66;background:rgba(255,249,236,.82);
  }
  #status b{color:var(--ink);font-family:'Lilita One';font-weight:400}
  #stHint{flex:1;min-width:140px;font-weight:700;color:var(--copy)}

  textarea#out{
    width:100%;min-height:180px;resize:vertical;border:3px solid var(--ink);border-radius:12px;
    background:#fff;padding:8px;font:12px/1.35 ui-monospace,Consolas,monospace;color:var(--ink);margin-top:8px;
  }
  .warn{background:#ffe0c8;border:2px solid var(--coral);border-radius:10px;padding:8px 10px;
    font-size:12px;font-weight:700;color:#7a2e1c;white-space:pre-wrap}
  .warn:empty{display:none}
  .warn.ok{background:#dff3c8;border-color:#5a9a3a;color:#2d5a1c}
  .hint{font-size:12px;font-weight:700;color:var(--copy);line-height:1.4;margin:0 0 8px}
  .pt-count{font-family:'Lilita One';font-weight:400;font-size:18px;color:var(--ink);line-height:1;min-width:16px}
  .export-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}

  #loadHint{font-size:12px;font-weight:700;color:var(--copy);display:block;margin:0 0 8px}
  #catTabs{display:flex;gap:4px;flex-wrap:wrap}
  .cat-tab{
    border:2px solid var(--ink);background:#ffe9b8;color:var(--ink);
    border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800;cursor:pointer;
    transition:transform .14s cubic-bezier(.34,1.56,.64,1), background .12s;
  }
  .cat-tab:hover{transform:translateY(-2px) scale(1.05)}
  .cat-tab:active{transform:translateY(1px) scale(.94)}
  .cat-tab.on{background:var(--coral);border-color:var(--coral);color:#fff;animation:toolPop .28s cubic-bezier(.34,1.56,.64,1)}
  #catList{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .cat-lv{
    min-width:42px;border:2px solid var(--ink);background:#ffe9b8;color:var(--ink);
    border-radius:10px;padding:6px 8px;font-family:'Lilita One';font-size:14px;cursor:pointer;
    transition:transform .14s cubic-bezier(.34,1.56,.64,1), background .12s;
  }
  .cat-lv:hover{transform:translateY(-2px) scale(1.06)}
  .cat-lv:active{transform:translateY(1px) scale(.92)}
  .cat-lv.on{background:#ffd9c4;border-color:var(--coral);animation:toolPop .28s cubic-bezier(.34,1.56,.64,1)}

  .overlay{
    position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
    background:rgba(8,36,47,.62);
  }
  .overlay.on{display:flex}
  .overlay.on .panel{animation:panelIn .48s cubic-bezier(.22,1.35,.36,1)}
  .panel{
    background:var(--paper);border:4px solid var(--ink);border-radius:24px;
    box-shadow:0 10px 0 rgba(15,59,74,.35);padding:20px 26px;width:min(520px,92%);
    max-height:86vh;overflow:auto;
  }
  /* Title stays at the top and the buttons stay at the bottom. Only the middle scrolls. */
  .panel:has(> .panel-body){
    display:flex;flex-direction:column;overflow:hidden;
  }
  .panel:has(> .panel-body) > .kicker,
  .panel:has(> .panel-body) > .gtitle,
  .panel:has(> .panel-body) > .help-actions{flex:0 0 auto}
  .panel-body{
    flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;
    --fade:26px;
  }
  .panel-body.fade-top{
    -webkit-mask-image:linear-gradient(#0000,#000 var(--fade));
            mask-image:linear-gradient(#0000,#000 var(--fade));
  }
  .panel-body.fade-bottom{
    -webkit-mask-image:linear-gradient(#000 calc(100% - var(--fade)), #0000);
            mask-image:linear-gradient(#000 calc(100% - var(--fade)), #0000);
  }
  .panel-body.fade-top.fade-bottom{
    -webkit-mask-image:linear-gradient(#0000,#000 var(--fade), #000 calc(100% - var(--fade)), #0000);
            mask-image:linear-gradient(#0000,#000 var(--fade), #000 calc(100% - var(--fade)), #0000);
  }
  .gtitle{font-family:'Lilita One';font-size:36px;margin:0 0 8px;line-height:.95}
  .rules{margin:0;padding:0;list-style:none;display:grid;gap:10px}
  .rules li{font-size:14px;font-weight:600;color:var(--copy);line-height:1.35}
  .rules li b{color:var(--ink)}
  .help-actions{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}

  #playOv{
    position:fixed;inset:0;z-index:50;display:none;flex-direction:column;background:#0a2a36;
  }
  #playOv.on{display:flex;height:100%;height:100dvh}
  #playFrame{flex:1 1 0;height:100%;min-height:0}
  #playBar{
    display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;gap:8px;
    padding:8px 12px;background:var(--ink);color:var(--cream);flex:0 0 auto;
    position:relative;z-index:2;
  }
  #playBar .logo{grid-column:1;justify-self:stretch;min-width:0;overflow:hidden}
  @media (max-width:720px){
    #playBar .logo{font-size:14px;gap:6px;letter-spacing:0}
    #playBar .logo-ball{width:12px;height:12px;flex-basis:12px}
  }
  #playActs{grid-column:2;display:flex;gap:8px;justify-content:center;align-items:center}
  #playBar .icon-btn[data-tip]::after{
    left:50%;top:calc(100% + 8px);transform:translate(-50%,0);
  }
  #playResult{
    grid-column:3;justify-self:end;min-width:0;
    font-family:'Lilita One';font-weight:400;font-size:18px;letter-spacing:.3px;
    color:var(--yellow);white-space:nowrap;text-align:right;text-shadow:none;
  }
  #playFrame{flex:1;border:none;background:#000;width:100%;min-height:0}

  #tourOv{position:fixed;inset:0;z-index:40;pointer-events:none}
  #tourSpot{
    position:absolute;border-radius:14px;border:3px solid var(--yellow);
    box-shadow:0 0 0 9999px rgba(8,36,47,.62);
    transition:left .2s,top .2s,width .2s,height .2s;
  }
  .tour-bubble{
    position:absolute;pointer-events:auto;width:min(300px,calc(100vw - 24px));
    background:var(--paper);border:4px solid var(--ink);border-radius:18px;
    box-shadow:0 8px 0 rgba(15,59,74,.35);padding:14px 16px;
  }
  .tour-bubble h3{font-family:'Lilita One';font-size:22px;margin:0 0 6px;letter-spacing:.4px}
  .tour-bubble p{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--copy);line-height:1.4}
  .tour-row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
  .tour-row .btn{flex:1;min-width:0;font-size:13px;padding:8px 10px;letter-spacing:.8px}

  /* Phone editor. A window that is too narrow for the side panels, or taller than
     it is wide, jumps straight here. There is no stacked in-between layout. */
  @media (max-width:1080px), (max-aspect-ratio: 1/1){
    #top{
      display:flex;flex-wrap:nowrap;align-items:center;gap:6px 8px;
      padding:max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
    }
    #top .logo{display:none}
    .top-cluster{
      order:1;flex:1 1 auto;width:auto;justify-content:flex-start;gap:6px;min-width:0;
      overflow-x:auto;scrollbar-width:none;
    }
    .top-actions{order:2;flex:0 0 auto;gap:4px}
    .top-actions .btn{padding:6px 8px;font-size:12px;letter-spacing:.3px}
    .wide{display:none}
    .narrow{display:inline}
    .top-div{display:none}
    #top .icon-btn{width:36px;height:36px;flex-basis:36px}
    #work{
      grid-template-columns:minmax(0,1fr);
      grid-template-rows:auto minmax(0,1fr) auto;
      min-width:0;position:relative;background:var(--paper);
    }
    #rail,#stage,#inspector,#board,#status{min-width:0;max-width:100%}
    #inspector{order:1}
    #stage{order:2}
    #rail{
      order:3;width:auto;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;
      border-right:none;border-bottom:none;border-top:3px solid rgba(15,59,74,.18);
      padding:5px max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
      gap:8px;
      overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
      scrollbar-width:none;
      --rail-dir:to right;--fade:28px;
    }
    #rail::-webkit-scrollbar{display:none}
    /* A soft edge says there are more tools past it. */
    #rail.fade-end{
      -webkit-mask-image:linear-gradient(var(--rail-dir),#000 calc(100% - var(--fade)),#0000);
              mask-image:linear-gradient(var(--rail-dir),#000 calc(100% - var(--fade)),#0000);
    }
    #rail.fade-start{
      -webkit-mask-image:linear-gradient(var(--rail-dir),#0000,#000 var(--fade));
              mask-image:linear-gradient(var(--rail-dir),#0000,#000 var(--fade));
    }
    #rail.fade-start.fade-end{
      -webkit-mask-image:linear-gradient(var(--rail-dir),#0000,#000 var(--fade),#000 calc(100% - var(--fade)),#0000);
              mask-image:linear-gradient(var(--rail-dir),#0000,#000 var(--fade),#000 calc(100% - var(--fade)),#0000);
    }
    #tools,#viewTogs{flex-direction:row;flex-wrap:nowrap;flex:0 0 auto}
    .rail-div{width:2px;height:28px;margin:0 4px;flex:0 0 2px;align-self:center}
    #rail .icon-btn{width:38px;height:38px;flex-basis:38px;border-radius:11px}
    #rail .icon-btn[data-tip]::after{
      left:50%;top:auto;bottom:calc(100% + 8px);transform:translate(-50%,0);
    }
    #board{padding:0;justify-content:stretch;align-items:stretch}
    #view{border:none;border-radius:0;box-shadow:none;width:100%;height:100%;max-width:none;max-height:none}

    /* The deny notice and the selection bar share the foot of the map, clear of the sheet. */
    #boardNotes{
      display:flex;flex-direction:column;align-items:center;gap:8px;
      position:absolute;left:10px;right:10px;bottom:10px;z-index:6;pointer-events:none;
    }
    #deny{position:static;transform:none;max-width:min(460px,100%);padding:6px 12px 7px}
    #deny b{font-size:14px}
    #selBar{display:flex;position:static;left:auto;bottom:auto;translate:none;margin:0;max-width:100%}

    /* Tool name and its hint. Tap the bar to read the whole hint. */
    #status{
      position:relative;z-index:6;flex-wrap:nowrap;overflow:visible;gap:8px;cursor:pointer;
      padding:4px max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left));font-size:11px;
    }
    #status span{flex:none;white-space:nowrap}
    .st-world,.st-cursor,.st-count,.st-map{display:none}
    #status #stHint{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
    #status.open #stHint{
      position:absolute;left:8px;right:8px;bottom:calc(100% + 8px);
      white-space:normal;overflow:visible;
      background:var(--ink);color:var(--cream);border-radius:12px;
      padding:9px 12px;font-size:12px;line-height:1.4;
      box-shadow:0 4px 0 var(--ink-deep);
    }
    #status.open #stHint:empty{display:none}

    /* The three buttons stay on the bar. Each one opens a popup over the map. */
    #inspector{
      position:relative;z-index:8;overflow:visible;min-height:0;
      border-left:none;border-top:none;border-bottom:3px solid rgba(15,59,74,.18);
    }
    body.sheet-open::before{
      content:"";position:fixed;inset:0;z-index:20;
      background:rgba(8,36,47,.46);
    }
    body.sheet-open #inspector{z-index:30}
    #inspTabs{
      box-sizing:border-box;width:100%;min-width:0;
      padding:8px 12px;gap:8px;
    }
    .insp-tab{
      flex:1 1 0;min-width:0;border-radius:10px;
      padding:8px 6px 7px;letter-spacing:1.2px;text-indent:1.2px;
    }
    #inspector:not(.sheet-open) .insp-tab.on{background:#ffe9b8;border-color:var(--ink);color:var(--ink);animation:none}
    #inspector.sheet-open .insp-topic{
      display:block;position:absolute;top:12px;left:16px;z-index:2;
      margin:0;font-family:'Lilita One';font-weight:400;font-size:22px;
      letter-spacing:.4px;color:var(--ink);line-height:1;
    }
    #inspector.sheet-open .insp-close{
      display:grid;place-items:center;position:absolute;top:8px;right:8px;z-index:2;
      width:36px;height:36px;padding:0;cursor:pointer;
      border:2px solid var(--ink);border-radius:10px;background:var(--ink);color:var(--cream);
    }
    .insp-close svg{width:18px;height:18px;display:block}
    #inspector:not(.sheet-open) .tab-body{display:none !important}
    #inspector.sheet-open #inspPop{
      display:flex;flex-direction:column;position:fixed;z-index:31;
      left:50%;top:50%;translate:-50% -50%;
      width:min(440px, calc(100% - 28px));
      max-height:min(78dvh, 520px);
      padding:46px 0 0;
      background:#fbeccf;border:3px solid var(--ink);border-radius:22px;
      box-shadow:0 10px 0 rgba(15,59,74,.35);
      overflow:hidden;
      animation:panelIn .28s cubic-bezier(.22,1.2,.36,1);
    }
    #inspector.sheet-open .tab-body{
      position:relative;top:auto;left:auto;right:auto;
      flex:1 1 auto;min-height:0;max-height:none;margin:0;
      border:none;border-radius:0;box-shadow:none;
      padding:4px 12px 16px;
      background:transparent;
      overscroll-behavior:contain;
      animation:none;
    }

    .th-grid{grid-template-columns:repeat(4, minmax(0,1fr));gap:5px}
    .th-btn{font-size:10px;padding:8px 1px 7px}
    .btn.tiny{padding:8px 12px}
    .cat-tab{padding:6px 11px}
    .field input[type=range]{height:30px}
    .field input[type=range]::-webkit-slider-runnable-track{height:12px}
    .field input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-8px}
    .panel{padding:16px 14px;border-radius:18px;width:min(520px, calc(100% - 16px))}
    .gtitle{font-size:28px}
    .rules li{font-size:13px}
    textarea,input,select,textarea#out{font-size:16px}
    /* The game fills the phone. Stop floats over the top left. Sound, settings
       and help stay in the game, on the right. */
    #playBar{
      position:absolute;top:0;left:0;right:auto;width:auto;
      display:flex;align-items:center;gap:10px;
      background:transparent;box-shadow:none;
      pointer-events:none;z-index:3;
      padding:calc(6px + env(safe-area-inset-top)) 0 0 calc(8px + env(safe-area-inset-left));
    }
    #playBar .logo, #playRestart, #playTab{display:none}
    #playActs{display:flex;align-items:center;gap:8px;pointer-events:none}
    #playResult{grid-column:auto;justify-self:auto;text-align:left;pointer-events:none}
    #playBack{pointer-events:auto}
    #playBack{pointer-events:auto;width:36px;height:36px;flex-basis:36px;border-radius:12px}
    #playBack svg{width:16px;height:16px}
    #playFrame{flex:1 1 auto;height:100%}
  }
  /* A phone on its side is short. The tools move to a column on the left and the panel
     floats over the right of the map, so the map keeps the full height. */
  @media (max-width:1080px) and (orientation:landscape) and (max-height:540px){
    #top{padding-top:max(4px, env(safe-area-inset-top));padding-bottom:4px}
    #top .icon-btn{width:34px;height:34px;flex-basis:34px}
    #work{grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
    #rail{
      order:0;grid-column:1;grid-row:1;flex-direction:column;align-items:center;
      border-top:none;border-right:3px solid rgba(15,59,74,.18);
      padding:6px 6px max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
      overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
      --rail-dir:to bottom;
    }
    #tools,#viewTogs{flex-direction:column}
    .rail-div{width:28px;height:2px;margin:2px 0}
    #rail .icon-btn{width:36px;height:36px;flex-basis:36px}
    #rail .icon-btn[data-tip]::after{left:calc(100% + 10px);top:50%;bottom:auto;transform:translateY(-50%)}
    #stage{grid-column:2;grid-row:1}
    #status{padding-bottom:max(4px, env(safe-area-inset-bottom))}
    #inspector{
      position:absolute;top:8px;right:max(8px, env(safe-area-inset-right));
      display:flex;flex-direction:column;max-width:calc(100% - 80px);
      max-height:calc(100% - 42px - env(safe-area-inset-bottom, 0px));
      border:none;background:transparent;
    }
    #inspTabs{padding:0;gap:5px;justify-content:flex-end}
    .insp-tab{flex:0 0 auto;padding:7px 12px 6px;box-shadow:0 3px 0 rgba(15,59,74,.28)}
    #inspector.sheet-open #inspPop{max-height:min(86dvh, 420px)}
    #boardNotes{right:auto;max-width:calc(100% - min(360px, 52vw) - 30px);align-items:flex-start}
  }
  @media (hover:none) and (pointer:coarse){
    .btn:hover:not(:disabled),
    .icon-btn:hover:not(:disabled),
    .insp-tab:hover,
    .cat-tab:hover,
    .cat-lv:hover{transform:none;animation:none}
    .icon-btn:hover:not(:disabled) svg{transform:none}
    .icon-btn[data-tip]::after{display:none}
  }
  @keyframes iconHop{
    0%{transform:translateY(0) scale(1,1)}
    22%{transform:translateY(2px) scale(1.14,.82)}
    58%{transform:translateY(-8px) scale(.94,1.16) rotate(-8deg)}
    100%{transform:translateY(-4px) scale(1.1)}
  }
  @keyframes btnHop{
    0%{transform:translateY(0) scale(1,1)}
    22%{transform:translateY(2px) scale(1.08,.88)}
    58%{transform:translateY(-7px) scale(.97,1.1) rotate(-1.5deg)}
    100%{transform:translateY(-4px) scale(1.06)}
  }
  @keyframes panelIn{
    0%{transform:translateY(24px) scale(.9)}
    70%{transform:translateY(-4px) scale(1.02)}
    100%{transform:none}
  }
  @keyframes toolPop{
    0%{transform:scale(.82)}
    60%{transform:scale(1.08)}
    100%{transform:none}
  }
  .tour-bubble.juice{animation:bubbleIn .34s cubic-bezier(.22,1.45,.36,1)}
  @keyframes bubbleIn{
    0%{transform:translateY(10px) scale(.94)}
    100%{transform:none}
  }
  @keyframes sheetIn{
    0%{transform:translateY(-10px);opacity:0}
    100%{transform:none;opacity:1}
  }
  @media (prefers-reduced-motion: reduce){
    .btn,.icon-btn,.cat-tab,.cat-lv,.logo-ball,
    .overlay.on .panel,.tour-bubble.juice,
    #inspector .tab-body,#selBar{animation:none;transition:none}
  }