/* Tricky Word Tunnel */
.tt-wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.6dvh, 14px);
  box-sizing: border-box;
  padding: 0 4px;
}
.tt-hear { min-height: 60px; min-width: 200px; font-size: clamp(1.1rem, 3.4vmin, 1.5rem); border-radius: var(--radius); box-shadow: var(--shadow); }
.tt-hear .i { width: 28px; height: 28px; margin-right: 8px; vertical-align: -6px; }
.tt-hint {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--read);
  font-size: clamp(16px, 3.2vmin, 22px);
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: .08em;
}
.tt-hint[hidden] { display: none; }
.tt-pic { width: 36px; height: 36px; }

.tt-scene {
  position: relative;
  width: 100%;
  height: clamp(190px, 46dvh, 380px);
  overflow: hidden;
  border-radius: var(--radius);
  background: #12151d;
  box-shadow: var(--shadow), inset 0 0 0 4px #2a2e36;
  touch-action: manipulation;
}
/* The dark mouth of the tunnel: darker towards the middle, lit rim at the edges. */
.tt-mouth {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 45%, #05060a 0%, #0c0f16 55%, #232834 100%);
}
/* Lights along the top of the walls, flowing past. */
.tt-lights { position: absolute; left: 0; right: 0; height: 8px; background-repeat: repeat-x; opacity: .9; }
.tt-l1 {
  top: 5px;
  background-image: radial-gradient(circle at 10px 4px, #ffd426 0 4px, rgba(255, 212, 38, .25) 5px 8px, transparent 9px);
  background-size: 64px 8px;
  animation: tt-flow 2.4s linear infinite;
}
.tt-l2 {
  bottom: 34px;
  background-image: radial-gradient(circle at 10px 4px, #ff9b3d 0 4px, rgba(255, 155, 61, .25) 5px 8px, transparent 9px);
  background-size: 64px 8px;
  animation: tt-flow 2.4s linear infinite;
}
@keyframes tt-flow { to { background-position-x: -64px; } }
.tt-road {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26px;
  background: var(--asphalt);
  border-top: 4px solid #4a5060;
}
.tt-road::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 10px;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--lane) 0 28px, transparent 28px 64px);
}

.tt-signs { position: absolute; inset: 0; }
.tt-sign {
  position: absolute;
  left: 0;
  width: var(--tt-w, 150px);
  min-height: 56px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--read);
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
.tt-board {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--tt-h, 70px);
  background: #fff;
  border: 5px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset 0 0 0 3px #fff, 0 0 14px rgba(255, 255, 255, .25);
  transition: background .15s, opacity .4s;
}
.tt-word { font-size: var(--tt-fs, 30px); font-weight: 700; color: var(--ink); line-height: 1; }
.tt-post { display: block; width: 10px; height: 8px; margin: 0 auto; background: #6b7280; border-radius: 0 0 3px 3px; }

.tt-sign.wrong { pointer-events: none; }
.tt-sign.wrong .tt-board { opacity: .3; animation: tt-wobble .45s ease-out; }
.tt-sign.right .tt-board { background: #8ee0a5; border-color: var(--go-dark); animation: tt-pop .5s ease-out; box-shadow: 0 0 0 6px rgba(35, 160, 80, .5); }
.tt-sign.right .tt-post { visibility: hidden; }
.tt-sign.glow .tt-board { animation: tt-glow 1s ease-in-out infinite; }
.tt-sign:focus-visible .tt-board { outline: 4px solid var(--focus); outline-offset: 3px; }
.tt-sign:disabled { cursor: default; }

@keyframes tt-wobble {
  0% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 45% { transform: rotate(8deg); }
  70% { transform: rotate(-5deg); } 100% { transform: rotate(0); }
}
@keyframes tt-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1.06); } }
@keyframes tt-glow {
  0%, 100% { box-shadow: inset 0 0 0 3px #fff, 0 0 0 0 rgba(255, 212, 38, .9), 0 0 14px rgba(255, 212, 38, .5); }
  50% { box-shadow: inset 0 0 0 3px #fff, 0 0 0 8px rgba(255, 212, 38, .9), 0 0 28px rgba(255, 212, 38, .9); }
}

@media (max-height: 420px) {
  .tt-wrap { gap: 4px; }
  .tt-hear { min-height: 56px; }
  .tt-scene { height: clamp(150px, 52dvh, 220px); }
  .tt-board { border-width: 4px; }
}
/* Calm mode (grown-ups' screen) */
body.calm .tt-lights { animation: none; }
body.calm .tt-sign.wrong .tt-board, body.calm .tt-sign.right .tt-board, body.calm .tt-sign.glow .tt-board { animation: none; }
body.calm .tt-sign.glow .tt-board { box-shadow: inset 0 0 0 3px #fff, 0 0 0 8px rgba(255, 212, 38, .9); }