/* ── ETW Tic Tac Toe ── */
.etw-ttt-wrap{
    --navy:#0b3553; --blue:#144a75; --sky:#1f6ea5;
    --accent:#00b2e3; --spring:#39c777;
    font-family:'Mulish','Ubuntu',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:#f5fbff; font-size:15px; line-height:1.5;
    position:relative; min-height:100vh;
}
/* Reset images — prevent WP/Elementor from forcing 100% width */
.etw-ttt-wrap img{
    max-width:100% !important; height:auto !important;
    width:auto !important;
}
.etw-ttt-wrap .etw-ttt-cell img{
    width:80% !important; height:80% !important;
    max-width:none !important; max-height:none !important;
}
.etw-ttt-wrap .etw-ttt-char img{
    width:90px !important; height:90px !important;
}
.etw-ttt-wrap .etw-ttt-score img{
    width:40px !important; height:40px !important;
}
.etw-ttt-wrap .etw-ttt-logo{
    width:60px !important; height:auto !important;
}
.etw-ttt-wrap::before{
    content:""; position:fixed; inset:0; z-index:-1;
    background:linear-gradient(180deg, var(--navy) 0%, var(--blue) 45%, var(--sky) 100%);
}

/* Floating game icons */
.etw-ttt-floats{ position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:0; overflow:hidden; }
.etw-ttt-floats .flake{ position:absolute; top:-10vh; font-size:18px; opacity:.12; animation:tttFall linear infinite, tttSway ease-in-out infinite; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.etw-ttt-floats .flake:nth-child(1){ left:5%; animation-duration:10s,5s; }
.etw-ttt-floats .flake:nth-child(2){ left:18%; animation-duration:12s,6s; animation-delay:2s,1s; }
.etw-ttt-floats .flake:nth-child(3){ left:30%; animation-duration:14s,7s; animation-delay:1s,.5s; }
.etw-ttt-floats .flake:nth-child(4){ left:45%; animation-duration:11s,5.5s; animation-delay:3s,.8s; }
.etw-ttt-floats .flake:nth-child(5){ left:58%; animation-duration:13s,6.5s; animation-delay:.5s,.2s; }
.etw-ttt-floats .flake:nth-child(6){ left:72%; animation-duration:15s,7.5s; animation-delay:1.5s,1.2s; }
.etw-ttt-floats .flake:nth-child(7){ left:84%; animation-duration:12s,6s; animation-delay:2.5s,.6s; }
.etw-ttt-floats .flake:nth-child(8){ left:92%; animation-duration:16s,8s; animation-delay:0s,.4s; }
@keyframes tttFall{ 0%{ transform:translateY(-10vh); } 100%{ transform:translateY(110vh); } }
@keyframes tttSway{ 0%{ transform:translateX(0); } 50%{ transform:translateX(12px); } 100%{ transform:translateX(0); } }

/* Sheet container */
.etw-ttt-sheet{
    max-width:560px; margin:0 auto; padding:20px 16px 32px;
    position:relative; z-index:1;
}

/* Header */
.etw-ttt-hero{
    display:flex; align-items:center; gap:14px;
    background:rgba(255,255,255,.06); border:1px solid rgba(191,246,220,.18);
    backdrop-filter:blur(8px); border-radius:18px; padding:14px 16px;
    margin-bottom:16px;
    box-shadow:0 10px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(191,246,220,.06);
}
.etw-ttt-logo{ width:60px; height:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.22)); }
.etw-ttt-hero-text{ flex:1; }
.etw-ttt-hero-text h1{ margin:0; font-size:1.5rem; font-weight:800; letter-spacing:-.3px; }
.etw-ttt-hero-text p{ margin:4px 0 0; font-size:.9rem; opacity:.8; }

/* Fullscreen Button */
.etw-ttt-fullscreen-btn{
    width:40px; height:40px; border-radius:12px; border:none;
    background:rgba(255,255,255,.1); color:#fff; font-size:1.2rem;
    cursor:pointer; transition:all .2s ease; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
}
.etw-ttt-fullscreen-btn:hover{
    background:rgba(255,255,255,.2); transform:scale(1.08);
}

/* Screens */
.etw-ttt-screen{ display:none; }
.etw-ttt-screen.etw-ttt-active{ display:block; }

