@font-face{font-family:"Andika";src:url("../fonts/Andika-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Andika";src:url("../fonts/Andika-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
:root{--navy:#123C52;--sky:#EEF5F9;--sun:#F2C14E;--teal:#2A9D8F;--line:#C9D3DA;--ink:#1E2A33;--grey:#5E6B74;--cream:#FFF8E6}
.td{font-family:"Andika",system-ui,sans-serif;background:var(--sky);color:var(--ink);min-height:100dvh}
.td *{box-sizing:border-box}
.td-wrap{max-width:1040px;margin:0 auto;padding:16px 16px 48px}
.td-head{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.td-chip{display:inline-block;background:var(--teal);color:#fff;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 10px}
.td-title{font-size:clamp(26px,4vw,38px);font-weight:700;color:var(--navy);margin:4px 0 0;line-height:1.1}
.td-sub{color:var(--grey);font-size:15px;margin:2px 0 0}
.td-controls{display:flex;gap:10px;align-items:center}
.td-speed{display:inline-flex;background:var(--sky);border:1px solid var(--line);border-radius:999px;padding:3px}
.td-speed button{font:inherit;font-weight:700;font-size:15px;border:0;background:transparent;color:var(--navy);padding:8px 16px;border-radius:999px;cursor:pointer}
.td-speed button[aria-pressed="true"]{background:var(--navy);color:#fff}
.td-proj{font:inherit;font-weight:700;font-size:15px;display:inline-flex;gap:8px;align-items:center;border:2px solid var(--navy);color:var(--navy);background:#fff;border-radius:12px;padding:7px 14px;cursor:pointer}
.td-proj:hover{background:var(--navy);color:#fff}
.td-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
@media (max-width:640px){.td-grid{grid-template-columns:repeat(2,1fr)}}
.td-tile{position:relative;font:inherit;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 10px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:transform .12s ease,box-shadow .12s ease}
.td-tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(18,60,82,.12)}
.td-tile img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:#f4f1ea}
.td-word{font-weight:700;font-size:clamp(18px,2.2vw,24px);color:var(--navy);margin-top:6px}
.td-num{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;background:var(--sun);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
.td-tile.playing{box-shadow:0 0 0 4px var(--sun)}
.td-tile.playing img{animation:td-bob .45s ease}
@keyframes td-bob{50%{transform:scale(1.04)}}
.td-section{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.td-h2{font-size:22px;font-weight:700;color:var(--navy);margin:0 0 4px;display:flex;align-items:center;gap:8px}
.td-say{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px}
@media (max-width:640px){.td-say{grid-template-columns:1fr}}
.td-phrase{font:inherit;display:flex;align-items:center;gap:12px;background:var(--cream);border:1px solid #f1e3bd;border-radius:999px;padding:6px 18px 6px 6px;cursor:pointer;text-align:left}
.td-phrase img{width:52px;height:52px;border-radius:50%;flex:none}
.td-phrase span{font-weight:700;font-size:19px;color:var(--ink)}
.td-phrase.playing{box-shadow:0 0 0 3px var(--sun)}
.td-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #e6edf1}
.td-row:first-of-type{border-top:0}
.td-rowhead{display:flex;align-items:center;gap:8px}
.td-rownum{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;display:grid;place-items:center}
.td-spk{width:44px;height:44px;border-radius:50%;border:0;background:var(--teal);color:#fff;display:grid;place-items:center;cursor:pointer}
.td-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.td-opt{font:inherit;background:#fff;border:2px solid var(--line);border-radius:14px;padding:6px;cursor:pointer;position:relative}
.td-opt img{width:100%;max-width:120px;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;margin:0 auto}
.td-opt.right{border-color:#2E9E5B;box-shadow:0 0 0 3px rgba(46,158,91,.25)}
.td-opt.wrong{border-color:#D9534F;animation:td-shake .35s ease}
@keyframes td-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.td-mark{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700}
.td-score{margin-top:8px;font-weight:700;color:var(--teal)}
.td-foot{margin-top:28px;text-align:center;color:var(--grey);font-size:13px}
.td-overlay{position:fixed;inset:0;background:var(--sky);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;padding:3vh}
.td-overlay .td-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:3vh;display:flex;flex-direction:column;align-items:center;cursor:pointer;width:min(70vh,90vw)}
.td-overlay .td-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px}
.td-overlay .td-big{font-size:clamp(40px,8vh,96px);font-weight:700;color:var(--navy);line-height:1.1;margin-top:1vh}
.td-nav{display:flex;gap:24px;align-items:center}
.td-arrow{width:72px;height:72px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:32px;cursor:pointer}
.td-count{font-weight:700;color:var(--grey);font-size:20px;min-width:80px;text-align:center}
.td-close{position:absolute;top:16px;right:16px;font:inherit;font-weight:700;border:2px solid var(--navy);background:#fff;color:var(--navy);border-radius:12px;padding:8px 14px;cursor:pointer}
.td-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:16px}
.td-hubcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;text-decoration:none;color:inherit;display:block}
.td-hubcard img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.td-hubcard b{display:block;font-size:20px;color:var(--navy);margin-top:6px}
@media (prefers-reduced-motion:reduce){.td-tile,.td-tile.playing img,.td-opt.wrong{animation:none;transition:none}}
.td-overlay[hidden]{display:none}
.td-tile img,.td-opt img,.td-hubcard img,.td-overlay .td-card img{height:auto}

.td-hubh{margin-top:28px}