/* Tetris component boundary. Theme-level placement lives in theme.css. */
#tetris-doodle-shell,
#tetris-doodle-shell * {
  box-sizing: border-box;
}

#tetris-doodle-shell {
  background: transparent;
  border: 0;
  display: block;
  font-size: 16px;
  height: 100%;
  line-height: 1;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

#tetris-doodle-shell canvas {
  display: block;
  height: auto;
  max-width: none;
}

#tetris-doodle-shell button {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  margin: 0;
  padding: 0;
}

    /* ====== GAME CSS (fully scoped) ====== */
    #tetris-doodle-root{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
      color:#15161b;
      --td-surface:#edf1f7;
      --td-dark:rgba(163,177,198,.62);
      --td-light:rgba(255,255,255,.96);
      --td-raised:8px 8px 18px var(--td-dark),-8px -8px 18px var(--td-light);
      --td-small:4px 4px 9px var(--td-dark),-4px -4px 9px var(--td-light);
      --td-inset:inset 3px 3px 7px rgba(163,177,198,.55),inset -3px -3px 7px rgba(255,255,255,.9);
      user-select:none; -webkit-user-select:none;
      touch-action:none;
      display:block;
      height:100%;
      overflow:hidden;
      width:100%;
    }

    #tetris-doodle-root .paper{
      background:
        linear-gradient(0deg, rgba(237,241,247,.92), rgba(237,241,247,.92)),
        repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0px, rgba(0,0,0,.04) 1px, transparent 1px, transparent 26px),
        radial-gradient(1200px 700px at 30% -10%, rgba(255,180,210,.20), transparent 55%),
        radial-gradient(900px 600px at 90% 0%, rgba(160,220,255,.18), transparent 55%),
        var(--td-surface);
      height:100%;
      overflow:hidden;
      padding:0 10px 8px;
      border-radius:0 0 14px 14px;
    }

    #tetris-doodle-root .wrap{
      display:grid;
      height:100%;
      margin:0 auto;
      width:min(1100px,calc((var(--visible-height) - 80px)/2 + 250px),calc(100vw - 20px));
    }
    #tetris-doodle-root .row{ display:grid; grid-template-columns:minmax(0,1fr); height:100%; min-height:0; align-items:stretch; }

    #tetris-doodle-root .card{
      background:var(--td-surface);
      border:1px solid rgba(21,22,27,.68);
      border-radius:20px;
      box-shadow:var(--td-raised);
      display:grid;
      gap:7px;
      grid-template-rows:auto auto minmax(0,1fr) auto;
      height:100%;
      min-height:0;
      overflow:hidden;
      padding:10px;
      position:relative;
    }
    #tetris-doodle-root .card:before{
      content:"";
      position:absolute; inset:6px;
      border: 1px dashed rgba(0,0,0,.22);
      border-radius: 10px;
      pointer-events:none;
    }

    #tetris-doodle-root .header{ display:flex; gap:10px; align-items:center; justify-content:space-between; min-height:24px; }
    #tetris-doodle-root .title{ font-weight:900; letter-spacing:.6px; display:flex; align-items:center; gap:10px; }
    #tetris-doodle-root .badge{
      font-size:12px;
      color:#2a2c36;
      padding:4px 10px;
      border-radius:999px;
      border:2px solid #15161b;
      background:var(--td-surface);
      box-shadow:var(--td-small);
      white-space:nowrap;
    }

    #tetris-doodle-root .stats{ display:grid; gap:5px; grid-template-columns:repeat(4,minmax(58px,88px)); justify-content:center; }
    #tetris-doodle-root .stat{
      align-items:baseline;
      background:var(--td-surface);
      border:1px solid rgba(21,22,27,.62);
      border-radius: 12px;
      box-shadow:var(--td-inset);
      display:flex;
      gap:4px;
      justify-content:center;
      padding:3px 6px;
      min-width:0;
    }
    #tetris-doodle-root .stat .k{ font-size:9px; color:rgba(0,0,0,.70); font-weight:700; }
    #tetris-doodle-root .stat .v{ font-size:13px; font-weight:1000; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    #tetris-doodle-root .canvWrap{
      display:grid;
      gap:8px;
      grid-template-columns:auto clamp(112px,19%,166px);
      height:100%;
      justify-content:center;
      min-height:0;
      min-width:0;
      overflow:hidden;
    }
    #tetris-doodle-root .boardSlot{ display:grid; height:100%; min-height:0; min-width:0; place-items:center; }

    #tetris-doodle-root canvas{
      background:
        linear-gradient(0deg, rgba(245,247,251,.84), rgba(245,247,251,.84)),
        repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0px, rgba(0,0,0,.035) 1px, transparent 1px, transparent 22px),
        #ffffff;
      border-radius:16px;
      border:2px solid #15161b;
      box-shadow:var(--td-inset);
      touch-action:none;
    }

    #tetris-doodle-root .side{ align-content:center; display:grid; gap:8px; height:100%; min-height:0; min-width:0; }
    #tetris-doodle-root .sideBox{
      background:var(--td-surface);
      border:1px solid rgba(21,22,27,.62);
      border-radius:16px;
      box-shadow:var(--td-small);
      min-height:0;
      min-width:0;
      overflow:hidden;
      padding:7px;
    }
    #tetris-doodle-root .sideBox h3{
      margin:0 0 4px;
      font-size:11px;
      letter-spacing:.2px;
      color:#15161b;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      font-weight:900;
    }
    #tetris-doodle-root .sideBox--next canvas{ border-width:1px; border-radius:8px; box-shadow:none; height:clamp(76px,14dvh,120px); width:100%; }
    #tetris-doodle-root .hint{ font-size:10px; color:rgba(0,0,0,.75); line-height:1.4; font-weight:600; }
    #tetris-doodle-root .btnRow{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }

    #tetris-doodle-root .btn{
      align-items:center;
      border:2px solid #15161b;
      color:#15161b;
      background:var(--td-surface);
      border-radius: 999px;
      box-shadow:var(--td-small);
      display:inline-flex;
      gap:6px;
      justify-content:center;
      padding:7px 10px;
      font-weight:900;
      white-space:nowrap;
    }
    #tetris-doodle-root .btn:active{ box-shadow:var(--td-inset); transform:translateY(1px); }
    #tetris-doodle-root .btn--start{ background:#309b55; color:#fff; }
    #tetris-doodle-root .btn--pause{ background:#ff6f3a; color:#fff; }
    #tetris-doodle-root .btn__shortcut{ font-size:.78em; line-height:1; }

    #tetris-doodle-root .footerHint{ display:none; font-size:11px; color:rgba(0,0,0,.70); line-height:1.35; text-align:center; font-weight:700; }
    #tetris-doodle-root .mobileHelp{ display:none; }

    #tetris-doodle-root kbd{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 8px;
      background:var(--td-surface);
      box-shadow:var(--td-inset);
      border:2px solid #15161b;
      display:inline-block;
    }

    @media (max-width: 819px){
      #tetris-doodle-root .wrap{ width:100%; }
      #tetris-doodle-root .paper{ padding:4px; }
      #tetris-doodle-root .card{ gap:4px; padding:6px; }
      #tetris-doodle-root .stats{ gap:3px; grid-template-columns:repeat(4,minmax(0,72px)); }
      #tetris-doodle-root .stat{ gap:2px; padding:2px 3px; }
      #tetris-doodle-root .stat .k{ font-size:7px; }
      #tetris-doodle-root .stat .v{ font-size:11px; }
      #tetris-doodle-root .canvWrap{ gap:5px; grid-template-columns:auto clamp(78px,21%,96px); }
      #tetris-doodle-root .side{ gap:6px; width:100%; }
      #tetris-doodle-root .sideBox{ border-radius:12px; padding:4px; }
      #tetris-doodle-root .sideBox--controls{
        background:transparent;
        border:0;
        padding:0;
      }
      #tetris-doodle-root .sideBox--controls h3,
      #tetris-doodle-root .sideBox--controls .hint{ display:none; }
      #tetris-doodle-root .sideBox--controls .btnRow{
        align-items:stretch;
        flex-direction:column;
        flex-wrap:nowrap;
        gap:4px;
        justify-content:center;
        margin-top:0;
      }
      #tetris-doodle-root .sideBox--next h3{ font-size:8px; margin-bottom:2px; }
      #tetris-doodle-root .sideBox--next canvas{ height:clamp(70px,13dvh,104px); }
      #tetris-doodle-root .btn{ font-size:16px; min-height:32px; padding:4px 3px; width:100%; }
      #tetris-doodle-root .btn__shortcut{ display:none; }
      #tetris-doodle-root .footerHint{
        display:block;
        width:100%;
        padding:0 4px;
        overflow-wrap:anywhere;
        font-size:9px;
        line-height:1.25;
      }
      #tetris-doodle-root .mobileHelp{ display:inline; }
    }

    @media (max-width: 420px){
      #tetris-doodle-root .header{ align-items:center; min-height:20px; }
      #tetris-doodle-root .title{ gap:5px; font-size:14px; }
      #tetris-doodle-root .badge{ padding:4px 7px; font-size:10px; }
    }

    @media (max-height: 720px){
      #tetris-doodle-root .paper{ padding:3px; }
      #tetris-doodle-root .card{ border-radius:14px; gap:3px; padding:5px; }
      #tetris-doodle-root .header{ min-height:18px; }
      #tetris-doodle-root .title{ font-size:12px; }
      #tetris-doodle-root .badge{ font-size:9px; padding:3px 6px; }
      #tetris-doodle-root .footerHint{ font-size:8px; }
    }

