/* P11 (20/10/2026): shared RESULT card + shared QUESTION card skin for every game (Adventurer, Boba, Squishy, Farm, Photographer).
   Solid reading surfaces (kids read here), SM navy / paper / gold, 2 px ink outline, hard drop, no blur. Tokens: game_kit.css (--gk-*), repeated here
   with fallbacks because the result card is shown after body.in-game is removed. */
.arc-result, .q-card.obq {
  --gk-ink: #10233F; --gk-navy: #1A66D9; --gk-navy-2: #2B7FE6; --gk-gold: #FDD935; --gk-coral: #FB796B; --gk-paper: #F4F9FF; --gk-drop: 0 4px 12px rgba(20, 70, 160, 0.21); }

/* ---- question card ---- */
.q-card.obq { background: var(--gk-paper); border: 0; border-radius: 14px; padding: 14px; gap: 12px;
  box-shadow: inset 0 0 0 1.5px rgba(16, 35, 63, .18), inset 0 0 0 5px #fff, var(--gk-drop); clip-path: none; }
.q-card.obq .obq-head { color: var(--gk-navy-2); font-weight: 700; }
.q-card.obq .obq-gap { background: var(--gk-navy); color: var(--gk-gold); padding: 3px 8px; font-weight: 700; }
.q-card.obq .obq-ask { color: var(--gk-navy); }
.q-card.obq .obq-eq { color: var(--gk-ink); }
.q-card.obq .obq-choice { min-height: 56px; background: #fff; color: var(--gk-ink); border-radius: 14px; touch-action: manipulation;
  box-shadow: inset 0 0 0 1.5px rgba(16, 35, 63, .18), inset 0 -5px 0 #C9D6F2; transition: transform 80ms steps(2); }
@media (hover: hover) { .q-card.obq .obq-choice:not(:disabled):hover { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(16, 35, 63, .18), inset 0 -5px 0 var(--gk-gold); transform: translateY(-2px); } }
.q-card.obq .obq-choice:not(:disabled):active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px rgba(16, 35, 63, .18); }
.q-card.obq .obq-choice:focus-visible, .q-card.obq .obq-check:focus-visible { outline: 3px solid var(--gk-gold); outline-offset: 2px; box-shadow: inset 0 0 0 1.5px rgba(16, 35, 63, .18), 0 0 0 1.5px rgba(16, 35, 63, .18); }
.q-card.obq .obq-k { background: var(--gk-gold); color: var(--gk-ink); box-shadow: inset 0 0 0 1.5px rgba(16, 35, 63, .18); font-weight: 700; width: 30px; height: 30px; }
.q-card.obq .obq-choice.right { background: #CDF3DA; box-shadow: inset 0 0 0 1.5px rgba(16, 35, 63, .18), inset 0 -5px 0 #3DBE6A; }
.q-card.obq .obq-choice.wrong { background: #FFDAD5; box-shadow: inset 0 0 0 1.5px rgba(16, 35, 63, .18), inset 0 -5px 0 var(--gk-coral); }
.q-card.obq .obq-choice.right::after { color: #0B6B33; }
.q-card.obq .obq-choice.wrong::after { color: #A8281B; }
.q-card.obq .obq-fb { color: var(--gk-navy); }
.q-card.obq .obq-fb.ok { color: #0B6B33; }
.q-card.obq .obq-fb.no { color: #A8281B; }
.q-card.obq .obq-tip { background: #DCEBFF; color: var(--gk-navy); box-shadow: inset 0 0 0 1.5px rgba(16, 35, 63, .18); }
.q-card.obq .obq-lock > i { background: var(--gk-coral); }
.q-card.obq .obq-check { min-height: 52px; border: 0; background: none; color: var(--gk-ink); font-weight: 700; box-shadow: none; border-radius: 14px; image-rendering:auto;}

/* ---- result card ---- */
.arc-result { background: var(--gk-paper); border: 0; border-radius: 14px; padding: 16px; gap: 14px;
  box-shadow: inset 0 0 0 1.5px rgba(16, 35, 63, .18), inset 0 0 0 5px #fff, var(--gk-drop); clip-path: none; }
.arc-result .arc-res-top { align-items: flex-end; gap: 16px; }
.arc-result .eyebrow { color: var(--gk-navy-2); }
.arc-result h1 { color: var(--gk-navy); font-size: 30px; }
.arc-result .arc-stars { gap: 8px; }
.arc-result .arc-star .px-ico { width: 40px; height: 40px; }
.arc-result .arc-stat { background: var(--gk-navy); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(16, 35, 63, .18), inset 0 0 0 1.5px rgba(16, 35, 63, .18), var(--gk-drop); }
.arc-result .arc-stat-l, .arc-result .arc-stat .faint { color: #BFD3FF; }
.arc-result .arc-stat b.px { color: var(--gk-gold); }
.arc-result .arc-credit { background: #DCEBFF; color: var(--gk-navy); box-shadow: inset 0 0 0 1.5px rgba(16, 35, 63, .18); }
.arc-result > .row { align-items: stretch; }
.arc-result > .row .btn { min-height: 52px; padding: 0 22px; border: 0; background: none; color: #fff;
  font: 700 17px/1 var(--lg-font, system-ui); box-shadow: none; border-radius: 14px; image-rendering:auto;display: inline-flex; align-items: center; justify-content: center; }
.arc-result > .row .btn:active { transform: translateY(2px); }
.arc-result > .row .btn.arc-again { color: var(--gk-ink); order: -1; flex: 1 1 220px; }
.arc-result > .row .btn:focus-visible { outline: 3px solid var(--gk-gold); outline-offset: 3px; }
@media (max-width: 820px) {
  .arc-result { padding: 12px; gap: 10px; }
  .arc-result .arc-res-top { gap: 10px; }
  .arc-result h1 { font-size: 24px; }
  .arc-result .arc-star .px-ico { width: 32px; height: 32px; }
  .arc-result .arc-stat { padding: 8px 10px; }
  .arc-result .arc-stat b.px { font-size: 20px; }
  .arc-result > .row { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); background: var(--gk-paper); padding: 8px 0; z-index: 5; }
}

/* ---- 22/10 old-UI sweep: results + game question card in the NEW look (no pixel kit bitmaps, smooth gold / glass buttons, sky glass card) ---- */
.q-card.obq .obq-check, .arc-result > .row .btn.arc-again { border: 0; border-radius: 16px; background: linear-gradient(180deg, #FFE878 0%, #FDD935 55%, #F6C61C 100%); color: #10233F; image-rendering: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 12px #C99A00, 0 10px 22px rgba(122, 90, 0, .2); }
.q-card.obq .obq-check:disabled { background: #E6EDF7; color: #6B7A93; box-shadow: inset 0 0 0 1px rgba(22, 54, 95, .14); }
.arc-result > .row .btn { border: 0; border-radius: 16px; background: rgba(255, 255, 255, .85); color: #10233F; image-rendering: auto; box-shadow: inset 0 0 0 1px rgba(22, 54, 95, .16), 0 4px 14px rgba(22, 54, 95, .12); }
.arc-result { border-radius: 24px; background: rgba(255, 255, 255, .86); box-shadow: 0 0 0 1px rgba(22, 54, 95, .10), 0 18px 48px rgba(22, 54, 95, .16); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.arc-result .arc-stat { border-radius: 16px; background: linear-gradient(180deg, #EAF5FF, #D6EBFF); color: #10233F; box-shadow: inset 0 0 0 1px rgba(22, 54, 95, .10); }
.arc-result .arc-stat-l, .arc-result .arc-stat .faint { color: #33425F; }
.arc-result .arc-stat b.px { color: #0F4AA8; }
.arc-result .arc-credit, .q-card.obq .obq-tip { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(22, 54, 95, .12); }
/* 22/10 sweep: CH hero portrait on result cards (games/result.js), smooth hi-res; a small cheer hop instead of the pixel sprite clip */
.arc-res-av.is-ch { display: grid; place-items: end center; min-height: 168px; }
.arc-res-av.is-ch .ch-port { width: auto !important; height: 168px !important; }
.arc-res-av.is-ch.is-cheer .ch-port { animation: arc-ch-hop .7s cubic-bezier(.3, 1.6, .5, 1) 2; transform-origin: 50% 100%; }
@keyframes arc-ch-hop { 0% { transform: translateY(0) scale(1, 1); } 35% { transform: translateY(-14px) scale(.97, 1.04); } 70% { transform: translateY(0) scale(1.04, .96); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .arc-res-av.is-ch.is-cheer .ch-port { animation: none; } }

/* 30/10 teacher: the Dungeon result is SHORT - two things stand out: (1) the new skill, (2) 1 key = 1 chest and 10 chests = the unique item is sure. Everything else is one tap away. */
.arc-result > * { order: 6; }
.arc-result > .arc-res-top { order: 0; }
.arc-result > .bk-kit { order: 1; border: 2px solid #ffd23f; background: #fffbe6; }
.arc-result > .bk-row:not(.bk-kit) { order: 2; }
.arc-result > .bl-card { order: 3; }
.arc-result .bk-kit .bk-wait, .arc-result .bk-kit .bs-next { display: none; }
.arc-result .bk-row:not(.bk-kit) .bk-slots { display: none; }
.arc-result .bl-chips, .arc-result .bl-oddsline, .arc-result .bl-bs { display: none; }
.arc-result .bl-r { display: none; }
.arc-result .bl-card.show-odds .bl-r { display: flex; }
.arc-result .bl-body { grid-template-columns: 1fr; }
.arc-result .bl-chestbox { min-height: 110px; }
.arc-result .bl-chest, .arc-result .bl-chest .ui-ic { width: 84px !important; height: 84px !important; }
.arc-result .bl-want .bl-art { aspect-ratio: auto; height: 150px; min-height: 0; }
.arc-result .bl-pity b { font-size: 18px; }
.bl-unlock { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: #fffbe6; border: 2px solid #ffd23f; }
.bl-unlock ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .bl-unl-i { display: grid; gap: 1px; } .bl-unl-i b { font-size: 17px; } .bl-unl-i small { opacity: .8; } .bl-unl-i.have b { color: #1d7a3a; }
.sk-hint { order: 1; display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: #fffbe6; border: 2px solid #ffd23f; } .sk-hint b { font-size: 17px; } .sk-hint small { opacity: .85; } .sk-hint.save { background: #f2f7ff; border-color: #b9d3f5; }