/* ── Character Selection ── */
.etw-ttt-select-section{
    background:rgba(255,255,255,.06); border:1px solid rgba(191,246,220,.14);
    backdrop-filter:blur(8px); border-radius:16px; padding:20px;
    margin-bottom:14px;
    box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.etw-ttt-select-section h2{
    margin:0 0 16px; font-size:1.1rem; font-weight:700; text-align:center;
}
.etw-ttt-chars{
    display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}
.etw-ttt-char{
    background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.18);
    border-radius:16px; padding:14px 12px 10px; text-align:center;
    cursor:pointer; transition:all .25s ease; color:#fff;
    width:130px; position:relative;
}
.etw-ttt-char img{
    width:90px; height:90px; object-fit:contain;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));
    transition:transform .25s ease;
}
.etw-ttt-char span{
    display:block; margin-top:8px; font-weight:700; font-size:.9rem;
}
.etw-ttt-char:hover{
    border-color:rgba(191,246,220,.5);
    background:rgba(191,246,220,.12);
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.etw-ttt-char:hover img{ transform:scale(1.08); }
.etw-ttt-char.selected{
    border-color:#39c777 !important;
    background:rgba(57,199,119,.18) !important;
    box-shadow:0 0 20px rgba(57,199,119,.35), 0 8px 24px rgba(0,0,0,.25);
}
.etw-ttt-char.selected::after{
    content:"✓"; position:absolute; top:8px; right:10px;
    font-size:1.1rem; font-weight:800; color:#39c777;
}
.etw-ttt-char.disabled{
    opacity:.3; cursor:not-allowed; pointer-events:none;
}

@keyframes tttBounce{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.12); }
    70%{ transform:scale(.95); }
    100%{ transform:scale(1); }
}

