/* Core variables */
.tg-pane{padding:25px 0; --plyr-color-main: var(--brand);}
#toot-game{--brand:#da1d52; --bubble:#f2f2f6; --text:#1a1a1a; color:var(--text); font-size:16px; line-height:1.7;}
#toot-game *{box-sizing:border-box;}
.tg-h{font-size:20px;margin:0 0 12px;color:#222;}
.tg-center{text-align:center;}

/* Progress */
.tg-progress{margin:0 0 16px; transition:opacity .3s ease, transform .3s ease;}
.tg-progress.fade-out{opacity:0;transform:translateY(-8px);pointer-events:none;}
.tg-steps{display:flex; gap:8px; flex-wrap:wrap;}
.tg-steps .tg-step{flex:1 1 auto; min-width:120px; background:#eee; border-radius:8px; padding:8px 10px; position:relative; display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit;}
.tg-steps .tg-step::before{content:""; width:16px; height:16px; border-radius:50%; background:#ccc; flex:0 0 16px;}
.tg-steps .tg-step.active{background:#ffe6ec;}
.tg-steps .tg-step.active::before{background:var(--brand);}
.tg-steps .tg-title{font-size:14px;}

/* Layout */
.tg-row{display:flex; gap:24px; align-items:flex-start;}
.tg-col-image{flex:0 0 140px;}
.tg-col-content{flex:1 1 auto;}
.tg-row-flash{align-items:stretch;}
.tg-col-left{flex:0 0 60%; min-width:240px; align-content:center;}
.tg-col-right{flex:1 1 40%;}
.tg-widht-100{width:100%!important;}
.tg-bird{width:100%; height:auto; display:block;}
.tg-bird-bottom{width:180px; display:block; margin:24px auto 0;}

@media (max-width:768px){
  .tg-row{flex-direction:column;}
  .tg-col-image{flex:auto; max-width:130px;}
  .tg-bird-bottom{width:140px;}
  #tg-duration, .tg-audio-sep{display:none;}
  #tg-speed-label{display:none;}
  .tg-col-left,.tg-col-right{flex:auto;}
  .tg-bubble::after{display:none;}
  .tg-flip-card{min-height:360px;}
}

/* Bubble */
.tg-bubble{background:var(--bubble); border-radius:16px; padding:14px 16px; position:relative; margin-bottom:14px;}
.tg-bubble::after{content:""; transform:rotate(-90deg); position:absolute; top:25px; right:-15px; width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--bubble);}
.tg-bubble-scroll{height:140px; overflow-y:auto; overflow-x:hidden; -ms-overflow-style:none; scrollbar-width:none;}
.tg-bubble-scroll::-webkit-scrollbar{display:none;}
.tg-text,.tg-simple-text,.tg-flash-text{margin:0; white-space:pre-wrap;}

/* Buttons */
.tg-btn{background:var(--brand); color:#fff; border:none; border-radius:8px; padding:10px 15px; cursor:pointer; font-size:16px;}
.tg-btn:disabled{opacity:.5; cursor:not-allowed;}
.tg-secondary{background:#666;}

/* Audio controls */
.tg-audio{display:flex; gap:12px; align-items:center; flex-wrap:nowrap;}
.tg-audio-bar{flex:1 1 240px; height:8px; background:#eee; border-radius:6px; position:relative; overflow:hidden; cursor:pointer; touch-action:none;}
.tg-audio-progress{position:absolute; left:0; top:0; bottom:0; right:auto; background:var(--brand); width:0%;}
.tg-time{font-size:14px; color:#444;}

/* Speed control */
.tg-speed-wrap{position:relative; display:inline-block;}
.tg-speed-btn{display:inline-flex; align-items:center; gap:8px; background:var(--brand); color:#fff; border:none; border-radius:10px; padding:13px; cursor:pointer;}
.tg-speed-label{font-size:14px; line-height:1;}
.tg-speed-popover{position:absolute; inset-inline-end:0; top:calc(100% + 8px); background:#fff; border:1px solid #eee; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08); padding:6px; min-width:140px; z-index:20;}
.tg-speed-popover::before{content:""; position:absolute; top:-6px; inset-inline-end:14px; width:12px; height:12px; background:#fff; border:1px solid #eee; border-bottom:none; border-right:none; transform:rotate(45deg);}
.tg-speed-opt{width:100%; text-align:start; background:transparent; border:none; border-radius:8px; padding:8px 10px; cursor:pointer; font-size:14px; color:#222;}
.tg-speed-opt:hover{background:#f7f7f7; color:var(--brand);}

/* Puzzle */
.tg-slots, .tg-tiles{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.tg-slot, .tg-tile{min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-weight:700; letter-spacing:.5px; user-select:none;}
.tg-slot{border:2px dashed rgba(0,0,0,.15); background:rgba(0,0,0,.03);}
.tg-slot.filled{border-style:solid;}
.tg-tile{cursor:grab; color:#222;}
.tg-tile:active{cursor:grabbing;}
.tg-actions{margin-top:6px;}
.tg-success{margin-top:12px; background:#eaf7ea; padding:12px; border-radius:10px;}

/* Video */
#tg-video{width:100%; max-width:900px; margin:0 auto; display:block; border-radius:0; overflow:hidden;}

/* Nav */
.tg-nav{margin-top:16px; display:flex; justify-content:space-between; gap:10px; transition:opacity .3s ease, transform .3s ease;}
.tg-nav.fade-out{opacity:0; transform:translateY(8px); pointer-events:none;}

/* Confetti canvas */
.tg-confetti{position:fixed; inset:0; width:100vw; height:100vh; z-index:9999; pointer-events:none;}

/* Tada image */
.tg-tada{width:160px; height:auto;}
/* Flashcard */
.tg-flip-wrap{perspective:1200px;}
.tg-flip-card{position:relative; width:100%; min-height:260px; border-radius:16px; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.4,.2,.2,1); box-shadow:0 8px 24px rgba(0,0,0,.08); background:#fff; cursor:pointer; outline:none;}
.tg-flip-card.is-flipped{transform:rotateY(180deg);}
.tg-face{position:absolute; inset:0; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px; background-color:#f2f2f6; border-radius:12px;}
.tg-face.tg-back{transform:rotateY(180deg); background-color:#ffe6ec;}
.tg-flash-img{width:120px; height:auto; display:block;}
.tg-flash-text{text-align:center;}