:root{
  --bg:#f8fafc; --panel:#ffffff; --text:#0f172a; --muted:#64748b;
  --border:#dbe4ee; --primary:#6366f1; --primary-soft:#eef2ff;
  --correct:#10b981; --correct-soft:#d1fae5; --wrong:#f43f5e;
  --wrong-soft:#ffe4e6; --shadow:0 10px 30px rgba(15,23,42,.08); --radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;}
body.game-active{height:100dvh;overflow:hidden}
button,a{font:inherit}
button{touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid #0ea5e9;outline-offset:3px;}
header{height:46px;display:flex;align-items:center;padding:0 16px;background:#fff;border-bottom:1px solid var(--border);flex-shrink:0;}
header a{color:var(--primary);text-decoration:none;font-weight:800;font-size:.95rem;}
.screen{display:none}
body[data-screen="start"] #startScreen,body[data-screen="game"] #gameScreen,body[data-screen="result"] #resultScreen,body[data-screen="teacher"] #teacherScreen{display:flex}
#startScreen{min-height:calc(100dvh - 46px);align-items:center;justify-content:center;padding:20px;}
.start-card{width:min(100%,640px);background:var(--panel);border:2px solid var(--border);border-radius:28px;box-shadow:var(--shadow);padding:clamp(24px,5vw,42px);text-align:center;}
.start-card h1{font-size:clamp(2rem,7vw,3.3rem);line-height:1;margin-bottom:12px;letter-spacing:-1px;}
.start-card .subtitle{color:var(--muted);font-size:clamp(1rem,3.3vw,1.2rem);margin-bottom:28px;}
.setting-label{font-weight:900;margin-bottom:12px}
.pair-settings{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
.setting-btn{min-height:54px;border:2px solid var(--border);background:#fff;color:var(--text);border-radius:14px;font-weight:900;cursor:pointer;transition:.16s ease;}
.setting-btn.selected{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);box-shadow:0 0 0 2px rgba(99,102,241,.08);}
.start-btn,.primary-btn,.outline-btn,.teacher-btn{width:100%;min-height:52px;border-radius:14px;border:0;font-weight:900;cursor:pointer;}
.start-btn,.primary-btn{background:var(--primary);color:#fff;}
.start-btn:disabled{opacity:.45;cursor:not-allowed}
.loading-note{margin-top:12px;color:var(--muted);font-size:.9rem;min-height:1.25em;}
#gameScreen{height:calc(100dvh - 46px);min-height:0;flex-direction:column;align-items:center;padding:8px 12px 8px;gap:6px;overflow:hidden;}
.game-top{width:min(100%,920px);flex-shrink:0;text-align:center;}
.game-top h1{font-size:clamp(1.25rem,4vw,1.8rem);line-height:1.05;margin-bottom:2px;}
.game-top p{color:var(--muted);font-weight:700;font-size:clamp(.86rem,2.6vw,1rem);}
.match-board{width:min(100%,980px);flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;}
.side-panel{min-width:0;min-height:0;background:#fff;border:2px solid var(--border);border-radius:18px;padding:8px;display:flex;flex-direction:column;gap:6px;overflow:hidden;}
.side-title{text-align:center;font-weight:900;font-size:.92rem;color:var(--muted);flex-shrink:0;}
.cards-grid{flex:1;min-height:0;display:grid;gap:8px;place-content:center;align-items:stretch;justify-items:stretch;}
.cards-grid.count-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cards-grid.count-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cards-grid.count-4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));}
.match-card{position:relative;width:100%;min-width:0;min-height:0;max-height:220px;aspect-ratio:1/1;border:3px solid var(--border);border-radius:16px;background:#fff;padding:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease,opacity .16s ease;overflow:hidden;}
.match-card img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;}
.match-card:hover{box-shadow:0 8px 18px rgba(15,23,42,.08)}
.match-card.selected{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 3px rgba(99,102,241,.12);transform:scale(1.02);}
.match-card.correct{border-color:var(--correct);background:var(--correct-soft);cursor:default;}
.match-card.correct::after{content:"✓";position:absolute;top:6px;right:8px;color:var(--correct);font-size:1.15rem;font-weight:1000;}
.match-card.matched{opacity:.62;filter:saturate(.78);}
.match-card.wrong{border-color:var(--wrong);background:var(--wrong-soft);animation:shake .34s ease;}
.match-card.wrong::after{content:"✕";position:absolute;top:6px;right:8px;color:var(--wrong);font-size:1.15rem;font-weight:1000;}
.match-card:disabled{cursor:default}
.bottom-zone{width:min(100%,920px);flex-shrink:0;min-height:70px;display:grid;grid-template-columns:1fr;align-items:center;justify-items:center;}
.feedback{min-height:24px;font-weight:900;text-align:center;font-size:clamp(.95rem,3vw,1.1rem);}
.feedback.ok{color:var(--correct)}
.feedback.bad{color:var(--wrong)}
.feedback.info{color:var(--primary)}
.finish-btn{display:none;min-width:170px;min-height:42px;border:0;border-radius:12px;background:var(--primary);color:#fff;font-weight:900;cursor:pointer;margin-top:4px;}
#resultScreen{min-height:calc(100dvh - 46px);align-items:center;justify-content:center;padding:20px;}
.result-card{width:min(100%,560px);background:#fff;border:2px solid var(--border);border-radius:26px;padding:clamp(24px,5vw,40px);text-align:center;box-shadow:var(--shadow);}
.result-card h1{color:var(--correct);font-size:clamp(2rem,7vw,3rem);margin-bottom:10px;}
.result-card p{color:var(--muted);font-weight:700;margin-bottom:22px;}
.result-actions{display:grid;gap:10px;}
.outline-btn{border:2px solid var(--primary);background:#fff;color:var(--primary);}
.teacher-btn{background:#475569;color:#fff;}
.back-link{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;border-radius:14px;border:2px solid #94a3b8;color:#475569;text-decoration:none;font-weight:900;}
#teacherScreen{min-height:calc(100dvh - 46px);padding:20px;justify-content:center;align-items:flex-start;overflow:auto;}
.teacher-wrap{width:min(100%,820px);display:flex;flex-direction:column;gap:14px;}
.teacher-wrap h2{text-align:center}
.teacher-sub{text-align:center;color:var(--muted);font-weight:700;}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.stat{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;text-align:center;}
.stat small{display:block;color:var(--muted);font-weight:700;margin-bottom:4px}
.stat strong{font-size:1.45rem}
.teacher-section{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;}
.teacher-section h3{margin-bottom:10px;font-size:1rem}
.teacher-list{display:grid;gap:8px;}
.teacher-row{padding:10px 12px;background:#f8fafc;border-radius:10px;color:#334155;font-size:.95rem;}
.teacher-back{align-self:center;min-width:180px;min-height:44px;border:0;border-radius:12px;background:#e2e8f0;color:#334155;font-weight:900;cursor:pointer;}
.star-particle{position:fixed;pointer-events:none;width:30px;height:30px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f1c40f" stroke="%23d4ac0d" stroke-width="1"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>');background-size:cover;z-index:9999;}
.btn-loading{position:relative;overflow:hidden;}
.btn-loading .loading-text{position:relative;z-index:1;opacity:0.8;}
.btn-loading .butterfly-loader{position:absolute;top:50%;left:-40px;font-size:1.6rem;z-index:2;animation:kelebekUcus 2s linear infinite,kelebekKanat 0.3s ease-in-out infinite alternate;pointer-events:none;}
@keyframes kelebekUcus{0%{left:-20px;}100%{left:calc(100% + 20px);}}
@keyframes kelebekKanat{0%{transform:translateY(-70%) rotate(-10deg);}100%{transform:translateY(-30%) rotate(10deg);}}
@keyframes shake{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}60%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (max-width:700px){#gameScreen{padding:6px 8px;gap:4px}.match-board{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:6px;}.side-panel{padding:6px;border-radius:14px;gap:4px}.side-title{font-size:.82rem}.cards-grid{gap:5px}.cards-grid.count-3{grid-template-columns:repeat(3,minmax(0,1fr))}.match-card{padding:5px;border-width:2px;border-radius:12px;max-height:none}.bottom-zone{min-height:62px}}
@media (max-width:380px){header{height:40px;padding:0 10px}body.game-active #gameScreen{height:calc(100dvh - 40px)}.game-top h1{font-size:1.1rem}.game-top p{font-size:.78rem}.cards-grid{gap:4px}.match-card{padding:4px}.feedback{font-size:.9rem}.bottom-zone{min-height:56px}}
@media (max-height:620px){header{height:40px}#gameScreen{height:calc(100dvh - 40px);padding:4px 8px;gap:3px}.game-top h1{font-size:1rem}.game-top p{font-size:.74rem}.side-title{font-size:.76rem}.side-panel{padding:4px;gap:3px}.cards-grid{gap:4px}.match-card{padding:3px;border-radius:10px}.bottom-zone{min-height:48px}.feedback{min-height:18px;font-size:.86rem}.finish-btn{min-height:34px;margin-top:2px}}
@media (max-width:560px){.stats-grid{grid-template-columns:1fr}}