/* Mobile Canvas: secondary tools above the work, one connected hand tray below. */
@media (max-width: 900px), (max-width: 1024px) and (max-height: 500px) {
  main.ritual-room.canvas .canvas-v111-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 5px;
  }
  main.ritual-room.canvas .canvas-stage-real {
    /* Fit the width first, then give back height to the hand on short screens. */
    flex: 0 1 auto;
    height: calc((100vw - var(--chrome-x) - var(--chrome-x)) / .831 + 28px);
    grid-template-rows: 28px minmax(0, 1fr);
  }
  main.ritual-room.canvas .canvas-v111-layout .canvas-art-mount {
    grid-row: 2;
    width: min(100%, calc((100cqh - 28px) * .831));
    align-self: start;
    isolation: isolate;
    z-index: 0;
  }
  main.ritual-room.canvas .canvas-v111-layout .canvas-toolbar {
    inset: 0 0 auto auto;
    height: 28px;
    z-index: 3;
  }
  main.ritual-room.canvas .canvas-v111-layout .canvas-toolbar [data-action="canvas-grid"] {
    color: #765b43;
    font-size: 10px;
    letter-spacing: .065em;
  }
  main.ritual-room.canvas .canvas-daily-reveal {
    inset: 0 auto auto 0;
    width: 132px;
    z-index: 4;
  }
  main.ritual-room.canvas .canvas-daily-reveal > .canvas-reveal-toggle {
    inset: 0 auto auto 0;
    width: 132px;
    padding: 0 4px;
    color: #765b43;
    font-size: 10px;
  }
  main.ritual-room.canvas .canvas-reveal-toggle-mobile > span { transform: rotate(180deg); }
  main.ritual-room.canvas .canvas-daily-reveal.is-details-open {
    inset: 0 auto auto 0;
    width: min(286px, calc(100% - 50px));
    max-height: calc(100% - 12px);
    padding: 38px 12px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  main.ritual-room.canvas .canvas-daily-reveal.is-details-open .canvas-reveal-toggle {
    inset: 4px auto auto 8px;
  }
  main.ritual-room.canvas .canvas-daily-reveal.is-details-open .canvas-reveal-toggle-mobile > span { transform: none; }
  main.ritual-room.canvas .canvas-stage-real > .canvas-status {
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    padding: 7px 10px;
    border: 1px solid #c2b49b66;
    border-radius: 5px;
    background: #f8f2e5ed;
    font: 11px/1.4 var(--pluritual-sans);
  }
  main.ritual-room.canvas .canvas-hand-etched {
    --hand-square: clamp(28px, 8.4vw, 36px);
    flex: 0 0 auto;
    align-self: center;
    grid-template-columns: auto minmax(92px, 1fr);
    grid-template-rows: 17px 14px 40px auto;
    gap: 4px 10px;
    justify-self: center;
    max-width: 480px;
    padding: 9px 10px 8px;
    border: 1px solid #9b795b30;
    border-top-color: #9b795b55;
    border-radius: 7px;
    background: #faf5e7a6;
    box-shadow: 0 3px 14px #47352108;
  }
  main.ritual-room.canvas .canvas-hand-etched .hand-head {
    grid-area: 1 / 1 / 2 / -1;
    justify-content: space-between;
    gap: 12px;
  }
  main.ritual-room.canvas .canvas-hand-etched .canvas-hand-label {
    color: #984e38;
    font: 400 15px/17px var(--pluritual-serif);
    letter-spacing: .01em;
    text-transform: none;
  }
  main.ritual-room.canvas .canvas-hand-etched .hand-count {
    color: #695643;
    font: 500 10px/17px var(--pluritual-sans);
    font-variant-numeric: tabular-nums;
  }
  main.ritual-room.canvas .canvas-hand-etched .canvas-guidance {
    position: static;
    grid-area: 2 / 1 / 3 / -1;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    clip-path: none;
    overflow: visible;
    color: #76624f;
    font: 10px/14px var(--pluritual-sans);
    text-align: left;
  }
  main.ritual-room.canvas .canvas-hand-etched .hand-slots {
    grid-area: 3 / 1;
    gap: 4px;
    align-self: center;
  }
  main.ritual-room.canvas .canvas-hand-etched .hand-slot {
    border: 1px solid #a88f6e66;
    background: #fffaf07a;
    color: #826a52;
    border-radius: 3px;
    font: 11px/1 var(--pluritual-sans);
  }
  main.ritual-room.canvas .canvas-hand-etched .hand-slot.filled {
    padding: 3px;
    background: var(--slot-color);
    border-color: rgba(52, 39, 27, .28);
  }
  main.ritual-room.canvas .canvas-hand-etched .hand-slot:disabled { opacity: 1; }
  main.ritual-room.canvas .canvas-hand-etched .choose-btn,
  main.ritual-room.canvas .canvas-hand-etched .choose-btn:not(:disabled) {
    grid-area: 3 / 2;
    height: 40px;
    min-height: 40px;
    border-radius: 4px;
    font: 600 9px/1.3 var(--pluritual-sans);
    letter-spacing: .025em;
  }
  main.ritual-room.canvas .canvas-hand-etched .canvas-palette {
    grid-area: 4 / 1 / 5 / -1;
    gap: 3px;
    margin-top: 3px;
  }
  main.ritual-room.canvas .canvas-hand-etched .canvas-palette button {
    min-width: 0;
    aspect-ratio: 1;
  }
  main.ritual-room.canvas .canvas-hand-etched .canvas-palette button::before { inset: 3px; }
  main.ritual-room.canvas .canvas-hand-etched .canvas-palette button:disabled { opacity: .8; }
  main.ritual-room.canvas .canvas-hand-etched :is(.ritual-submit-status, .canvas-participation-lock) {
    margin: 2px 0 0;
    line-height: 1.3;
  }
}
@media (max-width: 600px) and (max-height: 620px) {
  main.ritual-room.canvas .canvas-hand-etched { padding-block: 6px; gap: 3px 8px; }
}
@media (min-width: 601px) and (max-width: 1024px) and (max-height: 500px) {
  main.ritual-room.canvas .canvas-v111-layout {
    display: grid;
    gap: 12px;
  }
  main.ritual-room.canvas .canvas-stage-real { height: 100%; }
  main.ritual-room.canvas .canvas-v111-layout .canvas-art-mount { align-self: center; }
  main.ritual-room.canvas .canvas-hand-etched {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 17px 14px 32px auto 40px;
    gap: 5px;
  }
  main.ritual-room.canvas .canvas-hand-etched .hand-slots { justify-content: space-between; }
  main.ritual-room.canvas .canvas-hand-etched .choose-btn,
  main.ritual-room.canvas .canvas-hand-etched .choose-btn:not(:disabled) { grid-area: 5 / 1; }
  main.ritual-room.canvas .canvas-hand-etched .canvas-palette { grid-template-columns: repeat(5, 32px); }
}