/* Mentaka's playable mission layer. Styles stay inside the demo phone. */
#demo .app-body{background:#fbfaf5}
#demo .face.game-person{position:relative;display:flex;align-items:center;justify-content:center;border:1px solid #d3dcda;background:#e1eae1;font-size:13px;font-weight:850;color:#36533f;letter-spacing:-.5px}
#demo .face.game-person.mentor{background:#e4e9f1;color:#384e76;border-color:#d1d9e9}
#demo .face.game-person.retailer{background:#efe4cf;color:#806126;border-color:#e2d4b6}
#demo .face.game-person>i{position:absolute;right:-2px;bottom:-2px;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:white;border:1px solid #dce1d9}
#demo .face.game-person.f88{font-size:27px}
#demo .game-welcome{display:flex;align-items:center;gap:7px;padding:2px 0 8px}
#demo .game-welcome>div{flex:1;min-width:0}
#demo .game-welcome>div>span{display:block;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9b6517;margin-bottom:7px}
#demo .game-welcome h3{font-size:23px;line-height:1.08;letter-spacing:-.8px;max-width:175px;color:#142139}
#demo .game-welcome p{font-size:11px;line-height:1.45;margin:7px 0 0;color:#5d6775}
#demo .game-welcome img{width:79px;height:79px;flex-shrink:0;filter:drop-shadow(0 8px 7px rgba(17,30,51,.08))}
#demo .game-level{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e7e7dc;border-radius:17px;padding:12px;box-shadow:0 3px 0 #eae7db}
#demo .game-level>span:nth-child(2){flex:1}
#demo .game-level b{font-size:13px;font-weight:850;color:#182940}
#demo .game-level small{display:block;font-size:9px;color:#6a707a;margin-top:2px}
#demo .game-level>strong{font-size:16px;color:#8a5709;text-align:right;line-height:1}
#demo .game-level-medal{display:grid;place-items:center;flex-shrink:0;width:41px;height:45px;border-radius:13px;background:#ffedb9;color:#915b0c;border:2px solid #f2cf74}
#demo .game-level i{display:block;overflow:hidden;margin-top:6px;height:5px;background:#ecebe2;border-radius:8px}
#demo .game-level u{display:block;background:#f0ac26;height:100%;border-radius:8px;transition:width .5s ease}
#demo .game-play{min-height:45px;border:0;border-bottom:4px solid #ba780e;background:#f6b62d!important;border-radius:14px;font-weight:850!important;color:#17233a!important;box-shadow:none;justify-content:center}
#demo .game-play:active{transform:translateY(2px);border-bottom-width:2px}
#demo .game-map{padding:15px 15px 11px;background:linear-gradient(145deg,#eef1e6,#f8faf3);border:1px solid #dde3ce;border-radius:19px;position:relative;overflow:hidden}
#demo .game-map .spread>b{font-size:12px}
#demo .game-map .spread>span{font:800 10px var(--font-body);color:#657e59;background:#e0e9d5;border-radius:8px;padding:4px 7px}
#demo .game-map ol{list-style:none;padding:0;margin:15px 0 6px;position:relative}
#demo .game-map ol:before{content:"";position:absolute;left:24px;top:21px;bottom:25px;width:2px;border-left:3px dashed #cbd6bd}
#demo .game-map li{position:relative;display:flex;gap:11px;align-items:center;margin:0;padding:0 0 17px;min-height:65px}
#demo .game-map li:nth-child(2){margin-left:24px}
#demo .game-map li:last-child{padding-bottom:0}
#demo .game-map li>span:nth-child(2){flex:1}
#demo .game-map li b{display:block;font-size:13px;line-height:1.3;color:#23372f}
#demo .game-map li>span>small{display:block;font-size:9px;margin-top:3px;color:#6b7565}
#demo .game-map li em{font-size:8px;white-space:nowrap;color:#70786b;font-style:normal;font-weight:700}
#demo .game-map-node{position:relative;width:47px;height:47px;border:2px solid #ccd7bd;border-bottom-width:5px;display:grid;place-items:center;border-radius:16px;background:#f8faee;color:#909b81;flex-shrink:0}
#demo .game-map-node>small{position:absolute;right:-5px;top:-4px;font:800 9px var(--font-body);background:#fff;border:1px solid #d5ddc9;border-radius:8px;padding:1px 4px;color:#3e5330}
#demo .game-map li.current .game-map-node{background:#f8bd42;border-color:#c99520;color:#2e341c;box-shadow:0 0 0 5px rgba(255,198,78,.13)}
#demo .game-map li.complete .game-map-node{background:#32755e;color:#fff;border-color:#215a47}
#demo .game-map li.complete>svg{color:#32755e;flex-shrink:0}
#demo .game-map>p{font-size:9px;color:#6e7966;margin:12px 0 0}
#demo .game-quests{padding:13px;background:#fff;border:1px solid #e5e7e5;border-radius:16px}
#demo .game-quests>b{display:block;font-size:12px;margin-bottom:7px}
#demo .game-quests>button{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;text-align:left;font-size:11px;color:#425066;padding:9px 0}
#demo .game-quests>button+button{border-top:1px solid #edf0ed}
#demo .game-quests>button>span:nth-child(2){flex:1}
#demo .game-quests>button>span:first-child{color:#9ba79f;line-height:0}
#demo .game-quests>button.complete{color:#33735e}
#demo .game-quests>button.complete>span:first-child{color:#33735e}
#demo .game-badges{padding:13px;background:#fff9e8;border:1px solid #ede0ba;border-radius:17px}
#demo .game-badges .spread>b{font-size:12px}
#demo .game-badges .spread>small{font-size:10px;font-weight:800;color:#97732a}
#demo .game-badge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:13px}
#demo .game-badge{min-width:0;display:flex;flex-direction:column;align-items:center;padding:0 0 2px;border:none;background:transparent;color:#a5a391;text-align:center}
#demo .game-badge>span{display:grid;place-items:center;width:45px;height:47px;border-radius:16px;background:#eeedde;border:2px solid #d4d3bd;border-bottom-width:5px;margin-bottom:7px;transform:rotate(-5deg)}
#demo .game-badge:nth-child(2)>span{transform:rotate(3deg)}
#demo .game-badge b{font-size:8px;line-height:1.3;font-weight:750}
#demo .game-badge small{font-size:8px;margin-top:3px}
#demo .game-badge.earned{color:#785311}
#demo .game-badge.earned>span{background:#ffcf59;border-color:#cf9a28;color:#654011;box-shadow:0 0 0 4px #ffefbf}
#demo .game-demo-note{font-size:9px!important;line-height:1.5!important;color:#7b817b;margin:1px 0;display:block}
#demo .game-combo{display:flex;align-items:center;justify-content:space-between;gap:6px;background:#fff5dc;border:1px solid #f1dfb1;padding:8px 9px;border-radius:12px;font-size:9px;font-weight:700;color:#8a6520}
#demo .game-combo>span{display:flex;align-items:center;gap:5px}
#demo .game-combo-pips i{width:9px;height:9px;border:1px solid #d7c695;background:#fff;border-radius:50%}
#demo .game-combo-pips i.on{background:#e4a21e;border-color:#e4a21e;box-shadow:0 0 0 2px #f8e7b4}
#demo .game-combo-pips b{font-size:9px;margin-left:2px}
#demo .game-answer-result{display:flex;align-items:center;gap:10px;background:#edf1f7;border:1px solid #dce3ed;padding:13px 11px;border-radius:14px;color:#3d5578}
#demo .game-answer-result.strong{background:#edf8ef;color:#2c6a4d;border-color:#cae1cb}
#demo .game-answer-result>svg{flex-shrink:0}
#demo .game-answer-result b{display:block;font-size:12px}
#demo .game-answer-result small{display:block;font-size:9px;line-height:1.4;margin-top:3px;color:#687766}
#demo .game-reward-preview{padding:12px;display:flex;align-items:center;gap:9px;background:#fff1ce;border-radius:13px;color:#805b13;font-size:11px}
#demo .game-reward-preview>svg{flex-shrink:0}
#demo .game-voice-toggle{margin-top:11px;font-size:10px}
#demo .opt{border:1px solid #dce0db!important;border-bottom:3px solid #dce0db!important;border-radius:13px!important;background:#fff!important;padding:11px 10px!important;transition:transform .15s,border-color .15s,background .15s!important}
#demo .opt:hover,#demo .opt:focus-visible{background:#fffaeb!important;border-color:#dcb35c!important}
#demo .opt:active{transform:translateY(2px)}
#demo .opt em{border-radius:9px!important;background:#f1f2ed!important;min-width:25px;min-height:25px;display:grid!important;place-items:center;color:#59674f!important;font-weight:800!important}
#demo .game-toast{position:absolute;z-index:8;bottom:79px;left:17px;right:17px;display:flex;align-items:center;gap:10px;background:#183c31;border:1px solid #82b89a;color:#e9fbec;padding:13px 15px;border-radius:15px;box-shadow:0 10px 28px #16322633;pointer-events:none;font-size:11px;line-height:1.3}
#demo .game-toast>svg{flex-shrink:0;color:#fbd471}
#demo .game-toast b{display:block;font-size:17px;color:#fbd471;margin-bottom:2px}
#demo .game-xp{border:1px solid #ffffff25;background:#ffffff0d}
#demo .game-badge:focus-visible,#demo .game-quests button:focus-visible{outline:2px solid #be8b28;outline-offset:4px;border-radius:9px}
@media(prefers-reduced-motion:no-preference){
  #demo .game-toast{animation:gameToastIn .32s cubic-bezier(.16,1,.3,1) both}
  #demo.game-reward .game-xp,#demo .game-reward .game-xp{animation:gameXp .55s ease}
  #demo .game-map li.current .game-map-node{animation:gameBreathe 3s ease-in-out infinite}
  #demo .game-answer-result.strong>svg{animation:gameStar .6s ease both}
  #demo .game-badge.earned>span{animation:gameBadge .45s cubic-bezier(.16,1,.3,1) both}
}
@keyframes gameToastIn{from{transform:translateY(18px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes gameXp{50%{background:#efb732;color:#182940;transform:scale(1.08)}}
@keyframes gameBreathe{50%{box-shadow:0 0 0 8px rgba(255,198,78,.16)}}
@keyframes gameStar{0%{transform:rotate(-20deg) scale(.6)}65%{transform:rotate(10deg) scale(1.2)}100%{transform:rotate(0) scale(1)}}
@keyframes gameBadge{from{transform:rotate(-14deg) scale(.85)}to{transform:rotate(-5deg) scale(1)}}
@media(prefers-reduced-motion:reduce){#demo .game-level u,#demo .opt{transition:none!important}#demo .game-map-node,#demo .game-toast,#demo .game-badge>span{animation:none!important}}