/* Rage Maker: the editor is laid out for one thumb. Toolbar at the bottom, sheets slide up,
   the canvas fills the width. Full-screen mode pins it over the page. */
.sec-maker { padding-left: 0; padding-right: 0; }
.sec-maker .sec-head { padding: 0 var(--gutter); }
.maker {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #fff;
  border-top: var(--border) solid #000;
  border-bottom: var(--border) solid #000;
  overflow: hidden;
  isolation: isolate;
  --mk-bar: 66px;
}
.maker-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px var(--gutter); background: #f3f3f3; border-bottom: 3px solid #000; }
.maker-tpl select, .mk-opts select, .mk-ta {
  min-height: 44px;
  padding: 0 10px;
  border: 3px solid #000;
  background: #fff;
  font: 700 0.95rem var(--font-ui);
  color: #000;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.maker-tpl select { padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.maker-top-btns { display: flex; gap: 6px; }
.ib { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border: 3px solid #000; cursor: pointer; padding: 0; font: 700 16px var(--font-ui); color: #000; }
.ib:disabled { opacity: 0.35; cursor: default; }
.ib svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ib:not(:disabled):active { transform: translate(1px, 1px); }
.ib[aria-pressed="true"] { background: var(--yellow); }

.maker-stage { position: relative; padding: 8px; background: #d9d9d9 repeating-linear-gradient(45deg, transparent 0 12px, rgba(0, 0, 0, 0.035) 12px 24px); touch-action: none; overscroll-behavior: contain; min-height: 200px; }
#mk-canvas { display: block; margin: 0 auto; background: #fff; box-shadow: 0 2px 0 #000, 0 8px 20px rgba(0, 0, 0, 0.18); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mk-selbar { position: absolute; z-index: 6; display: flex; gap: 2px; padding: 4px; background: #000; border-radius: 10px; transform: translate(-50%, 0); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.mk-selbar button { width: 40px; height: 40px; background: #fff; color: #000; border: 0; border-radius: 7px; font: 700 15px var(--font-ui); cursor: pointer; }
.mk-selbar button:active { background: var(--yellow); }
.mk-selbar button[data-act="del"] { background: var(--red); color: #fff; }
.mk-textedit { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 7; padding: 10px; border: 3px solid #000; background: #fff; font: 700 17px/1.3 var(--font-comic); resize: none; box-shadow: var(--shadow); }
.mk-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 8px 12px; background: #000; color: #fff; font: 700 12px/1.2 var(--font-ui); letter-spacing: 0.04em; white-space: nowrap; pointer-events: none; border: 2px solid var(--yellow); }

.maker-bar { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 3px solid #000; background: #fff; }
.tb { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: var(--mk-bar); padding: 6px 2px 8px; background: none; border: 0; border-right: 1px solid #ddd; font: 700 10px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: #000; cursor: pointer; }
.tb:last-child { border-right: 0; }
.tb svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tb.is-on { color: var(--red); background: #fff3f4; }
.tb-save { background: var(--yellow); }
.tb:active { background: #eee; }

.mk-scrim { position: absolute; inset: 0; z-index: 8; background: rgba(0, 0, 0, 0.4); }
.mk-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; max-height: 72%; display: grid; grid-template-rows: auto 1fr; background: #fff; border-top: var(--border) solid #000; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3); animation: sheetup 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sheetup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.mk-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px; border-bottom: 2px solid #000; font: 400 1.4rem/1 var(--font-marker); }
.mk-sheet-body { overflow: auto; padding: 10px 12px calc(12px + var(--safe-b)); -webkit-overflow-scrolling: touch; display: grid; gap: 10px; align-content: start; }
.mk-h { margin: 6px 0 0; font: 700 11px/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.mk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mk-thumb { display: grid; gap: 2px; justify-items: center; padding: 6px 4px 6px; background: #fff; border: 3px solid #000; box-shadow: 3px 3px 0 #000; cursor: pointer; font: 700 10px/1.1 var(--font-ui); color: #000; text-align: center; min-height: 44px; }
.mk-thumb svg { width: 100%; height: auto; aspect-ratio: 1; }
.mk-grid.tall .mk-thumb svg { aspect-ratio: 2 / 3; }
.mk-thumb:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.mk-thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mk-ta { width: 100%; min-height: 84px; padding: 10px; font: 700 17px/1.3 var(--font-comic); resize: vertical; }
.mk-chips, .mk-starters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.mk-chips::-webkit-scrollbar { display: none; }
.mk-chip { flex: 0 0 auto; min-height: 40px; padding: 0 12px; background: #fff; border: 2px solid #000; font: 700 13px var(--font-comic); cursor: pointer; white-space: nowrap; }
.mk-chip:active { background: var(--yellow); }
.mk-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-opts select { width: 100%; }
.mk-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }
.mk-check input { width: 22px; height: 22px; accent-color: var(--red); }
.mk-bubbles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-bub { min-height: 56px; background: #fff; border: 3px solid #000; box-shadow: 3px 3px 0 #000; font: 700 15px var(--font-comic); cursor: pointer; }
.mk-note { margin: 0; font-size: 0.85rem; color: var(--mute); }
.mk-save { display: grid; gap: 10px; }
.mk-clear { margin-top: 4px; }

/* full screen mode */
.maker--full { position: fixed; inset: 0; z-index: 200; border: 0; grid-template-rows: auto 1fr auto; padding-bottom: var(--safe-b); background: #fff; }
.maker--full .maker-stage { display: grid; place-items: center; overflow: hidden; }
.maker--full .maker-top { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
body.maker-full-open { overflow: hidden; }
body.maker-full-open .tabbar, body.maker-full-open .toast { display: none; }

@media (min-width: 720px) {
  .sec-maker { padding-left: var(--gutter); padding-right: var(--gutter); }
  .maker { border: var(--border) solid #000; box-shadow: var(--shadow); }
  .maker-stage { padding: 16px; }
  .mk-grid { grid-template-columns: repeat(6, 1fr); }
  .mk-sheet { max-height: 60%; }
}
@media (prefers-reduced-motion: reduce) { .mk-sheet { animation: none; } }