/* Flashcards — game-specific styles (shared tokens come from /assets/css/game.css) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Patrick+Hand&family=Andika:wght@400;700&display=swap');

.fc-app{position:relative}
.rank-badge{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.82rem;padding:7px 14px;border-radius:99px;border:3px solid var(--hard);background:var(--panel2);color:var(--soft)}
.rank-badge.on{background:var(--green);color:var(--hard)}.rank-badge.guest{background:var(--gold);color:var(--hard)}
.link-btn{background:none;border:0;padding:0;color:var(--sky);font:700 .82rem 'Inter',sans-serif;cursor:pointer;text-align:left}
.link-btn:hover{text-decoration:underline}
.hide-xs{display:inline}

/* ---- stage ---- */
.fc-stage{padding:18px}
.fc-modes{max-width:640px;flex:1;min-width:260px;flex-wrap:wrap}
.fc-modes button{white-space:nowrap}

/* the flashcard itself: a cream "paper" card in both themes */
.fc-card{position:relative;width:min(100%,760px);aspect-ratio:4/3;margin:0 auto;background:#fffdf5;color:#0f172a;border:4px solid var(--hard);border-radius:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.fc-card:focus-visible{outline:4px solid var(--gold);outline-offset:3px}
.fc-card-play{cursor:default;aspect-ratio:16/10;width:min(100%,640px)}
.fc-pic{flex:1;min-height:0;display:flex;padding:14px 14px 4px}
.fc-picbox{flex:1;min-width:0;min-height:0;display:grid;place-items:center;position:relative;container-type:size}
.fc-picbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
.fc-emoji{font-size:min(74cqh,74cqw);line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.fc-word{flex:none;min-height:22%;display:grid;place-items:center;text-align:center;padding:2px 18px 2px;font:800 clamp(1.8rem,7.5vw,4.2rem)/1.05 'Baloo 2',system-ui,sans-serif;color:#0f172a;border-top:3px dashed #e2e8f0;margin:0 18px;transition:opacity .2s}
.fc-meaning{flex:none;text-align:center;padding:0 18px 12px;margin:-6px 18px 0;font:600 clamp(.85rem,2.2vw,1.1rem)/1.3 'Inter',sans-serif;color:#64748b;transition:opacity .2s}
.fc-meaning:empty{display:none}
.fc-card.word-hidden .fc-word,.fc-card.word-hidden .fc-meaning{opacity:0}
.fc-card.no-pic .fc-pic{display:none}
.fc-card.no-pic .fc-word{flex:1;border-top:0;font-size:clamp(2.4rem,11vw,6rem)}
.fc-card.word-hidden::after{content:'Tap to show the word';position:absolute;left:0;right:0;bottom:7%;text-align:center;font:700 .85rem 'Inter',sans-serif;color:#94a3b8;z-index:2}
.fc-empty{margin:auto;text-align:center;color:#64748b}.fc-empty i{font-size:3rem;color:#cbd5e1}
.fc-nav{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.fc-nav .btn{min-width:110px;padding:12px 18px;font-size:1rem}
.fc-count{text-align:center;color:var(--muted);font-weight:700;margin:10px 0 0}

/* ---- two-sided flip card (View mode only — #bigCard) ---- */
.fc-flip3d{position:absolute;inset:0;perspective:1800px}
.fc-flip-inner{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d;transform-origin:50% 50%}
.fc-card.flipped .fc-flip-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;overflow:hidden}
.fc-face-back{transform:rotateY(180deg);align-items:center;justify-content:center;text-align:center;padding:20px;gap:10px;background:#fffdf5}
.fc-back-word{font:800 clamp(2rem,8vw,4.4rem)/1.1 'Baloo 2',system-ui,sans-serif;color:#0f172a}
.fc-back-meaning{font:600 clamp(1rem,3vw,1.4rem)/1.35 'Inter',sans-serif;color:#475569;max-width:90%}
@media(prefers-reduced-motion:reduce){.fc-flip-inner{transition:none}}
/* not a flip card right now: no 3D cost, no stray back face */
.fc-card:not(.fc-flip-mode) .fc-face-back{display:none}

/* ---- games ---- */
.fc-ready{text-align:center;max-width:460px;margin:20px auto}
.fc-ready-card{display:flex;flex-direction:column;gap:12px;align-items:center}
.fc-ready-icon{width:86px;height:86px;border-radius:24px;background:#f472b6;color:var(--hard);border:4px solid var(--hard);box-shadow:var(--shadow);display:grid;place-items:center;font-size:2.4rem}
.fc-start{font:800 1.3rem 'Baloo 2',sans-serif;padding:12px 44px;border-radius:14px}
.fc-progress{max-width:640px;margin:0 auto 12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-weight:800;color:var(--soft)}
.fc-bar{flex-basis:100%;height:10px;background:var(--bg);border:2px solid var(--hard);border-radius:99px;overflow:hidden}
.fc-bar i{display:block;height:100%;width:0;background:var(--green);transition:width .3s}
.fc-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-width:900px;margin:18px auto 0}
.fc-choice{padding:14px 10px;font:800 1.15rem 'Baloo 2',sans-serif;color:var(--text);background:var(--panel2);border:3px solid var(--hard);border-radius:14px;box-shadow:var(--shadow-sm);cursor:pointer;touch-action:manipulation;word-break:break-word;transition:transform .1s,background .15s}
.fc-choice:hover:not(:disabled){background:var(--sky);color:var(--hard);transform:translateY(-1px)}
.fc-choice:active:not(:disabled){transform:translateY(2px)}
.fc-choice.bad{background:var(--rose);color:#fff;opacity:.55;text-decoration:line-through}
.fc-choice.good{background:var(--green);color:var(--hard);animation:fcpop .35s}
.fc-choice:disabled:not(.bad):not(.good){opacity:.5}
.fc-type{max-width:520px;margin:18px auto 0;display:flex;flex-direction:column;gap:10px;align-items:center}
.fc-type input[type=text]{font:700 1.3rem 'Baloo 2',sans-serif;text-align:center;padding:12px}
.fc-type .btn{padding:12px 20px}
.fc-hintline{font:800 1.6rem/1.2 'Baloo 2',sans-serif;letter-spacing:.12em;color:var(--gold);min-height:1.2em;text-align:center}
.msg{min-height:1.6em;margin:12px 0 0;text-align:center;font-weight:700}
.msg.ok{color:#a7f3d0}.msg.bad{color:#fda4af}.msg.hint{color:var(--gold)}
.shake{animation:fcshake .35s}
@keyframes fcshake{20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes fcpop{50%{transform:scale(1.08)}}

/* ---- editor list ---- */
.fc-item{display:flex;flex-direction:column;gap:3px;background:var(--bg);border:2px solid var(--hard);border-radius:10px;padding:4px 6px}
.fc-item.cur{border-color:var(--sky)}
.fc-item-top{display:flex;align-items:center;gap:6px}
.fc-item input[type=text]{flex:1;min-width:0;border:0;background:transparent;padding:6px 4px;border-radius:6px;font-weight:700;font-size:.9rem}
.fc-item input[type=text]:focus{outline:2px solid var(--sky);border:0}
.fc-item input.warn{outline:2px dashed var(--gold)}
.fc-item .fc-meaning-input{border:0;background:var(--panel2)!important;border-radius:6px;padding:5px 8px;font-size:.78rem;font-weight:500;margin-left:46px;width:calc(100% - 46px);min-width:0;box-sizing:border-box}
.fc-meaning-input:focus{outline:2px solid var(--sky)}
.fc-thumb{width:40px;height:40px;flex:none;border-radius:8px;border:2px solid var(--hard);background:var(--panel2);cursor:pointer;padding:0;overflow:hidden;display:grid;place-items:center;font-size:1.4rem;color:var(--muted)}
.fc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fc-thumb:hover{filter:brightness(1.12)}
.fc-item .mini{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:.8rem;width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center}
.fc-item .mini:hover:not(:disabled){background:var(--panel2);color:var(--text)}
.fc-item .mini:disabled{opacity:.25;cursor:default}
.fc-item .mini.del:hover{background:var(--rose);color:#fff}
.fc-none{text-align:center;color:var(--muted);padding:14px 6px;font-size:.9rem}
.top-list{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.88rem}
.top-list li{display:flex;justify-content:space-between;gap:8px;color:var(--soft)}
.top-list li:nth-child(1) b{color:var(--gold)}
.btn.danger{background:#3b0a14;color:#fecdd3}.btn.danger:hover{background:var(--rose);color:#fff}

/* ---- Look tab: card-style swatches (mirrors hiddenpicture's .hp-styles/.hp-sty pattern) ---- */
.fc-styles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.fc-sty{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 4px 6px;border-radius:12px;border:3px solid var(--hard);background:var(--panel2);color:var(--soft);font:800 .7rem 'Inter',sans-serif;cursor:pointer;box-shadow:var(--shadow-sm)}
.fc-sty em{font-style:normal}
.fc-sty .tile{display:block;width:100%;aspect-ratio:1.5;border-radius:6px;border:2px solid #0f172a;pointer-events:none}
.fc-sty:hover{color:var(--text)}
.fc-sty[aria-pressed=true]{outline:3px solid var(--gold);outline-offset:2px;color:var(--text)}
.fc-sty-classic .tile{background:#fffdf5}
.fc-sty-notebook .tile{background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(59,130,246,.35) 5px 6px),#fffdf5;position:relative}
.fc-sty-chalk .tile{background:linear-gradient(160deg,#1f4d3a,#143527)}
.fc-sty-stylish .tile{background:linear-gradient(135deg,#fdf2f8,#fef3c7);border-color:#b45309}
.fc-sty-clean .tile{background:#fff;border-color:#9ca3af}
@media(max-width:520px){.fc-styles{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- Look tab: word font preview inside the segmented control ---- */
#fontGroup button[data-v=simple]{font-family:'Inter',sans-serif}
#fontGroup button[data-v=round]{font-family:'Baloo 2',system-ui,sans-serif}
#fontGroup button[data-v=practice]{font-family:'Patrick Hand',cursive;font-size:.95rem}
#fontGroup button[data-v=elegant]{font-family:'Playfair Display',serif}

/* ================= WORD FONT — applies to the word wherever it appears, View card only ================= */
#fcApp[data-font=simple] .fc-word,#fcApp[data-font=simple] .fc-back-word{font-family:'Inter',sans-serif;font-weight:800}
#fcApp[data-font=practice] .fc-word,#fcApp[data-font=practice] .fc-back-word{font-family:'Patrick Hand',cursive;font-weight:400}
#fcApp[data-font=elegant] .fc-word,#fcApp[data-font=elegant] .fc-back-word{font-family:'Playfair Display',serif;font-weight:700}

/* ================= CARD STYLE SKINS — View card only (.fc-card-play, the game-mode card, always stays classic) ================= */
#fcApp[data-cs=notebook] .fc-card:not(.fc-card-play){background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(59,130,246,.28) 31px 32px),#fffdf5;border-color:#1e3a8a}
#fcApp[data-cs=notebook] .fc-card:not(.fc-card-play)::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 46px,rgba(239,68,68,.45) 46px 48px,transparent 48px);pointer-events:none;z-index:1}
#fcApp[data-cs=notebook] .fc-face-back{background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(59,130,246,.28) 31px 32px),#fffdf5}

#fcApp[data-cs=chalk] .fc-card:not(.fc-card-play){background:linear-gradient(160deg,#1f4d3a,#143527);color:#f0fdf4;box-shadow:var(--shadow),inset 0 0 40px rgba(0,0,0,.4)}
#fcApp[data-cs=chalk] .fc-card:not(.fc-card-play) .fc-word{color:#f0fdf4;border-top-color:rgba(255,255,255,.25)}
#fcApp[data-cs=chalk] .fc-card:not(.fc-card-play) .fc-meaning{color:#bbf7d0}
#fcApp[data-cs=chalk] .fc-card:not(.fc-card-play).word-hidden::after{color:#bbf7d0}
#fcApp[data-cs=chalk] .fc-face-back{background:linear-gradient(160deg,#1f4d3a,#143527)}
#fcApp[data-cs=chalk] .fc-back-word{color:#f0fdf4}
#fcApp[data-cs=chalk] .fc-back-meaning{color:#bbf7d0}
#fcApp[data-cs=chalk] .fc-card:not(.fc-card-play) .fc-empty{color:#bbf7d0}
#fcApp[data-cs=chalk] .fc-card:not(.fc-card-play) .fc-empty i{color:#4ade80}

#fcApp[data-cs=stylish] .fc-card:not(.fc-card-play){background:linear-gradient(135deg,#fdf2f8,#fef3c7 60%,#fdf2f8);border-color:#b45309;box-shadow:4px 4px 0 #b45309}
#fcApp[data-cs=stylish] .fc-card:not(.fc-card-play) .fc-word{border-top-color:#fcd34d}
#fcApp[data-cs=stylish] .fc-face-back{background:linear-gradient(135deg,#fdf2f8,#fef3c7 60%,#fdf2f8)}

#fcApp[data-cs=clean] .fc-card:not(.fc-card-play){background:#fff;border-color:#9ca3af;border-width:2px;box-shadow:0 0 0 2px #e5e7eb}
#fcApp[data-cs=clean] .fc-card:not(.fc-card-play) .fc-word{border-top-color:#e5e7eb}
#fcApp[data-cs=clean] .fc-face-back{background:#fff}

/* ---- full screen: the cards / game only (html.gic-fs is set by bridge.js) ---- */
html.gic-fs .fc-app{max-width:none;padding:8px 10px}
html.gic-fs .layout{grid-template-columns:minmax(0,1fr)}
html.gic-fs .fc-stage{border-radius:0;border:0;box-shadow:none;background:transparent;padding:4px 54px 4px 4px}
html.gic-fs .fc-card,html.gic-fs .fc-card-play{max-width:none}   /* full screen: the card fills the free space (GIC.fit, fill mode) */
html.gic-fs .fc-word{font-size:clamp(1.8rem,min(9vw,11vh),6rem)}

@media(max-width:520px){.hide-xs{display:none}.fc-nav .btn{min-width:56px;min-height:50px;padding:12px 14px}.fc-choices{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}
@media(prefers-reduced-motion:reduce){.shake,.fc-choice.good{animation:none}}

/* ---- light theme ---- */
html[data-theme=light] .msg.ok{color:#047857}html[data-theme=light] .msg.bad{color:#be123c}html[data-theme=light] .msg.hint{color:#b45309}
html[data-theme=light] .fc-hintline{color:#b45309}
html[data-theme=light] .btn.danger{background:var(--rose);color:#fff}
html[data-theme=light] .fc-choice.bad{color:#fff}
@media(max-width:380px){.fc-modes button{padding:8px 5px;font-size:.76rem}.fc-modes button i{display:none}}

/* ================= Learn / Write / Test ================= */
.fc-prompt{padding:8px 14px 12px;text-align:center;font:700 1.15rem/1.3 'Baloo 2',sans-serif;color:#0f172a;border-top:3px solid #e2e8f0}
.fc-prompt .fc-claim{display:block;font:800 1.7rem/1.2 'Baloo 2',sans-serif;margin-top:4px}
.fc-prompt .fc-big{display:block;font:800 2rem/1.15 'Baloo 2',sans-serif}
.fc-prompt .fc-sub{display:block;font-weight:600;color:#475569;margin-top:2px}
.fc-stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fc-stats span{padding:4px 10px;border-radius:99px;border:2px solid var(--hard);background:var(--panel2);font-weight:800;font-size:.9rem}
.fc-stats b{color:var(--gold)}
.fc-opt{display:flex;gap:8px;align-items:center;font-weight:800}
.fc-opt select{font:inherit;padding:6px 10px;border-radius:10px;border:3px solid var(--hard);background:var(--panel2);color:var(--text)}
.fc-controw{display:flex;justify-content:center;margin-top:12px}
.fc-choices.fc-tf{grid-template-columns:repeat(2,minmax(120px,200px));justify-content:center}
.fc-review{display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow:auto;text-align:left;margin-top:8px}
.fc-review div{padding:6px 10px;border-radius:10px;border:2px solid var(--hard);font-weight:700}
.fc-review .ok{background:rgba(52,211,153,.18)}.fc-review .no{background:rgba(251,113,133,.2)}
.fc-review small{display:block;font-weight:600;opacity:.8}
@media(max-width:520px){.fc-modes button{flex:1 1 30%;padding-left:6px;padding-right:6px}.fc-prompt{font-size:1rem}.fc-prompt .fc-claim{font-size:1.4rem}}

/* ---- 1.94.0: printed font, picture-only front, big back, letter case, progress ---- */
#fcApp[data-font=print] .fc-word,#fcApp[data-font=print] .fc-back-word{font-family:'Andika','Century Gothic','Trebuchet MS',system-ui,sans-serif;font-weight:700}
#fcApp[data-font=print] .fc-meaning,#fcApp[data-font=print] .fc-back-meaning{font-family:'Andika','Century Gothic','Trebuchet MS',system-ui,sans-serif;font-weight:400}
#fcApp[data-case=lower] .fc-word,#fcApp[data-case=lower] .fc-back-word{text-transform:lowercase}
#fcApp[data-case=upper] .fc-word,#fcApp[data-case=upper] .fc-back-word{text-transform:uppercase}
.fc-face-back{padding:4% 6%;gap:.4em;overflow:hidden}
.fc-back-word{max-width:100%;overflow-wrap:normal;line-height:1.08;font-size:clamp(2.4rem,12vw,7rem)}
.fc-back-meaning{margin-top:.35em;max-width:100%;line-height:1.3;font-size:clamp(1.1rem,4vw,2rem);text-wrap:balance}
.fc-card.front-plain .fc-word,.fc-card.front-plain .fc-meaning{display:none}
.fc-card.front-plain .fc-pic{padding:18px}
.fc-prog{height:6px;max-width:min(100%,760px);margin:14px auto 0;border-radius:99px;background:rgba(148,163,184,.25);overflow:hidden}
.fc-prog i{display:block;height:100%;width:0;background:var(--gold,#fbbf24);border-radius:99px;transition:width .3s}
.fc-count{margin-top:8px}
html[data-motion=reduced] .fc-prog i{transition:none}
/* presenting: the board shows only the card. No tap hint, no buttons. */
html.gic-present .fc-card.word-hidden::after{display:none}
html.gic-present .fc-nav,html.gic-present .fc-count,html.gic-present .fc-prog,html.gic-present .fc-modes,html.gic-present #soundBtn{display:none!important}
html.gic-present .fc-card{cursor:default}

/* ---- shared phone layout (html.gic-phone, see assets/css/game.css) ---- */
html.gic-phone body .fc-stage{padding:4px;border:0}
html.gic-phone body .fc-modes{max-width:none;min-width:0;flex:1 1 100%}
html.gic-phone body .fc-modes button{flex:1 1 30%;padding:8px 4px;font-size:.78rem}
html.gic-phone body .fc-modes button i{display:none}
html.gic-phone body .fc-ready{max-width:none;margin:0;text-align:center}
html.gic-phone body .fc-ready-card{align-items:center;justify-content:flex-start;gap:12px}
html.gic-phone body .fc-ready-card>.fc-stats,html.gic-phone body .fc-ready-card>.fc-review{align-self:stretch}
html.gic-phone body .fc-ready-icon{width:64px;height:64px;font-size:1.8rem;border-width:3px;box-shadow:none;border-radius:18px}
html.gic-phone body .fc-start{align-self:stretch;margin-top:auto;position:sticky;bottom:0;width:100%;padding:12px;box-shadow:0 0 0 10px var(--panel)}
html.gic-phone body .fc-review{max-height:none;overflow:visible}
html.gic-phone body .fc-card{border-width:3px;border-radius:16px;box-shadow:none}
html.gic-phone body .fc-nav{margin-top:8px;gap:8px}
html.gic-phone body .fc-nav .btn{min-width:56px;min-height:46px;padding:8px 14px}
html.gic-phone body .fc-nav #toggleWord{flex:1 1 auto}
html.gic-phone body .fc-count{margin:6px 0 0}
html.gic-phone body .fc-progress{margin:0 0 6px}
html.gic-phone body .fc-choices{margin:8px 0 0;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
html.gic-phone body .fc-choice{padding:10px 8px;font-size:1.05rem;min-height:46px}
html.gic-phone body .fc-choices.fc-tf{grid-template-columns:repeat(2,minmax(0,1fr))}
html.gic-phone body .fc-type{margin-top:8px;max-width:none;width:100%}
html.gic-phone body .fc-type .row{width:100%}
html.gic-phone body .fc-type input[type=text]{font-size:16px}
html.gic-phone body .msg{margin:6px 0 0;min-height:1.3em}
html.gic-phone body .fc-app .stage-head{margin-bottom:6px;gap:6px}
html.gic-phone body .fc-progress{margin:0 0 4px;font-size:.85rem;gap:4px 10px}
html.gic-phone body .fc-bar{height:8px;border-width:2px}
html.gic-phone body .fc-choices{margin-top:6px;gap:6px}
html.gic-phone body .fc-choice{padding:6px 6px;min-height:42px;font-size:1rem}
html.gic-phone body .msg{margin:4px 0 0;min-height:1.2em;font-size:.9rem}
html.gic-phone body .fc-modes button{padding:6px 4px;font-size:.76rem}
html.gic-phone body .fc-modes{border-width:2px}
/* the Ready / result card stays under the mode tabs (so the player can still change mode) and fills the rest of the stage */
html.gic-phone body #playBox:has(#readyBox:not([hidden])){flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
html.gic-phone body #readyBox:not([hidden]){flex:1 1 auto;display:flex;flex-direction:column;min-height:0;margin:0}
html.gic-phone body #readyBox .ph-card{flex:1 1 auto;border-radius:12px;background:var(--bg)}
html.gic-phone body #runBox:not([hidden]){flex:0 0 auto}
@media (orientation:landscape) and (max-height:520px){
  html.gic-phone body .fc-app .stage-head{flex-wrap:nowrap;align-items:center;margin-bottom:4px}
  html.gic-phone body .fc-app .stage-head>.row{flex:none;flex-wrap:nowrap}
  html.gic-phone body .fc-nav{margin-top:4px}
  html.gic-phone body .fc-count{display:none}
}


/* ---- PLAY-FIRST (1.42.1): no header bar; the mode tabs share the top row with the "..." menu. On a wide screen the card keeps a good shape and the
        controls under it match its width (--gic-fit-w is set by GIC.fit); the sides stay empty rather than stretching everything. ---- */
html.gic-phone body .fc-nav,html.gic-phone body .fc-progress,html.gic-phone body .fc-choices,html.gic-phone body .fc-type,html.gic-phone body .msg,html.gic-phone body .fc-count{max-width:var(--gic-fit-w,none);margin-left:auto;margin-right:auto;width:100%}
html.gic-phone body .fc-nav{width:100%}
html.gic-fs .fc-nav,html.gic-fs .fc-progress,html.gic-fs .fc-choices,html.gic-fs .fc-type,html.gic-fs .msg,html.gic-fs .fc-count{max-width:var(--gic-fit-w,none);margin-left:auto;margin-right:auto;width:100%}
html.gic-phone body .fc-app .stage-head>.segmented{flex:1 1 auto}
@media (min-width:600px){
  html.gic-phone body #readyBox .ph-card{max-width:620px;width:100%;margin:0 auto;border:3px solid var(--hard);border-radius:18px}
}
/* the six mode tabs fold into ONE chip showing the current mode ("View v") on a phone and in full screen; tapping it opens the list.
   The clock and the read-aloud button then fit on the same thin row, so the card gets all the rest. */
html.gic-phone body .fc-stage,html.gic-fs .fc-stage{position:relative}
html.gic-phone body .fc-app .stage-head,html.gic-fs .fc-app .stage-head{flex-wrap:nowrap;align-items:center;gap:6px;margin-bottom:4px}
html.gic-phone body .fc-app .stage-head>.fc-modes:not(.open),html.gic-fs .fc-app .stage-head>.fc-modes:not(.open){flex:0 0 auto;width:auto;min-width:0;max-width:none}
html.gic-phone body .fc-modes:not(.open) button:not([aria-pressed=true]),html.gic-fs .fc-modes:not(.open) button:not([aria-pressed=true]){display:none}
html.gic-phone body .fc-modes:not(.open) button[aria-pressed=true],html.gic-fs .fc-modes:not(.open) button[aria-pressed=true]{flex:none;padding:6px 14px;font-size:.9rem;border-radius:99px}
html.gic-phone body .fc-modes:not(.open) button[aria-pressed=true]::after,html.gic-fs .fc-modes:not(.open) button[aria-pressed=true]::after{content:' \25BE';opacity:.7}
html.gic-phone body .fc-app .stage-head>.fc-modes.open,html.gic-fs .fc-app .stage-head>.fc-modes.open{position:absolute;left:4px;top:4px;z-index:60;flex-wrap:wrap;width:min(420px,calc(100% - var(--ph-btn) - 18px));max-width:none;box-shadow:0 8px 20px rgba(0,0,0,.45)!important;background:var(--panel)}
html.gic-phone body .fc-modes.open button,html.gic-fs .fc-modes.open button{flex:1 1 30%;padding:12px 6px;font-size:.95rem}
html.gic-phone body .fc-app .stage-head>.row,html.gic-fs .fc-app .stage-head>.row{position:static;flex:none;margin-left:auto}
html.gic-fs .fc-app .stage-head{padding-right:54px}
/* small controls everywhere on a phone: the card is the star */
html.gic-phone body .fc-nav{margin-top:4px;gap:6px;flex-wrap:nowrap}
html.gic-phone body .fc-nav .btn{min-width:44px;min-height:38px;padding:4px 12px;font-size:.95rem}
html.gic-phone body .fc-nav .hide-xs{display:none}
html.gic-phone body .fc-count{margin:2px 0 0;font-size:.8rem}
html.gic-phone body .fc-choices{margin-top:4px;gap:5px}
html.gic-phone body .fc-choice{min-height:36px;padding:3px 6px;font-size:.95rem;border-width:2px;border-radius:11px}
html.gic-phone body .fc-progress{margin-bottom:3px;font-size:.8rem}
html.gic-phone body .fc-bar{height:6px}
@media (orientation:portrait) and (max-height:620px){
  html.gic-phone body .fc-choice{min-height:32px;padding:2px 6px;font-size:.9rem}
  html.gic-phone body .fc-choices{gap:4px;margin-top:3px}
  html.gic-phone body .msg{min-height:1em;margin-top:2px}
}
/* held sideways: the card takes the height and keeps a card shape; the buttons / answers stand in a column beside it */
@media (orientation:landscape) and (max-height:520px){
  html.gic-phone body #viewBox:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);column-gap:8px;align-items:stretch;flex:1 1 0;min-height:0;container-type:size;width:100%}
  html.gic-phone body #viewBox .fc-card{width:auto!important;height:100%!important;max-width:100%!important;aspect-ratio:1.5/1!important;justify-self:center;align-self:center;max-height:100%;margin:0}
  html.gic-phone body #viewBox .fc-word{font-size:clamp(1.8rem,13vh,4rem);line-height:1.1}
  html.gic-phone body #viewBox .fc-nav{flex-direction:column;justify-content:center;align-self:center;margin:0;max-width:none;width:auto}
  html.gic-phone body #viewBox .fc-nav .btn{min-width:48px;min-height:44px}
  html.gic-phone body #viewBox .fc-nav #toggleWord{flex:none}
  html.gic-phone body #viewBox .fc-nav #toggleLabel{display:none}
  html.gic-phone body #runBox:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) clamp(230px,38vw,420px);grid-template-rows:repeat(5,auto) minmax(0,1fr);column-gap:10px;row-gap:3px;flex:1 1 0;min-height:0;container-type:size;width:100%}
  html.gic-phone body #playBox:not([hidden]){flex:1 1 0;min-height:0;display:flex;flex-direction:column;width:100%;margin:0}
  html.gic-phone body #runBox>.fc-card{grid-column:1;grid-row:1/span 6;width:min(calc(100cqw - clamp(230px,38vw,420px) - 10px),150cqh)!important;height:100cqh!important;max-width:none!important;aspect-ratio:auto!important;justify-self:center;align-self:center;margin:0;min-height:0}
  html.gic-phone body #runBox>:not(.fc-card){grid-column:2;max-width:none!important}
  html.gic-phone body #runBox .fc-choice{min-height:40px}
}

/* ---- 1.43.8: every small control on a phone is one family: the same height (--ph-btn), the same rounded-rectangle shape, the same dark button look and thin outline
        (the "...", the mode chip, the sound button, the clock, Back / Hide word / Next, Check). Held sideways they stand in two slim rails so the card takes the whole
        height: the "..." / mode / sound / clock on the right, Back / Hide word / Next on the left. ---- */

html.gic-phone body #modeGroup:not(.open){padding:0;border:0;background:none;box-shadow:none}
html.gic-phone body #modeGroup:not(.open) button[aria-pressed=true],html.gic-phone body #soundBtn,html.gic-phone body #clockBadge,html.gic-phone body .fc-nav .btn{box-sizing:border-box;height:var(--ph-btn);min-height:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;font:800 .9rem 'Inter',sans-serif;color:var(--text);background:var(--panel2);border:2px solid var(--hard);border-radius:10px;box-shadow:1px 2px 0 var(--hard)}
html.gic-phone body #modeGroup:not(.open) button[aria-pressed=true] i,html.gic-phone body #soundBtn i,html.gic-phone body #clockBadge i,html.gic-phone body .fc-nav .btn i{color:var(--sky);font-size:1rem}
html.gic-phone body #clockBadge[hidden]{display:none}
html.gic-phone body #soundBtn{width:var(--ph-btn);padding:0}
html.gic-phone body .fc-nav .btn{min-width:var(--ph-btn)}
html.gic-phone body .fc-nav .btn.gold{background:var(--gold);color:var(--hard);flex:1 1 auto}
html.gic-phone body .fc-nav .btn.gold i{color:var(--hard)}
html.gic-phone body .fc-nav #prevBtn,html.gic-phone body .fc-nav #nextBtn{flex:none;width:56px;padding:0}
html.gic-phone body .fc-card{border-width:2px;border-radius:14px;box-shadow:2px 2px 0 var(--hard)}
html.gic-phone body .fc-choice{min-height:var(--ph-btn);border-radius:10px;box-shadow:1px 2px 0 var(--hard)}
html.gic-phone body .fc-type input{height:var(--ph-btn);box-sizing:border-box;border-width:2px;border-radius:10px}
html.gic-phone body .fc-type .btn{height:var(--ph-btn);min-height:0;padding:0 14px;border-width:2px;box-shadow:1px 2px 0 var(--hard)}
@media (orientation:landscape) and (max-height:520px){
  html.gic-phone body #stage.fc-stage{padding:4px 56px 4px 4px}
  html.gic-phone body #stage .stage-head{position:fixed;right:6px;top:calc(var(--ph-btn) + 12px);z-index:5;display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0;padding:0;width:var(--ph-btn)}
  html.gic-phone body #stage .stage-head>.row{display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
  html.gic-phone body #modeGroup:not(.open) button[aria-pressed=true]{width:var(--ph-btn);padding:0;font-size:0;gap:0}
  html.gic-phone body #modeGroup:not(.open) button[aria-pressed=true]::after{display:none}
  html.gic-phone body #modeGroup:not(.open) button[aria-pressed=true] i{display:inline-block;font-size:1.15rem}
  html.gic-phone body #clockBadge{width:var(--ph-btn);flex-direction:column;gap:1px;padding:0;font-size:.64rem;line-height:1}
  html.gic-phone body #stage .stage-head>#modeGroup.open{position:fixed;left:auto;right:calc(var(--ph-btn) + 16px);top:8px;width:min(340px,calc(100vw - var(--ph-btn) * 2 - 40px))}
  html.gic-phone body #stage .stage-head>#modeGroup.open+.row{margin-top:calc(var(--ph-btn) + 6px)}
  html.gic-phone body #viewBox:not([hidden]){position:relative;grid-template-columns:minmax(0,1fr);padding-left:calc(var(--ph-btn) + 8px)}
  html.gic-phone body #viewBox .fc-card{--cw:min(100cqw,150cqh);width:var(--cw)!important;height:calc(var(--cw) / 1.5)!important;aspect-ratio:auto!important;max-height:100cqh}
  html.gic-phone body #viewBox .fc-nav{position:absolute;left:-2px;top:50%;transform:translateY(-50%);flex-direction:column;gap:6px;width:var(--ph-btn);margin:0}
  html.gic-phone body #viewBox .fc-nav .btn,html.gic-phone body #viewBox .fc-nav #prevBtn,html.gic-phone body #viewBox .fc-nav #nextBtn,html.gic-phone body #viewBox .fc-nav #toggleWord{width:var(--ph-btn);min-width:0;height:var(--ph-btn);min-height:0;padding:0;flex:none}
  html.gic-phone body #viewBox .fc-count{display:block;position:absolute;left:-2px;top:0;width:var(--ph-btn);margin:0;font-size:.66rem;line-height:1.15;text-align:center}
}
html.gic-phone body .fc-controw .btn{height:var(--ph-btn);min-height:0;padding:0 18px;font-size:.95rem;border-width:2px;border-radius:10px;box-shadow:1px 2px 0 var(--hard)}
html.gic-phone body .gic-head-right{top:8px;right:12px}
@media (orientation:landscape) and (max-height:520px){
  html.gic-phone body .gic-head-right{top:6px;right:6px}
}

/* 1.43.43: View card, phone held upright: no taller than about 1.2 x its width (it used to stretch to the whole screen); the word has no shadow line under it (the thin-outline list in game.css, which wins on specificity unless an id is used, gave it one that cut through the meaning); the meaning sits clear below the word */
@media (orientation:portrait) {
  html.gic-phone body #fcApp .fc-card:not(.fc-card-play){max-height:120vw!important;align-self:center}
}
html.gic-phone body #fcApp .fc-card .fc-word{box-shadow:none!important;border-width:0!important;border-top:2px dashed #e2e8f0!important;min-height:0;padding:10px 12px 2px;margin:0 14px}
html.gic-phone body #fcApp .fc-card .fc-meaning{margin:0 14px;padding:2px 8px 14px}
html.gic-phone body #fcApp[data-cs=chalk] .fc-card:not(.fc-card-play) .fc-word{border-top-color:rgba(255,255,255,.25)!important}
@media (orientation:landscape) and (max-height:520px){
  html.gic-phone body #viewBox .fc-prog{display:none}
}