/* Ink Trick */
.it-rule { padding: 6px 14px; border-radius: 999px; font-weight: 800; letter-spacing: .04em; background: var(--chip); border: 1px solid var(--glass-edge); transition: background .2s, color .2s; }
.it-rule.flip { background: linear-gradient(180deg, #FFD964, #F5C542); color: #14213A; animation: it-flash .5s; }
@keyframes it-flash { 30% { transform: scale(1.12); } }
.it-word { font-family: var(--display); font-size: clamp(48px, 13vw, 72px); font-weight: 800; letter-spacing: .02em; margin: 26px 0 30px; padding: 6px 22px; border-radius: 20px; background: var(--tile-top); box-shadow: var(--lift); }
.it-word.in { animation: it-in .22s ease-out; }
@keyframes it-in { from { transform: scale(.85); opacity: .2; } }
.it-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.it-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 16px; font-weight: 700;
  background: var(--tile-top); color: var(--text); border: 1px solid var(--glass-edge); box-shadow: var(--lift); cursor: pointer; transition: transform .1s; }
.it-btn:active { transform: translateY(2px); }
.it-sw { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 2px 2px rgba(255, 255, 255, .45), inset 0 -3px 6px rgba(0, 0, 0, .2); }
@media (max-width: 420px) { .it-pad { grid-template-columns: repeat(2, 1fr); } }