/* ── Mode / Difficulty Buttons ── */
.etw-ttt-modes{
    display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.etw-ttt-mode-btn, .etw-ttt-diff-btn{
    flex:1; min-width:120px; padding:12px 16px; border-radius:14px;
    background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.16);
    color:#fff; font-family:inherit; font-weight:700; font-size:.9rem;
    cursor:pointer; transition:all .25s ease; text-align:center;
}
.etw-ttt-mode-btn img, .etw-ttt-diff-btn img{
    width:1em !important; height:1em !important; max-width:1em !important;
    max-height:1em !important; display:inline !important; vertical-align:-0.1em;
}
.etw-ttt-mode-btn:hover, .etw-ttt-diff-btn:hover{
    border-color:rgba(191,246,220,.4); background:rgba(255,255,255,.1);
    transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.etw-ttt-mode-btn.selected, .etw-ttt-diff-btn.selected{
    border-color:#39c777; background:rgba(57,199,119,.12);
    box-shadow:0 0 14px rgba(57,199,119,.25), 0 4px 12px rgba(0,0,0,.2);
}

/* ── Game Screen ── */

/* Scoreboard */
.etw-ttt-scoreboard{
    display:flex; align-items:center; justify-content:center; gap:16px;
    background:rgba(255,255,255,.06); border:1px solid rgba(191,246,220,.14);
    backdrop-filter:blur(8px); border-radius:16px; padding:12px 20px;
    margin-bottom:12px;
    box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.etw-ttt-score{
    display:flex; align-items:center; gap:8px;
}
.etw-ttt-score img{
    width:40px; height:40px; object-fit:contain; border-radius:50%;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.etw-ttt-score span{ font-weight:600; font-size:.95rem; }
.etw-ttt-score strong{
    font-size:1.4rem; font-weight:800; color:#39c777;
    background:rgba(57,199,119,.15); border:1px solid rgba(57,199,119,.3);
    padding:2px 10px; border-radius:10px;
}
.etw-ttt-vs{
    font-weight:800; font-size:1rem; opacity:.5;
    letter-spacing:1px;
}

/* Game Toolbar */
.etw-ttt-game-toolbar{
    display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.etw-ttt-turn{
    flex:1; text-align:center; font-weight:700; font-size:1.05rem;
    padding:8px; border-radius:12px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
    transition:all .3s ease;
}
.etw-ttt-turn-p1{ border-color:rgba(57,199,119,.4); color:#bff6dc; }
.etw-ttt-turn-p2{ border-color:rgba(0,178,227,.4); color:#bfe9fb; }

.etw-ttt-timer{
    min-width:56px;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-weight:800;
    font-size:.95rem;
    padding:8px 10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);
    color:#fff;
}

.etw-ttt-timer.etw-ttt-timer-warn{
    border-color:rgba(255,107,107,.7);
    background:rgba(255,107,107,.2);
    color:#ffd3d3;
    box-shadow:0 0 14px rgba(255,107,107,.35);
    animation:tttTimerPulse .7s ease-in-out infinite alternate;
}

@keyframes tttTimerPulse{
    0%{ transform:scale(1); }
    100%{ transform:scale(1.05); }
}

.etw-ttt-hint{
    text-align:center;
    font-size:.88rem;
    font-weight:700;
    padding:9px 14px;
    margin-bottom:10px;
    border-radius:12px;
    background:rgba(57,199,119,.14);
    border:1px solid rgba(57,199,119,.38);
    color:#d9ffea;
}

.etw-ttt-hint.etw-ttt-hint-alert{
    background:rgba(255,107,107,.2);
    border-color:rgba(255,107,107,.68);
    color:#ffe5e5;
    animation:tttHintAlert .4s ease;
}

@keyframes tttHintAlert{
    0%{ transform:translateY(-4px); opacity:.4; }
    100%{ transform:translateY(0); opacity:1; }
}

/* Undo Button */
.etw-ttt-undo-btn{
    padding:8px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.08); color:#fff; font-family:inherit;
    font-size:.82rem; font-weight:700; cursor:pointer;
    transition:all .2s ease; white-space:nowrap; flex-shrink:0;
}
.etw-ttt-undo-btn:hover:not(:disabled){
    background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.35);
    transform:translateY(-1px);
}
.etw-ttt-undo-btn:disabled{
    opacity:.3; cursor:not-allowed;
}

/* Taunt Speech Bubble */
.etw-ttt-taunt{
    text-align:center; font-size:.88rem; font-weight:600; font-style:italic;
    padding:8px 16px; margin-bottom:10px; border-radius:14px;
    background:rgba(255,215,0,.12); border:1px solid rgba(255,215,0,.3);
    color:#ffd93d; position:relative;
}
.etw-ttt-taunt::after{
    content:''; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
    border-left:6px solid transparent; border-right:6px solid transparent;
    border-top:6px solid rgba(255,215,0,.3);
}
.etw-ttt-taunt-anim{
    animation:tttTauntIn .4s cubic-bezier(.17,.67,.29,1.35);
}
@keyframes tttTauntIn{
    0%{ transform:scale(.7) translateY(-8px); opacity:0; }
    100%{ transform:scale(1) translateY(0); opacity:1; }
}

/* Rewind Animation */
.etw-ttt-rewind{
    animation:tttRewind .35s ease;
}
@keyframes tttRewind{
    0%{ transform:scale(1); background:rgba(255,107,107,.15); border-color:rgba(255,107,107,.4); }
    50%{ transform:scale(.85) rotate(-5deg); }
    100%{ transform:scale(1) rotate(0); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); }
}

/* Board */
.etw-ttt-board{
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    max-width:360px; margin:0 auto 16px;
}
.etw-ttt-cell{
    aspect-ratio:1; border-radius:14px;
    background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.16);
    cursor:pointer; transition:all .2s ease;
    display:flex; align-items:center; justify-content:center;
    padding:8px; position:relative; overflow:hidden;
}
.etw-ttt-cell:hover:not(.played){
    background:rgba(255,255,255,.14);
    border-color:rgba(191,246,220,.4);
    transform:scale(1.03);
    box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.etw-ttt-cell img{
    width:80%; height:80%; object-fit:contain;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.35));
}
.etw-ttt-cell.played{
    cursor:default;
    background:rgba(255,255,255,.05);
}
.etw-ttt-pop img{
    animation:tttPopIn .35s cubic-bezier(.17,.67,.29,1.35);
}
@keyframes tttPopIn{
    0%{ transform:scale(0) rotate(-15deg); opacity:0; }
    60%{ transform:scale(1.15) rotate(5deg); opacity:1; }
    100%{ transform:scale(1) rotate(0); }
}

