/* Portrait-first layout. The 3D view fills the space above the tray (the tray never covers
   the work), the top bar is two small corner buttons and the stage dots, and the actions
   that matter (back, undo, redo, done) sit fixed at the bottom in the thumb zone. */
:root {
  --bg: #f6c4e0; --tray-h: 0px; --top-h: 64px;
  /* six tiles across must fit any phone: shrink the tile (never below 46px) rather than scroll */
  --tile: clamp(46px, calc((100vw - var(--safe-l) - var(--safe-r) - 16px - 40px - 16px) / 6), 54px);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none;
}
#stage { position: fixed; left: 0; right: 0; top: 0; bottom: var(--tray-h); width: 100%; height: calc(100% - var(--tray-h)); display: block; touch-action: none; }
#fx-overlay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; font: 600 20px var(--ui); color: var(--pink-deep); pointer-events: none; }
#hud {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 70px); z-index: 20;
  padding: 6px 10px; border-radius: 10px; background: rgba(40, 10, 48, .72);
  color: #ffd6ef; font: 11px/1.4 ui-monospace, Menlo, monospace; white-space: pre; pointer-events: none;
}
#placeholder-tag {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 44px); z-index: 5;
  font: 700 9px var(--ui); letter-spacing: .05em; color: var(--pink-deep); opacity: .45; pointer-events: none; white-space: nowrap;
}

/* top: corner buttons + stage dots, floating over the view */
#top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10; pointer-events: none;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(var(--safe-t) + 6px) calc(var(--safe-r) + 10px) 0 calc(var(--safe-l) + 10px);
}
#top > * { pointer-events: auto; }
#top .top-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; width: min(52vw, 260px); }
#top .cr-progress { width: 100%; height: 18px; border-width: 0 9px; border-image-width: 0 9px; }
#top .cr-progress > i { left: -9px; border-width: 0 9px; border-image-width: 0 9px; min-width: 18px; }
#top [hidden] { display: none !important; }
#top > button[hidden] { visibility: hidden; display: grid !important; }   /* keep the dots centred */

/* tray: options above, actions fixed at the very bottom */
#tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 0 calc(var(--safe-r) + 8px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 8px);
  display: flex; flex-direction: column; gap: 8px;
}
#panel { display: flex; flex-direction: column; gap: 6px; }
#panel[hidden], #tray [hidden] { display: none !important; }
#panel .tools-row { justify-content: center; gap: 14px; }
#panel .options-row {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, var(--tile)); grid-auto-columns: var(--tile);
  gap: 8px; justify-content: safe center; overflow-x: auto; overflow-y: hidden;
  padding: 6px 4px 8px; margin: 0 -4px; scrollbar-width: none;
}
#panel .options-row.one-row { grid-template-rows: var(--tile); }
#panel .options-row::-webkit-scrollbar { display: none; }
#actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 58px; }
#actions .act-left { display: flex; gap: 6px; }
#actions .reveal-pill { margin-left: auto; margin-right: auto; }

/* compact tiles for the tray grid */
#panel .cr-tile { width: var(--tile); height: var(--tile); border-width: 14px 14px 16px 14px; border-image-width: 14px 14px 16px 14px; }
#panel .cr-tile > .face { inset: -10px -10px -9px -10px; }
#panel .cr-tile .swatch { width: calc(var(--tile) - 22px); height: calc(var(--tile) - 22px); }
#panel .cr-tile.is-active::after { inset: -19px -19px -21px -19px; border-radius: 18px; border-width: 3px; }
#panel .cr-tile .cr-ph-label { font-size: 10px; }
#panel .cr-round { width: 56px; height: 61px; }
.cr-ph-label.dark { color: var(--pink-deep); text-shadow: none; }
.tab-art { width: 70%; height: auto; pointer-events: none; }
.tab-art.round { border-radius: 50%; width: 62%; }
.gem-face { width: 34px; }
.gem-clear { filter: grayscale(1) brightness(1.6); }
.gem-pink { filter: hue-rotate(115deg) saturate(1.3); }
.gem-violet { filter: hue-rotate(50deg); }
.gem-aqua { filter: hue-rotate(-20deg) brightness(1.15); }

/* the tray background: one violet panel behind options + actions (choose mode: none) */
#tray::before {
  content: ''; position: absolute; inset: -6px 4px calc(var(--safe-b) * -1) 4px; z-index: -1;
  border-style: solid; border-width: 20px 20px 24px 20px;
  border-image: url('../assets/crisp/ui/violet-panel_accent.svg?v=3.0-s8') 20 20 24 20 fill / 20px 20px 24px 20px;
  opacity: .96;
}
body[data-stage="choose"] #tray::before, body[data-stage="reveal"] #tray::before { display: none; }

/* settings modal close button */
.cr-modal .modal-close { position: absolute; top: -66px; right: -22px; }
.reset-row .cr-round { width: 56px; height: 61px; }

/* reveal */
.reveal-ui { position: fixed; inset: 0; pointer-events: none; z-index: 12; display: none; }
.reveal-ui.open { display: block; }
.reveal-ribbon {
  position: absolute; top: calc(var(--safe-t) + 14px); left: 50%; transform: translateX(-50%);
  width: 240px; height: 64px; border-style: solid; border-width: 0 48px;
  border-image: url('../assets/crisp/ui/pink-ribbon.svg?v=3.0-s8') 0 48 fill / 0 48px;
  display: grid; place-items: center; padding-bottom: 14px;
  animation: drop-in 420ms cubic-bezier(.2, 1.6, .4, 1) both;
}
.reveal-ribbon img { width: 40px; }
.reveal-bar {
  position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 18px);
  display: flex; justify-content: center; gap: 22px; pointer-events: auto;
}
@keyframes drop-in { from { transform: translate(-50%, -120%); } to { transform: translate(-50%, 0); } }
body.flash::after { content: ''; position: fixed; inset: 0; background: #fff; opacity: .85; z-index: 40; pointer-events: none; animation: flash 220ms ease-out forwards; }
@keyframes flash { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reveal-ribbon { animation: none; } body.flash::after { animation: none; opacity: 0; } }

/* selected tiles: the check badge sits on the corner, not over the choice */
#panel .cr-tile > .cr-badge-check { right: -19px; top: -19px; width: 20px; height: 20px; z-index: 2; }

/* --- sound-test alpha tools (only when test mode is on) --- */
.test-hint {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 60px); z-index: 15;
  max-width: calc(100vw - 24px); padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .88);
  color: var(--violet-deep); font: 700 13px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; box-shadow: 0 2px 0 var(--violet-hi);
}
.test-panel {
  position: fixed; left: 8px; right: 8px; top: calc(var(--safe-t) + 88px); z-index: 16;
  background: rgba(30, 12, 40, .80); color: #ffe3f3; border-radius: 12px; padding: 6px; font: 11px/1.35 ui-monospace, Menlo, monospace;
}
.test-head { display: flex; gap: 6px; }
.test-btn { font: 700 12px var(--ui); color: #fff; background: rgba(255, 255, 255, .16); border-radius: 8px; padding: 0 9px; height: 30px; }
.test-btn.strong { background: var(--pink-bot); }
.test-read { margin: 5px 2px; white-space: pre; overflow: hidden; font-size: 10px; line-height: 1.3; }
.test-jumps { display: flex; flex-wrap: wrap; gap: 4px; }
.cr-range { flex: 1; accent-color: var(--pink-bot); height: 32px; }
.row-label { flex: 1; font: 700 15px var(--ui); color: var(--ink); }