/* Tetris controls, key patterns, and stock — 0.16.7. */
#tetris-doodle-root .sideBox--stock canvas {
  border-width:1px;
  border-radius:8px;
  box-shadow:none;
  display:block;
  height:clamp(48px,8dvh,72px);
  width:100%;
}
#tetris-doodle-root .btnRow--transport {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:7px;
}
#tetris-doodle-root .btnRow--transport .btn { min-width:0; width:100%; }
#tetris-doodle-root .btn__label { font-size:.86em; }
#tetris-doodle-root .key-help--blue { display:none; }
#tetris-doodle-root[data-key-pattern="blue"] .key-help--red { display:none; }
#tetris-doodle-root[data-key-pattern="blue"] .key-help--blue { display:inline; }
#tetris-doodle-root .key-token {
  color:#d9272e;
  font:900 1em/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
#tetris-doodle-root[data-key-pattern="blue"] .key-token { color:#187ee6; }
#tetris-doodle-root .key-pattern { margin-top:8px; }
#tetris-doodle-root .key-pattern__label {
  display:block;
  margin-bottom:5px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
}
#tetris-doodle-root .key-pattern__buttons { display:flex; gap:7px; }
#tetris-doodle-root .pattern-button {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:4px;
  border:2px solid #15161b;
  border-radius:50%;
  background:var(--td-surface);
  box-shadow:var(--td-small);
  cursor:pointer;
}
#tetris-doodle-root .pattern-button img { width:100%; height:100%; object-fit:contain; }
#tetris-doodle-root .pattern-button.is-current { box-shadow:var(--td-inset); transform:translateY(1px); }
#tetris-doodle-root .pattern-button--red.is-current { outline:2px solid #d9272e; outline-offset:2px; }
#tetris-doodle-root .pattern-button--blue.is-current { outline:2px solid #187ee6; outline-offset:2px; }
#tetris-doodle-root .mobile-stock-button { display:none; }