/* Win highlight */
.etw-ttt-win{
    border-color:#39c777 !important;
    background:rgba(57,199,119,.2) !important;
    box-shadow:0 0 20px rgba(57,199,119,.4), 0 0 40px rgba(57,199,119,.15) !important;
    animation:tttGlow 1s ease-in-out infinite alternate;
}
@keyframes tttGlow{
    0%{ box-shadow:0 0 20px rgba(57,199,119,.4), 0 0 40px rgba(57,199,119,.15); }
    100%{ box-shadow:0 0 30px rgba(57,199,119,.6), 0 0 60px rgba(57,199,119,.25); }
}

/* Result overlay */
.etw-ttt-result{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    background:rgba(11,53,83,.92); backdrop-filter:blur(6px);
    overflow-y:auto;
    animation:tttFadeIn .3s ease;
}
@keyframes tttFadeIn{
    0%{ opacity:0; } 100%{ opacity:1; }
}
.etw-ttt-result-inner{ text-align:center; padding:20px 16px; max-width:400px; margin:0 auto; }

/* Victory Dance */
.etw-ttt-victory-dance{
    width:56px !important; height:56px !important;
    max-width:56px !important; max-height:56px !important;
    object-fit:contain !important; display:none;
    margin:0 auto 6px !important;
    border-radius:50%;
    filter:drop-shadow(0 3px 10px rgba(57,199,119,.5));
    animation:tttVictoryDance 1.2s ease-in-out infinite;
}
@keyframes tttVictoryDance{
    0%{ transform:rotate(0deg) scale(1); }
    15%{ transform:rotate(12deg) scale(1.1); }
    30%{ transform:rotate(-12deg) scale(1.05); }
    45%{ transform:rotate(8deg) scale(1.12); }
    60%{ transform:rotate(-8deg) scale(1.08); }
    75%{ transform:rotate(4deg) scale(1.1); }
    100%{ transform:rotate(0deg) scale(1); }
}

.etw-ttt-result-emoji{
    font-size:2.2rem; margin-bottom:6px; line-height:1;
    animation:tttBounce .6s ease;
}
.etw-ttt-result-emoji img{
    width:2.2rem !important; height:2.2rem !important;
    max-width:2.2rem !important; max-height:2.2rem !important;
    display:inline !important; vertical-align:middle;
}
.etw-ttt-result-inner h2{
    font-size:1.3rem; font-weight:800; margin:0 0 4px; color:#fff;
}

/* Reaction quip */
.etw-ttt-reaction{
    font-size:.92rem; font-style:italic; color:rgba(255,255,255,.75);
    margin:0 0 18px; line-height:1.4;
}

