/* Scene Maker: layout only. Every choice is at least 44 px tall and every sticker button at least 56 px. The stage
   is touch-action:none so a drag never scrolls the page. Positions and sizes are set by the script with CSSOM. */
.sc-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.sc-level-name{display:block;font-size:.8em;opacity:.8}

/* The guide corner: Ritim on the left, the status sentence beside it. */
.sc-guide-row{display:flex;align-items:center;gap:12px}
.sc-guide{flex:0 0 64px;width:64px;min-width:0}
.sc-guide-row .kg-status{margin:0;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}

/* The count or place card: its kind, its job line and one row per condition. */
.sc-card{min-width:0}
.sc-card-box{display:grid;justify-items:center;gap:6px;box-sizing:border-box;width:100%;padding:14px 12px;border-radius:16px;background:rgba(255,255,255,.08);text-align:center}
.sc-card-kind{margin:0;font-size:.9rem;font-weight:800;color:var(--k-gold)}
.sc-job{margin:0;font-size:1.25rem;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.sc-conds{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;width:100%;max-width:440px}
.sc-cond{display:flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.08);text-align:left;font-weight:700;overflow-wrap:anywhere;transition:background-color .2s ease,box-shadow .2s ease}
.sc-tick{flex:0 0 26px;width:26px;height:26px;box-sizing:border-box;border-radius:50%;border:2px solid rgba(255,255,255,.45);display:inline-flex;align-items:center;justify-content:center;font-weight:900;line-height:1}
.sc-cond.is-met{background:rgba(126,232,176,.2)}
.sc-cond.is-met .sc-tick{background:#7ee8b0;border-color:#7ee8b0;color:#1d2246}
.sc-cond.is-missing{box-shadow:inset 0 0 0 2px #ffd180}
.sc-free{margin:0;box-sizing:border-box;width:100%;padding:14px 12px;border-radius:16px;background:rgba(255,255,255,.06);text-align:center;font-weight:700}

/* Background buttons: four in a row, two rows on the narrowest phones. */
.sc-bgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sc-bg{min-height:56px;margin:0;padding:6px 8px;border:0;border-radius:16px;background:rgba(255,255,255,.1);color:inherit;font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation;transition:background-color .15s ease}
.sc-bg[aria-pressed="true"]{background:var(--k-ink);color:#0b1030}
.sc-bg:not([aria-pressed="true"]):hover{background:rgba(255,255,255,.18)}

/* The stage: a 4:3 board. The stickers are drawn in the SVG; the board takes every pointer gesture itself. */
.sc-board{box-sizing:border-box;width:100%;max-width:560px;margin:0 auto;border-radius:20px;overflow:hidden;background:#cfeeff;touch-action:none;user-select:none;-webkit-user-select:none}
.sc-svg{display:block;width:100%;height:auto;touch-action:none}
.sc-item{cursor:grab}
.sc-item:active{cursor:grabbing}
.sc-item:focus{outline:none}

/* Actions on the selected sticker: wrap onto two rows on phones. */
.sc-selbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sc-act{min-height:44px}
.sc-act:disabled{opacity:.5;cursor:not-allowed}

/* The tray: the suggested stickers or all of them, in a grid of large buttons. */
.sc-tray{display:grid;gap:10px;min-width:0}
.sc-tabs{display:flex;flex-wrap:wrap;gap:6px}
.sc-tab{min-height:44px;margin:0;padding:6px 14px;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:inherit;font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation}
.sc-tab[aria-pressed="true"]{background:var(--k-ink);color:#0b1030}
.sc-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.sc-pick{display:flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;box-sizing:border-box;margin:0;padding:6px;border:0;border-radius:16px;background:rgba(255,255,255,.1);cursor:pointer;touch-action:manipulation;transition:background-color .15s ease,transform .15s ease}
.sc-pick:hover{background:rgba(255,255,255,.2)}
.sc-pick .lh-pic{display:block;width:44px;height:44px}

.sc-actions{justify-content:center}
.sc-win{margin-top:4px}
.sc-win[hidden]{display:none!important}
.sc-win:focus{outline:none}
.sc-win-card{box-sizing:border-box;display:grid;justify-items:center;gap:6px;max-width:300px;margin:0 auto 14px;padding:12px;border-radius:20px;background:#e9edff;color:#1d2246}
.sc-win-art{width:100%}
.sc-win-svg{display:block;width:100%;height:auto}
.sc-win-text{margin:0 auto 14px!important;font-weight:800;text-align:center;overflow-wrap:anywhere}
.sc-win-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

.sc-howto{margin-top:28px}
.sc-steps{display:grid;gap:8px;padding-left:1.2em}

@media (max-width:520px){
 .sc-cond{font-size:.95rem}
 .sc-picks{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:6px}
 .sc-bg{font-size:.9rem;padding:6px 4px}
}
@media (max-width:359px){
 .sc-bgs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sc-picks{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
 .sc-cond,.sc-bg,.sc-pick,.sc-item{transition:none}
}

/* Printing shows the stage copy only: everything else on the page is hidden. */
@media print{
 body *{visibility:hidden!important}
 .sc-win-card,.sc-win-card *{visibility:visible!important}
 .sc-win-card{position:absolute;left:0;top:0;width:100%;max-width:none;margin:0;background:#fff;box-shadow:none}
}