@media (max-width:819px) {
  #tetris-doodle-root .sideBox--stock { display:none; }
  #tetris-doodle-root .key-pattern { display:none; }
  #tetris-doodle-root .btnRow--transport {
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-top:0;
  }
  #tetris-doodle-root .btn__label { display:none; }
  #tetris-doodle-root .mobile-stock-button {
    display:grid;
    place-items:center;
    width:100%;
    aspect-ratio:1;
    margin-top:12px;
    padding:0;
    overflow:hidden;
    border:2px solid #15161b;
    border-radius:50%;
    background:var(--td-surface);
    box-shadow:var(--td-small);
    cursor:pointer;
  }
  #tetris-doodle-root .mobile-stock-button:active { box-shadow:var(--td-inset); transform:translateY(1px); }
  #tetris-doodle-root .mobile-stock-button img {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
  }
}

/* Tetris transport/help refinement and mobile Stock preview — 0.16.8. */
#tetris-doodle-root .transport-cycle {
  position:relative;
  display:grid;
  place-items:center;
  min-width:1.8em;
  min-height:1.25em;
  overflow:hidden;
  font-weight:900;
}
#tetris-doodle-root .transport-cycle > span {
  grid-area:1/1;
  animation:td-transport-dissolve 4s infinite both;
}
#tetris-doodle-root .transport-cycle > span:nth-child(2) { animation-delay:-2s; }
@keyframes td-transport-dissolve {
  0%, 28.5% { opacity:1; }
  50%, 78.5% { opacity:0; }
  100% { opacity:1; }
}
#tetris-doodle-root .key-help { width:100%; }
#tetris-doodle-root .help-line {
  display:flex;
  align-items:center;
  min-width:0;
  min-height:1.45em;
  white-space:nowrap;
}
#tetris-doodle-root .key-token {
  margin-right:.16em;
  font-weight:1000;
}
#tetris-doodle-root .drop-mode-cycle {
  position:relative;
  display:inline-grid;
  align-items:center;
  height:1.45em;
  min-width:9.7em;
  overflow:hidden;
  vertical-align:middle;
}
#tetris-doodle-root .drop-mode-cycle > span {
  grid-area:1/1;
  white-space:nowrap;
  animation:td-help-vertical-cycle 4s infinite both;
}
#tetris-doodle-root .drop-mode-cycle > span:nth-child(2) { animation-delay:-2s; }
@keyframes td-help-vertical-cycle {
  0%, 28.5% { transform:translateY(0); opacity:1; }
  50% { transform:translateY(115%); opacity:0; }
  50.01%, 78.5% { transform:translateY(-115%); opacity:0; }
  100% { transform:translateY(0); opacity:1; }
}

@media (max-width:819px) {
  #tetris-doodle-root .sideBox--stock {
    display:block;
  }
  #tetris-doodle-root .sideBox--stock h3 {
    font-size:8px;
    margin-bottom:2px;
  }
  #tetris-doodle-root .sideBox--stock canvas {
    height:clamp(42px,7dvh,58px);
  }
}

@media (prefers-reduced-motion:reduce) {
  #tetris-doodle-root .transport-cycle > span:first-child,
  #tetris-doodle-root .drop-mode-cycle > span:first-child {
    animation:none;
    opacity:1;
    transform:none;
  }
  #tetris-doodle-root .transport-cycle > span:nth-child(2),
  #tetris-doodle-root .drop-mode-cycle > span:nth-child(2) {
    display:none;
  }
}