/* css/responsive.css — All @media queries (mobile/tablet/desktop breakpoints).
   Load LAST to ensure responsive overrides win cascade. */

@media(max-width:380px){.card-grid{grid-template-columns:repeat(3,1fr);gap:8px}.word-card{padding:10px}.word-card .wc-word{font-size:calc(14px * var(--fs,1))}.flashcard{max-width:300px;min-height:220px;aspect-ratio:4/3;height:auto}.quiz-options{grid-template-columns:1fr}.nav-item .nav-icon svg{width:19px;height:19px}.nav-label{font-size:calc(9px * var(--fs,1))}.bottom-nav{height:60px}}
@media(max-width:480px){#shop-modal-content .shop-skins-grid{grid-template-columns:1fr 1fr !important}#shop-modal-content .shop-avatar-grid{grid-template-columns:repeat(3,1fr) !important}}
@media(max-width:480px){
.flashcard{max-width:92vw;min-height:240px}
.flashcard-front .fc-word{font-size:calc(32px * var(--fs,1))}
.flashcard-back .fc-detail{font-size:calc(14px * var(--fs,1))}
.flashcard-back .fc-detail .fc-chinese{font-size:calc(20px * var(--fs,1))}
.fc-btn{padding:10px 20px;font-size:calc(13px * var(--fs,1))}
.flashcard-actions{gap:8px}
.main{padding:12px 10px 20px}
.card-grid{gap:8px}
}
@media(max-width:400px){.settings-panel{padding:16px;width:95%}.settings-group .option-btn{padding:6px 10px;font-size:calc(12px * var(--fs,1))}.theme-dot{width:12px;height:12px}}
/* ═══ Header mobile responsive ═══ */
@media(max-width:540px){
.header{height:auto;min-height:var(--header-height);flex-wrap:wrap;padding:6px 12px;gap:4px}
.header-logo{margin-right:auto!important}
#logo-text{display:none}
/* R62-9：这条原本是藏 header 里的进度环，但选择器实际命中 .header-stats，
   把设置 / 发音 / 金币一起藏了。用户要求金币数量常显在这一行 ——
   放行这块容器，但只留金币与青柠币两颗，设置与发音照旧不显示。 */
.header>.header-logo+div{display:flex}
#settings-btn{display:none}
.header-stats{gap:8px}
.header-stats .audio-btn:nth-of-type(2){display:none}
#coin-display,#lime-display{display:flex!important}
.header-stat{font-size:calc(12px * var(--fs,1))}
.header-stat strong{font-size:calc(14px * var(--fs,1))}
.progress-ring-wrap{width:30px;height:30px}
.progress-ring{width:30px;height:30px}
.progress-text{font-size:calc(9px * var(--fs,1))}
}
@media(max-width:360px){
.header{padding:4px 8px}
.header-logo img{width:26px!important;height:26px!important}
.header-logo span:not(#logo-text){font-size:calc(15px * var(--fs,1))!important}
.header-stats{gap:6px}
.progress-ring-wrap{width:26px;height:26px}
.progress-ring{width:26px;height:26px}
.progress-text{font-size:calc(8px * var(--fs,1))}
}
@media(max-width:480px){
.tn-lobby-banner{padding:12px 14px}
.tn-lobby-right{position:static;transform:none;flex-direction:row;align-items:center;gap:8px;margin-top:8px}
.tn-lobby-trophy{font-size:calc(28px * var(--fs,1))}
.tn-lobby-info h3{font-size:calc(13px * var(--fs,1))}
.lobby-welcome{padding:18px 14px}
.lobby-welcome h2{font-size:calc(19px * var(--fs,1))}
.lobby-stats{flex-wrap:wrap;gap:8px}
.lobby-stat-card{min-width:calc(33% - 8px);padding:10px 8px}
.lobby-stat-card .lsc-num{font-size:calc(20px * var(--fs,1))}
.lobby-grid{gap:8px}
.lobby-card{padding:14px 10px}
.lobby-card .lc-icon{font-size:calc(28px * var(--fs,1));margin-bottom:6px}
.lobby-card .lc-title{font-size:calc(13px * var(--fs,1))}
.toast{max-width:90vw;white-space:normal;word-break:break-word}
#shop-float-btn{top:auto;bottom:calc(var(--nav-height) + 12px);right:12px;width:38px;height:38px}
#tool-nav .filter-chip{padding:6px 10px;font-size:calc(11px * var(--fs,1))}
}
@media(max-width:380px){
.lobby-stat-card{min-width:calc(50% - 8px)}
.lobby-card .lc-desc{font-size:calc(10px * var(--fs,1))}
.lobby-welcome h2{font-size:calc(17px * var(--fs,1))}
.lobby-welcome p{font-size:calc(12px * var(--fs,1))}
.tn-lobby-info h3{font-size:calc(12px * var(--fs,1))}
.tn-lobby-info p{font-size:calc(11px * var(--fs,1))}
}
@media(max-width:480px){
/* Filter bar: horizontal scroll instead of wrap */
.filter-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none}
.filter-bar::-webkit-scrollbar{display:none}
.filter-chip{white-space:nowrap;flex-shrink:0;padding:6px 14px;font-size:calc(12px * var(--fs,1))}
/* Card grid: 2 columns on mobile */
.card-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.word-card{padding:10px 8px}
.word-card .wc-word{font-size:calc(15px * var(--fs,1))}
.word-card .wc-chinese{font-size:calc(12px * var(--fs,1))}
/* Browse list rows: responsive */
.wc-row{padding:8px 10px;gap:8px}
.wc-row .wc-word{min-width:80px;font-size:calc(14px * var(--fs,1))}
.wc-row .wc-phonetic{display:none}
.wc-row .wc-pos{min-width:28px}
.wc-row .wc-chinese{font-size:calc(12px * var(--fs,1))}
/* Quiz: single column options, better sizing */
.quiz-options{grid-template-columns:1fr;max-width:100%}
.quiz-option{padding:14px 16px;font-size:calc(15px * var(--fs,1));min-height:48px}
.quiz-question{font-size:calc(22px * var(--fs,1))}
.quiz-fill-blank{font-size:calc(22px * var(--fs,1));letter-spacing:2px}
.quiz-container{gap:14px}
.quiz-start-btn{padding:14px 36px;font-size:calc(16px * var(--fs,1));width:100%;max-width:300px}
/* Flashcard: full width on mobile */
.flashcard{max-width:100%;min-height:220px}
.flashcard-front .fc-word{font-size:calc(30px * var(--fs,1))}
.flashcard-back .fc-detail .fc-chinese{font-size:calc(20px * var(--fs,1))}
.flashcard-back{padding:14px}
.flashcard-actions{gap:8px;width:100%;justify-content:center}
.fc-btn{padding:10px 16px;font-size:calc(13px * var(--fs,1));min-height:44px}
.flashcard-counter{font-size:calc(13px * var(--fs,1))}
/* Study sub-tabs */
#study-sub-tabs button{font-size:calc(12px * var(--fs,1));padding:8px 6px}
/* Textbook selector */
#study-textbook{font-size:calc(13px * var(--fs,1));padding:10px 12px}
/* Daily word buttons */
.filter-chip[data-daily]{padding:4px 8px;font-size:calc(10px * var(--fs,1));min-height:32px}
/* Modals: full screen on mobile */
.modal-sheet{max-width:100%;border-radius:16px 16px 0 0;max-height:92vh;padding:20px 16px 28px}
.modal-word{font-size:calc(28px * var(--fs,1))}
.modal-phonetic{font-size:calc(14px * var(--fs,1))}
.modal-pos-chinese{font-size:calc(14px * var(--fs,1))}
/* Settings overlay: full screen */
.settings-overlay{align-items:flex-end}
.settings-panel{width:100%;max-width:100%;border-radius:20px 20px 0 0;max-height:90vh}
/* Collection tabs */
.collection-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.collection-tabs::-webkit-scrollbar{display:none}
.collection-tabs .filter-chip{flex:none;white-space:nowrap}
/* Lobby: tighter spacing */
.lobby-welcome{padding:16px 12px;border-radius:16px}
.lobby-welcome h2{font-size:calc(18px * var(--fs,1))}
.lobby-grid{grid-template-columns:1fr 1fr;gap:8px}
.lobby-card{padding:14px 10px;border-radius:12px}
.lobby-card .lc-icon{font-size:calc(28px * var(--fs,1))}
.lobby-card .lc-title{font-size:calc(13px * var(--fs,1))}
.lobby-card .lc-desc{font-size:calc(10px * var(--fs,1))}
/* Coin panel */
.coin-tab-btn{padding:6px 10px;font-size:calc(11px * var(--fs,1))}
/* Toast */
.toast{max-width:92vw;font-size:calc(13px * var(--fs,1));padding:10px 16px}
/* Friends overlay: adjust for small screens */
.friends-header{padding:12px}
.friends-header h2{font-size:calc(18px * var(--fs,1))}
/* General: ensure touch targets */
button,a,[onclick]{min-height:36px}
.section{padding-bottom:8px}
}
@media(max-width:360px){
.card-grid{grid-template-columns:repeat(2,1fr);gap:6px}
.word-card{padding:8px 6px}
.word-card .wc-word{font-size:calc(13px * var(--fs,1))}
.word-card .wc-chinese{font-size:calc(11px * var(--fs,1))}
.wc-row{padding:6px 8px;gap:6px}
.wc-row .wc-word{min-width:70px;font-size:calc(13px * var(--fs,1))}
.wc-row .wc-chinese{font-size:calc(11px * var(--fs,1))}
.quiz-question{font-size:calc(20px * var(--fs,1))}
.quiz-option{padding:12px;font-size:calc(14px * var(--fs,1))}
.flashcard{min-height:200px}
.flashcard-front .fc-word{font-size:calc(26px * var(--fs,1))}
.lobby-card .lc-icon{font-size:calc(24px * var(--fs,1))}
.lobby-card .lc-title{font-size:calc(12px * var(--fs,1))}
.filter-chip{padding:5px 10px;font-size:calc(11px * var(--fs,1))}
}
@media(min-width:901px){.lp-mobile-brand{display:none!important}}

@media(hover:hover){
.bk-book:hover{transform:translateY(-5px)}
.bk-book:hover .bk-cover{box-shadow:0 8px 14px rgba(0,0,0,.22),inset -3px 0 4px rgba(255,255,255,.28),inset 3px 0 5px rgba(0,0,0,.28)}
}
@media(max-width:480px){
.wd-body{padding:12px 10px;max-width:100%}
.wd-hero{padding:20px 16px;border-radius:16px;margin-bottom:12px}
.wd-hero-word{font-size:calc(32px * var(--fs,1))}
.wd-hero-phonetic{font-size:calc(13px * var(--fs,1))}
.wd-section{padding:14px;margin-bottom:10px}
.wd-forms-grid{gap:6px}
.so-word{font-size:calc(38px * var(--fs,1))}
.so-body{padding:18px 16px 10px}
.so-meaning-card{padding:16px 14px;border-radius:16px}
.quiz-word-display .word{font-size:calc(32px * var(--fs,1));word-break:break-word}
.quiz-settings-card{padding:16px 14px}
.quiz-option{padding:12px 14px}
.quiz-option .option-meaning{font-size:calc(14px * var(--fs,1))}
.lobby-welcome{padding:16px;border-radius:16px}
.lobby-welcome h2{font-size:calc(20px * var(--fs,1))}
.lobby-welcome .lw-mascot{font-size:calc(36px * var(--fs,1))}
.lobby-feature-card{padding:14px 16px;border-radius:16px}
.lfc-icon{font-size:calc(28px * var(--fs,1))}
.lfc-title{font-size:calc(16px * var(--fs,1))}
.bk-books{gap:10px}
.nav-item{font-size:calc(10px * var(--fs,1))}
.header{padding:0 12px}
}
@media(max-width:360px){
.wd-hero-word{font-size:calc(28px * var(--fs,1))}
.so-word{font-size:calc(32px * var(--fs,1))}
.bk-book{width:72px}
.bk-cover{height:100px}
.bk-title{font-size:calc(12px * var(--fs,1))}
}
@media(min-width:600px){
.wd-forms-grid{grid-template-columns:repeat(4,1fr)}
.wd-body{padding:20px 16px;max-width:900px}
.so-meaning-card{padding:24px 22px}
.wd-pos-item{gap:14px}
}