/* EduGame Player styles — ตัวแปรสีมาจากธีมของเกม */
.ep-root{--ep-primary:#5267d8;--ep-bg:#f5f7ff;--ep-text:#26324b;--ep-card:#fff;
  font-family:"Sarabun","Tahoma",sans-serif;color:var(--ep-text);line-height:1.6}
.ep-root *{box-sizing:border-box}
.ep-card{background:var(--ep-card);border-radius:22px;padding:22px;box-shadow:0 8px 30px rgba(20,30,70,.10);max-width:920px;margin:0 auto}
.ep-center{text-align:center;padding:36px 22px}
.ep-emoji{font-size:64px;line-height:1.1}
.ep-card h2{font-weight:800;font-size:clamp(1.5rem,4.5vw,2.1rem);margin:.4rem 0}
.ep-muted{color:color-mix(in srgb,var(--ep-text) 60%,transparent)}
.ep-chip{display:inline-block;background:color-mix(in srgb,var(--ep-primary) 14%,transparent);color:var(--ep-primary);font-weight:700;border-radius:99px;padding:4px 16px}
.ep-input{display:block;width:100%;max-width:380px;margin:14px auto;font-size:1.25rem;padding:12px 16px;border:2px solid #ced4da;border-radius:14px;text-align:center;font-family:inherit}
.ep-input:focus{outline:none;border-color:var(--ep-primary)}
.ep-invalid{border-color:#e03131!important}
.ep-btn{font-family:inherit;font-weight:700;border:0;border-radius:14px;padding:12px 26px;font-size:1.1rem;cursor:pointer;transition:transform .1s,filter .15s}
.ep-btn:active{transform:scale(.97)}
.ep-btn-primary{background:var(--ep-primary);color:#fff}
.ep-btn-primary:hover{filter:brightness(1.1)}
.ep-btn-lg{font-size:1.4rem;padding:14px 38px;margin-top:10px}
.ep-hidden{display:none!important}
.ep-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ep-top-title{flex:1;font-weight:800;font-size:1.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-progress-text{font-weight:700;color:var(--ep-primary);white-space:nowrap}
.ep-icon-btn{background:transparent;border:2px solid #dee2e6;border-radius:12px;width:44px;height:44px;font-size:1.2rem;cursor:pointer;flex:none}
.ep-icon-btn:hover{background:#f1f3f5}
.ep-hint{text-align:center;color:color-mix(in srgb,var(--ep-text) 65%,transparent);margin:2px 0 14px}

/* matching */
.ep-board{position:relative;display:flex;justify-content:space-between;gap:clamp(60px,18vw,180px);padding:6px 0}
.ep-col{flex:1;display:flex;flex-direction:column;gap:14px;z-index:2;min-width:0}
.ep-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.ep-item{position:relative;background:#fff;border:3px solid #ced4da;border-radius:16px;min-height:68px;padding:10px 14px;font-family:inherit;font-size:clamp(1.05rem,3.5vw,1.5rem);font-weight:700;color:var(--ep-text);cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center;transition:transform .12s,box-shadow .12s,border-color .12s}
.ep-item:hover:not(:disabled){box-shadow:0 4px 14px rgba(0,0,0,.12)}
.ep-item-image{padding:8px}
.ep-item-img{max-width:100%;max-height:130px;object-fit:contain;pointer-events:none;border-radius:8px}
.ep-item-text{word-break:break-word;padding-right:26px}
.ep-speak{position:absolute;right:6px;top:6px;font-size:.9rem;opacity:.7;padding:4px;cursor:pointer}
.ep-selected{border-color:var(--ep-primary);box-shadow:0 0 0 5px color-mix(in srgb,var(--ep-primary) 25%,transparent);transform:scale(1.03)}
.ep-done{background:#ebfbee;cursor:default}
.ep-item:disabled{opacity:1}
.ep-wrong{animation:ep-shake .5s;border-color:#e03131!important;background:#fff5f5}
@keyframes ep-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* quiz */
.ep-bar{height:10px;background:#e9ecef;border-radius:99px;overflow:hidden;margin-bottom:14px}
.ep-bar-fill{height:100%;background:var(--ep-primary);border-radius:99px;transition:width .3s}
.ep-qmedia{text-align:center;margin-bottom:12px}
.ep-img,.ep-video{max-width:100%;max-height:340px;border-radius:14px;background:#000}
.ep-img{background:transparent;object-fit:contain}
.ep-qrow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ep-question{flex:1;font-weight:800;font-size:clamp(1.25rem,4vw,1.75rem);margin:0}
.ep-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.ep-options{grid-template-columns:1fr}.ep-board{gap:50px}}
.ep-option{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:3px solid #ced4da;border-radius:16px;padding:12px 14px;min-height:72px;font-family:inherit;font-size:clamp(1.05rem,3.4vw,1.35rem);font-weight:700;color:var(--ep-text);cursor:pointer;transition:transform .1s,border-color .15s}
.ep-option:hover:not(:disabled){border-color:var(--ep-primary);transform:translateY(-2px)}
.ep-option:disabled{cursor:default;opacity:1}
.ep-letter{flex:none;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--ep-primary) 16%,transparent);color:var(--ep-primary);display:flex;align-items:center;justify-content:center;font-weight:800}
.ep-option-body{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.ep-option-img{max-width:100%;max-height:110px;object-fit:contain;border-radius:8px}
.ep-audio{width:100%}
.ep-correct{border-color:#2f9e44!important;background:#ebfbee!important}
.ep-correct .ep-letter{background:#2f9e44;color:#fff}
.ep-wrong-choice{border-color:#e03131!important;background:#fff5f5!important;animation:ep-shake .5s}
.ep-wrong-choice .ep-letter{background:#e03131;color:#fff}
.ep-picked{border-color:var(--ep-primary)!important;background:color-mix(in srgb,var(--ep-primary) 10%,#fff)!important}
.ep-feedback{min-height:34px;text-align:center;font-weight:800;font-size:1.25rem;margin-top:12px}
.ep-ok{color:#2f9e44}.ep-no{color:#e8590c}
.ep-card>.ep-btn{display:block;margin:10px auto 0}

/* result */
.ep-stars{font-size:clamp(2.5rem,10vw,4rem);letter-spacing:6px}
.ep-score{font-size:clamp(1.5rem,5vw,2.2rem);font-weight:800;color:var(--ep-primary);margin:6px 0}
.ep-stats{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin:10px 0}
.ep-stats b{font-size:1.2rem}
.ep-missing{padding:20px;color:#868e96;border:2px dashed #ced4da;border-radius:12px}
@media (prefers-reduced-motion:reduce){.ep-root *{animation:none!important;transition:none!important}}


/* Compact score summary */
.ep-result-progress{height:10px;max-width:420px;margin:12px auto 18px;background:#e8edf5;border-radius:999px;overflow:hidden}.ep-result-progress-fill{height:100%;background:linear-gradient(90deg,#168b62,#42b983);border-radius:999px;transition:width .35s ease}.ep-score{font-size:clamp(1.8rem,5vw,2.7rem);font-weight:700;line-height:1.2}