/* A single toy-board system for all game modes. */
.playing { --text-main:#343953; --text-task:#343953; --text-soft:#72738c; --accent:#7965c5; --accent-strong:#6954b6; --sun:#ffda83; background: radial-gradient(ellipse at 12% 10%,#fff3d8,transparent 48%),#efedf7; color:#343953; }
.playing .header { width:min(1200px,100%); margin:auto; }.playing .text-header h1 { color:#343953; }.playing .header-help-button { color:#7965c5; background:#e6e0f3; }.playing .pause-button,.playing .play-timer { color:#545176; background:#fffaf0; border-color:#ded8ea; box-shadow:0 4px 0 #d8d2e2; }
.playing .game.board { height:auto; min-height:calc(100svh - clamp(64px,10dvh,88px)); max-height:none; border:0; padding:0 0 max(32px,env(safe-area-inset-bottom)); box-sizing:border-box; gap:0; }
.playing .choice-layout,.playing .reading-layout,.playing .memory-layout,.playing .pairs-layout { margin:clamp(14px,3svh,30px) auto 0; }
.playing .choice-layout { width:min(92vw,960px); flex:0 0 auto; padding:clamp(20px,3vw,36px); gap:20px; background:#fffaf1; border:2px solid #fff; border-radius:34px; box-shadow:0 9px 0 #ded7e6,0 18px 40px #6558790c; }
.playing .choice-question { color:#343953; font-size:clamp(16px,2.1vw,22px); line-height:1.35; max-width:650px; }
.playing .choice-big-text { border-radius:24px; background:linear-gradient(145deg,#ffe5a5,#ffd16d); color:#5f496b; box-shadow:inset 0 3px 0 #fff2c7,0 7px 0 #dcb264; border:2px solid #ffeabe; }
.playing .choice-main-card { background:#eee8f8; border-color:#fff; box-shadow:0 6px 0 #d5cae7; }
.playing .choice-options { width:min(100%,760px); gap:14px; }
.playing .choice-options .choice-answer,.playing .reading-answers .object { position:relative; background:linear-gradient(145deg,#fffdf8,#f8eedb); border:3px solid #fff; border-radius:24px; box-shadow:inset 0 -4px 0 #e9d9bc,0 6px 0 #d8c8ad,0 9px 14px #5747660a; color:#575077; }
.playing .choice-answer img { filter:drop-shadow(0 6px 3px #6d526215); }
.playing .choice-options .choice-answer:hover,.playing .reading-answers .object:hover { background:linear-gradient(145deg,#fffaf0,#fff0c8); border-color:#f5d99e; transform:translateY(-3px); }
.playing .choice-options .choice-answer.answer-correct { background:#e6def5; border-color:#a58bce; box-shadow:inset 0 -4px 0 #d7caeb,0 6px 0 #bba8d7; }.playing .choice-options .choice-answer.answer-wrong { border-color:#dfb49f; background:#fcf0e8; }
.word-game .word-layout { flex:0 0 auto; min-height:0; height:clamp(400px,calc(100svh - 220px),680px); margin:18px auto 0; padding:24px; width:min(92vw,1100px); grid-template-rows:1fr auto; gap:22px 32px; border:2px solid white; border-radius:36px; background:#fffaf1; box-shadow:0 9px 0 #ded7e6,0 18px 40px #6558790c; }
.word-game .word-visual { border-radius:28px; background:radial-gradient(circle at 76% 20%,#ffdc88 0 7%,transparent 7.2%),linear-gradient(#e5dff4,#f4eafb); }
.word-game .word-visual::before { background:#d7cae8; }.word-game .word-visual::after { background:#fffaf0c0; box-shadow:28px -8px 0 3px #fffaf0c0,180px 45px 0 -3px #fffaf090; }
.word-game .word-puzzle { gap:18px; }.word-game .word-actions { padding:8px 0 14px; box-sizing:border-box; }
.word-game .syllable,.syllable.dragging { background:linear-gradient(145deg,#ffe7b1,#ffd179); color:#6c5070; border:2px solid #fff0c9; border-radius:16px; box-shadow:inset 0 -3px 0 #f0bf65,0 5px 0 #d4a75e; text-shadow:0 1px 0 #fff6da; }
.word-game .slot { border:2px dashed #b3a1cb; background:#efe8f880; color:#83709f; }.word-game .slot:has(.syllable) { background:transparent; border-color:transparent; }
.word-game .word-actions > button { background:linear-gradient(#9882d9,#8067c7); border-color:#a390db; color:#fff; box-shadow:inset 0 2px 0 #bda9ed,0 6px 0 #6550a3; border-radius:19px; }.word-game .word-actions > button:hover { background:#8d74cf; box-shadow:0 6px 0 #6550a3; }.word-game .word-actions > button:active { box-shadow:0 2px 0 #6550a3; }
.word-game:has(.word-layout.answer-success) .word-visual { background:linear-gradient(#e3dbf7,#fff0bc); }
.playing .memory-card,.playing .pair-card { border-radius:20px; }.playing .memory-card { background:linear-gradient(#ab95dd,#927ac7); box-shadow:inset 0 2px 0 #c5b2eb,0 6px 0 #7760aa; border:2px solid #bda7e5; }.playing .memory-card.open,.playing .memory-card.matched { background:#fffaf1; border-color:#fff; }.playing .pair-card { background:#fffaf1; border-color:#fff; box-shadow:0 5px 0 #ded1bf; color:#55516e; }
.playing .reading-word-area .word,.playing .word { color:#55516e; }.playing .reading-layout { padding-top:14px; }.playing .reading-answers { padding-bottom:12px; }
@media(orientation:portrait) { .word-game .word-layout { height:clamp(370px,calc(100svh - 220px),1000px); grid-template-rows:minmax(120px,1fr) auto auto; gap:18px; padding:22px; }.word-game #objects .object { width:min(52vw,25svh,330px); height:min(52vw,25svh,330px); }.word-game .word-actions { padding:0 0 12px; }.playing .choice-layout { padding:24px; }.playing .choice-options { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:600px; } }
@media(max-width:600px) {
.journey-level { font-size:11px; }.playing .journey-progress { gap:14px; }.journey-meter { height:12px; }
 .word-game .word-layout { margin-top:12px; height:clamp(340px,calc(100svh - 200px),760px); padding:16px; gap:14px; border-radius:28px; }.word-game .word-visual { border-radius:20px; }.word-game .word-actions { padding:4px 0 12px; }.word-game .word-actions > button { min-height:50px; max-width:340px; }.word-game .word-puzzle { gap:12px; }
 .playing .choice-layout { margin-top:12px; padding:20px 14px 24px; gap:18px; border-radius:28px; }.playing .choice-options { gap:12px; }.playing .choice-options .choice-answer { padding:12px 8px 16px; border-radius:21px; }.playing .choice-answer img { height:clamp(76px,13svh,130px); width:min(100%,140px); }.playing .choice-big-text { width:clamp(106px,15svh,150px); height:clamp(100px,14svh,140px); font-size:clamp(60px,10svh,90px); }.playing .choice-question { font-size:16px; }.playing .choice-options .choice-answer span { color:#575077; }
}
@media(max-height:680px) and (orientation:portrait) { .word-game .word-layout { height:auto; min-height:320px; grid-template-rows:minmax(110px,1fr) auto auto; padding:14px; gap:12px; }.word-game .word-actions { padding-bottom:10px; }.word-game .word-puzzle { gap:8px; }.word-game #objects .object { width:130px; height:130px; }.word-game .word-actions > button { min-height:46px; }.playing .choice-layout { gap:14px; padding-top:18px; }.playing .choice-answer img { height:72px; }.playing .choice-big-text { width:90px; height:82px; font-size:56px; } }
@media(max-height:520px) and (orientation:landscape) {
.playing .game.board { min-height:calc(100svh - 60px); padding-bottom:24px; }
 .word-game .word-layout { height:auto; min-height:230px; margin-top:12px; padding:16px; grid-template-rows:1fr auto; gap:12px 24px; border-radius:26px; }.word-game .word-actions { padding-bottom:10px; }.word-game #objects .object { width:140px; height:140px; }.word-game .word-actions > button { min-height:42px; padding:8px; }
 .playing .choice-layout { margin-top:10px; padding:14px; display:grid; grid-template-columns:130px minmax(0,1fr); grid-template-rows:auto 1fr; gap:12px 20px; width:min(92vw,900px); }.playing .choice-visual { grid-column:1; grid-row:1 / 3; }.playing .choice-question { grid-column:2; font-size:15px; }.playing .choice-options { grid-column:2; grid-template-columns:repeat(4,minmax(0,1fr)); }.playing .choice-big-text { width:100px; height:90px; font-size:62px; }.playing .choice-answer img { height:65px; }.playing .choice-options .choice-answer { padding:8px; min-height:75px; border-radius:16px; }
}

.playing.choice-shell .choice-layout { width:min(92vw,960px); box-sizing:border-box; }.playing.choice-shell .choice-options { width:100%; }
.playing .header.board { border-left:0; border-right:0; }
.playing .reading-answers { width:min(86vw,calc((100svh - 360px)*.8),640px); }
@media(max-height:520px) and (orientation:landscape) { .playing .reading-answers { width:min(60vw,640px); grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.playing .reading-layout { grid-template-columns:minmax(130px,.5fr) minmax(0,1.5fr); width:min(92vw,980px); gap:20px; }.playing .reading-word-area .word { font-size:clamp(36px,7vw,68px); }.playing .reading-answers .object { min-height:90px; } }