:root{
    --bg:#0b121a; --panel:#121a24; --muted:#8ea2b2; --fg:#e8f0ff;
    --acc:#7dd3fc; --hi:#a5b4fc; --grid:#2a3647;
    --preview-size:200px;
    --sel-color:#93c5fd;
    --stage-bg:#ffffff;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:var(--bg); color:var(--fg);
    font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP",Helvetica,Arial;
    display:grid; grid-template-rows:auto 1fr; gap:12px; padding:16px;
    overflow:auto; /* ← ページ全体を縦スクロール可に */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  header{display:flex; align-items:center; gap:12px}
  header h1{font-size:18px; margin:0 8px 0 0}
  .tag{padding:2px 8px; border:1px solid #2a3342; color:var(--muted); border-radius:999px; font-size:12px}

  .panel{background:var(--panel); border:1px solid #1f2a38; border-radius:14px; padding:12px; min-height:0; position:relative; isolation:isolate}
  .panel h2{margin:0 0 8px 0; font-size:13px; color:var(--muted); font-weight:600}
  .section-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
  .section-head h2{margin:0}
  .section-toggle{padding:4px 10px; font-size:12px}
  .section-body{min-height:0}
  .is-collapsed .section-body{display:none}

  .workspace{
    display:grid;
    grid-template-columns: 480px 1fr 260px 260px;
    grid-template-rows: minmax(260px, auto) 1fr auto;
    grid-template-areas:
      "tools stage palette preview"
      "layers stage palette preview"
      "frames frames frames frames";
    gap:14px; min-height:0; height:100%;
    overflow:auto; /* ← 中でスクロール可に */
  }

  .topbar{ grid-area:tools; display:grid; grid-auto-rows:min-content; gap:12px; align-content:start; overflow:visible }
  .toolbar{ display:grid; grid-template-columns:repeat(6,36px); gap:8px; margin-bottom:8px }
  .toolbar:last-child{ margin-bottom:0 }
  .tool{
    display:grid;
    place-items:center;
    height:36px;
    width:36px;
    padding:0;
    background:#31465f;
    border:1px solid #58779b;
    border-radius:10px;
    cursor:pointer;
    line-height:1;
    overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.16);
  }
  .tool:hover{background:#3c5776; border-color:#76a1d1}
  .tool img{
    display:block;
    width:22px;
    height:22px;
    object-fit:contain;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
    transition:transform .12s ease, filter .12s ease;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
  }
  .tool:hover img{transform:scale(1.05); filter:drop-shadow(0 2px 3px rgba(0,0,0,.22))}
  .tool[data-active="true"]{
    outline:2px solid var(--acc);
    outline-offset:2px;
    background:#46688b;
    border-color:#92c6ff;
  }
  .row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:36px}
  .kbd{background:#0d1621;border:1px solid #2a3a4f;border-radius:6px;padding:2px 6px;color:#cbd5e1;font-family:ui-monospace,Menlo,Consolas,monospace}
  button{appearance:none; background:#172130; color:var(--fg); border:1px solid #243245; padding:6px 8px; border-radius:10px; cursor:pointer}
  button:hover{background:#1d2a3d; border-color:#2f4158}
  input[type="number"],select{background:#0f1622; color:var(--fg); border:1px solid #233144; border-radius:10px; padding:6px 8px}
  input[type="color"]{appearance:none; width:42px; height:32px; padding:0; border:1px solid #233144; border-radius:8px; background:#0f1622; overflow:hidden; cursor:pointer}
  input[type="checkbox"]{accent-color:#7dd3fc}
  input[type="range"]{accent-color:#7dd3fc}

  .stage-card{
    grid-area:stage; position:relative; display:grid; grid-template-rows:1fr auto; gap:8px;
    background:#0b1119; border:1px solid #202b3a; border-radius:12px; min-height:360px; padding:12px; overflow:hidden;
    contain:layout paint;
  }
  .stage-area{ position:relative; width:100%; height:100%; min-height:0 }
  .stage-scroll{ position:relative; width:100%; height:100%; overflow:auto; min-height:0; overscroll-behavior:contain; touch-action:manipulation }
  .stage-square{ position:relative; display:block; width:max-content; height:max-content }
  .stage-wrap{ position:relative; line-height:0; min-height:0; background:var(--stage-bg) }
  #stage{ background:transparent; image-rendering:pixelated; display:block; position:relative; z-index:1; pointer-events:auto; touch-action:none; -webkit-user-select:none; user-select:none }
  #gridOverlay{ position:absolute; left:0; top:0; pointer-events:none; z-index:2; will-change:transform }
  #shapePreview{ position:absolute; left:0; top:0; pointer-events:none; z-index:3; will-change:transform; opacity:0.8 }
  .stage-foot{ display:flex; justify-content:space-between; align-items:center; color:#94a3b8; font-size:12px }

  .palette-card{ grid-area:palette; display:grid; grid-template-rows:auto auto 1fr; gap:10px; overflow:auto }
  .current-color{ width:100%; height:36px; border-radius:8px; border:1px solid #233144; background:#0f1622; display:flex; align-items:center; gap:8px; padding:6px 8px }
  .current-color .sw{width:22px; height:22px; border-radius:6px; border:1px solid #33455d}
  .swatch-box{
    background:#0e1622;
    border:1px solid #223046;
    border-radius:10px;
    padding:8px;
    overflow-y:auto;
    overflow-x:hidden;
  }
  #palette{
    display:grid;
    grid-template-columns:repeat(7,24px);
    grid-auto-rows:24px;
    gap:8px;
    align-content:start;
    width:216px;
    max-width:100%;
  }
  .swatch{ width:24px; height:24px; border-radius:6px; border:1px solid #33455d; cursor:pointer }

  .preview-card{
    grid-area:preview; display:grid; grid-template-rows:auto auto auto; gap:12px; overflow:auto;
    align-content:start;
  }
  .mini-prev{
    position:relative; width:var(--preview-size); height:var(--preview-size); border:1px solid #223046; border-radius:10px; overflow:hidden; margin:0 auto; background:
      linear-gradient(45deg,#0d1621 25%,transparent 25% 75%,#0d1621 75%),
      linear-gradient(45deg,transparent 25%,#0d1621 25% 75%,transparent 75%);
    background-size:16px 16px; background-position:0 0,8px 8px;
    cursor:crosshair;
  }
  .mini-prev:active {
    box-shadow: inset 0 0 8px rgba(125,211,252,0.5);
  }
  .mini-prev img{ width:100%; height:100%; object-fit:contain; image-rendering:pixelated }
  .mini-prev .zone{ position:absolute; inset:0 }
  .save-box{display:grid; gap:10px; justify-items:center; align-self:start; grid-auto-rows:min-content;}
  .save-row{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
  .preview-card .save-row select{ height:36px }
  .preview-card .save-row button{ height:36px }
  #saveBtn{ width:36px; padding:0; line-height:36px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .panel-launchers{justify-content:center}
  .panel-launchers button{min-width:88px}

  .layers-card{
    position:fixed; left:24px; right:348px; bottom:24px; z-index:30;
    display:grid; grid-template-rows:auto 1fr; gap:8px; min-height:200px;
    max-height:min(340px, calc(100vh - 120px));
    overflow:auto;
    background:rgba(18,26,36,.88);
    backdrop-filter:blur(12px);
    box-shadow:0 18px 40px rgba(0,0,0,.28);
    transition:opacity .18s ease, transform .18s ease;
  }
  #layers{
    display:grid; gap:6px; overflow:auto; padding-right:6px; min-height:0;
    max-height:400px; /* ← 見切れ防止 */
  }
  .layer-item{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; background:#0d1621; border:1px solid #223046; border-radius:8px; padding:6px }
  .layer-item[data-active="true"]{outline:2px solid var(--hi)}
  .layer-left{display:flex; gap:8px; align-items:center; min-width:180px}
  .eye{width:22px; text-align:center}
  .sel{width:18px; height:18px}
  .layer-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
  .layer-controls .oplabel{min-width:70px}
  .layer-controls .oprange{ width:120px }
  .layer-controls select{ min-width:120px }
  .kill{ width:28px; height:28px; line-height:1; border-radius:8px; background:#1a2231; border:1px solid #2a3850; cursor:pointer }
  .kill:hover{ background:#242f44 }

  .frames-card{
    position:fixed; right:24px; bottom:24px; width:324px; z-index:31;
    display:grid; grid-template-rows:auto auto 1fr; gap:8px; min-height:0;
    max-height:min(340px, calc(100vh - 120px)); overflow:auto;
    background:rgba(18,26,36,.88);
    backdrop-filter:blur(12px);
    box-shadow:0 18px 40px rgba(0,0,0,.28);
    transition:opacity .18s ease, transform .18s ease;
  }
  .layers-card.is-collapsed,
  .frames-card.is-collapsed{
    opacity:0;
    pointer-events:none;
    transform:translateY(18px);
  }
  .frames{display:flex; flex-wrap:wrap; gap:8px; overflow:auto; padding:4px; min-height:96px; max-height:100%; align-content:flex-start}
  .thumb{position:relative; border:1px solid #2a3647; border-radius:8px; padding:4px; background:#0f1622; cursor:pointer; flex:0 0 auto}
  .thumb[data-active="true"]{outline:2px solid var(--acc)}
  .thumb img{image-rendering:pixelated; display:block}
  .thumb .idx{position:absolute; top:2px; left:4px; font-size:11px; color:#94a3b8}

  @media (max-width: 900px){
    html, body{ height:auto; }
    body{ overflow:auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
    .workspace{
      grid-template-columns: 1fr;
      grid-template-areas:
        "tools"
        "stage"
        "palette"
        "preview"
        "layers"
        "frames";
      height:auto; min-height:0; overflow:visible;
      gap: 8px;
    }
    .panel{ overflow:visible; }
    .layers-card,
    .frames-card{
      position:static;
      left:auto; right:auto; bottom:auto; z-index:auto; width:auto;
      background:var(--panel);
      backdrop-filter:none;
      box-shadow:none;
      transform:none;
      opacity:1;
      pointer-events:auto;
    }
    #layers{ max-height: 300px; }
    .frames{ max-height: 200px; }
    .preview-card .save-row{ justify-content:flex-start; }
    .frames-card{ max-height: 400px; }
    .frames-card .row{ flex-wrap: wrap; gap: 6px; }
    .frames-card .row button{ font-size: 12px; padding: 4px 6px; }
    .frames-card .row input{ font-size: 12px; }
    .frames-card .row span{ font-size: 12px; }
    .layers-card .row{ flex-wrap: wrap; gap: 6px; }
    .layers-card .row button{ font-size: 12px; padding: 4px 6px; }
    .layer-item{ display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; background:#0d1621; border:1px solid #223046; border-radius:8px; padding:6px; font-size: 13px; }
    .layer-left{ display:flex; gap:6px; align-items:center; min-width:120px; }
    .layer-controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size: 12px; }
    .layer-controls .oplabel{ min-width:60px; }
    .layer-controls .oprange{ width:100px; }
    .layer-controls select{ min-width:100px; }
    .thumb img{image-rendering:pixelated; display:block; width: 28px; height: 28px; }
    .thumb{ padding: 3px; }
    .thumb .idx{ font-size: 10px; }
  }

  @media (max-width: 1280px){
    .workspace{
      grid-template-columns: 1fr;
      grid-template-areas:
        "tools"
        "stage"
        "palette"
        "preview"
        "layers"
        "frames";
      height:auto; min-height:0; overflow:visible;
      gap: 10px;
    }
    .panel{ overflow:visible; }
    .layers-card,
    .frames-card{
      position:static;
      left:auto; right:auto; bottom:auto; z-index:auto; width:auto;
      background:var(--panel);
      backdrop-filter:none;
      box-shadow:none;
      transform:none;
      opacity:1;
      pointer-events:auto;
    }
    #layers{ max-height: 350px; }
    .frames{ max-height: 250px; }
    .thumb img{image-rendering:pixelated; display:block; width: 30px; height: 30px; }
    .thumb{ padding: 4px; }
    .thumb .idx{ font-size: 11px; }
    .layers-card .row{ flex-wrap: wrap; gap: 6px; }
    .layers-card .row button{ font-size: 13px; padding: 5px 8px; }
    .layer-item{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; background:#0d1621; border:1px solid #223046; border-radius:8px; padding:8px; font-size: 14px; }
    .layer-left{ display:flex; gap:8px; align-items:center; min-width:140px; }
    .layer-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size: 13px; }
    .layer-controls .oplabel{ min-width:70px; }
    .layer-controls .oprange{ width:120px; }
    .layer-controls select{ min-width:120px; }
  }