/* ACCESS Practice Lab — Language Game Studio game styles (games-f). */

/* ── Story Creator (storyboard) ── */
.scr { display: grid; gap: var(--s-3, .75rem); }
.scr-h { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: clamp(1.25rem, 3vw, 1.6rem); }
.scr-h:focus { outline: none; }
.scr-h:focus-visible { outline: 3px solid var(--gs-gold); outline-offset: 3px; }
.scr-scene { border-radius: calc(var(--gs-r) - 6px); }

/* guide bubble */
.scr-guide { display: flex; gap: .6rem; align-items: flex-end; }
.scr-guide:focus { outline: none; }
.scr-guide:focus-visible .scr-bubble { outline: 3px solid var(--gs-gold); outline-offset: 2px; }
.scr-guide-pic { flex: none; width: 72px; }
.scr-bubble { position: relative; flex: 1; min-width: 0; padding: .65rem .9rem; border-radius: var(--gs-r); background: #fff; border: var(--gs-line); box-shadow: var(--gs-shadow); }
.scr-bubble::before { content: ""; position: absolute; left: -9px; bottom: 16px; width: 16px; height: 16px; background: inherit; border-left: inherit; border-bottom: inherit; transform: rotate(45deg); }
.scr-bubble p { margin: .15rem 0; }
.scr-bubble-who { font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.scr-bubble-head { font-weight: 800; font-size: 1.0625rem; }
.scr-guide.is-right .scr-bubble { background: var(--right-soft); border-color: var(--right); animation: scr-pop .35s ease-out; }
.scr-guide.is-retry .scr-bubble { background: var(--hint-soft); border-color: var(--hint); animation: scr-wiggle .4s ease-in-out; }
.scr-guide.is-reveal .scr-bubble { background: var(--surface-2, #f1f4f7); border-color: var(--gs-navy); }

/* seed picker */
.scr-seeds { display: grid; gap: var(--s-3, .75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.scr-seed { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; border-radius: var(--gs-r); background: #fff; border: var(--gs-line); box-shadow: var(--gs-shadow); }
.scr-seed h3 { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; }
.scr-seed-art { margin: 0; overflow: hidden; border-radius: calc(var(--gs-r) - 6px); border: 2px solid var(--gs-navy); }
.scr-seed-facts { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; margin: 0; font-size: .9375rem; }
.scr-seed-facts dt { font-weight: 800; color: var(--gs-navy); }
.scr-seed-facts dd { margin: 0; color: var(--ink-2); }
.scr-seed .btn { margin-top: auto; min-height: 2.75rem; }

/* top bar, streak and storyboard strip */
.scr-top { display: grid; gap: .4rem; }
.scr-top .gs-pips { margin: 0; }
.scr-streak { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; justify-self: start; margin: 0; padding: .3rem .8rem; border-radius: 999px; background: #fff; border: 2px solid var(--line-strong); font-weight: 800; color: var(--gs-navy); }
.scr-streak .ico { width: 1.1rem; height: 1.1rem; color: var(--goldDk, #d99a22); }
.scr-streak.is-hot { border-color: var(--gs-gold); background: #fff9e6; }
.scr-best { font-weight: 700; color: var(--ink-3); font-size: .875rem; }
.scr-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.scr-cell { position: relative; display: grid; gap: .2rem; padding: .25rem; border-radius: 10px; border: 2px solid var(--line-strong); background: #fff; }
.scr-cell.is-now { border-color: var(--gs-navy); box-shadow: 0 0 0 2px var(--gs-gold); }
.scr-cell.is-done { border-color: var(--gs-teal); }
.scr-cell-art .scr-scene { border-radius: 6px; }
.scr-cell-l { font-size: .75rem; font-weight: 800; color: var(--ink-2); line-height: 1.2; overflow-wrap: anywhere; }
.scr-sticker { position: absolute; top: -.45rem; right: -.35rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--gs-navy); animation: scr-stamp .45s ease-out; }
.scr-sticker .ico { width: .9rem; height: .9rem; }

/* sticker tiers (colour is never the only cue: tier names are written beside them) */
.is-gold.scr-sticker, .scr-stamp.is-gold, .scr-shelf-i.is-gold { background: var(--gs-gold); color: var(--gs-navy); }
.is-silver.scr-sticker, .scr-stamp.is-silver, .scr-shelf-i.is-silver { background: #dfe6ee; color: var(--gs-navy); }
.is-bronze.scr-sticker, .scr-stamp.is-bronze, .scr-shelf-i.is-bronze { background: #f0c9a4; color: var(--gs-navy); }

/* workbench: panel scene + task */
.scr-work { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--s-4, 1rem); align-items: start; }
.scr-panel { position: relative; margin: 0; padding: .5rem; border-radius: var(--gs-r); background: #fff; border: var(--gs-line); box-shadow: var(--gs-shadow); }
.scr-panel figcaption { padding: .5rem .25rem .25rem; }
.scr-cap { margin: .2rem 0; font-size: 1.0625rem; line-height: 1.5; }
.scr-cap.is-line { color: var(--gs-navy); font-weight: 700; }
.scr-cap.is-empty { color: var(--ink-3); font-style: italic; }
.scr-panel.scr-fx-right { animation: scr-pop .4s ease-out; }
.scr-panel.scr-fx-miss { animation: scr-wiggle .4s ease-in-out; }
.scr-stamp { position: absolute; top: .9rem; right: .9rem; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; border: 2px solid var(--gs-navy); font-weight: 800; font-size: .875rem; transform: rotate(-6deg); animation: scr-stamp .5s ease-out; }
.scr-stamp .ico { width: 1rem; height: 1rem; }
.scr-task { display: grid; gap: .25rem; min-width: 0; }
.scr-task .gs-prompt { margin: .5rem 0 0; }
.scr-opt { line-height: 1.45; }

/* connector / verb line */
.scr-line { margin: .5rem 0; padding: .75rem .9rem; border-radius: var(--radius-sm, 10px); background: #fff; border: 2px solid var(--line-strong); }
.scr-gap { display: inline-block; min-width: 5.5rem; padding: 0 .4rem; border-bottom: 3px solid var(--gs-navy); text-align: center; font-weight: 800; }
.scr-gap.is-filled { background: var(--brand-soft); border-radius: 6px 6px 0 0; color: var(--gs-navy); }
.scr-weak { color: var(--ink-3); text-decoration-thickness: 2px; text-decoration-color: var(--gs-coral); }
.scr-bank { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.scr-word { display: grid; gap: .15rem; text-align: center; font-weight: 800; }
.scr-word .gs-gloss { justify-self: center; font-weight: 400; }

/* dialogue punctuation board */
.scr-how { margin: .25rem 0; color: var(--ink-2); font-size: .9375rem; }
.scr-tray { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .5rem; border-radius: var(--radius-sm, 10px); background: var(--gs-sand); border: 2px dashed var(--line-strong); }
.scr-tool { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .6rem; border-radius: 10px; border: 2px solid var(--gs-navy); background: #fff; color: var(--gs-navy); font: inherit; font-size: 1.5rem; font-weight: 800; line-height: 1; cursor: pointer; }
.scr-tool.is-erase { font-size: .9375rem; }
.scr-tool .ico { width: 1rem; height: 1rem; }
.scr-tool[aria-pressed="true"] { background: var(--gs-navy); color: #fff; box-shadow: 0 0 0 3px var(--gs-gold); }
.scr-tray .btn { min-height: 2.75rem; margin-left: auto; }
.scr-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin: .6rem 0; padding: .6rem; border-radius: var(--radius-sm, 10px); background: #fff; border: 2px solid var(--line-strong); }
.scr-slot { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .2rem; border-radius: 8px; border: 2px dashed var(--line-strong); background: transparent; color: var(--gs-navy); font: inherit; font-size: 1.4rem; font-weight: 800; cursor: pointer; }
.scr-slot.is-filled { border-style: solid; border-color: var(--gs-teal); background: #e4f5f3; }
.scr-caret { font-size: .9rem; color: var(--ink-3); }
.scr-wordtile { min-width: 2.75rem; min-height: 2.75rem; padding: 0 .55rem; border-radius: 8px; border: 2px solid transparent; background: var(--gs-paper); color: var(--ink); font: inherit; font-size: 1.125rem; font-weight: 700; cursor: pointer; }
.scr-slot:hover:not(:disabled), .scr-wordtile:hover:not(:disabled), .scr-tool:hover:not(:disabled) { border-color: var(--gs-navy); }
.scr-slot:disabled, .scr-wordtile:disabled { cursor: default; }
.scr-readback { margin: 0; }

/* publish */
.scr-publish { position: relative; overflow: hidden; }
.scr-title { font-size: clamp(1.5rem, 4vw, 2.1rem); text-align: center; }
.scr-listen { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; }
.scr-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.scr-board-cell figure { margin: 0; height: 100%; padding: .5rem; border-radius: var(--gs-r); background: #fff; border: var(--gs-line); box-shadow: var(--gs-shadow); }
.scr-board-cell figcaption { padding: .4rem .2rem 0; line-height: 1.5; }
.scr-board-n { display: block; font-weight: 800; color: var(--gs-navy); }
.scr-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .75rem; }
.scr-rating, .scr-shelf, .scr-recap { padding: .75rem .9rem; border-radius: var(--gs-r); background: #fff; border: var(--gs-line); }
.scr-stars { display: flex; gap: .2rem; margin: 0; color: var(--line-strong); }
.scr-star .ico { width: 2rem; height: 2rem; }
.scr-star.is-on { color: var(--goldDk, #d99a22); }
.scr-rating-l { margin: 0; font-weight: 800; font-size: 1.15rem; }
.scr-why, .scr-recap ul { margin: .4rem 0 0; padding-left: 1.2rem; display: grid; gap: .2rem; }
.scr-recap ul { padding: 0; list-style: none; }
.scr-recap li { display: flex; gap: .4rem; align-items: flex-start; }
.scr-recap .ico { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--right); }
.scr-shelf h3, .scr-recap h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.scr-shelf ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.scr-shelf-i { display: grid; justify-items: center; gap: .1rem; padding: .45rem; border-radius: 12px; border: 2px solid var(--gs-navy); text-align: center; font-weight: 800; animation: scr-stamp .5s ease-out both; }
.scr-shelf-i small { font-weight: 700; }
.scr-shelf-i .ico { width: 1.3rem; height: 1.3rem; }
.scr-confetti { position: absolute; inset: 0 0 auto; height: 0; pointer-events: none; }
.scr-confetti i { position: absolute; top: -1rem; left: calc(var(--i) * 7%); width: .55rem; height: .9rem; border-radius: 2px; background: var(--gs-coral); opacity: 0; animation: scr-fall 1.6s ease-in calc(var(--i) * 60ms) 1 forwards; }
.scr-confetti i:nth-child(3n) { background: var(--gs-gold); }
.scr-confetti i:nth-child(3n + 1) { background: var(--gs-teal); }

@keyframes scr-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: none; } }
@keyframes scr-wiggle { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes scr-stamp { 0% { transform: scale(1.6) rotate(-14deg); opacity: 0; } 70% { transform: scale(.94) rotate(-4deg); opacity: 1; } 100% { transform: rotate(-6deg); } }
@keyframes scr-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(26rem) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .scr *, .scr { animation: none !important; transition: none !important; } .scr-confetti { display: none; } }
@media (max-width: 52rem) {
  .scr-work { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
  .scr-strip { gap: .25rem; }
  .scr-cell-l { font-size: .6875rem; }
  .scr-guide-pic { width: 52px; }
  .scr-guide-pic svg { width: 52px !important; }
  .scr-wordtile { font-size: 1.0625rem; padding: 0 .4rem; }
}
@media print { .scr-tray, .scr-confetti, .scr-guide { display: none !important; } }