.etw-ttt-result-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.etw-ttt-btn{
    padding:12px 24px; border-radius:50px; font-family:inherit;
    font-size:.95rem; font-weight:700; cursor:pointer;
    border:none; color:#fff; transition:all .2s ease;
}
.etw-ttt-btn-play{
    background:linear-gradient(135deg,#39c777,#2fa866);
    box-shadow:0 4px 16px rgba(57,199,119,.35);
}
.etw-ttt-btn-play:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 24px rgba(57,199,119,.5);
}
.etw-ttt-btn-new{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.etw-ttt-btn-new:hover{
    background:rgba(255,255,255,.2);
    transform:translateY(-2px);
}

/* Confetti */
.etw-ttt-confetti{
    position:absolute; top:-10px; width:8px; height:8px;
    border-radius:50%; z-index:20; pointer-events:none;
    animation:tttConfettiFall linear forwards;
}
@keyframes tttConfettiFall{
    0%{ transform:translateY(0) rotate(0deg) scale(1); opacity:1; }
    100%{ transform:translateY(500px) rotate(720deg) scale(0.3); opacity:0; }
}

/* Footer */
.etw-ttt-footer{
    display:flex; align-items:center; gap:12px; justify-content:center;
    padding:20px 16px; margin-top:20px;
    font-size:.82rem; opacity:.7; text-align:center;
    flex-wrap:wrap;
}
.etw-ttt-footer img{
    width:36px; height:auto;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.etw-ttt-footer a{ color:#bfe9fb; }

/* Game screen needs relative for result overlay */
#ttt-game{ position:relative; }

/* ── Streak Counter ── */
.etw-ttt-streak img{
    width:1em !important; height:1em !important;
    max-width:1em !important; max-height:1em !important;
    display:inline !important; vertical-align:middle !important;
}
.etw-ttt-streak{
    text-align:center; font-weight:800; font-size:1rem;
    padding:10px 14px; margin-bottom:12px; border-radius:12px;
    background:linear-gradient(135deg, rgba(255,107,0,.15), rgba(255,60,0,.1));
    border:1px solid rgba(255,107,0,.4);
    color:#ffd93d;
    text-shadow:0 0 10px rgba(255,107,0,.4);
    animation:tttStreakPulse 1.5s ease-in-out infinite alternate;
}
.etw-ttt-streak-anim{
    animation:tttStreakSlide .5s cubic-bezier(.17,.67,.29,1.35), tttStreakPulse 1.5s ease-in-out infinite alternate;
}
@keyframes tttStreakPulse{
    0%{ box-shadow:0 0 8px rgba(255,107,0,.2), 0 0 16px rgba(255,60,0,.1); }
    100%{ box-shadow:0 0 16px rgba(255,107,0,.4), 0 0 32px rgba(255,60,0,.2); }
}
@keyframes tttStreakSlide{
    0%{ transform:translateY(-10px) scale(.9); opacity:0; }
    100%{ transform:translateY(0) scale(1); opacity:1; }
}

/* ── Theme Picker ── */
.etw-ttt-themes{
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.etw-ttt-theme-btn{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:12px 8px 10px; border-radius:14px;
    background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.14);
    color:#fff; font-family:inherit; font-weight:700; font-size:.8rem;
    cursor:pointer; transition:all .25s ease;
    backdrop-filter:blur(4px);
}
.etw-ttt-theme-btn:hover{
    border-color:rgba(191,246,220,.4); transform:translateY(-2px);
    background:rgba(255,255,255,.1);
    box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.etw-ttt-theme-btn.selected{
    border-color:#39c777; background:rgba(57,199,119,.12);
    box-shadow:0 0 14px rgba(57,199,119,.25), 0 4px 12px rgba(0,0,0,.2);
}
.etw-ttt-theme-btn.etw-ttt-locked,
.etw-ttt-frame-btn.etw-ttt-locked{
    opacity:.58;
    cursor:not-allowed;
    filter:grayscale(.35);
}
.etw-ttt-theme-btn.etw-ttt-locked:hover,
.etw-ttt-frame-btn.etw-ttt-locked:hover{
    transform:none;
    box-shadow:none;
    border-color:rgba(255,255,255,.14);
}
.etw-ttt-theme-swatch{
    width:36px; height:36px; border-radius:10px; border:2px solid rgba(255,255,255,.2);
    flex-shrink:0;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.etw-ttt-swatch-default{ background:linear-gradient(135deg, #0b3553, #1f6ea5); }
.etw-ttt-swatch-ocean{ background:linear-gradient(135deg, #0a2e4d, #0077b6); }
.etw-ttt-swatch-forest{ background:linear-gradient(135deg, #1b3a1b, #2d6a2d); }
.etw-ttt-swatch-space{ background:linear-gradient(135deg, #0d0d2b, #1a1a4e); }
.etw-ttt-swatch-gold{ background:linear-gradient(135deg, #6b4b00, #d4a017); }
.etw-ttt-swatch-rainbow{ background:linear-gradient(135deg, #ff4f4f, #ffb347, #ffe44d, #4ddf7f, #4da6ff, #b07dff); }

.etw-ttt-frames{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.etw-ttt-frame-btn{
    padding:10px 8px;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    border:2px solid rgba(255,255,255,.14);
    color:#fff;
    font-family:inherit;
    font-weight:700;
    font-size:.8rem;
    cursor:pointer;
    transition:all .25s ease;
}

.etw-ttt-frame-btn:hover{
    border-color:rgba(191,246,220,.4);
    transform:translateY(-2px);
    background:rgba(255,255,255,.1);
}

.etw-ttt-frame-btn.selected{
    border-color:#39c777;
    background:rgba(57,199,119,.12);
    box-shadow:0 0 14px rgba(57,199,119,.25), 0 4px 12px rgba(0,0,0,.2);
}

/* ── Board Themes ── */

/* Ocean */
.etw-ttt-wrap[data-theme="ocean"]::before{
    background:linear-gradient(180deg, #0a2e4d 0%, #0077b6 45%, #00b4d8 100%);
}
.etw-ttt-wrap[data-theme="ocean"] .etw-ttt-cell{
    background:rgba(0,180,216,.12); border-color:rgba(0,180,216,.3);
}
.etw-ttt-wrap[data-theme="ocean"] .etw-ttt-cell:hover:not(.played){
    background:rgba(0,180,216,.22); border-color:rgba(0,180,216,.5);
}
.etw-ttt-wrap[data-theme="ocean"] .etw-ttt-hero,
.etw-ttt-wrap[data-theme="ocean"] .etw-ttt-scoreboard,
.etw-ttt-wrap[data-theme="ocean"] .etw-ttt-turn{
    border-color:rgba(0,180,216,.25);
}
.etw-ttt-wrap[data-theme="ocean"] .etw-ttt-win{
    border-color:#00b4d8 !important;
    background:rgba(0,180,216,.25) !important;
    box-shadow:0 0 20px rgba(0,180,216,.4), 0 0 40px rgba(0,180,216,.15) !important;
}
.etw-ttt-wrap[data-theme="ocean"] .etw-ttt-floats .flake{ content:''; }

/* Forest */
.etw-ttt-wrap[data-theme="forest"]::before{
    background:linear-gradient(180deg, #1b3a1b 0%, #2d6a2d 45%, #4a9e4a 100%);
}
.etw-ttt-wrap[data-theme="forest"] .etw-ttt-cell{
    background:rgba(74,158,74,.12); border-color:rgba(74,158,74,.3);
}
.etw-ttt-wrap[data-theme="forest"] .etw-ttt-cell:hover:not(.played){
    background:rgba(74,158,74,.22); border-color:rgba(74,158,74,.5);
}
.etw-ttt-wrap[data-theme="forest"] .etw-ttt-hero,
.etw-ttt-wrap[data-theme="forest"] .etw-ttt-scoreboard,
.etw-ttt-wrap[data-theme="forest"] .etw-ttt-turn{
    border-color:rgba(74,158,74,.25);
}
.etw-ttt-wrap[data-theme="forest"] .etw-ttt-win{
    border-color:#6bcb77 !important;
    background:rgba(107,203,119,.25) !important;
    box-shadow:0 0 20px rgba(107,203,119,.4), 0 0 40px rgba(107,203,119,.15) !important;
}

/* Space */
.etw-ttt-wrap[data-theme="space"]::before{
    background:linear-gradient(180deg, #0d0d2b 0%, #1a1a4e 45%, #2d1b69 100%);
}
.etw-ttt-wrap[data-theme="space"] .etw-ttt-cell{
    background:rgba(130,80,220,.12); border-color:rgba(130,80,220,.3);
}
.etw-ttt-wrap[data-theme="space"] .etw-ttt-cell:hover:not(.played){
    background:rgba(130,80,220,.22); border-color:rgba(130,80,220,.5);
}
.etw-ttt-wrap[data-theme="space"] .etw-ttt-hero,
.etw-ttt-wrap[data-theme="space"] .etw-ttt-scoreboard,
.etw-ttt-wrap[data-theme="space"] .etw-ttt-turn{
    border-color:rgba(130,80,220,.3);
}
.etw-ttt-wrap[data-theme="space"] .etw-ttt-win{
    border-color:#a855f7 !important;
    background:rgba(168,85,247,.25) !important;
    box-shadow:0 0 20px rgba(168,85,247,.4), 0 0 40px rgba(168,85,247,.15) !important;
}
.etw-ttt-wrap[data-theme="space"] .etw-ttt-turn-p1{ border-color:rgba(168,85,247,.4); color:#d8b4fe; }
.etw-ttt-wrap[data-theme="space"] .etw-ttt-turn-p2{ border-color:rgba(236,72,153,.4); color:#fbcfe8; }
.etw-ttt-wrap[data-theme="space"] .etw-ttt-score strong{
    color:#a855f7; background:rgba(168,85,247,.15); border-color:rgba(168,85,247,.3);
}

/* Gold */
.etw-ttt-wrap[data-theme="gold"]::before{
    background:linear-gradient(180deg, #5b3f00 0%, #b8860b 45%, #f0c75e 100%);
}
.etw-ttt-wrap[data-theme="gold"] .etw-ttt-cell{
    background:rgba(240,199,94,.14); border-color:rgba(240,199,94,.35);
}
.etw-ttt-wrap[data-theme="gold"] .etw-ttt-cell:hover:not(.played){
    background:rgba(240,199,94,.25); border-color:rgba(240,199,94,.5);
}
.etw-ttt-wrap[data-theme="gold"] .etw-ttt-win{
    border-color:#facc15 !important;
    background:rgba(250,204,21,.24) !important;
    box-shadow:0 0 20px rgba(250,204,21,.45), 0 0 40px rgba(250,204,21,.16) !important;
}

/* Rainbow */
.etw-ttt-wrap[data-theme="rainbow"]::before{
    background:linear-gradient(180deg, #2f1540 0%, #3d2d86 25%, #16608f 50%, #0e7a5f 75%, #9b3c12 100%);
}
.etw-ttt-wrap[data-theme="rainbow"] .etw-ttt-cell{
    background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.34);
}
.etw-ttt-wrap[data-theme="rainbow"] .etw-ttt-cell:hover:not(.played){
    background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5);
}
.etw-ttt-wrap[data-theme="rainbow"] .etw-ttt-win{
    border-color:#f472b6 !important;
    background:rgba(244,114,182,.26) !important;
    box-shadow:0 0 20px rgba(244,114,182,.45), 0 0 40px rgba(96,165,250,.18) !important;
}

/* Character frames */
.etw-ttt-wrap[data-frame="star"] .etw-ttt-cell img,
.etw-ttt-wrap[data-frame="star"] .etw-ttt-score img,
.etw-ttt-wrap[data-frame="star"] .etw-ttt-char img{
    border:2px solid #ffd93d;
    border-radius:50%;
    box-shadow:0 0 0 2px rgba(255,217,61,.28), 0 0 16px rgba(255,217,61,.42);
}

.etw-ttt-wrap[data-frame="fire"] .etw-ttt-cell img,
.etw-ttt-wrap[data-frame="fire"] .etw-ttt-score img,
.etw-ttt-wrap[data-frame="fire"] .etw-ttt-char img{
    border:2px solid #ff7a18;
    border-radius:50%;
    box-shadow:0 0 0 2px rgba(255,122,24,.25), 0 0 16px rgba(255,122,24,.44);
}

/* Fullscreen styling */
.etw-ttt-wrap:fullscreen{
    overflow-y:auto; background:linear-gradient(180deg, var(--navy) 0%, var(--blue) 45%, var(--sky) 100%);
}
.etw-ttt-wrap:fullscreen::before{ display:none; }
.etw-ttt-wrap:-webkit-full-screen{ overflow-y:auto; background:linear-gradient(180deg, var(--navy) 0%, var(--blue) 45%, var(--sky) 100%); }
.etw-ttt-wrap:-webkit-full-screen::before{ display:none; }

/* Mobile */
@media(max-width:480px){
    .etw-ttt-sheet{ padding:12px 10px 24px; }
    .etw-ttt-hero{ flex-direction:column; text-align:center; padding:12px; }
    .etw-ttt-hero-text h1{ font-size:1.3rem; }
    .etw-ttt-fullscreen-btn{ position:absolute; top:10px; right:10px; }
    .etw-ttt-char{ width:100px; padding:10px 8px 8px; }
    .etw-ttt-char img{ width:70px; height:70px; }
    .etw-ttt-board{ max-width:290px; gap:6px; }
    .etw-ttt-scoreboard{ gap:10px; padding:10px 14px; flex-wrap:wrap; }
    .etw-ttt-score img{ width:32px; height:32px; }
    .etw-ttt-result-inner h2{ font-size:1.3rem; }
    .etw-ttt-victory-dance{ width:46px; height:46px; }
    .etw-ttt-themes{ grid-template-columns:repeat(2,1fr); gap:6px; }
    .etw-ttt-frames{ grid-template-columns:repeat(2,1fr); gap:6px; }
    .etw-ttt-theme-btn{ padding:10px 6px 8px; font-size:.75rem; }
    .etw-ttt-frame-btn{ padding:9px 6px; font-size:.75rem; }
    .etw-ttt-theme-swatch{ width:28px; height:28px; }
    .etw-ttt-mode-btn, .etw-ttt-diff-btn{ min-width:0; padding:10px 12px; font-size:.82rem; }
    .etw-ttt-undo-btn{ padding:6px 10px; font-size:.78rem; }
    .etw-ttt-taunt{ font-size:.82rem; padding:6px 12px; }
}