* { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.main-content { min-height:calc(100vh - 160px); padding:clamp(20px,4vw,40px) 12px 48px; background:#ffffff; }
[data-theme="dark"] .main-content { background:linear-gradient(180deg,rgba(9,15,22,.96),rgba(5,10,16,.92)); }
.mod-container { max-width:860px; margin:0 auto; }
.mod-card {
    background:#fff;
    border-radius:36px;
    padding:clamp(18px,2.5vw,32px);
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    border:1px solid rgba(148,163,184,.22);
    position:relative;
    overflow:hidden;
}
[data-theme="dark"] .mod-card {
    background:linear-gradient(155deg,rgba(10,31,47,.97),rgba(5,16,25,.98) 58%,rgba(8,27,40,.97)),#0b1d2b;
    box-shadow:0 20px 48px rgba(0,0,0,.32);
    border-color:rgba(94,188,245,.24);
}
.mod-card::before {
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at top right,rgba(255,194,92,.12),transparent 24%),
               radial-gradient(circle at top left,rgba(74,219,255,.12),transparent 24%);
}
.mod-title {
    font-weight:800;font-size:clamp(1.5rem,4vw,2.6rem);
    background:linear-gradient(145deg,#0f5fd0,#00a7d8 48%,#f97316);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    margin:0 0 4px;line-height:1.1;text-align:center;
}
[data-theme="dark"] .mod-title {
    background:linear-gradient(145deg,#f8fdff,#7bd7ff 48%,#ffd27a);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mod-sub { text-align:center;color:#87bfdb;font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 24px; }
/* Timer bar */
.timer-track { background:rgba(15,23,42,.12);border-radius:40px;height:10px;margin-bottom:20px;overflow:hidden; }
[data-theme="dark"] .timer-track { background:rgba(255,255,255,.08); }
.timer-fill { height:100%;border-radius:40px;background:linear-gradient(90deg,#0f5fd0,#00c6ff);transition:width .2s linear; }
.timer-fill.warn { background:linear-gradient(90deg,#f97316,#ff4444); }
/* Score row */
.score-row { display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px; }
.score-chip {
    background:linear-gradient(180deg,rgba(14,42,60,.96),rgba(8,28,42,.96));
    padding:10px 20px;border-radius:100px;
    border:1px solid rgba(98,177,223,.38);
    color:#ceecff;font-size:clamp(.85rem,3vw,1rem);font-weight:500;
}
.score-chip span { font-weight:800;font-size:clamp(1.1rem,3.5vw,1.5rem);color:#fff7b5;margin-left:6px;
    text-shadow:0 0 15px #ffbf00,0 0 30px #f0a500; }
/* Word display */
.word-arena {
    background:linear-gradient(180deg,rgba(7,24,36,.9),rgba(7,24,36,.7));
    border:1px solid rgba(95,179,228,.22);
    border-radius:28px;padding:40px 20px;
    text-align:center;margin-bottom:20px;
    min-height:160px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:12px;
    position:relative;
}
.stroop-word {
    font-size:clamp(2.8rem,12vw,5.5rem);font-weight:900;
    letter-spacing:.06em;line-height:1;
    text-shadow:0 4px 24px currentColor;
    transition:opacity .1s;
}
.stroop-question { color:#7bd7ff;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase; }
.flash-feedback {
    position:absolute;inset:0;border-radius:28px;pointer-events:none;opacity:0;
    transition:opacity .15s;
}
.flash-feedback.correct { background:rgba(74,255,181,.18);opacity:1; }
.flash-feedback.wrong   { background:rgba(255,77,77,.18);opacity:1; }
/* Color buttons */
.color-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px; }
.color-btn {
    padding:clamp(14px,3vw,20px) 8px;
    border-radius:18px;border:2px solid rgba(255,255,255,.15);
    font-weight:700;font-size:clamp(.85rem,2.5vw,1.05rem);
    cursor:pointer;transition:.08s linear;letter-spacing:.04em;
    box-shadow:0 6px 0 rgba(0,0,0,.3),0 8px 20px rgba(0,0,0,.2);
    user-select:none;-webkit-user-select:none;
}
.color-btn:active { transform:translateY(5px);box-shadow:0 1px 0 rgba(0,0,0,.3); }
.color-btn:disabled { opacity:.35;pointer-events:none; }
.btn-primary {
    background:linear-gradient(160deg,#ffae5a,#f57c2e);
    border:none;font-size:clamp(.9rem,3vw,1.2rem);font-weight:700;
    padding:13px 28px;border-radius:60px;color:#0e2b37;letter-spacing:1px;
    box-shadow:0 8px 0 #a1440b,0 8px 28px #ffb45b;cursor:pointer;
    transition:.08s linear;user-select:none;display:block;margin:0 auto;
}
.btn-primary:active { transform:translateY(6px);box-shadow:0 2px 0 #a1440b; }
.result-panel {
    text-align:center;padding:20px;
    background:linear-gradient(180deg,rgba(10,33,48,.94),rgba(8,26,38,.84));
    border:1px solid rgba(95,179,228,.18);border-radius:22px;margin-bottom:16px;
    display:none;
}
.result-panel h3 { color:#7bd7ff;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 8px; }
.result-big { font-size:clamp(2rem,6vw,3.2rem);font-weight:900;color:#fff7b5;
    text-shadow:0 0 20px #ffbf00,0 0 40px #f0a500; }
.result-detail { color:#cbeeff;font-size:.92rem;margin-top:6px; }