/* Mentaka's playable mission layer. Styles stay inside the demo phone. */
#mentakaPhone .app-body{background:#fbfaf5}
#mentakaPhone .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}
#mentakaPhone .face.game-person.mentor{background:#e4e9f1;color:#384e76;border-color:#d1d9e9}
#mentakaPhone .face.game-person.retailer{background:#efe4cf;color:#806126;border-color:#e2d4b6}
#mentakaPhone .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}
#mentakaPhone .face.game-person.f88{font-size:27px}
#mentakaPhone .game-welcome{display:flex;align-items:center;gap:7px;padding:2px 0 8px}
#mentakaPhone .game-welcome>div{flex:1;min-width:0}
#mentakaPhone .game-welcome>div>span{display:block;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9b6517;margin-bottom:7px}
#mentakaPhone .game-welcome h3{font-size:23px;line-height:1.08;letter-spacing:-.8px;max-width:175px;color:#142139}
#mentakaPhone .game-welcome p{font-size:11px;line-height:1.45;margin:7px 0 0;color:#5d6775}
#mentakaPhone .game-welcome img{width:79px;height:79px;flex-shrink:0;filter:drop-shadow(0 8px 7px rgba(17,30,51,.08))}
#mentakaPhone .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}
#mentakaPhone .game-level>span:nth-child(2){flex:1}
#mentakaPhone .game-level b{font-size:13px;font-weight:850;color:#182940}
#mentakaPhone .game-level small{display:block;font-size:9px;color:#6a707a;margin-top:2px}
#mentakaPhone .game-level>strong{font-size:16px;color:#8a5709;text-align:right;line-height:1}
#mentakaPhone .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}
#mentakaPhone .game-level i{display:block;overflow:hidden;margin-top:6px;height:5px;background:#ecebe2;border-radius:8px}
#mentakaPhone .game-level u{display:block;background:#f0ac26;height:100%;border-radius:8px;transition:width .5s ease}
#mentakaPhone .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}
#mentakaPhone .game-play:active{transform:translateY(2px);border-bottom-width:2px}
#mentakaPhone .game-map{padding:15px 15px 11px;background:linear-gradient(145deg,#eef1e6,#f8faf3);border:1px solid #dde3ce;border-radius:19px;position:relative;overflow:hidden}
#mentakaPhone .game-map .spread>b{font-size:12px}
#mentakaPhone .game-map .spread>span{font:800 10px var(--font-body);color:#657e59;background:#e0e9d5;border-radius:8px;padding:4px 7px}
#mentakaPhone .game-map ol{list-style:none;padding:0;margin:15px 0 6px;position:relative}
#mentakaPhone .game-map ol:before{content:"";position:absolute;left:24px;top:21px;bottom:25px;width:2px;border-left:3px dashed #cbd6bd}
#mentakaPhone .game-map li{position:relative;display:flex;gap:11px;align-items:center;margin:0;padding:0 0 17px;min-height:65px}
#mentakaPhone .game-map li:nth-child(2){margin-left:24px}
#mentakaPhone .game-map li:last-child{padding-bottom:0}
#mentakaPhone .game-map li>span:nth-child(2){flex:1}
#mentakaPhone .game-map li b{display:block;font-size:13px;line-height:1.3;color:#23372f}
#mentakaPhone .game-map li>span>small{display:block;font-size:9px;margin-top:3px;color:#6b7565}
#mentakaPhone .game-map li em{font-size:8px;white-space:nowrap;color:#70786b;font-style:normal;font-weight:700}
#mentakaPhone .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}
#mentakaPhone .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}
#mentakaPhone .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)}
#mentakaPhone .game-map li.complete .game-map-node{background:#32755e;color:#fff;border-color:#215a47}
#mentakaPhone .game-map li.complete>svg{color:#32755e;flex-shrink:0}
#mentakaPhone .game-map>p{font-size:9px;color:#6e7966;margin:12px 0 0}
#mentakaPhone .game-quests{padding:13px;background:#fff;border:1px solid #e5e7e5;border-radius:16px}
#mentakaPhone .game-quests>b{display:block;font-size:12px;margin-bottom:7px}
#mentakaPhone .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}
#mentakaPhone .game-quests>button+button{border-top:1px solid #edf0ed}
#mentakaPhone .game-quests>button>span:nth-child(2){flex:1}
#mentakaPhone .game-quests>button>span:first-child{color:#9ba79f;line-height:0}
#mentakaPhone .game-quests>button.complete{color:#33735e}
#mentakaPhone .game-quests>button.complete>span:first-child{color:#33735e}
#mentakaPhone .game-badges{padding:13px;background:#fff9e8;border:1px solid #ede0ba;border-radius:17px}
#mentakaPhone .game-badges .spread>b{font-size:12px}
#mentakaPhone .game-badges .spread>small{font-size:10px;font-weight:800;color:#97732a}
#mentakaPhone .game-badge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:13px}
#mentakaPhone .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}
#mentakaPhone .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)}
#mentakaPhone .game-badge:nth-child(2)>span{transform:rotate(3deg)}
#mentakaPhone .game-badge b{font-size:8px;line-height:1.3;font-weight:750}
#mentakaPhone .game-badge small{font-size:8px;margin-top:3px}
#mentakaPhone .game-badge.earned{color:#785311}
#mentakaPhone .game-badge.earned>span{background:#ffcf59;border-color:#cf9a28;color:#654011;box-shadow:0 0 0 4px #ffefbf}
#mentakaPhone .game-demo-note{font-size:9px!important;line-height:1.5!important;color:#7b817b;margin:1px 0;display:block}
#mentakaPhone .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}
#mentakaPhone .game-combo>span{display:flex;align-items:center;gap:5px}
#mentakaPhone .game-combo-pips i{width:9px;height:9px;border:1px solid #d7c695;background:#fff;border-radius:50%}
#mentakaPhone .game-combo-pips i.on{background:#e4a21e;border-color:#e4a21e;box-shadow:0 0 0 2px #f8e7b4}
#mentakaPhone .game-combo-pips b{font-size:9px;margin-left:2px}
#mentakaPhone .game-answer-result{display:flex;align-items:center;gap:10px;background:#edf1f7;border:1px solid #dce3ed;padding:13px 11px;border-radius:14px;color:#3d5578}
#mentakaPhone .game-answer-result.strong{background:#edf8ef;color:#2c6a4d;border-color:#cae1cb}
#mentakaPhone .game-answer-result>svg{flex-shrink:0}
#mentakaPhone .game-answer-result b{display:block;font-size:12px}
#mentakaPhone .game-answer-result small{display:block;font-size:9px;line-height:1.4;margin-top:3px;color:#687766}
#mentakaPhone .game-reward-preview{padding:12px;display:flex;align-items:center;gap:9px;background:#fff1ce;border-radius:13px;color:#805b13;font-size:11px}
#mentakaPhone .game-reward-preview>svg{flex-shrink:0}
#mentakaPhone .game-voice-toggle{margin-top:11px;font-size:10px}
#mentakaPhone .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}
#mentakaPhone .opt:hover,#mentakaPhone .opt:focus-visible{background:#fffaeb!important;border-color:#dcb35c!important}
#mentakaPhone .opt:active{transform:translateY(2px)}
#mentakaPhone .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}
#mentakaPhone .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}
#mentakaPhone .game-toast>svg{flex-shrink:0;color:#fbd471}
#mentakaPhone .game-toast b{display:block;font-size:17px;color:#fbd471;margin-bottom:2px}
#mentakaPhone .game-xp{border:1px solid #ffffff25;background:#ffffff0d}
#mentakaPhone .game-badge:focus-visible,#mentakaPhone .game-quests button:focus-visible{outline:2px solid #be8b28;outline-offset:4px;border-radius:9px}
@media(prefers-reduced-motion:no-preference){
  #mentakaPhone .game-toast{animation:gameToastIn .32s cubic-bezier(.16,1,.3,1) both}
  #mentakaPhone.game-reward .game-xp,#mentakaPhone .game-reward .game-xp{animation:gameXp .55s ease}
  #mentakaPhone .game-map li.current .game-map-node{animation:gameBreathe 3s ease-in-out infinite}
  #mentakaPhone .game-answer-result.strong>svg{animation:gameStar .6s ease both}
  #mentakaPhone .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){#mentakaPhone .game-level u,#mentakaPhone .opt{transition:none!important}#mentakaPhone .game-map-node,#mentakaPhone .game-toast,#mentakaPhone .game-badge>span{animation:none!important}}

/* Five-level Sales Game --------------------------------------------------- */
#mentakaPhone .sales-game-screen{gap:11px}
#mentakaPhone .sales-guide{display:flex;align-items:center;gap:11px;padding:11px 13px;background:linear-gradient(135deg,#fff7df,#f5ead0);border:1px solid #ead8a8;border-radius:18px}
#mentakaPhone .sales-guide img{width:68px;height:68px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 7px 5px rgba(16,26,48,.1))}
#mentakaPhone .sales-guide>span{min-width:0}
#mentakaPhone .sales-guide small{display:block;font-size:8px;letter-spacing:.07em;text-transform:uppercase;font-weight:850;color:#9b6517}
#mentakaPhone .sales-guide h3{font-size:21px;line-height:1.05;margin:3px 0;color:#18243a}
#mentakaPhone .sales-guide p{font-size:9px;line-height:1.45;margin:0;color:#6e624c}
#mentakaPhone .sales-scoreboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
#mentakaPhone .sales-scoreboard>span{min-width:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 4px;padding:8px 6px;background:#fff;border:1px solid #e6e5dc;border-radius:12px;color:#5b6d61}
#mentakaPhone .sales-scoreboard svg{grid-row:1/3;color:#bd7c12}
#mentakaPhone .sales-scoreboard small{overflow:hidden;text-overflow:ellipsis;font-size:7px;line-height:1.15;white-space:nowrap;color:#777d78}
#mentakaPhone .sales-scoreboard b{font-size:13px;color:#1d3040}
#mentakaPhone .sales-map ol:before{left:25px;top:22px;bottom:24px}
#mentakaPhone .sales-map li{display:block;padding-bottom:9px;min-height:0;margin:0!important}
#mentakaPhone .sales-map li>button{position:relative;z-index:1;width:100%;display:flex;align-items:center;gap:10px;padding:5px 2px;border:0;background:transparent;text-align:left;color:inherit;cursor:pointer}
#mentakaPhone .sales-map li>button>span:nth-child(2){flex:1;min-width:0}
#mentakaPhone .sales-map li>button>span:nth-child(2)>b{display:block;font-size:11px;color:#23372f}
#mentakaPhone .sales-map li>button>span:nth-child(2)>small{display:block;font-size:8px;margin-top:2px;color:#6b7565}
#mentakaPhone .sales-map li>button>em{font-size:8px;white-space:nowrap;color:#8a651c;font-style:normal;font-weight:800}
#mentakaPhone .sales-map li>button>svg{color:#32755e;flex-shrink:0}
#mentakaPhone .sales-map li>button:disabled{cursor:not-allowed;opacity:.58}
#mentakaPhone .sales-map li>button:focus-visible{outline:2px solid #bd8117;outline-offset:2px;border-radius:13px}
#mentakaPhone .sales-map .game-map-node{width:45px;height:43px}
#mentakaPhone .sales-coming{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px dashed #cbd1c5;background:#f7f8f3;border-radius:14px;color:#677068}
#mentakaPhone .sales-coming>span{min-width:0}
#mentakaPhone .sales-coming b{display:block;font-size:10px;color:#465148}
#mentakaPhone .sales-coming small{display:block;font-size:8px;line-height:1.4;margin-top:2px}
#mentakaPhone .sales-level-progress{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;align-items:start}
#mentakaPhone .sales-level-progress>span{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;color:#92958f}
#mentakaPhone .sales-level-progress>span:not(:last-child):after{content:"";position:absolute;z-index:0;left:63%;right:-38%;top:12px;border-top:2px solid #dddcd2}
#mentakaPhone .sales-level-progress i{position:relative;z-index:1;width:26px;height:26px;display:grid;place-items:center;border-radius:9px;border:1px solid #d9d8ce;background:#f2f1eb;font:800 9px var(--font-body);font-style:normal}
#mentakaPhone .sales-level-progress small{font-size:6.5px;line-height:1.15;max-width:53px}
#mentakaPhone .sales-level-progress .done i{background:#32755e;border-color:#32755e;color:#fff}
#mentakaPhone .sales-level-progress .done:after{border-color:#75a892}
#mentakaPhone .sales-level-progress .now i{background:#f6b62d;border-color:#c98b17;color:#362a13;box-shadow:0 0 0 3px #f8d98955}
#mentakaPhone .sales-level-progress .now small{color:#6a4b10;font-weight:800}
#mentakaPhone .sales-level-head{display:flex;align-items:center;gap:10px;padding-top:2px}
#mentakaPhone .sales-level-head>span{width:46px;height:46px;display:grid;place-items:center;flex:0 0 auto;border-radius:14px;background:#fff0c7;color:#8d5d0f;border:1px solid #e8cb82}
#mentakaPhone .sales-level-head small{display:block;font-size:8px;font-weight:800;color:#8c713f}
#mentakaPhone .sales-level-head h3{font-size:22px;line-height:1.05;margin:3px 0 0;color:#17243a}
#mentakaPhone .sales-scene{padding:13px 14px;border:1px solid #dce3d5;background:linear-gradient(145deg,#eef5e8,#f8faf5);border-radius:16px}
#mentakaPhone .sales-scene-label{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:#52725c}
#mentakaPhone .sales-scene p{font-size:11px;line-height:1.5;margin:7px 0 0;color:#33463b}
#mentakaPhone .sales-question{display:flex;align-items:flex-end;justify-content:space-between;gap:7px;padding:2px 1px 0}
#mentakaPhone .sales-question b{font-size:12px;line-height:1.35;color:#1c2b3e}
#mentakaPhone .sales-question small{flex:0 0 auto;font-size:7px;color:#8b8e89}
#mentakaPhone .sales-options{display:grid;gap:7px}
#mentakaPhone .sales-options>button{display:flex;align-items:center;gap:8px;width:100%;padding:10px;border:1px solid #dbdfd8;border-bottom-width:3px;background:#fff;border-radius:13px;text-align:left;color:#354252;cursor:pointer}
#mentakaPhone .sales-options>button:hover,#mentakaPhone .sales-options>button:focus-visible{background:#fff9e8;border-color:#d7ad55;outline:0}
#mentakaPhone .sales-options>button:active{transform:translateY(2px);border-bottom-width:1px}
#mentakaPhone .sales-options em{width:25px;height:25px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:#f0f1eb;font:850 9px var(--font-body);font-style:normal;color:#536056}
#mentakaPhone .sales-options span{flex:1;font-size:10px;line-height:1.4}
#mentakaPhone .sales-options svg{flex:0 0 auto;color:#879088}
#mentakaPhone .sales-feedback{padding:16px;text-align:center;border-radius:19px;border:1px solid #e5d8b4;background:#fff7df;color:#6a4e16}
#mentakaPhone .sales-feedback.correct{border-color:#bad8c5;background:#edf8f0;color:#285f48}
#mentakaPhone .sales-feedback-icon{width:49px;height:49px;margin:0 auto 7px;display:grid;place-items:center;border-radius:16px;background:#fff;border:1px solid currentColor}
#mentakaPhone .sales-feedback>small{display:block;font-size:8px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
#mentakaPhone .sales-feedback h3{font-size:22px;line-height:1.05;margin:4px 0 6px;color:inherit}
#mentakaPhone .sales-feedback p{font-size:10px;line-height:1.5;margin:0;color:#56645a}
#mentakaPhone .sales-answer-review{padding:10px 12px;border:1px solid #e3e4de;border-radius:13px;background:#fff}
#mentakaPhone .sales-answer-review small{font-size:7px;text-transform:uppercase;letter-spacing:.06em;color:#8a8f88;font-weight:800}
#mentakaPhone .sales-answer-review p{font-size:9px;line-height:1.45;margin:4px 0 0;color:#455045}
#mentakaPhone .sales-points{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 11px;border-radius:13px;background:#fff1ca;color:#815a10}
#mentakaPhone .sales-points b{display:block;font-size:15px}
#mentakaPhone .sales-points small{display:block;font-size:8px;margin-top:1px}
#mentakaPhone .sales-victory{padding-bottom:15px}
#mentakaPhone .sales-skill-summary{display:grid;gap:6px;padding:12px;background:#fff;border:1px solid #e5e5dc;border-radius:15px}
#mentakaPhone .sales-skill-summary>b{font-size:11px;margin-bottom:2px;color:#1c2d3c}
#mentakaPhone .sales-skill-summary>span{display:flex;align-items:center;gap:7px;font-size:9px;color:#466052}
#mentakaPhone .sales-skill-summary svg{color:#32755e}
@media(prefers-reduced-motion:no-preference){#mentakaPhone .sales-feedback.correct .sales-feedback-icon{animation:gameStar .6s ease both}}
@media(prefers-reduced-motion:reduce){#mentakaPhone .sales-options>button,#mentakaPhone .sales-feedback-icon{transition:none!important;animation:none!important}}