.td-spell,
.td-spell__modal {
--td-ink: #062d39;
--td-blue: #007bc1;
--td-pink: #e95178;
--td-green: #009c3d;
--td-yellow: #fab900;
--td-soft: #fff6f9;
--td-line: rgba(6, 45, 57, 0.12);
--td-radius: 12px;
}
.td-spell {
--td-scroll-offset: 88px;
color: var(--td-ink);
margin: 1.25rem auto 2rem;
max-width: 1100px;
padding: 0;
font-size: 16px;
line-height: 1.4;
}
.td-spell__intro {
background: var(--td-soft);
border-radius: var(--td-radius);
padding: 0.85rem 1.1rem;
margin-bottom: 0.85rem;
}
.td-spell__title {
margin: 0 0 0.2rem;
color: var(--td-pink) !important;
font-size: 1.55rem;
font-weight: 500;
font-style: italic;
}
.td-spell__lead {
margin: 0;
max-width: 46rem;
font-size: 0.95rem;
}
.td-spell__levels {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.45rem;
scroll-margin-top: var(--td-scroll-offset);
}
.td-spell__hint-line {
margin: 30px 0;
}
.td-spell__reset {
display: inline-block;
margin: 0 0 0.85rem;
}
.td-spell__reset[hidden] {
display: none !important;
} .td-spell [hidden],
.td-spell__level-panel:not(.is-active),
.td-spell__cat-panel:not(.is-active),
.td-spell__stage[hidden] {
display: none !important;
}
.td-spell__level-panel.is-active {
display: block !important;
}
.td-spell__cat-panel.is-active {
display: block !important;
}
.td-spell__cat-panel.is-active.is-revealed {
animation: td-spell-fade-in 0.4s ease both;
}
@keyframes td-spell-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: none;
}
}
.td-spell__cats,
.td-spell__cat-panel {
scroll-margin-top: var(--td-scroll-offset);
}
.td-spell__cat-btn,
.td-spell__ex-btn,
.td-spell__btn {
font: inherit;
cursor: pointer;
border: 2px solid transparent;
transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.td-spell__level-btn.is-active,
.td-spell__level-btn:hover {
color: #ffffff;
background-color: #062d39;
}
.td-spell__cats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.55rem;
margin-bottom: 0.85rem;
}
.td-spell__cat-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
text-align: left;
background: #fff;
border: 6px solid var(--td-line);
border-radius: var(--td-radius);
padding: 0.5rem;
min-height: 0;
position: relative;
}
.td-spell__cat-btn:hover,
.td-spell__cat-btn.is-active {
border-color: var(--td-blue);
box-shadow: 0 6px 16px rgba(0, 123, 193, 0.12);
}
.td-spell__cat-img {
width: 100%;
height: 115px;
border-radius: 8px;
background: #f3f6f8 center/cover no-repeat;
}
.td-spell__cat-label {
font-weight: 600;
font-size: 0.85rem;
line-height: 1.2;
padding-right: 0rem;
text-align: center;
width: 100%;
}
.td-spell__cat-head h3 {
margin: 0;
color: var(--td-blue) !important;
font-size: 1.2rem;
}
.td-spell__cat-head p {
margin: 0;
}
.td-spell__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
gap: 0.55rem;
}
.td-spell__ex-btn {
aspect-ratio: 1;
border-radius: 10px;
border: 3px solid var(--td-blue);
color: var(--td-blue);
font-weight: 700;
font-size: 1.2em;
background-color: transparent;
}
.td-spell__ex-btn:hover {
transform: translateY(-1px);
background: var(--td-blue);
color: #fff;
}
.td-spell__ex-btn.is-done {
background: var(--td-green);
border-color: var(--td-green);
color: #fff;
}
.td-spell__ex-btn.is-done:hover {
background: #007a30;
border-color: #007a30;
}
.td-spell__modal[hidden] {
display: none !important;
}
.td-spell__modal {
position: fixed;
inset: 0;
z-index: 2147483000;
display: grid;
place-items: center;
padding: 1rem;
}
.td-spell__modal-backdrop {
position: absolute;
inset: 0;
background: rgba(6, 45, 57, 0.55);
}
.td-spell__modal-card {
position: relative;
width: min(520px, 100%);
background: #fff;
border-radius: 16px;
padding: 1.35rem 1.25rem 1.25rem;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
text-align: center;
}
.td-spell__modal-x {
position: absolute;
top: 0.45rem;
right: 0.55rem;
border: 0;
background: transparent;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
color: var(--td-ink);
}
.td-spell__modal-title {
margin: 0 0 0.55rem;
color: var(--td-ink) !important;
font-size: 1.3rem;
font-weight: 600;
}
.td-spell__hint {
margin: 0 0 0.75rem;
font-size: 0.9rem;
opacity: 0.75;
}
.td-spell__audio {
width: 100%;
margin-bottom: 0.75rem;
}
.td-spell__btn {
border-radius: 999px;
padding: 0.55rem 1.2rem;
font-weight: 600;
}
.td-spell__btn--primary,
.td-spell__btn--primary:hover,
.td-spell__btn--primary:focus,
.td-spell__btn--primary:active {
background: #e95178 !important;
background-color: #e95178 !important;
color: #fff !important;
border-color: #e95178 !important;
filter: none;
}
.td-spell__btn--primary:hover,
.td-spell__btn--primary:focus {
background: #d4456b !important;
background-color: #d4456b !important;
border-color: #d4456b !important;
color: #fff !important;
}
.td-spell__timer {
position: relative;
width: 120px;
height: 120px;
margin: 0.35rem auto 0.75rem;
}
.td-spell__timer-ring {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.td-spell__timer-bg,
.td-spell__timer-fg {
fill: none;
stroke-width: 10;
}
.td-spell__timer-bg {
stroke: #edf2f5;
}
.td-spell__timer-fg {
stroke: var(--td-pink);
stroke-linecap: round;
stroke-dasharray: 327;
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.2s linear;
}
.td-spell__timer-num {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 2rem;
font-weight: 700;
color: var(--td-ink);
}
.td-spell__sentence {
font-size: 1.25rem;
line-height: 1.5;
margin: 0.35rem 0 1.1rem;
color: var(--td-ink);
}
.td-spell__sentence mark {
background: transparent;
color: var(--td-pink);
font-weight: 800;
padding: 0;
}
.td-spell__stage[data-stage="write"] .td-spell__modal-title {
margin: 0;
}
.td-spell__stage[data-stage="write"] .td-spell__modal-title + .td-spell__modal-title {
margin-top: 1.4rem;
margin-bottom: 1rem;
}
.td-spell__timer[hidden],
.td-spell__btn[hidden],
[data-to-answer][hidden] {
display: none !important;
}
.td-spell__modal [data-to-answer] {
margin-top: 0.85rem;
} @media (orientation: landscape) and (max-height: 900px) {
.td-spell {
--td-scroll-offset: 64px;
margin: 0.75rem auto 1.25rem;
font-size: 15px;
}
.td-spell__intro {
padding: 0.65rem 0.9rem;
margin-bottom: 0.6rem;
}
.td-spell__title {
font-size: 1.35rem;
}
.td-spell__lead {
display: none;
}
.td-spell__cats {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 0.4rem;
margin-bottom: 0.6rem;
}
.td-spell__cat-img {
height: 115px;
}
.td-spell__cat-label {
font-size: 0.8rem;
}
.td-spell__grid {
grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
gap: 0.3rem;
}
.td-spell__ex-btn {
font-size: 0.85rem;
border-radius: 8px;
}
.td-spell__modal-card {
padding: 1rem 1rem 0.9rem;
max-height: min(92vh, 560px);
overflow: auto;
}
.td-spell__timer-num {
font-size: 1.7rem;
}
}
@media (max-width: 640px) {
.td-spell__title {
font-size: 1.35rem;
}
.td-spell__cats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.td-spell__grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}