/* Game skin: the warm, layered 2D look for the quiz-style game pages (see rush_scenes.js for the arcade boards).
 * Opt in with class "skin" on the stage; set --tone on it for the game's own accent colour. Scoped under .skin so a page
 * that does not opt in is untouched. Overrides the .eg-* rules of _engine_mc.html, so load it after that page's <style>. */
.eg-stage.skin, .tp-stage.skin {
  --tone: #C0552F;
  --tone-soft: color-mix(in srgb, var(--tone) 14%, #FFFDF8);
  --tone-mid: color-mix(in srgb, var(--tone) 34%, #F3E8D4);
  --edge: #E6DAC4;
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; border: 1px solid var(--edge); padding-bottom: 46px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 11%, #FBF6EC) 0%, #FBF6EC 58%);
  box-shadow: 0 1px 0 #fff inset, 0 34px 60px -36px rgba(42,33,26,.45);
}
/* two paper hills along the bottom edge, behind everything */
.eg-stage.skin::before, .eg-stage.skin::after, .tp-stage.skin::before, .tp-stage.skin::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -1px; z-index: -1; pointer-events: none; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.eg-stage.skin::before, .tp-stage.skin::before { height: 64px; background: color-mix(in srgb, var(--tone) 12%, transparent); transform: translateX(-6%); }
.eg-stage.skin::after, .tp-stage.skin::after { height: 40px; background: color-mix(in srgb, var(--tone) 20%, transparent); transform: translateX(8%); box-shadow: 0 -8px 20px -10px rgba(42,33,26,.18); }

/* progress bar across the top, replacing the "Round 1 · Q 1/8" counting */
.eg-progress { height: 10px; border-radius: 99px; background: rgba(42,33,26,.09); overflow: hidden; margin: 0 0 14px; box-shadow: inset 0 1px 2px rgba(42,33,26,.12); }
.eg-progress > i { display: block; height: 100%; border-radius: 99px; transition: width .45s cubic-bezier(.3,1.3,.5,1);
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 60%, #E8A93C)); }

.eg-stage.skin .eg-hud, .tp-stage.skin .tp-hud { gap: 8px; margin-bottom: 8px; }
.eg-stage.skin .eg-hud .pill, .tp-stage.skin .tp-hud .pill { background: rgba(255,253,248,.7); border: 0; box-shadow: 0 1px 0 rgba(42,33,26,.08); font-size: 13px; padding: 5px 11px; }

.eg-stage.skin .eg-label, .tp-stage.skin .tp-label, .tp-stage.skin .ag-label, .tp-stage.skin .ml-label { color: color-mix(in srgb, var(--tone) 70%, #6F6256); letter-spacing: .16em; }
/* the picture sits on a round sticker that bounces in with each new question */
.eg-stage.skin .eg-emoji { width: 132px; height: 132px; margin: 8px auto 0; display: grid; place-items: center; font-size: 70px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--tone-soft) 70%); box-shadow: 0 10px 22px -10px rgba(42,33,26,.35), 0 0 0 5px rgba(255,255,255,.7);
  animation: skin-bounce .5s cubic-bezier(.3,1.6,.5,1); }
.eg-stage.skin .eg-emoji .pl-glyph { height: 82%; width: 82%; vertical-align: middle; }
.eg-stage.skin .eg-en, .eg-stage.skin .eg-word { letter-spacing: -.01em; }
.eg-stage.skin .eg-word { animation: skin-rise .35s ease-out; }

/* chunky buttons you can feel: a thick lower edge that flattens when pressed */
.eg-stage.skin .eg-opt {
  background: #fff; border: 2px solid var(--edge); border-bottom-width: 5px; border-radius: 18px; padding: 14px 18px 12px;
  transition: transform .08s ease-out, border-color .15s, background .15s, color .15s;
}
.eg-stage.skin .eg-opt:not(:disabled):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tone) 55%, var(--edge)); background: var(--tone-soft); }
.eg-stage.skin .eg-opt:not(:disabled):active { transform: translateY(3px); border-bottom-width: 2px; margin-bottom: 3px; }
.eg-stage.skin .eg-opt.correct { background: #E4F4E9; border-color: #3FA66B; color: #17623A; animation: skin-pop .38s cubic-bezier(.3,1.6,.5,1); }
.eg-stage.skin .eg-opt.wrong { background: #FDEBE6; border-color: #D2503A; color: #9A2E1B; animation: skin-shake .38s; }
.eg-stage.skin .eg-opt-spk { background: var(--tone-soft); color: var(--tone); }
.eg-stage.skin .eg-play { background: var(--tone); box-shadow: 0 8px 0 color-mix(in srgb, var(--tone) 70%, #2A211A), 0 18px 28px -12px rgba(42,33,26,.5); transition: transform .08s, box-shadow .08s; }
.eg-stage.skin .eg-play:hover { background: var(--tone); transform: translateY(-2px); }
.eg-stage.skin .eg-play:active { transform: translateY(6px); box-shadow: 0 2px 0 color-mix(in srgb, var(--tone) 70%, #2A211A), 0 8px 14px -8px rgba(42,33,26,.5); }

.eg-stage.skin .eg-cell { border: 2px solid var(--edge); border-bottom-width: 5px; background: #fff; border-radius: 20px; }
.eg-stage.skin .eg-cell:not(.ok):not(.bad):not(.used):hover { transform: translateY(-2px) scale(1.03); background: var(--tone-soft); }
.eg-stage.skin .eg-cell.ok { background: #E4F4E9; border-color: #3FA66B; animation: skin-pop .38s cubic-bezier(.3,1.6,.5,1); }
.eg-stage.skin .eg-cell.bad { background: #FDEBE6; border-color: #D2503A; animation: skin-shake .38s; }

.eg-stage.skin .eg-mode, .tp-stage.skin .tp-mode { background: #fff; border-color: var(--edge); border-bottom-width: 3px; }
.eg-stage.skin .eg-mode.on, .tp-stage.skin .tp-mode.on { background: var(--tone); border-color: var(--tone); color: #fff; }
.eg-stage.skin .eg-cta-primary, .tp-stage.skin .tp-cta-primary { background: var(--tone); border-radius: 16px; padding: 14px 30px; box-shadow: 0 5px 0 color-mix(in srgb, var(--tone) 70%, #2A211A); transition: transform .08s, box-shadow .08s; }
.eg-stage.skin .eg-cta-primary:hover, .tp-stage.skin .tp-cta-primary:hover { background: var(--tone); transform: translateY(-1px); }
.eg-stage.skin .eg-cta-primary:active, .tp-stage.skin .tp-cta-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--tone) 70%, #2A211A); }
.eg-stage.skin .eg-overlay, .tp-stage.skin .tp-overlay { background: rgba(251,246,236,.78); }
.eg-stage.skin .eg-overlay-card, .tp-stage.skin .tp-overlay-card { border-radius: 24px; border: 1px solid var(--edge); }

.eg-stage.skin.shake, .tp-stage.skin.shake { animation: skin-shake .34s; }
@keyframes skin-bounce { 0% { transform: scale(.4) translateY(14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes skin-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes skin-pop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes skin-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .eg-stage.skin *, .tp-stage.skin *, .eg-stage.skin.shake, .tp-stage.skin.shake { animation: none !important; transition: none !important; }
}

/* ---- the type / spelling engine (_engine_type.html: tp- type it, ag- anagram, ml- missing letters) ---- */
.tp-stage.skin .tp-emoji, .tp-stage.skin .ag-emoji, .tp-stage.skin .ml-emoji {
  width: 112px; height: 112px; margin: 4px auto 0; display: grid; place-items: center; font-size: 60px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--tone-soft) 70%); box-shadow: 0 10px 22px -10px rgba(42,33,26,.35), 0 0 0 5px rgba(255,255,255,.7);
  animation: skin-bounce .5s cubic-bezier(.3,1.6,.5,1);
}
.tp-stage.skin .pl-glyph { height: 82%; width: 82%; vertical-align: middle; }
.tp-stage.skin .tp-clue, .tp-stage.skin .ag-clue, .tp-stage.skin .ml-clue { letter-spacing: -.01em; animation: skin-rise .35s ease-out; }
.tp-stage.skin .tp-input { background: #fff; border: 2px solid var(--edge); border-bottom-width: 5px; border-radius: 18px; }
.tp-stage.skin .tp-input:focus { border-color: var(--tone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 18%, transparent); }
.tp-stage.skin .tp-input.correct { background: #E4F4E9; border-color: #3FA66B; color: #17623A; animation: skin-pop .38s cubic-bezier(.3,1.6,.5,1); }
.tp-stage.skin .tp-input.wrong { background: #FDEBE6; border-color: #D2503A; color: #9A2E1B; animation: skin-shake .38s; }
/* keys, tiles and slots: the same pressed-edge buttons */
.tp-stage.skin .tp-acc, .tp-stage.skin .ag-tile, .tp-stage.skin .ml-key {
  background: #fff; border: 2px solid var(--edge); border-bottom-width: 5px; border-radius: 14px; transition: transform .08s ease-out, border-color .15s, background .15s;
}
.tp-stage.skin .tp-acc:hover, .tp-stage.skin .ag-tile:hover, .tp-stage.skin .ml-key:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tone) 55%, var(--edge)); background: var(--tone-soft); }
.tp-stage.skin .tp-acc:active, .tp-stage.skin .ag-tile:active, .tp-stage.skin .ml-key:active { transform: translateY(3px); border-bottom-width: 2px; margin-bottom: 3px; }
.tp-stage.skin .ag-slot { border: 2px dashed color-mix(in srgb, var(--tone) 40%, var(--edge)); background: rgba(255,255,255,.6); border-radius: 14px; }
.tp-stage.skin .ag-slot.filled { border-style: solid; border-color: var(--edge); background: #fff; }
.tp-stage.skin .ag-slot.win { background: #E4F4E9; border-color: #3FA66B; color: #17623A; animation: skin-pop .38s cubic-bezier(.3,1.6,.5,1); }
.tp-stage.skin .ag-slot.lose { background: #FDEBE6; border-color: #D2503A; color: #9A2E1B; }
.tp-stage.skin .ml-blank { border-bottom-color: color-mix(in srgb, var(--tone) 45%, var(--edge)); }
.tp-stage.skin .ml-blank.active { border-bottom-color: var(--tone); background: color-mix(in srgb, var(--tone) 10%, transparent); }
.tp-stage.skin .ml-blank.win { color: #17623A; border-bottom-color: #3FA66B; }
.tp-stage.skin .ml-blank.lose { color: #9A2E1B; border-bottom-color: #D2503A; }
.tp-stage.skin .tp-submit { background: var(--tone); border-radius: 16px; padding: 13px 28px; box-shadow: 0 5px 0 color-mix(in srgb, var(--tone) 70%, #2A211A); transition: transform .08s, box-shadow .08s; }
.tp-stage.skin .tp-submit:hover { background: var(--tone); transform: translateY(-1px); }
.tp-stage.skin .tp-submit:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--tone) 70%, #2A211A); }
.tp-stage.skin .tp-btn, .tp-stage.skin .ag-btn, .tp-stage.skin .ml-btn { background: #fff; border: 2px solid var(--edge); border-bottom-width: 4px; border-radius: 14px; }