/* Tongue twister practice room (/twisters/). Colours, fonts, borders and shadows come from /att.css. */
[hidden]{display:none !important;}
.row-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:22px;}
.hero-card{text-align:center;}
.hero-card img{width:100%; max-width:320px; height:auto;}
.linkish{background:none; border:0; padding:0; font:inherit; font-weight:800; color:var(--ink); text-decoration:underline; cursor:pointer;}

/* Sound chips */
.chips{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px;}
.chip{display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px 10px; background:var(--white); color:var(--ink);
  border:var(--border-control) solid var(--ink); border-radius:var(--radius-md); cursor:pointer; font:inherit; box-shadow:3px 3px 0 var(--ink);}
.chip:hover,.chip:focus-visible{transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink);}
.chip .k{font-family:var(--font-display); font-size:26px; line-height:1;}
.chip .s{font-size:13px; color:var(--ink-soft);}
.chip.on{background:var(--yellow);}
.chip.done::after{content:"✓ practised"; font-size:11px; font-weight:800; color:var(--green-text);}

/* Room */
.room-title{font-size:clamp(2.4rem,6vw,4rem); margin:14px 0 8px;}
.room-guide{font-size:18px; max-width:70ch; margin:0 0 28px;}
.room-grid{gap:28px; margin-bottom:28px;}
.room-grid h3,.say-card h3,.pairs-card h3{font-size:1.4rem; margin:0 0 10px;}
.card.on-white{box-shadow:var(--shadow-card);}
.mouth-fig{margin:0 0 12px; text-align:center;}
.mouth-fig img{width:100%; max-width:300px; height:auto;}
.mouth-fig figcaption{font-size:14px; color:var(--ink-soft); margin-top:4px;}
.mouth-list{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0;}
.mouth-list dt{font-weight:800;}
.mouth-list dd{margin:0;}
.warm{padding-left:20px; margin:0;}
.warm li{margin:0 0 8px;}
.mistakes{width:100%; border-collapse:collapse; font-size:15px;}
.mistakes th{text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase; border-bottom:2px solid var(--ink); padding:4px 6px;}
.mistakes td{border-bottom:1px solid var(--line); padding:6px; vertical-align:top;}
.ipa{font-family:"Charis SIL","Doulos SIL","Gentium Plus","DejaVu Sans","Segoe UI",sans-serif;}

.say-card,.pairs-card{margin-bottom:28px;}
.tw{border-top:1px solid var(--line); padding:16px 0;}
.tw:first-child{border-top:0;}
.tw .lvl{display:inline-block; font-family:var(--font-display); text-transform:uppercase; font-size:15px; background:var(--ink); color:var(--white); padding:3px 9px 2px; margin-bottom:8px;}
.tw .lvl.idiom{background:var(--yellow); color:var(--ink);}
.tw .txt{font-size:19px; line-height:1.5; margin:0 0 10px;}
.tw .idm{font-size:15px; margin:0 0 6px;}
.tw .acts{display:flex; flex-wrap:wrap; gap:8px;}
.mini{font:700 14px var(--font-sans); background:var(--white); color:var(--ink); border:var(--border-hair) solid var(--ink); border-radius:var(--radius-pill); padding:6px 14px; cursor:pointer;}
.mini:hover{background:var(--yellow);}
.mini.rec{background:var(--orange);}
.mini.rec.live{background:var(--ink); color:var(--white);}
.mini[disabled]{opacity:.45; cursor:not-allowed;}
.tw .status{font-size:14px; color:var(--ink-soft); margin:8px 0 0;}

.pairs-game{display:flex; flex-direction:column; gap:12px; align-items:flex-start;}
.pair-opts{display:flex; gap:12px; flex-wrap:wrap;}
.pair-opts button{font:400 26px var(--font-display); min-width:140px; padding:12px 20px; background:var(--white); border:var(--border-control) solid var(--ink); border-radius:var(--radius-md); cursor:pointer; box-shadow:3px 3px 0 var(--ink);}
.pair-opts button.right{background:var(--green);}
.pair-opts button.wrong{background:var(--orange);}
.pair-fb{font-weight:800; min-height:1.4em; margin:0;}
.room-nav{justify-content:space-between;}
@media (max-width:600px){ .room-nav .btn{width:100%; text-align:center;} .tw .txt{font-size:17px;} }
/* Keep IPA symbols exactly as written, even inside uppercase headings. */
.room-title .ipa,.chip .ipa{text-transform:none;}
.mouth-fig .ipa::before,.mouth-fig .ipa::after{content:"/";}