/* Desktop fonts are loaded once by the existing font loader. iOS uses device fonts. */

:root {
    --bg-color: #0F172A;
    --card-bg: #1E293B; 
    --text-main: #F8FAFC;
    --text-sub: #94A3B8;
    --accent: #6366F1; 
    --accent-glow: rgba(99, 102, 241, 0.3);
    --border: #334155;
    --input-bg: #0F172A;
    --admin-accent: #EC4899;
    --admin-glow: rgba(236, 72, 153, 0.3);

    --word-ok: #10B981;
    --word-ok-bg: rgba(16, 185, 129, 0.15);
    --word-so: #F59E0B;
    --word-so-bg: rgba(245, 158, 11, 0.15);
    --word-bad: #EF4444;
    --word-bad-bg: rgba(239, 68, 68, 0.15);
    --word-none: #64748B;
    --word-none-bg: rgba(100, 116, 139, 0.15);
    
    /* 🌌 コズミックネオン統一パレット */
    --cosmic-cyan: #00F0FF;
    --cosmic-blue: #3B82F6;
    --cosmic-purple-light: #C084FC;
    --cosmic-purple-deep: #A855F7;
}

html, body {
    width: 100%; margin: 0; padding: 0; overflow-x: hidden;
    background-color: #0F172A;
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
    min-height: 100vh;
}

body::after {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #0F172A 100%);
    z-index: -2; pointer-events: none;
}

.tab-view { width: 100%; box-sizing: border-box; display: none; position: relative; z-index: 1; }
.tab-view.active { display: block; }

#view-vocab::before, #view-reader::before, #view-community::before, #view-game::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    z-index: -1; pointer-events: none; opacity: 0.85;
}


/* 単語帳背景のループアニメーション設定 */
@keyframes vocabBgScroll {
    from { background-position: 0 center; }
    to { background-position: -100vw center; }
}

#view-vocab::before { 
    background-image: url('tango.webp'); 
    background-size: auto 100vh;
    background-repeat: repeat-x;
    animation: vocabBgScroll 120s linear infinite;
}

#view-reader::before { background-image: url('friend.webp'); } 
#view-community::before { background-image: url('friend.webp'); }

#view-game::before { 
    background-image: url('utyuusen.webp'); 
    filter: blur(1px) brightness(0.65); 
    transform: scale(1.05); 
}

/* 対人戦専用背景画像レイヤー */

.card {
    background: rgba(15, 23, 42, 0.8) !important; 
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); 
    border: 1px solid rgba(15, 23, 42, 0.15) !important; 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important; 
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9); 
    border-radius: 16px; padding: 18px; margin-bottom: 16px;
    box-sizing: border-box;
}

#view-titles .word-row-container {
    color: #FFFFFF !important;
}

#view-titles .word-row-container div {
    color: #FFFFFF !important;
}

#view-titles .word-row-container style,
#view-titles .word-row-container div[style*="font-size:12px"] {
    color: #E2E8F0 !important;
}

#view-titles .word-row-container div[style*="font-size:10px"] {
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

h2 { font-size: 13px; font-weight: 700; color: #FFFFFF !important; margin: 0 0 14px 0; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.bar-fill { background: rgba(255, 255, 255, 0.15) !important; width: 100%; border-radius: 4px; transition: height 0.5s ease; }
.bar-fill.active { background: linear-gradient(to top, var(--accent), #818CF8); }
.bar-width { color: #FFFFFF !important; font-size: 10px; }

.scroll-to-top-btn { position: fixed; bottom: 76px; right: 20px; width: 46px; height: 46px; background: var(--accent); color: white; border: none; border-radius: 50%; box-shadow: 0 4px 14px var(--accent-glow); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2000; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; }
.scroll-to-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }

#auth-gate-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%); z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.auth-card { width: 100%; max-width: 360px; background: rgba(30, 41, 59, 0.7); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 24px; padding: 28px; backdrop-filter: blur(16px); text-align: center; box-sizing: border-box; }
.auth-error { color: #F87171; font-size: 12px; font-weight: 700; margin-bottom: 12px; display: none; background: rgba(239, 68, 68, 0.1); padding: 8px 12px; border-radius: 8px; }
.auth-tabs { display: flex; background: var(--input-bg); padding: 4px; border-radius: 10px; margin-bottom: 20px; border: 1px solid var(--border); gap: 4px; }
.auth-tab-btn { flex: 1; border: none; background: none; padding: 8px 4px; font-size: 12px; font-weight: 700; color: var(--text-sub); cursor: pointer; border-radius: 7px; }
.auth-tab-btn.active { background: var(--card-bg); color: var(--text-main); border: 1px solid var(--border); }

.login-confirm-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 6000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.login-confirm-card { background: var(--card-bg); border: 2px solid var(--cosmic-cyan); border-radius: 16px; padding: 24px; width: 85%; max-width: 320px; text-align: center; box-shadow: 0 10px 40px rgba(0, 240, 255, 0.3); }
.login-confirm-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--cosmic-cyan), var(--cosmic-blue)); margin: 0 auto 12px auto; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: white; box-shadow: 0 0 15px rgba(0,240,255,0.5); }

.app-header { position: fixed; top: 0; left: 0; width: 100%; height: 56px; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; z-index: 1000; text-shadow: 0 0 10px rgba(0, 240, 255, 0.5); transition: opacity 0.3s; }
.menu-trigger { position: absolute; left: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--cosmic-cyan); cursor: pointer; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 240, 255, 0.2); transition: all 0.2s; }
.menu-trigger:active { transform: scale(0.9); box-shadow: 0 0 15px rgba(0, 240, 255, 0.5); border-color: var(--cosmic-cyan); }

.sidebar-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(7, 11, 25, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 2000; display: none; }
.sidebar { position: fixed; top: 0; left: -280px; width: 280px; height: 100vh; background: linear-gradient(160deg, rgba(10, 15, 30, 0.88) 0%, rgba(20, 15, 45, 0.96) 100%) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; z-index: 2001; transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1); display: flex; flex-direction: column; border-right: 2px solid transparent; border-image: linear-gradient(to bottom, var(--cosmic-cyan), var(--cosmic-purple-light)) 1; box-shadow: 5px 0 25px rgba(0, 240, 255, 0.3), 10px 0 50px rgba(192, 132, 252, 0.15); }
.sidebar.open { left: 0; }
.sidebar-header { padding: 24px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); display: flex; align-items: center; gap: 14px; background: linear-gradient(to right, rgba(0, 240, 255, 0.08), transparent); }
.sidebar-version { margin: 12px 8px 4px; padding: 9px 12px; border: 1px solid rgba(0,240,255,0.2); border-radius: 8px; background: rgba(0,0,0,0.2); color: #94a3b8; font-family: monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-align: center; }
.sidebar-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text-main); font-size: 13.5px; font-weight: 700; background: none; border: none; width: calc(100% - 16px); margin: 4px 8px; border-radius: 8px; text-align: left; cursor: pointer; transition: all 0.2s; }

.nav-bar { position: fixed; bottom: 0; left: 0; width: 100vw; height: 60px; background: rgba(15, 23, 42, 0.85) !important; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-around; align-items: center; z-index: 4000 !important; transition: opacity 0.3s, transform 0.3s; }
.nav-item { display: flex; flex-direction: column; align-items: center; color: var(--text-sub); font-size: 8px; font-weight: 700; background: none; border: none; cursor: pointer; gap: 4px; padding: 0 2px; }
.nav-item.active { color: var(--cosmic-cyan) !important; text-shadow: 0 0 8px rgba(0, 240, 255, 0.5); }

.container { width: 100%; box-sizing: border-box; padding: 76px 16px 100px 16px; transition: padding 0.3s; }

.coin-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #F59E0B, #D97706); padding: 4px 10px; border-radius: 20px; font-size: 13px; font-weight: 800; color: white; }
.profile-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.avatar-glow { width: 52px; height: 52px; background: linear-gradient(135deg, #6366F1, #A855F7); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; position: relative; }
.avatar-deco-crown { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); color: #F59E0B; }
.frame-badge { border: 1px solid #6366F1; background: rgba(99,102,241,0.1); padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; color: #818CF8; display: inline-block; margin-top: 4px; }

.modern-textarea, .search-input { width: 100%; background: var(--input-bg) !important; border: 1px solid var(--border) !important; color: #FFFFFF !important; font-weight: 600; box-sizing: border-box; }
.modern-textarea { height: 90px; padding: 12px; font-size: 14px; resize: none; margin-bottom: 12px; border-radius: 10px; }
.search-input { height: 40px; padding: 0 12px; font-size: 14px; margin-bottom: 12px; border-radius: 10px; }

.modern-btn { width: 100%; height: 44px; background: rgba(7, 11, 25, 0.85) !important; color: #FFFFFF !important; border: 1px solid transparent !important; border-image: linear-gradient(135deg, var(--cosmic-cyan), var(--cosmic-purple-light)) 1 !important; border-radius: 10px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 1px; box-shadow: 0 0 12px rgba(0, 240, 255, 0.2) !important; transition: all 0.2s ease; }
.modern-btn:active { transform: scale(0.98); box-shadow: 0 0 20px rgba(0, 240, 255, 0.5), 0 0 10px rgba(192, 132, 252, 0.3) !important; }

.sentence-container { display: flex; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px dashed rgba(255,255,255,0.25); align-items: flex-start; box-sizing: border-box; width: 100%; }
.sentence-num { font-size: 11px; font-weight: 700; color: #FFF; background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); flex-shrink: 0; }
.word-span { display: inline-block; font-family: "Times New Roman", serif; font-size: 18px; color: var(--text-main); cursor: pointer; border-radius: 4px; padding: 0 1px; transition: background 0.2s; }
.word-span.registered { border-bottom: 1px dashed #FFF; }
.word-span.status-ok { background-color: rgba(16, 185, 129, 0.3); color: #FFF; }
.word-span.status-so { background-color: rgba(245, 158, 11, 0.3); color: #FFF; }
.word-span.status-bad { background-color: rgba(239, 68, 68, 0.3); color: #FFF; }
.word-span.status-none { background-color: rgba(148, 163, 184, 0.4); color: #FFF; }
.grammar-span { display: inline-block; color: #FFF; border-bottom: 3px double #FFF; cursor: pointer; padding: 0 2px; font-weight: normal; text-shadow: 0 0 5px rgba(255, 255, 255, 0.4); transition: all 0.2s; }
.sentence-ja { font-size: 13px; color: #FFF; text-shadow: 0 1px 3px #000; margin-top: 6px; display: block; line-height: 1.5; word-break: break-all; }

.word-row-container { border-radius: 12px; padding: 14px; margin-bottom: 10px; cursor: pointer; position: relative; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); box-sizing: border-box; }
.word-meaning-extra { font-size: 12.5px; color: #FFF; line-height: 1.6; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,0.25); white-space: pre-line; display: none; }
.sub-info-block { background: rgba(0, 0, 0, 0.45); padding: 6px 10px; border-radius: 6px; font-size: 12px; color: #FFF; margin-top: 4px; }
.vocab-note-section { margin-top:8px; }
.vocab-note-toggle { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:999px; color:var(--text-sub); font-size:10px; font-weight:800; padding:5px 11px; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.vocab-note-toggle:active { background:rgba(0,240,255,.10); border-color:rgba(0,240,255,.28); color:#FFF; }
.vocab-note-toggle.has-note { color:var(--cosmic-cyan); border-color:rgba(0,240,255,.24); background:rgba(0,240,255,.06); }
.vocab-note-text { margin-top:6px; padding:7px 9px; border-radius:7px; background:rgba(255,255,255,.045); color:rgba(255,255,255,.88); font-size:12px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.vocab-note-editor { margin-top:6px; padding:8px; border:none; border-radius:9px; background:rgba(255,255,255,.045); }
.vocab-note-input { height:76px !important; margin:0 0 8px !important; resize:vertical; }
.vocab-note-actions { display:flex; justify-content:flex-end; gap:8px; }
.vocab-note-actions .list-action-link { border-radius:999px; padding:6px 12px; }
.vocab-note-save { background:linear-gradient(135deg,rgba(0,240,255,.22),rgba(192,132,252,.22)) !important; border-color:rgba(0,240,255,.35) !important; color:#FFF !important; }
.range-box { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; background: rgba(255,255,255,0.15); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.25); padding: 8px 12px; border-radius: 10px; }
.range-input { width: 70px; height: 32px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; color: white; text-align: center; }
.filter-scroller { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 12px; }
.pill-btn { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.25); color: #FFF; font-size: 11px; padding: 6px 12px; border-radius: 20px; cursor: pointer; white-space: nowrap; }
.pill-btn.active { background: var(--accent); border-color: var(--accent); }

.popover { position: fixed; bottom: 0; left: 0; width: 100%; max-height: 80vh; z-index: 5000; background: #1E293B; border-top: 1px solid var(--border); color: white; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)) 18px; border-radius: 20px 20px 0 0; display: none; flex-direction: column; gap: 12px; box-sizing: border-box; box-shadow: 0 -10px 40px rgba(0,0,0,0.7); }
.popover.show { display: flex; animation: popoverSlideUp 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes popoverSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.popover-word { font-family: "Times New Roman", serif; font-size: 20px; font-weight: 700; border-bottom: 1px solid var(--border); padding-bottom: 8px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.popover-meaning { font-size: 14px; color: var(--text-sub); line-height: 1.5; white-space: pre-line; flex: 1; overflow-y: auto; padding-right: 8px; }
.popover-btns { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* 教材選択：装飾を抑えた、本棚のような縦一列のリスト。 */
.popover.textbook-select-popup {
    gap:0;
    padding:24px 18px calc(18px + env(safe-area-inset-bottom));
    max-height:86vh;
    background:rgba(18,24,32,.55);
    backdrop-filter:blur(3px);
    border-top:1px solid #3b3b37;
    border-radius:18px 18px 0 0;
    color:#e7e3da;
    box-shadow:0 -12px 36px rgba(0,0,0,.48);
}
.textbook-select-header {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:0 2px 18px;
    border-bottom:1px solid #3b3b37;
}
.textbook-select-kicker {
    color:#999386;
    font:600 9px/1.2 system-ui,sans-serif;
    letter-spacing:.24em;
}
.textbook-select-title {
    margin-top:5px;
    color:#f0ece3;
    font:700 22px/1.25 Georgia,"Yu Mincho",serif;
    letter-spacing:.02em;
}
.textbook-list-select-container {
    display:flex;
    flex-direction:column;
    max-height:58vh;
    overflow-y:auto;
    padding:4px 0;
    scrollbar-width:thin;
    scrollbar-color:#5c5b55 transparent;
}
.textbook-list-item {
    --textbook-index:0;
    width:100%;
    display:grid;
    grid-template-columns:58px minmax(0,1fr) 18px;
    align-items:center;
    gap:14px;
    min-height:92px;
    padding:10px 4px;
    border:0;
    border-bottom:1px solid #363733;
    border-radius:0;
    background:transparent;
    color:#e7e3da;
    text-align:left;
    cursor:pointer;
    position:relative;
    opacity:0;
    transform:translateY(10px);
    animation:textbookListEnter .38s cubic-bezier(.22,.7,.25,1) forwards;
    animation-delay:calc(var(--textbook-index) * 45ms);
}
.textbook-list-item:hover,
.textbook-list-item:focus-visible { background:#242521; outline:none; }
.textbook-list-item:active { background:#2b2c28; }
.textbook-list-item.is-current { box-shadow:inset 3px 0 0 #a66d58; }
.textbook-list-cover {
    width:54px;
    height:70px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid #55534c;
    border-radius:3px 7px 7px 3px;
    background:#302f2b;
    font-size:25px;
    box-shadow:2px 3px 0 #11120f;
}
.textbook-list-cover img { width:100%; height:100%; display:block; object-fit:cover; }
.textbook-list-details { min-width:0; display:flex; flex-direction:column; gap:12px; }
.textbook-list-heading { display:flex; align-items:center; gap:8px; min-width:0; }
.textbook-list-name {
    overflow:hidden;
    color:#f0ece3;
    font:700 15px/1.4 Georgia,"Yu Mincho",serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.textbook-list-current {
    flex:none;
    padding:2px 6px;
    border:1px solid #795c50;
    border-radius:99px;
    color:#d6a28e;
    font:700 9px/1.2 system-ui,sans-serif;
}
.textbook-list-progress { display:flex; flex-direction:column; align-items:stretch; gap:7px; }
.textbook-list-progress-track { display:flex; width:100%; height:5px; overflow:hidden; border-radius:99px; background:#30312e; }
.textbook-list-progress-fill { display:block; height:100%; transition:width .5s ease .18s; }
.textbook-list-progress-fill.is-ok { background:#66836d; }
.textbook-list-progress-fill.is-so { background:#b49455; }
.textbook-list-progress-fill.is-bad { background:#a65f59; }
.textbook-list-progress-fill.is-none { background:#555650; }
.textbook-list-progress-text { color:#aaa397; font:600 10px/1 system-ui,sans-serif; letter-spacing:.02em; }
.textbook-list-arrow { color:#77766f; font:300 24px/1 Georgia,serif; transform:translateX(0); transition:transform .18s ease; }
.textbook-list-item:hover .textbook-list-arrow,
.textbook-list-item:focus-visible .textbook-list-arrow { transform:translateX(3px); }
.textbook-list-empty { padding:34px 10px; color:#aaa397; font-size:13px; text-align:center; }
.textbook-select-footer { width:100%; padding-top:14px; text-align:right; }
.textbook-select-close {
    padding:7px 2px;
    border:0;
    border-bottom:1px solid #817e75;
    background:transparent;
    color:#d1ccc2;
    font:700 12px/1 system-ui,sans-serif;
    cursor:pointer;
}
@keyframes textbookListEnter { to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) {
    .textbook-list-item { opacity:1; transform:none; animation:none; }
    .textbook-list-progress-fill,.textbook-list-arrow { transition:none; }
}

/* 単語帳タブを開いた直後に表示する、通常画面の教材一覧。 */
.vocab-library-selection {
    min-height:calc(100vh - 150px);
    padding:8px 2px 28px;
    color:#e7e3da;
}
.vocab-library-header {
    padding:4px 4px 18px;
    border-bottom:1px solid #3b3b37;
}
.vocab-library-kicker {
    display:block;
    margin-bottom:5px;
    color:#999386;
    font:600 9px/1.2 system-ui,sans-serif;
    letter-spacing:.24em;
}
.vocab-library-header h2 {
    margin:0;
    color:#f0ece3;
    font:700 22px/1.25 Georgia,"Yu Mincho",serif;
    letter-spacing:.02em;
}
.vocab-library-list { display:flex; flex-direction:column; }
.vocab-library-work-section[hidden] { display:none; }
.vocab-library-divider {
    display:flex;
    align-items:center;
    gap:12px;
    margin:22px 0 4px;
    color:#aaa397;
    font:700 11px/1 system-ui,sans-serif;
    letter-spacing:.12em;
}
.vocab-library-divider::before,
.vocab-library-divider::after { content:""; height:1px; flex:1; background:#454640; }
.vocab-library-divider::after { flex:5; }
.vocab-library-empty { padding:42px 10px; color:#aaa397; font-size:13px; text-align:center; }
.vocab-library-add-work {
    width:100%;
    margin-top:10px;
    padding:14px;
    border:1px dashed #555650;
    border-radius:8px;
    background:transparent;
    color:#c9c4ba;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}
.vocab-library-add-work:active { background:#292a27; }
.workbook-list-remove {
    position:absolute;
    top:6px;
    right:3px;
    z-index:2;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#938b80;
    font:600 16px/1 system-ui,sans-serif;
}
.workbook-list-remove:active { background:#3a302d; color:#e0aaa0; }
#vocabBookContents[hidden],
#vocabLibrarySelection[hidden] { display:none !important; }
.pop-btn { flex: 1; border: none; height: 38px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; min-width: 22%; }

/* ==========================================================================
   🎮 ゲーム・バトル UI
   ========================================================================= */

.cosmic-game-bg { 
    width: 100%; box-sizing: border-box; 
    border-radius: 12px; 
    padding: 16px 12px;
    min-height: calc(100vh - 150px);
}

.game-mode-card,
.game-main-play-card,
#game-mode-select-screen > div,
#game-difficulty-select-screen > div {
    background: rgba(10, 15, 30, 0.15) !important; 
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important; 
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.game-mode-card { text-align: center; padding: 35px 20px; }
.game-main-play-card { position: relative; padding: 16px !important; }
.game-normal-title { font-size: 24px; font-weight: 700; color: #FFFFFF; margin: 0 0 20px 0; letter-spacing: 1px; }

#feedbackContent { word-break: break-word; }
#feedbackUserAns, #feedbackCorrectAns { font-size: 13px !important; word-break: break-word; }
#feedbackOtherAns { font-size: 11px !important; word-break: break-word; }
.game-scrollable-content { max-height: calc(100vh - 160px); overflow-y: auto; padding-bottom: 24px; }
.game-scrollable-content::-webkit-scrollbar { display: none; } 
.game-header-console-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; position: relative; z-index: 50; }

.game-finish-inline-btn { 
    height: 38px; 
    padding: 0 16px; 
    font-family: 'Noto Serif JP', serif !important;
    background-image: url('stone.webp') !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #FFFFFF !important; 
    font-size: 12px; 
    font-weight: 700; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    box-shadow: none !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.95), -1px -1px 1px rgba(0, 0, 0, 0.8) !important;
    transition: all 0.2s ease; 
}
.game-finish-inline-btn:active { transform: scale(0.95); }
.game-cosmic-glow-box { border-image: linear-gradient(135deg, var(--cosmic-cyan), var(--cosmic-purple-light)) 1 !important; border-width: 1.5px !important; border-style: solid !important; border-radius: 1px; box-shadow: 0 0 18px rgba(0, 240, 255, 0.45), 0 0 8px rgba(192, 132, 252, 0.3) !important; }
.cosmic-neon-text-glow { background: linear-gradient(135deg, #FFF 20%, var(--cosmic-purple-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6)) drop-shadow(0 0 3px rgba(192, 132, 252, 0.5)); }
.cosmic-neon-blue-text { color: var(--cosmic-cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.8), 0 0 4px rgba(0, 240, 255, 0.5); }
.cosmic-neon-purple-text { color: var(--cosmic-purple-light); text-shadow: 0 0 10px rgba(192, 132, 252, 0.8), 0 0 4px rgba(192, 132, 252, 0.5); }
.game-unified-console { flex: 1; display: flex; align-items: center; justify-content: space-around; background: rgba(15, 23, 42, 0.9); border-radius: 8px; padding: 4px 10px; }
.combo-segment { display: flex; flex-direction: column; align-items: center; flex: 1; }
.combo-text { font-size: 16px; font-weight: 900; color: #FBBF24; text-shadow: 0 0 10px #F59E0B, 0 0 4px #FFFFFF; font-style: italic; letter-spacing: 1px; }
.combo-score { font-size: 14px; font-weight: 800; color: var(--cosmic-cyan); text-shadow: 0 0 8px var(--cosmic-cyan); }
.console-label { font-size: 9px; font-weight: 700; color: var(--text-sub); }
.console-val { font-size: 18px; font-weight: 800; font-family: monospace; }
.console-divider { width: 1px; height: 18px; background: var(--border); }
.game-word-display { font-size: 20px; font-weight: 800; text-align: center; margin: 10px 0 18px 0; font-family: "Times New Roman", serif; word-break: break-word; line-height: 1.2; }

.game-cosmic-glow-box {
    border-image: linear-gradient(135deg, var(--cosmic-cyan), var(--cosmic-purple-light)) 1 !important;
}

.game-cosmic-input-glow { 
    border: none !important; 
    border-radius: 0 !important; 
    box-shadow: none !important; 
    outline: none !important;
    background: transparent !important;
    color: #FFFFFF !important;
    -webkit-tap-highlight-color: transparent !important;
}
.game-cosmic-input-glow:focus { 
    box-shadow: none !important; 
    outline: none !important;
    background: transparent !important; 
    border: none !important; 
}

.giant-judgment-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transform: scale(1.05); background: rgba(7, 11, 25, 0.85) !important; z-index: 1000 !important; transition: all 0.15s ease-out; border-radius: 12px; }
.giant-judgment-overlay.show { opacity: 1; transform: scale(1); }
.giant-mark { font-size: 84px; font-weight: 900; line-height: 1; }
.correct .giant-mark { color: var(--word-ok); text-shadow: 0 0 15px var(--word-ok); }
.incorrect .giant-mark { color: var(--word-bad); text-shadow: 0 0 15px var(--word-bad); }
.giant-text { font-size: 14px; font-weight: 700; margin-top: 4px; }
.persistent-combo-container { margin-top: 12px; display: flex; justify-content: center; align-items: baseline; gap: 8px; z-index: 900; }
.combo-blink { animation: gentleBlink 1.5s infinite alternate ease-in-out; }
@keyframes gentleBlink { 0% { opacity: 0.6; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1.02); } }
.giant-score-popup { position: absolute; top: 15%; font-size: 28px; font-weight: 900; opacity: 0; pointer-events: none; z-index: 1001; }
.score-anim-plus { color: var(--cosmic-cyan); text-shadow: 0 0 10px var(--cosmic-cyan), 0 0 20px rgba(0, 240, 255, 0.8); animation: floatUpFade 1s ease-out forwards; }
.score-anim-minus { color: var(--word-bad); text-shadow: 0 0 10px var(--word-bad), 0 0 20px rgba(239, 68, 68, 0.8); animation: floatUpFade 1s ease-out forwards; }
@keyframes floatUpFade { 0% { transform: translateY(20px) scale(0.8); opacity: 0; } 20% { transform: translateY(0) scale(1.2); opacity: 1; } 80% { transform: translateY(-20px) scale(1); opacity: 1; } 100% { transform: translateY(-40px) scale(0.9); opacity: 0; } }

.game-judging-loader { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--text-sub); margin: 8px 0; }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes ominousAura {
    0%, 100% {
        transform: scale(1) translateY(0);
        filter: drop-shadow(0 0 15px rgba(139, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(0, 0, 0, 0.9)) brightness(0.85) contrast(1.1);
    }
    50% {
        transform: scale(1.08) translateY(-3px); 
        filter: drop-shadow(0 0 40px rgba(255, 0, 0, 1)) drop-shadow(0 0 80px rgba(128, 0, 128, 0.8)) brightness(1.25) contrast(1.3);
    }
}

.popup-v-dmg {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    animation: smashDownV 1.5s ease-out forwards;
    pointer-events: none;
}
.v-mark {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #F59E0B;
    filter: drop-shadow(0 0 5px #EF4444);
    margin-bottom: 2px;
}
.v-dmg-text {
    color: #EF4444;
    font-size: 16px;
    font-weight: 900;
    text-shadow: 2px 2px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF;
}

.popup-bubble-flying-atk {
    position: fixed;
    background: white;
    font-size: 11px;
    font-weight: 900;
    padding: 5px 9px;
    border-radius: 12px;
    white-space: nowrap;
    z-index: 300;
    pointer-events: none;
    transform: translate(-50%, -50%);
    border: 2px solid var(--cosmic-purple-light);
    box-shadow: 0 4px 12px rgba(192, 132, 252, 0.4);
    color: #1E293B;
    animation: flyToBossTrack 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.popup-bubble-flying-atk::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: inherit transparent transparent transparent;
}

.popup-hit-explosion {
    position: fixed;
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, #FBBF24 10%, #EF4444 50%, transparent 70%);
    border-radius: 50%;
    z-index: 310;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: iitExplosionBurst 0.4s ease-out forwards;
}

@keyframes flyToBossTrack {
    0% { top: var(--start-y); left: var(--start-x); transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    85% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    100% { top: var(--target-y); left: var(--target-x); transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
}

@keyframes hitExplosionBurst {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; filter: brightness(2); }
    50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

@keyframes smashDownV {
    0% { opacity: 0; transform: translate(-50%, -20px) scale(1.5); }
    15% { opacity: 1; transform: translate(-50%, 5px) scale(0.9); }
    30% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    70% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, 15px) scale(0.8); }
}

.player-damage-flash {
    animation: flashRed 0.4s ease-out;
}
@keyframes flashRed {
    0% { transform: scale(1.1); filter: brightness(0.5) sepia(1) hue-rotate(-50deg) saturate(5); }
    100% { transform: scale(1); filter: none; }
}

.companion-attack-active { animation: companionDash 0.5s ease-in-out; }
@keyframes companionDash { 
    0% { transform: translateY(0) scale(1); } 
    50% { transform: translateY(-30px) scale(1.1); } 
    100% { transform: translateY(0) scale(1); } 
}

.inner-text-hp-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.hp-bar-inner-text-layer {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 9px;
    font-weight: 900;
    font-family: monospace;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;
    z-index: 5;
    pointer-events: none;
    letter-spacing: 0.5px;
}

@keyframes rainbowGlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.combo-sparkle-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 6500 !important; 
    box-shadow: inset 0 0 0px transparent;
    opacity: 0;
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
}
.combo-sparkle-overlay.active {
    opacity: 1;
    animation: goldenNeonFlash 1.5s ease-in-out infinite alternate;
}
@keyframes goldenNeonFlash {
    0% { box-shadow: inset 0 0 12px rgba(251, 191, 36, 0.25), 0 0 6px rgba(251, 191, 36, 0.15) inset; }
    100% { box-shadow: inset 0 0 35px rgba(251, 191, 36, 0.7), 0 0 15px rgba(251, 191, 36, 0.4) inset; }
}

body.in-game-active .app-header { display: none !important; }
body.in-game-active .nav-bar { display: none !important; }
body.in-game-active .container { padding-top: 16px !important; padding-bottom: 16px !important; }

#game-mode-select-screen .modern-btn,
#game-difficulty-select-screen .modern-btn {
    height: 90px !important; 
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    font-family: 'Noto Serif JP', serif !important;
    color: #FFFFFF !important;
    letter-spacing: 2px !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.95), -1px -1px 1px rgba(0, 0, 0, 0.8) !important;
    background-image: url('stone.webp') !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-color: transparent !important;
    box-shadow: none !important; 
    border: none !important; 
    border-radius: 0 !important; 
    transition: transform 0.1s ease !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#game-mode-select-screen .modern-btn:active,
#game-difficulty-select-screen .modern-btn:active {
    transform: translateY(3px) scale(0.98) !important;
    box-shadow: none !important;
}

#game-mode-select-screen .game-finish-inline-btn,
#game-difficulty-select-screen .game-finish-inline-btn {
    margin-top: 40px !important; 
}

#game-mode-select-screen:not([style*="display: none"])::before,
#game-difficulty-select-screen:not([style*="display: none"])::before,
#game-play-screen:not([style*="display: none"])::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url('haikei.webp');
    background-size: cover;
    background-position: center;
    filter: blur(1px) brightness(0.7);
    z-index: -1;
    pointer-events: none;
}

#game-result-screen:not([style*="display: none"])::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url('kekka.webp');
    background-size: cover;
    background-position: center;
    filter: blur(0.5px) brightness(0.7);
    z-index: -1;
    pointer-events: none;
}

#game-result-screen {
    position: fixed !important;
    top: 56px !important;
    bottom: 60px !important;
    left: 0 !important;
    width: 100vw !important;
    z-index: 35 !important;
    overflow-y: auto !important;
    padding: 20px 24px !important;
    box-sizing: border-box !important;
}

#game-result-screen .game-result-card.card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: none !important;
}

#game-play-screen .game-unified-console,
#game-play-screen .game-main-play-card,
#game-play-screen .modern-btn {
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: 'Noto Serif JP', serif !important;
    background-image: url('stone.webp') !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.95), -1px -1px 1px rgba(0, 0, 0, 0.8) !important;
}

#game-mode-select-screen > div,
#game-difficulty-select-screen > div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#game-result-screen h2,
#game-result-screen .stat-box,
#game-result-screen .cosmic-history-scroll,
#game-result-screen .modern-btn {
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background-image: none !important;
    background: rgba(15, 23, 42, 0.75) !important; 
    border: 1.5px solid #F59E0B !important; 
    border-radius: 12px !important; 
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.45) !important; 
    box-sizing: border-box !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #FFFFFF !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

#game-result-screen h2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 54px !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    letter-spacing: 4px !important;
    margin-bottom: 20px !important;
}

.cosmic-stats-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

#game-result-screen .stat-box {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 48px !important;
    padding: 0 32px !important; 
}

#game-result-screen .stat-lbl {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #E2E8F0 !important; 
    text-shadow: none !important;
}

#game-result-screen .stat-val {
    font-size: 18px !important;
    font-weight: 900 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
    color: #FFFFFF !important; 
    text-shadow: 0 0 8px #F59E0B !important; 
    filter: none !important;
}

#game-result-screen h3.cosmic-list-title {
    display: none !important;
}

#game-result-screen .cosmic-history-scroll {
    max-height: 180px !important;
    overflow-y: auto !important;
    padding: 14px 24px !important; 
    margin-bottom: 20px !important;
}

#game-result-screen .cosmic-history-item,
#game-result-screen .cosmic-history-item div,
#game-result-screen .cosmic-history-item span {
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

#game-result-screen .modern-btn {
    height: 50px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

#game-result-screen .modern-btn:active {
    transform: scale(0.98) !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.8) !important;
}

#game-play-screen .game-unified-console {
    height: 54px !important;
    padding: 0 32px !important;
}

#game-play-screen .console-label {
    color: #E2E8F0 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.95) !important;
}

#game-play-screen .console-val {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.95) !important;
}

#game-play-screen .console-divider {
    background: rgba(0, 0, 0, 0.4) !important;
}

#game-play-screen .game-main-play-card {
    padding: 24px 28px !important; 
}

#game-play-screen .game-word-display {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.95) !important;
    filter: none !important;
    font-family: 'Noto Serif JP', serif !important;
}

#game-play-screen #feedbackContent {
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    padding: 20px 24px 75px 52px !important; 
    font-family: 'Noto Serif JP', serif !important;
    background-image: url('stone.webp') !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.95), -1px -1px 1px rgba(0, 0, 0, 0.8) !important;
}

#game-play-screen #feedbackContent div {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.95) !important;
}

#game-play-screen #feedbackContent .title-label {
    color: #E2E8F0 !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9) !important;
}

#game-play-screen #gameNextBtn {
    position: absolute !important;
    bottom: 12px !important; 
    left: 12px !important;   
    right: 12px !important;  
    width: calc(100% - 24px) !important; 
    margin: 0 !important;
    height: 44px !important;
    font-family: 'Noto Serif JP', serif !important;
    background-image: url('stone.webp') !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.95), -1px -1px 1px rgba(0, 0, 0, 0.8) !important;
}

#game-play-screen .giant-judgment-overlay {
    background: none !important; 
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}

#game-play-screen .giant-judgment-overlay .giant-mark,
#game-play-screen .giant-judgment-overlay .giant-text {
    font-family: 'Noto Serif JP', serif !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
}

#game-play-screen .giant-judgment-overlay .giant-mark {
    font-size: 110px !important; 
}

#game-play-screen .giant-judgment-overlay.correct .giant-mark,
#game-play-screen .giant-judgment-overlay.correct .giant-text {
    color: #10B981 !important; 
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.8), 2px 2px 4px #000000 !important;
}

#game-play-screen .giant-judgment-overlay.incorrect .giant-mark,
#game-play-screen .giant-judgment-overlay.incorrect .giant-text {
    color: #EF4444 !important; 
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.8), 2px 2px 4px #000000 !important;
}

#flashcard-setup-screen,
.flashcard-session-screen {
    /* Settings inherit the dialog surface; play uses the shared app photo below. */
    background: transparent !important;
    box-sizing: border-box;
}

.flashcard-status-filters {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:10px 0 6px;
}
.flashcard-status-filter {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.3);
    border-radius:50%;
    background:rgba(0,0,0,.5);
    color:#fff;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    opacity:.42;
    transition:transform .12s ease, opacity .12s ease, background .12s ease;
}
.flashcard-status-filter.active { opacity:1; transform:scale(1.06); }
.flashcard-status-filter.status-ok.active { background:var(--word-ok); color:#000; }
.flashcard-status-filter.status-so.active { background:var(--word-so); color:#000; }
.flashcard-status-filter.status-bad.active { background:var(--word-bad); color:#fff; }
.flashcard-status-filter.status-none.active { background:rgba(255,255,255,.3); color:#fff; }
.flashcard-status-filter:active { transform:scale(.94); }
.flashcard-status-filter-summary { min-height:16px; text-align:center; color:var(--text-sub); font-size:10px; font-weight:700; }
.flashcard-previous-button {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.24);
    border-radius:50%;
    background:rgba(15,23,42,.68);
    color:#fff;
    box-shadow:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.flashcard-previous-button svg { display:block; }
.flashcard-previous-button:active:not(:disabled) { transform:scale(.94); background:rgba(99,102,241,.62); }
.flashcard-previous-button:disabled { opacity:.35; cursor:not-allowed; }

.flashcard-info-button {
    position: absolute;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 120;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 50%;
    background: rgba(15,23,42,.78);
    color: #fff;
    display:grid;
    place-items:center;
    padding:0;
    box-shadow: 0 6px 22px rgba(0,0,0,.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    touch-action: manipulation;
}
.flashcard-info-button svg { display:block; }

.flashcard-info-button:active { transform: scale(.94); background: rgba(99,102,241,.72); }

.flashcard-detail-sheet {
    position: fixed;
    inset: 0;
    z-index: 7000;
    visibility: hidden;
    pointer-events: none;
}

.flashcard-detail-sheet.is-open { visibility: visible; pointer-events: auto; }
.flashcard-detail-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(2,6,23,.56); opacity:0; transition:opacity .2s ease; }
.flashcard-detail-sheet.is-open .flashcard-detail-backdrop { opacity:1; }
.flashcard-detail-panel {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    max-height:min(72vh, 620px);
    overflow-y:auto;
    padding:12px 14px calc(18px + env(safe-area-inset-bottom));
    border-radius:24px 24px 0 0;
    border:1px solid rgba(255,255,255,.14);
    border-bottom:0;
    background:linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.99));
    color:#fff;
    box-shadow:0 -18px 50px rgba(0,0,0,.4);
    transform:translateY(105%);
    transition:transform .24s cubic-bezier(.22,.8,.28,1);
    isolation:isolate;
}
.flashcard-detail-sheet.is-open .flashcard-detail-panel { transform:translateY(0); }
.flashcard-detail-handle { width:42px; height:4px; margin:0 auto 12px; border-radius:99px; background:rgba(255,255,255,.3); }
.flashcard-detail-close { position:absolute; top:14px; right:14px; z-index:1002; width:36px; height:36px; display:grid; place-items:center; padding:0 0 2px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(15,23,42,.94); color:#fff; font-size:24px; line-height:1; box-shadow:0 4px 14px rgba(0,0,0,.32); }
.flashcard-detail-content { padding-top:8px; }
.flashcard-detail-content .word-row-container { margin-bottom:0; }

@media (prefers-reduced-motion: reduce) {
    .flashcard-detail-backdrop, .flashcard-detail-panel { transition:none; }
}

#flashcard-setup-screen > div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#flashcard-setup-screen {
    position: fixed !important;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 4500 !important;
    overflow-y: auto !important;
    padding-top: 40px !important;
}

.flashcard-session-screen {
    position: fixed !important;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 4500 !important;
    touch-action: none !important;
    overflow: hidden !important;
}

.flashcard-deck-stage {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important; 
}

.flashcard-wrapper-3d {
    /* 文字の選択・長押しメニュー・選択文字のドラッグがスワイプを中断（pointercancel）させないようにする。 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    position: absolute;
    width: 240px;
    height: 240px;
    perspective: 1200px;
    cursor: pointer;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
    animation: bubbleFloatAnim 4s ease-in-out infinite; 
}

/* ドラッグ中は待機アニメーションにtransformを奪わせず、指の位置を最優先する。 */
.flashcard-wrapper-3d.is-dragging {
    animation: none !important;
    transition: none !important;
    will-change: transform;
}

/* 離した後は指の位置から中央へ滑らかに戻し、戻り切ってから浮遊アニメーションを再開する。 */
.flashcard-wrapper-3d.is-settling {
    animation: none !important;
    transition: transform .2s cubic-bezier(.25,1,.5,1) !important;
}

/* フラッシュ単語を離した地点で一度だけ広がる、軽量な泡・花火演出。 */
.fc-vanish-burst {
    position: fixed;
    width: 0;
    height: 0;
    z-index: 5002;
    pointer-events: none;
    contain: layout style paint;
}

.fc-vanish-ring {
    position: absolute;
    left: -16px;
    top: -16px;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255,255,255,.65);
    border-radius: 50%;
    animation: fcVanishRing .48s ease-out forwards;
}

.fc-vanish-particle {
    position: absolute;
    left: calc(var(--fc-burst-size) / -2);
    top: calc(var(--fc-burst-size) / -2);
    width: var(--fc-burst-size);
    height: var(--fc-burst-size);
    border-radius: 50%;
    box-shadow: 0 0 7px currentColor;
    opacity: 0;
    animation: fcVanishParticle .52s cubic-bezier(.16,.72,.3,1) var(--fc-burst-delay) forwards;
}

@keyframes fcVanishParticle {
    0% { transform: translate3d(0,0,0) scale(.35); opacity: 0; }
    18% { opacity: .95; }
    100% { transform: translate3d(var(--fc-burst-x),var(--fc-burst-y),0) scale(0); opacity: 0; }
}

@keyframes fcVanishRing {
    0% { transform: scale(.25); opacity: .8; }
    100% { transform: scale(4.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fc-vanish-burst { display: none !important; }
}

@keyframes bubbleFloatAnim {
    0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
    33% { transform: translateY(-8px) scale(1.02) rotate(-1deg); }
    66% { transform: translateY(4px) scale(0.98) rotate(1deg); }
}

.flashcard-wrapper-3d.slide-right,
.flashcard-wrapper-3d.slide-left,
.flashcard-wrapper-3d.slide-up {
    animation: none !important; 
}

.flashcard-wrapper-3d.stack-shadow-1,
.flashcard-wrapper-3d.stack-shadow-2,
.flashcard-wrapper-3d.stack-shadow-3 {
    display: none !important;
}

.flashcard-inner-rotator {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transform-style: preserve-3d;
    z-index: 2;
}

.flashcard-wrapper-3d.flipped .flashcard-inner-rotator {
    transform: rotateY(180deg);
}

.flashcard-wrapper-3d.flipped {
    animation-play-state: paused;
}

.flashcard-face-front,
.flashcard-face-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50% !important; 
    border: 2px solid rgba(255, 255, 255, 0.45) !important; 
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,1), -1px -1px 3px rgba(0,0,0,1), 1px -1px 3px rgba(0,0,0,1), -1px 1px 3px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.9) !important; 
    z-index: 5;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 240, 255, 0.04) 70%, rgba(192, 132, 252, 0.04) 90%, rgba(255, 255, 255, 0.1) 100%);
    box-shadow: inset 0 12px 20px rgba(255, 255, 255, 0.35), inset 8px 0 12px rgba(0, 240, 255, 0.15), inset -8px 0 12px rgba(192, 132, 252, 0.15), inset 0 -12px 20px rgba(255, 255, 255, 0.2), 0 6px 20px rgba(0, 0, 0, 0.45) !important;
    animation: bubbleReshape 6s ease-in-out infinite alternate; 
}

@keyframes bubbleReshape {
    0% { border-radius: 50% 50% 50% 50% !important; }
    33% { border-radius: 48% 52% 49% 51% !important; }
    66% { border-radius: 51% 49% 52% 48% !important; }
    100% { border-radius: 49% 51% 48% 52% !important; }
}

.flashcard-face-back {
    transform: rotateY(180deg);
}

.flashcard-wrapper-3d.slide-right {
    transform: translate(220%, 15px) rotate(40deg) !important;
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
}
.flashcard-wrapper-3d.slide-left {
    transform: translate(-220%, 15px) rotate(-40deg) !important;
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
}
.flashcard-wrapper-3d.slide-up {
    transform: translate(0, -220%) scale(0.7) !important;
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
}

.flashcard-wrapper-3d.firework-vanish {
    animation: fireworkVanishAnim 0.35s cubic-bezier(0.1, 0.8, 0.25, 1) forwards !important;
    pointer-events: none;
}

@keyframes fireworkVanishAnim {
    0% { transform: scale(1) translateZ(0); opacity: 1; filter: brightness(1); }
    40% { transform: scale(0.7) translateZ(0); opacity: 0.8; filter: brightness(1.5) blur(1px); }
    100% { transform: scale(0) translateZ(0); opacity: 0; filter: brightness(2) blur(4px); }
}

.flashcard-post-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999 !important; 
    opacity: 0;
    width: 240px;
    height: 240px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.flashcard-post-ripple.firework-余韻-right {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.85) 0%, rgba(16, 185, 129, 0.35) 40%, rgba(16, 185, 129, 0) 70%);
    animation: fcFireworkSparkle 0.35s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}

.flashcard-post-ripple.firework-余韻-up {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.8) 0%, rgba(245, 158, 11, 0.3) 40%, rgba(245, 158, 11, 0) 70%);
    animation: fcFireworkSparkle 0.35s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}

.flashcard-post-ripple.firework-余韻-left {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.85) 0%, rgba(239, 68, 68, 0.35) 40%, rgba(239, 68, 68, 0) 70%);
    animation: fcFireworkSparkle 0.35s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}

@keyframes fcFireworkSparkle {
    0% { transform: scale(0.5); opacity: 1; filter: brightness(1.6) blur(0px); }
    30% { transform: scale(1.5); opacity: 0.8; filter: brightness(1.3) blur(1px); }
    60% { transform: scale(2.2); opacity: 0.4; filter: brightness(0.9) blur(2px); }
    80% { transform: scale(2.6); opacity: 0.15; filter: brightness(0.6) blur(4px); }
    100% { transform: scale(3.0); opacity: 0; filter: brightness(0) blur(6px); }
}

.flashcard-edge-ripple {
    position: fixed;
    pointer-events: none;
    z-index: 4400 !important;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.1, 0.8, 0.25, 1), transform 0.7s cubic-bezier(0.1, 0.8, 0.25, 1); 
}

.flashcard-edge-ripple.edge-right {
    top: 0; right: 0; width: 120px; height: 100vh;
    background: linear-gradient(to left, rgba(16, 185, 129, 0.5) 0%, rgba(16, 185, 129, 0.2) 40%, rgba(16, 185, 129, 0) 100%);
    transform-origin: right center;
}

.flashcard-edge-ripple.edge-left {
    top: 0; left: 0; width: 120px; height: 100vh;
    background: linear-gradient(to right, rgba(239, 68, 68, 0.5) 0%, rgba(239, 68, 68, 0.2) 40%, rgba(239, 68, 68, 0) 100%);
    transform-origin: left center;
}

.flashcard-edge-ripple.edge-top {
    top: 0; left: 0; width: 100vw; height: 120px;
    background: linear-gradient(to bottom, rgba(245, 158, 11, 0.5) 0%, rgba(245, 158, 11, 0.2) 40%, rgba(245, 158, 11, 0) 100%);
    transform-origin: center top;
}

.fc-history-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 8px;
    z-index: 100;
}

.fc-history-bubble {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.2) 100%);
    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.5), inset 0 -3px 5px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0,0,0,0.5);
    animation: historyBubbleFloat 3s ease-in-out infinite alternate;
}

.fc-history-bubble:nth-child(1) { animation-delay: 0s; }
.fc-history-bubble:nth-child(2) { animation-delay: 0.4s; }
.fc-history-bubble:nth-child(3) { animation-delay: 0.8s; }
.fc-history-bubble:nth-child(4) { animation-delay: 1.2s; }
.fc-history-bubble:nth-child(5) { animation-delay: 1.6s; }

@keyframes historyBubbleFloat {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-4px) scale(1.05); }
}

.fc-history-bubble.ok {
    border-color: rgba(16, 185, 129, 0.85) !important;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(16, 185, 129, 0.1) 60%, rgba(16, 185, 129, 0.3) 100%) !important;
    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.6), inset 0 -3px 5px rgba(16, 185, 129, 0.4), 0 0 8px rgba(16, 185, 129, 0.6) !important;
}

.fc-history-bubble.bad {
    border-color: rgba(239, 68, 68, 0.85) !important;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(239, 68, 68, 0.1) 60%, rgba(239, 68, 68, 0.3) 100%) !important;
    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.6), inset 0 -3px 5px rgba(239, 68, 68, 0.4), 0 0 8px rgba(239, 68, 68, 0.6) !important;
}

.fc-history-bubble.so {
    border-color: rgba(245, 158, 11, 0.85) !important;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(245, 158, 11, 0.1) 60%, rgba(245, 158, 11, 0.3) 100%) !important;
    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.6), inset 0 -3px 5px rgba(245, 158, 11, 0.4), 0 0 8px rgba(245, 158, 11, 0.6) !important;
}

.grammar-span.grammar-type-clock,
.grammar-span.grammar-type-clock .word-span {
    color: #93C5FD !important; 
}
.grammar-span.grammar-type-clock i {
    color: #3B82F6 !important; 
}

.grammar-span.grammar-type-link,
.grammar-span.grammar-type-link .word-span {
    color: #6EE7B7 !important; 
}
.grammar-span.grammar-type-link i {
    color: #10B981 !important; 
}

.grammar-span.grammar-type-relative,
.grammar-span.grammar-type-relative .word-span {
    color: #DDD6FE !important; 
}
.grammar-span.grammar-type-relative i {
    color: #C084FC !important; 
}

.grammar-span.grammar-type-hypothetical,
.grammar-span.grammar-type-hypothetical .word-span {
    color: #FDE68A !important; 
}
.grammar-span.grammar-type-hypothetical i {
    color: #F59E0B !important; 
}

.grammar-span.grammar-type-exclamation,
.grammar-span.grammar-type-exclamation .word-span {
    color: #FBCFE8 !important; 
}
.grammar-span.grammar-type-exclamation i {
    color: #EC4899 !important; 
}

.grammar-span.grammar-type-box,
.grammar-span.grammar-type-box .word-span {
    color: #A5F3FC !important; 
}
.grammar-span.grammar-type-box i {
    color: #00F0FF !important; 
}

.grammar-span {
    border-bottom: none !important;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

@keyframes friendAvatarPulse {
    0% { box-shadow: 0 0 8px rgba(0, 240, 255, 0.2); transform: scale(1); }
    100% { box-shadow: 0 0 16px rgba(0, 240, 255, 0.5); transform: scale(1.03); }
}

.friend-avatar-circle-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.15) 0%, rgba(7,11,25,0.4) 80%);
    border: 1.5px solid rgba(0, 240, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: friendAvatarPulse 3s ease-in-out infinite alternate;
}

/* 👇 新規追加：潰れていた勉強時間アクティビティグラフの描画コンテナのスタイル定義 */
.bar-chart-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 120px;
    padding: 10px 0;
    width: 100%;
}
/* ==========================================================================
   💾 ヘッダー保存ボタンのフィードバック（第3回パッチ）
   ========================================================================== */
#headerSaveBtn.header-save-spin {
  animation: headerSaveSpin 0.8s linear infinite;
  pointer-events: none;
}
@keyframes headerSaveSpin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}
#headerSaveBtn.header-save-done {
  background: rgba(16, 185, 129, 0.35) !important;
  border-color: #10B981 !important;
  color: #10B981 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.7) !important;
}
#headerSaveBtn:active {
  transform: translateY(-50%) scale(0.9);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5) !important;
}
/* 味方パーティエリアの幅を広げて中央空白を解消 */
/* 各味方ユニットを横並びレイアウトに変更してスペースを有効活用 */
/* 名前とHPバーを含む情報エリア */
.m2-ally-info, [class*="ally-info"], [class*="info"] {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
/* HPバーを長くする */
 [class*="hp-bar"] {
    width: 100% !important;
    height: 10px !important;
    flex-shrink: 0 !important;
}
/* 名前表示を修正 */
.m2-ally-name, [class*="ally-name"], [class*="name"] {
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
}

/* 理解度ボタンはタップ終了後の click を待たず pointerdown で反応する。 */
.word-row-container button[onpointerdown*="updateMeaningStatus"],
#wordPopover button[onpointerdown*="updateMeaningStatus"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 保存中の上部通知は表示しない。手動保存ボタンは表示する。 */
#svAutoIndicator,
#fbSaveInd,
#svGauge {
    display: none !important;
}

/* 単一セーブ画面 */
.fbsv-modal {
    position: fixed;
    inset: 0;
    z-index: 60060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 3, 12, 0.82);
    backdrop-filter: blur(8px);
}
.fbsv-card {
    width: min(92vw, 400px);
    padding: 22px 18px;
    border: 1px solid rgba(200, 144, 42, 0.4);
    border-radius: 18px;
    background: linear-gradient(168deg, rgba(46, 38, 28, 0.98), rgba(24, 18, 12, 0.99));
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
}
.fbsv-head, .fbsv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fbsv-head { margin-bottom: 14px; }
.fbsv-title { color: #f3e5c0; font-size: 18px; font-weight: 900; }
.fbsv-close { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(255,255,255,.05); color: #fff; }
.fbsv-row { padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(0,0,0,.25); }
.fbsv-name { color: #f3e5c0; font-size: 14px; font-weight: 900; }
.fbsv-date { margin-top: 3px; color: #a89880; font-size: 11px; }
.fbsv-btn { padding: 10px 18px; border: 1px solid rgba(245,196,81,.5); border-radius: 9px; background: linear-gradient(180deg,#4a3b24,#1f1809); color: #fde68a; font-weight: 900; }
.fbsv-btn:disabled { opacity: .6; }
.fbsv-note { margin-top: 14px; padding: 10px 12px; border: 1px dashed rgba(200,144,42,.25); border-radius: 9px; color: #a89880; font-size: 10.5px; line-height: 1.6; }

/* 単語帳一覧から開くフラッシュ単語設定 */
.vocab-library-book-entry { display:flex; align-items:stretch; border-bottom:1px solid rgba(255,255,255,.16); }
.vocab-library-book-entry > .textbook-list-item { flex:1; min-width:0; grid-template-columns:58px minmax(0,1fr); border-bottom:0; }
.vocab-library-flash-button { flex:0 0 44px; padding:0; border:0; border-radius:0; background:transparent; color:var(--text-sub); font:300 26px/1 Georgia,serif; cursor:pointer; }
.vocab-library-flash-button:hover { color:var(--text-main); background:rgba(255,255,255,.06); }
.vocab-library-flash-button:focus-visible { outline:2px solid var(--cosmic-cyan); outline-offset:2px; }
.vocab-library-list .textbook-list-item:hover,
.vocab-library-list .textbook-list-item:focus-visible,
.textbook-select-popup .textbook-list-item:hover,
.textbook-select-popup .textbook-list-item:focus-visible { background:rgba(255,255,255,.06); }
.vocab-library-list .textbook-list-item:active,
.textbook-select-popup .textbook-list-item:active { background:rgba(255,255,255,.1); }
.vocab-library-list .textbook-list-item { opacity:1; transform:none; animation:none; }
.book-flashcard-dialog { width:min(420px,calc(100vw - 32px)); max-height:85dvh; overflow:auto; box-sizing:border-box; padding:20px; border:1px solid var(--cosmic-purple-light); border-radius:20px; background:rgba(15,23,42,.72); color:var(--text-main,#fff); }
.book-flashcard-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(5px); }
.book-flashcard-dialog > h2 { margin:0 0 12px; font-size:18px; text-align:center; }
.book-flashcard-dialog #flashcard-setup-screen { position:static!important; width:100%!important; height:auto!important; padding-top:0!important; margin-top:0!important; }
.book-flashcard-dialog #flashcard-setup-screen > .card { margin:0; }

.library-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.library-toolbar button { border:1px solid rgba(220,211,186,.28); border-radius:20px; background:rgba(15,23,42,.32); padding:9px 14px; color:#eee8da; font:600 12px/1.3 system-ui,sans-serif; cursor:pointer; transition:background .18s,transform .18s; }
.library-toolbar button:hover { background:rgba(220,211,186,.12); transform:translateY(-2px); }
.vocab-library-manage-button { flex:0 0 28px; min-height:44px; padding:0; border:0; background:transparent; color:var(--text-sub); font-size:16px; cursor:pointer; transition:color .18s; }
.vocab-library-manage-button:hover { color:#eee8da; }
.library-editor-dialog { width:min(440px,calc(100vw - 32px)); max-height:85dvh; box-sizing:border-box; overflow:auto; padding:24px; border:1px solid rgba(213,201,172,.3); border-radius:20px; background:linear-gradient(150deg,rgba(27,35,49,.96),rgba(15,22,36,.98)); color:#eee8da; box-shadow:0 24px 80px rgba(0,0,0,.4); animation:libraryDialogEnter .22s ease-out; }
.library-editor-dialog::backdrop { background:rgba(8,14,24,.55); backdrop-filter:blur(4px); animation:libraryBackdropEnter .22s ease-out; }
.library-editor-eyebrow { color:#a8a08f; font:600 9px/1.4 system-ui,sans-serif; letter-spacing:.2em; }
.library-editor-dialog h2 { margin:8px 0 20px; font:700 22px/1.4 Georgia,"Yu Mincho",serif; overflow-wrap:anywhere; }
.library-editor-dialog label { display:block; margin:16px 0 7px; font-size:12px; color:#cbc4b5; }
.library-editor-dialog input,.library-editor-dialog select,.library-editor-dialog textarea { width:100%; box-sizing:border-box; padding:11px; border:1px solid rgba(224,219,203,.22); border-radius:10px; background:rgba(0,0,0,.18); color:#eee8da; font:14px/1.5 system-ui,sans-serif; }
.library-editor-dialog textarea { resize:vertical; min-height:90px; }
.library-editor-dialog :focus-visible,.library-toolbar button:focus-visible,.vocab-library-manage-button:focus-visible { outline:2px solid #b7aa85; outline-offset:3px; }
.library-editor-hint { color:#aba596; font-size:11px; line-height:1.7; }
.library-editor-error { color:#ffb2a9; font-size:12px; line-height:1.6; }
.library-editor-actions { display:flex; gap:8px; margin-top:20px; }
.library-editor-actions button { flex:1; border:1px solid rgba(224,219,203,.22); border-radius:10px; padding:12px; background:transparent; color:#ddd6c6; font-size:12px; cursor:pointer; transition:background .18s; }
.library-editor-actions button:hover { background:rgba(224,219,203,.1); }
.library-editor-actions .library-editor-primary { background:#c6b790; color:#18202d; border-color:transparent; font-weight:700; }
.library-editor-actions .library-editor-danger { color:#f1aaa1; border-color:rgba(241,170,161,.3); }
.library-editor-actions-stack { flex-direction:column; }
.library-editor-actions button:disabled { opacity:.5; cursor:wait; }
.library-catalog-item { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid rgba(224,219,203,.15); animation:libraryDialogEnter .22s ease-out; }
.library-catalog-item > div { flex:1; min-width:0; }
.library-catalog-item strong { display:block; overflow-wrap:anywhere; font-size:14px; }
.library-catalog-item small { display:block; margin-top:6px; color:#aba596; }
.library-catalog-item button { border:1px solid rgba(224,219,203,.25); background:transparent; border-radius:16px; padding:8px 12px; color:#ddd6c6; cursor:pointer; }
@keyframes libraryDialogEnter { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes libraryBackdropEnter { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .library-editor-dialog,.library-editor-dialog::backdrop,.library-catalog-item { animation:none; } .library-toolbar button,.vocab-library-manage-button,.library-editor-actions button { transition:none; } .library-toolbar button:hover { transform:none; } }
.textbook-list-visibility { flex:none; color:#aaa397; font:600 9px/1.3 system-ui,sans-serif; white-space:nowrap; }

.vocab-library-flash-button { flex:0 0 32px; align-self:center; height:36px; margin:4px 5px; border:1px solid rgba(198,183,144,.35); border-radius:11px; background:linear-gradient(145deg,rgba(198,183,144,.1),rgba(198,183,144,.02)); color:#d8cba9; transition:background .18s,transform .18s; }
.vocab-library-flash-button:hover { background:rgba(198,183,144,.16); transform:translateX(1px); }
.library-cover-preview { width:70px; height:92px; object-fit:cover; border-radius:8px; margin-top:8px; }
.library-prompt-copy { display:block; padding:4px 0; border:0; background:transparent; color:inherit; font-size:10px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.library-prompt-fallback { width:100%; height:100px; font-size:11px; }
@media(prefers-reduced-motion:reduce){.vocab-library-flash-button{transition:none;} .vocab-library-flash-button:hover{transform:none;}}

/* Workbooks share the vocabulary library's rows, controls and native dialogs. */
#workbookContents[hidden] { display:none !important; }
#vocabLibraryWorks > .library-toolbar { margin:10px 0 14px; }
.workbook-review-count { align-self:center; flex:0 0 42px; min-height:44px; padding:4px; border:0; background:transparent; color:#d8cba9; cursor:pointer; }
.workbook-review-count small,.workbook-review-count strong { display:block; }
.workbook-review-count small { font-size:9px; color:#aaa397; }
.workbook-review-count strong { font:600 17px/1.4 Georgia,serif; }
.workbook-review-count:hover { background:rgba(198,183,144,.08); border-radius:10px; }
.workbook-range-fields { display:flex; gap:8px; align-items:center; }
.workbook-range-fields input { min-width:0; }
.library-editor-dialog .workbook-checkbox { width:auto; margin-right:8px; accent-color:#c6b790; }
.workbook-content-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.workbook-back { display:flex; align-items:center; gap:10px; padding:0; border:0; background:transparent; text-align:left; color:#fff; cursor:pointer; }
.workbook-back strong { display:block; font-size:15px; overflow-wrap:anywhere; }
.workbook-back small { display:block; color:var(--text-sub); font-size:10px; margin-top:2px; }
.workbook-small-cover { width:36px; height:36px; flex:none; border-radius:50%; background:rgba(255,255,255,.05); display:grid; place-items:center; overflow:hidden; font-size:20px; }
.workbook-small-cover img { width:100%; height:100%; object-fit:cover; }
.workbook-study-toolbar { margin:0 0 14px; }
.workbook-unit-heading { display:flex; align-items:center; justify-content:space-between; }
.workbook-unit-heading .vocab-library-manage-button { min-height:28px; }
.workbook-unit-heading .word-num-badge { background:rgba(255,255,255,.3); color:#fff; font-size:11px; font-weight:700; padding:2px 6px; border-radius:4px; }
.workbook-question { color:#fff; font-size:16px; font-weight:700; line-height:1.6; margin:8px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.workbook-status-line { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:10px; padding:6px 0; border-top:1px solid rgba(255,255,255,.2); }
.workbook-next-review { font-size:11px; color:var(--text-sub); overflow-wrap:anywhere; }
.workbook-next-review.is-due { color:#f1aaa1; }
.workbook-status-buttons { display:flex; gap:4px; flex-shrink:0; }
.workbook-status-button { width:24px; height:24px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.5); color:white; font-size:10px; font-weight:900; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.workbook-status-button[aria-pressed="true"].status-ok { background:var(--word-ok); color:#000; }
.workbook-status-button[aria-pressed="true"].status-so { background:var(--word-so); color:#000; }
.workbook-status-button[aria-pressed="true"].status-bad { background:var(--word-bad); }
.workbook-status-button[aria-pressed="true"].status-none { background:rgba(255,255,255,.3); }
.workbook-unit-card .word-static-info { margin-top:8px; font-size:11px; color:#C7D2FE; }
.workbook-unit-card .word-static-info summary { cursor:pointer; padding:4px 0; }
.workbook-unit-card .sub-info-block { margin-top:6px; padding:6px 10px; border-radius:6px; background:rgba(0,0,0,.45); font-size:12px; line-height:1.6; color:#fff; white-space:pre-wrap; overflow-wrap:anywhere; }
.workbook-unit-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:12px; padding-top:8px; border-top:1px dashed rgba(255,255,255,.1); }
.workbook-history { display:flex; gap:2px; }
.workbook-history span { font-size:9px; font-weight:800; padding:2px 4px; border-radius:4px; color:#fff; }
.workbook-history .status-ok { background:#10B981; }
.workbook-history .status-so { background:#F59E0B; color:#0f172a; }
.workbook-history .status-bad { background:#EF4444; }
.workbook-unit-card button:focus-visible,.workbook-review-count:focus-visible,.workbook-back:focus-visible { outline:2px solid #b7aa85; outline-offset:3px; }
.workbook-postpone { border:0; padding:4px 0; background:transparent; color:var(--text-sub); font-size:10px; cursor:pointer; }
.workbook-postpone:hover { color:#eee8da; }
.workbook-ai-help { color:#C7D2FE; margin:6px 0; }
#workbookExplanation { white-space:pre-wrap; overflow-wrap:anywhere; }
.workbook-unit-card .workbook-inline-input { display:block; width:100%; box-sizing:border-box; min-height:32px; padding:6px 0; border:1px solid transparent; border-radius:6px; background:transparent; color:#fff; resize:vertical; font:inherit; line-height:1.6; }
.workbook-unit-card .workbook-inline-input.workbook-question { font-size:16px; font-weight:700; }
.workbook-unit-card .workbook-inline-input.sub-info-block { padding:6px 10px; background:rgba(0,0,0,.25); font-size:12px; }
.workbook-inline-input:focus { outline:1px solid rgba(198,183,144,.65); background:rgba(0,0,0,.15); }
.workbook-inline-input::placeholder { color:var(--text-sub); font-size:12px; font-weight:400; }
.workbook-inline-error:empty { display:none; }
.workbook-ai-help[hidden],.library-toolbar button[hidden] { display:none !important; }
.shared-vocab-notes { margin:8px 0 10px; padding-top:8px; border-top:1px dashed rgba(255,255,255,.12); }
.shared-vocab-notes-heading { font-size:10px; color:var(--text-sub); margin-bottom:5px; }
.shared-vocab-notes-list,.shared-vocab-notes-message,.shared-vocab-notes-hint { font-size:10px; color:var(--text-sub); line-height:1.6; }
.shared-vocab-notes-message { margin:4px 0; overflow-wrap:anywhere; }
.shared-vocab-notes-hint { margin:4px 0 8px; }
.shared-vocab-note-row { display:flex; align-items:baseline; gap:6px; margin:5px 0; }
.shared-vocab-note-preview { flex:1; min-width:0; max-width:calc(100% - 70px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.8); font-size:12px; }
.shared-vocab-note-more { flex:none; width:64px; padding:0; border:0; background:transparent; color:#C7D2FE; font-size:10px; cursor:pointer; }
.shared-vocab-note-row.is-expanded { display:block; }
.shared-vocab-note-row.is-expanded .shared-vocab-note-preview { display:block; max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; }
.shared-vocab-note-row.is-expanded .shared-vocab-note-more { display:block; margin:4px 0 0 auto; }
.shared-vocab-note-more[hidden],.shared-vocab-note-unshare[hidden] { display:none !important; }
.vocab-note-actions { flex-wrap:wrap; }
.shared-vocab-note-share,.shared-vocab-note-unshare { background:transparent; border:1px solid rgba(255,255,255,.14); color:#C7D2FE; font-size:10px; cursor:pointer; }
.shared-vocab-note-sharing { display:flex; align-items:center; gap:6px; margin:6px 0 8px; color:var(--text-sub); font-size:11px; cursor:pointer; }
.shared-vocab-note-checkbox { margin:0; width:14px; height:14px; accent-color:var(--cosmic-cyan); }
.study-live-card { margin-top:18px; }
.study-caption { color:var(--text-sub); font-size:12px; margin:0 0 10px; }
#studyLiveTime { display:block; color:#eee8da; font:600 36px/1.3 ui-monospace,monospace; font-variant-numeric:tabular-nums; }
#studyTimerStatus { color:var(--cosmic-cyan); font-size:11px; }
.study-month-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.study-month-header h2 { margin:0; font-size:15px; }
.study-month-header button { width:36px; height:36px; border:1px solid rgba(220,211,186,.25); border-radius:10px; color:#eee8da; background:transparent; font-size:22px; cursor:pointer; }
.study-calendar,.study-calendar-weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.study-calendar-weekdays { text-align:center; color:var(--text-sub); font-size:10px; margin-bottom:6px; }
.study-day { padding:7px 1px; min-height:48px; min-width:0; border:1px solid transparent; border-radius:8px; color:#eee8da; background:rgba(255,255,255,.04); cursor:pointer; }
.study-day span,.study-day small { display:block; }
.study-day span { font-size:12px; }
.study-day small { margin-top:6px; font:8px/1.3 ui-monospace,monospace; color:#a8a08f; }
.study-day.is-today { border-color:rgba(0,240,255,.45); }
.study-day.is-selected { background:rgba(198,183,144,.16); }
#studySelectedDay { font-size:12px; color:#eee8da; }
.study-text-button { padding:6px 0; border:0; background:transparent; color:#C7D2FE; font-size:11px; cursor:pointer; }
.study-rank-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:12px; }
.study-rank-row span { min-width:0; overflow-wrap:anywhere; }
.study-rank-row strong { flex:none; font-family:ui-monospace,monospace; }
.study-rank-row.is-self { color:var(--cosmic-cyan); }
#activityBarChart .bar-wrap { flex:1; min-width:0; height:160px; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:10px; color:var(--text-sub); cursor:pointer; }
#activityBarChart .bar-track { width:70%; flex:1; min-height:0; display:flex; align-items:flex-end; border-radius:5px; background:rgba(255,255,255,.04); }
#activityBarChart .bar-fill { width:100%; background:linear-gradient(0deg,var(--cosmic-cyan),var(--cosmic-purple-light)); border-radius:5px; }
#activityBarChart .bar-wrap small { font-size:9px; }
#view-study { font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",Georgia,serif; color:#eee8da; }
#view-study button,#view-study h2 { font-family:inherit; }
#view-study .card { border:1px solid rgba(218,204,169,.13); background:linear-gradient(145deg,rgba(23,30,45,.92),rgba(12,19,33,.95)); box-shadow:0 12px 32px rgba(0,0,0,.13); }
.study-live-card { text-align:center; padding:30px 20px; }
.study-caption { letter-spacing:.16em; }
#studyLiveTime { font-family:Georgia,"Yu Mincho",serif; font-weight:400; font-size:clamp(34px,9vw,48px); letter-spacing:.06em; }
#view-study .library-toolbar { justify-content:center; margin-top:20px; }
#studyTimerToggle { padding:8px 30px; border:1px solid rgba(218,204,169,.35); border-radius:24px; background:transparent; color:#eee8da; letter-spacing:.14em; cursor:pointer; }
.study-day small { font-family:Georgia,serif; }
.study-podium-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.study-podium-heading h2 { font-size:16px; font-weight:400; letter-spacing:.1em; }
.study-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:8px; margin-top:25px; }
.study-podium-place { min-width:0; text-align:center; animation:studyPodiumAppear .45s ease both; }
.study-podium-name { display:block; overflow-wrap:anywhere; font-size:11px; margin-bottom:8px; line-height:1.6; }
.study-podium-place strong { display:block; font:400 13px/1.5 Georgia,serif; font-variant-numeric:tabular-nums; margin-bottom:12px; }
.study-podium-step { height:78px; display:flex; align-items:center; justify-content:center; font:400 32px Georgia,serif; border:1px solid rgba(212,195,156,.22); border-radius:8px 8px 0 0; background:linear-gradient(180deg,rgba(180,179,182,.18),rgba(180,179,182,.03)); }
.place-1 .study-podium-step { height:115px; color:#e6ce92; background:linear-gradient(180deg,rgba(210,178,103,.22),rgba(210,178,103,.04)); border-color:rgba(210,178,103,.4); }
.place-3 .study-podium-step { height:56px; color:#d0a17e; background:linear-gradient(180deg,rgba(185,131,94,.18),rgba(185,131,94,.03)); }
.study-podium-place.is-self .study-podium-name { color:#e6ce92; }
.study-podium-empty { text-align:center; font-size:12px; line-height:1.9; color:var(--text-sub); padding:20px 0; }
@keyframes studyPodiumAppear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .study-podium-place { animation:none; } }
.header-study-time { padding:6px 10px; border:1px solid rgba(218,204,169,.28); border-radius:8px; color:#eee8da; font:400 13px/1.3 Georgia,"Yu Mincho",serif; font-variant-numeric:tabular-nums; white-space:nowrap; }
.study-week-chart { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin-top:20px; }
.study-week-column { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.study-week-value { font:400 9px/1.3 Georgia,serif; color:#aaa595; font-variant-numeric:tabular-nums; }
.study-week-track { height:140px; width:65%; display:flex; align-items:flex-end; background:transparent; border-radius:5px; overflow:hidden; }
.study-week-fill { width:100%; border-radius:5px; background:linear-gradient(0deg,#a5a9bf,#e0ded6); transition:height .35s ease; }
.study-week-column.is-today .study-week-fill { background:linear-gradient(0deg,#bb9451,#f1d291); }
.study-week-column small { font-size:11px; color:#aaa595; }
#studyWeekTotal { text-align:right; margin:18px 0 0; color:#ddd3bd; font-size:13px; font-variant-numeric:tabular-nums; }
#studyNextWeek:disabled { opacity:.3; cursor:default; }
@media(prefers-reduced-motion:reduce) { .study-week-fill { transition:none; } }

.flashcard-part-of-speech { position:absolute; top:calc(50% + 132px); left:50%; transform:translateX(-50%); color:#d9d4c8; font:400 12px/1.4 "Yu Mincho","Hiragino Mincho ProN",serif; letter-spacing:.12em; pointer-events:none; }
.flashcard-part-of-speech[hidden] { display:none; }
/* Keep Latin digits on the baseline in mixed Japanese book names. */
.textbook-list-name { font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif; font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; letter-spacing:normal; }
.inline-pos-input { width:88px; flex:none; height:36px; margin:0 6px; padding:0 4px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text-main); font-size:11px; }
#view-titles .titles-ranking-section { margin-top:24px; }
#view-titles #crRankShell #leaderboardContainer { max-height:none; min-height:0; overflow:visible; }
#view-titles { position:fixed; top:56px; bottom:60px; left:0; width:100vw; padding:16px; }
#view-titles.active { display:flex; flex-direction:column; }
.titles-page-nav { display:flex; gap:8px; flex:none; margin-bottom:14px; }
.titles-page-nav button { border:1px solid rgba(192,132,252,.3); border-radius:20px; background:transparent; color:#cbd5e1; padding:8px 20px; cursor:pointer; font-size:12px; }
.titles-page-nav button[aria-pressed="true"] { background:rgba(192,132,252,.18); color:#eee8da; border-color:var(--cosmic-purple-light); }
.titles-pages { display:flex; flex:1; min-height:0; width:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; }
.titles-pages::-webkit-scrollbar { display:none; }
.titles-page { flex:0 0 100%; width:100%; min-width:0; height:100%; overflow-y:auto; scroll-snap-align:start; box-sizing:border-box; padding-bottom:12px; }
#view-titles .titles-ranking-section { margin-top:0; }

/* Learning podium: one screen, three measures, shared avatar treatment. */
#view-titles{padding:14px 16px!important;overflow:hidden!important;}
#view-titles.active{display:flex!important;}
.ranking-stage{width:min(100%,650px);height:100%;margin:auto;display:flex;flex-direction:column;min-height:0;font-family:'Noto Serif JP','Yu Mincho',serif;}
.ranking-header{display:flex;align-items:center;justify-content:space-between;padding:10px 2px 16px;flex-shrink:0;}
.ranking-eyebrow{font-size:9px;letter-spacing:3px;color:#b8b1cc;}
.ranking-header h2{font-size:25px;letter-spacing:4px;margin:6px 0 0;}
#rankingRefresh{border:1px solid #c4b5fd40;background:#ffffff08;color:#e9e1ff;border-radius:50%;width:36px;height:36px;font-size:23px;transition:transform .4s,background .3s;}
#rankingRefresh:hover{transform:rotate(70deg);background:#c4b5fd25;}#rankingRefresh:disabled{animation:podium-refresh 1.5s linear infinite;}
.ranking-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid #b7a4e530;border-radius:16px;background:#17102580;flex-shrink:0;}
.ranking-metrics button{border:0;background:transparent;color:#bdb2cd;padding:12px 2px;border-radius:12px;font-size:11px;font-family:inherit;transition:background .3s,color .3s,box-shadow .3s,transform .3s;}
.ranking-metrics button[aria-pressed=true]{background:linear-gradient(135deg,#c4b5fd35,#e5cf9130);color:#fff3d1;box-shadow:inset 0 0 0 1px #e5cf9140;}.ranking-metrics button:active{transform:scale(.95);}
.ranking-description{font-size:10px;color:#bdb2cd;line-height:1.7;min-height:34px;margin:12px 2px 0;flex-shrink:0;}
.ranking-podium-host{flex:1;display:flex;align-items:center;min-height:0;}
.learning-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;width:100%;padding-top:12px;}
.learning-podium-place{appearance:none;position:relative;background:transparent;border:0;color:#ede6f7;font:inherit;padding:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer;animation:podium-arrive .65s both;transition:filter .3s,transform .3s;}
.learning-podium-place.place-2{animation-delay:.12s}.learning-podium-place.place-3{animation-delay:.24s;}
.learning-podium-place:hover{filter:brightness(1.18);transform:translateY(-4px);}.learning-podium-place:active{transform:scale(.96);}
.podium-avatar{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(145deg,#302442,#191526);border:2px solid #c4b5fd70;box-shadow:0 0 20px #b08ee326;overflow:hidden;font:24px 'Noto Serif JP',serif;color:#e9ddff;}
.podium-avatar img{width:100%;height:100%;object-fit:cover;}.place-1 .podium-avatar{width:60px;height:60px;border-color:#e5cf91;box-shadow:0 0 25px #e5cf9138;animation:podium-glow 4s ease-in-out infinite;}
.podium-name{font-size:12px;line-height:1.5;overflow-wrap:anywhere;text-align:center;margin:10px 0 6px;max-width:100%;}
.learning-podium-place>strong{font-size:clamp(10px,3vw,14px);font-variant-numeric:lining-nums tabular-nums;font-weight:500;white-space:normal;overflow-wrap:anywhere;min-height:22px;margin-bottom:14px;}
.podium-step{display:flex;justify-content:center;align-items:flex-start;padding-top:19px;width:100%;height:110px;border:1px solid #c4b5fd35;border-radius:13px 13px 4px 4px;background:linear-gradient(160deg,#c4b5fd30,#c4b5fd05);font-size:30px;color:#c9bfdc;position:relative;overflow:hidden;}
.place-1 .podium-step{height:150px;background:linear-gradient(155deg,#e5cf9140,#e5cf9105);border-color:#e5cf9160;color:#ffe6a5;}.place-3 .podium-step{height:85px;background:linear-gradient(155deg,#c49b8028,#c49b8005);border-color:#c49b8040;color:#d7b89e;}
.podium-step:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffffff16 50%,transparent 65%);transform:translateX(-150%);animation:podium-shine 7s ease-in-out infinite;pointer-events:none;}.place-2 .podium-step:after{animation-delay:1s}.place-3 .podium-step:after{animation-delay:2s}
.is-self .podium-name{color:#e5cf91;}.is-empty{opacity:.4;cursor:default;}.podium-empty-label{font-size:22px;margin-bottom:30px;}
.ranking-self{flex-shrink:0;margin-top:12px;}.ranking-self-button{width:100%;display:flex;align-items:center;gap:10px;background:#21172f65;border:1px solid #c4b5fd35;border-radius:16px;padding:10px 12px;color:#e9ddff;font:12px inherit;transition:background .3s,transform .3s;}.ranking-self-button .podium-avatar{width:30px;height:30px;font-size:16px;}.ranking-self-button strong{margin-left:auto;font-size:13px;}.ranking-self-button:active{transform:scale(.98);}
.ranking-message{font-size:10px;line-height:1.6;color:#bdb2cd;margin:8px 2px 0;flex-shrink:0;}.ranking-hint{font-size:9px;letter-spacing:1px;color:#bdb2cd;text-align:center;padding:8px 0 2px;flex-shrink:0;}
.ranking-detail-person{display:flex;flex-direction:column;align-items:center;gap:12px;}.ranking-detail-person h3{margin:0;text-align:center;font-family:'Noto Serif JP',serif;}.ranking-detail-place{text-align:center;font-size:12px;color:#d9c591;}.ranking-detail dl{display:grid;grid-template-columns:1fr auto;gap:14px 8px;font-size:12px;}.ranking-detail dd{margin:0;color:#eee1c1;}.ranking-detail{animation:podium-arrive .35s both;}
.study-podium-place .podium-avatar{margin:0 auto 8px;}.study-podium-name{white-space:normal!important;overflow-wrap:anywhere;line-height:1.5!important;}
@keyframes podium-arrive{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes podium-glow{50%{box-shadow:0 0 32px #e5cf9165}}
@keyframes podium-shine{0%,65%{transform:translateX(-150%)}90%,100%{transform:translateX(150%)}}
@keyframes podium-refresh{to{transform:rotate(360deg)}}
@media(max-height:700px){.ranking-header{padding:2px 0 9px;}.ranking-header h2{font-size:21px}.ranking-description{margin-top:6px;}.podium-step{height:80px;padding-top:10px}.place-1 .podium-step{height:105px}.place-3 .podium-step{height:60px}.podium-avatar{width:38px;height:38px}.place-1 .podium-avatar{width:46px;height:46px}.podium-name{margin:6px 0 3px;font-size:11px}.learning-podium-place>strong{margin-bottom:7px}.ranking-self{margin-top:6px}.ranking-metrics button{padding:9px 0}.ranking-hint{padding:5px 0 0}}
@media(prefers-reduced-motion:reduce){.learning-podium-place,.podium-avatar,.podium-step:after,#rankingRefresh,.ranking-detail{animation:none!important;transition:none!important}}
.study-podium-place[type=button]{background:transparent;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;transition:filter .3s;}
.study-podium-place[type=button]:hover{filter:brightness(1.15);}
.learning-podium-place:focus-visible,.ranking-metrics button:focus-visible,.ranking-self-button:focus-visible,.study-podium-place:focus-visible,#rankingRefresh:focus-visible{outline:2px solid #e5cf91;outline-offset:4px;border-radius:12px;}
/* Three complete podiums share the viewport; numeric updates never replay entry motion. */
.ranking-podium-grid{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch;}
.ranking-mini-panel{min-height:0;display:flex;flex-direction:column;border:1px solid #c4b5fd28;background:#21172f35;border-radius:16px;padding:8px 12px;}
.ranking-mini-panel h3{font:500 12px 'Noto Serif JP','Yu Mincho',serif;letter-spacing:1px;margin:0 0 4px;color:#e5cf91;}
.ranking-mini-panel .learning-podium{flex:1;min-height:0;padding:0;gap:10px;}
.ranking-mini-panel .podium-avatar,.ranking-mini-panel .place-1 .podium-avatar{width:30px;height:30px;font-size:16px;animation:none;}
.ranking-mini-panel .podium-name{font-size:10px;line-height:1.25;margin:3px 0;}
.ranking-mini-panel .learning-podium-place>strong{font-size:10px;min-height:12px;margin:0 0 4px;}
.ranking-mini-panel .podium-step{height:28px;padding-top:2px;font-size:18px;border-radius:7px 7px 2px 2px;}
.ranking-mini-panel .place-1 .podium-step{height:42px;}.ranking-mini-panel .place-3 .podium-step{height:20px;}
.ranking-mini-self{flex-shrink:0;text-align:right;font:10px 'Noto Serif JP',serif;background:transparent;border:0;color:#bdb2cd;padding:5px 0 0;}
.podium-mounted{animation:none!important;}.ranking-mini-panel .podium-step:after{animation:none;}
@media(max-height:700px){.ranking-podium-grid{gap:5px;}.ranking-mini-panel{padding:4px 8px;border-radius:12px;}.ranking-mini-panel h3{font-size:10px;margin:0 0 2px;}.ranking-mini-panel .podium-avatar,.ranking-mini-panel .place-1 .podium-avatar{width:22px;height:22px;font-size:12px;}.ranking-mini-panel .podium-name{font-size:9px;margin:2px 0;}.ranking-mini-panel .learning-podium-place>strong{font-size:9px;margin-bottom:2px;}.ranking-mini-panel .podium-step{height:16px;font-size:12px;padding:0;}.ranking-mini-panel .place-1 .podium-step{height:24px;}.ranking-mini-panel .place-3 .podium-step{height:12px;}.ranking-mini-self{font-size:9px;padding-top:2px;}}
.ranking-mini-panel{display:grid;grid-template-rows:auto minmax(0,1fr) 18px;row-gap:3px;}
.ranking-mini-self{padding:0;align-self:end;line-height:14px;}
@media(max-height:700px){.ranking-mini-panel{grid-template-rows:auto minmax(0,1fr) 13px;row-gap:2px;}.ranking-mini-self{line-height:11px;}}
/* Reserve all of each panel for its podium; the former footer could collide in Safari. */
.ranking-header{justify-content:flex-end;padding:0 0 6px;height:28px;}
.ranking-header #rankingRefresh{width:28px;height:28px;font-size:19px;}
.ranking-mini-panel{grid-template-rows:18px minmax(0,1fr);box-sizing:border-box;overflow:hidden;padding:10px 12px;}
.ranking-mini-self{display:none!important;}
.ranking-mini-panel .learning-podium{height:100%;box-sizing:border-box;align-items:end;}
.ranking-mini-panel .learning-podium-place{min-height:0;max-height:100%;box-sizing:border-box;}
.ranking-mini-panel .podium-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:28px;}
@media(max-height:700px){.ranking-mini-panel{grid-template-rows:14px minmax(0,1fr);padding:6px 8px;}}
.ranking-mini-panel .podium-name{font-size:clamp(10px,2.7vw,12px)!important;line-height:1.35!important;max-height:2.7em;}
.ranking-mini-panel .podium-step{box-sizing:border-box;line-height:1;font-size:14px;padding:2px 0;}
.ranking-mini-panel .place-1 .podium-step{font-size:20px;padding-top:8px;}
@media(max-height:700px){.ranking-mini-panel .podium-step{font-size:10px;padding:0;}.ranking-mini-panel .place-1 .podium-step{font-size:14px;padding-top:3px;}}
.people-section-heading{font:500 12px 'Noto Serif JP',serif;letter-spacing:1px;margin:16px 0 5px;color:#d9c591;}.people-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid #ffffff12;padding:6px 0;}.people-profile-button{display:flex;align-items:center;gap:12px;flex:1;min-width:0;border:0;background:transparent;color:inherit;text-align:left;padding:5px;cursor:pointer;transition:background .2s;border-radius:12px;}.people-profile-button:hover{background:#c4b5fd12;}.people-profile-button .podium-avatar{width:36px;height:36px;font-size:18px;}.people-profile-button small{display:block;margin-top:4px;font-size:9px;color:var(--text-sub);}.people-name{font-size:13px;overflow-wrap:anywhere;}.people-remove{background:transparent;color:var(--text-sub);font-size:10px;border:0;padding:8px;cursor:pointer;}.people-hint{font-size:11px;color:var(--text-sub);}.people-detail-person{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}.people-detail-data{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:12px;}.people-detail-data dd{margin:0;text-align:right;overflow-wrap:anywhere;}
/* Avoid overlapping full-screen blur surfaces on mobile browsers. */
@media(max-width:900px){.card,.app-header,.nav-bar,.sidebar,.sidebar-overlay,.word-row-container,.auth-card,.login-confirm-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}.library-editor-dialog::backdrop,.book-flashcard-dialog::backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}}
/* iOS Safari and installed home-screen apps: one static photo, no backdrop captures.
   Include late injected game/dialog styles using a priority cascade layer.
   Transforms used to flip flashcards remain functional. No storage is changed. */
@layer rendering-safety {
html.ios-stable-rendering body,
html.ios-stable-rendering body *,
html.ios-stable-rendering body *::before,
html.ios-stable-rendering body *::after,
html.ios-stable-rendering body::before,
html.ios-stable-rendering body::after{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
filter:none!important;
will-change:auto!important;
}
/* Motion stays off page-wide, except in short-lived screens built for it (the warm-up opening,
   poker and its how-to), which animate only transform and opacity. */
html.ios-stable-rendering body,
html.ios-stable-rendering body :not(:is(.ceremony,.ceremony *,.poker-screen,.poker-screen *,.casino-screen,.casino-screen *,.casino,.casino *,.pk-tutorial,.pk-tutorial *,.notices-dialog,.notices-dialog *)),
html.ios-stable-rendering body :not(:is(.ceremony,.ceremony *,.poker-screen,.poker-screen *,.casino-screen,.casino-screen *,.casino,.casino *,.pk-tutorial,.pk-tutorial *,.notices-dialog,.notices-dialog *))::before,
html.ios-stable-rendering body :not(:is(.ceremony,.ceremony *,.poker-screen,.poker-screen *,.casino-screen,.casino-screen *,.casino,.casino *,.pk-tutorial,.pk-tutorial *,.notices-dialog,.notices-dialog *))::after,
html.ios-stable-rendering body::before,
html.ios-stable-rendering body::after{
animation:none!important;
transition:none!important;
}
@media(prefers-reduced-motion:no-preference){
html.ios-stable-rendering body .flash-warmup-dialog:not(.warmup-intro-playing)>.flashcard-session-screen{transition:opacity .5s ease .15s,transform .5s cubic-bezier(.2,.8,.2,1) .15s!important;}
}
}

.vocab-pages{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0;font-size:12px;color:var(--text-sub);}.vocab-pages button{padding:10px 20px;border:1px solid var(--border);border-radius:12px;background:var(--card-bg);color:var(--text-main);}.vocab-pages button:disabled{opacity:.35;}

/* Restore action feedback on iOS without re-enabling page-wide decoration. */
@layer rendering-safety {
@media(prefers-reduced-motion:no-preference){
html.ios-stable-rendering body .flashcard-inner-rotator{transition:transform .4s cubic-bezier(.25,1,.5,1)!important;}
html.ios-stable-rendering body #flashcardGhost{transition:transform .8s cubic-bezier(.1,.8,.25,1),opacity .8s ease!important;}
html.ios-stable-rendering body .flashcard-session-screen :is(#activeFlashcard,.warmup-card):not(.is-dragging):not(.is-settling):not(.warmup-start-card){animation:bubbleFloatAnim 4s ease-in-out infinite!important;}
html.ios-stable-rendering body .flashcard-session-screen :is(#activeFlashcard,.warmup-card).flipped:not(.is-dragging):not(.is-settling){animation-play-state:paused!important;}
html.ios-stable-rendering body .fc-vanish-ring{animation:fcVanishRing .48s ease-out forwards!important;}
html.ios-stable-rendering body .fc-vanish-particle{animation:fcVanishParticle .52s cubic-bezier(.16,.72,.3,1) var(--fc-burst-delay) forwards!important;}
html.ios-stable-rendering body .flashcard-post-ripple{animation:fcFireworkSparkle .8s cubic-bezier(.1,.8,.25,1) forwards!important;}
html.ios-stable-rendering body .duel-clock.is-urgent{animation:duel-pulse 1s ease-in-out infinite!important;}
}
}


/* A single static surface, without home/profile/shop renderers. */
html body::after{z-index:0!important;}
html body::after,html body .flashcard-session-screen{background:linear-gradient(#08112288,#08112288),var(--app-background-image,url('assets/background-night.webp')) var(--app-background-position,center)/cover no-repeat!important;animation:none!important;}
html body .tab-view::before{display:none!important;background-image:none!important;}
html body{background-image:none!important;}.container{position:relative;z-index:1;}
.sidebar-profile-form{display:grid;gap:10px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#10172b;}
.sidebar-profile-form label{font-size:12px;color:var(--text-sub);}
.sidebar-profile-form input{width:100%;min-width:0;box-sizing:border-box;font:16px system-ui;padding:10px;border:1px solid var(--border);border-radius:8px;background:#172033;color:var(--text-main);}
.sidebar-profile-form input[type=file]{font-size:12px;}
#sidebarProfileStatus{font-size:12px;line-height:1.5;margin:0;color:var(--text-sub);}
.loading-quiz-pin{display:inline-block;width:17px;height:17px;color:#d8c48e;margin-left:8px;vertical-align:middle;flex-shrink:0;}.word-row-container>.loading-quiz-pin{float:right;}.quiz-range{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0;}

#appStartupStatus{position:fixed;top:80px;left:16px;right:16px;z-index:100001;padding:14px;background:#10172b;color:#eee;font:14px system-ui;border-radius:10px;}#appStartupStatus[hidden]{display:none;}


/* Consistent readable surfaces; understanding colors on word rows remain separate. */
@layer rendering-safety {html body .card,html body .ranking-mini-panel,html body .auth-tabs,html body .library-book-settings {background:rgba(15,23,42,.42)!important;background-image:none!important;}}
html body .app-header,html body .nav-bar,html body .sidebar{background:rgba(15,23,42,.97)!important;}
html.pwa-recovery-rendering body::after,html.pwa-recovery-rendering body .flashcard-session-screen{background-image:none!important;background-color:#0f172a!important;}

/* One lightweight picker for every tab. Native horizontal scrolling; no backdrop blur. */
html body .app-header { box-sizing:border-box; padding:0 54px; gap:3px; }
.header-clock-group { display:flex; align-items:center; gap:3px; min-width:0; }
#headerBackgroundButton { flex:none; display:flex; align-items:center; justify-content:center; width:34px; height:38px; padding:0; border:0; border-radius:8px; background:transparent; color:#d6caaa; cursor:pointer; }
#headerBackgroundButton:focus-visible { outline:2px solid #d6caaa; outline-offset:1px; }
html body .app-header .header-study-time { padding:6px; font-size:12px; }
html body .app-header .hf-stable { gap:5px; margin-left:0; }
html body .app-header .hf-badge { gap:2px; }
.background-picker-dialog { box-sizing:border-box; width:min(480px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); padding:18px 0 12px; border:1px solid #a69b7c66; border-radius:20px; background:#10192b; color:#eee8da; overflow:hidden; box-shadow:0 12px 40px #0008; }
.background-picker-dialog::backdrop { background:#060b15b3; backdrop-filter:none; }
.background-picker-heading { display:flex; align-items:center; justify-content:space-between; padding:0 20px 14px; }
.background-picker-heading h2 { margin:0; font:400 18px Georgia,"Yu Mincho",serif; letter-spacing:.15em; }
#backgroundPickerClose { width:32px; height:32px; padding:0; border:1px solid #ffffff33; border-radius:50%; background:transparent; color:inherit; font:24px/1 system-ui; cursor:pointer; }
.background-picker-slides { display:flex; gap:14px; padding:4px 20px 12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:20px; touch-action:pan-x; }
.background-preview { flex:0 0 min(56vw,180px); min-width:0; padding:4px; background:transparent; border:1px solid #ffffff22; border-radius:13px; color:#c6c8cf; scroll-snap-align:center; cursor:pointer; }
.background-preview img { display:block; width:100%; aspect-ratio:var(--preview-ratio,9/19.5); max-height:48dvh; object-fit:cover; border-radius:9px; pointer-events:none; }
.background-preview span { display:block; padding:10px 3px 6px; font:12px/1.4 system-ui; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.background-preview[aria-pressed="true"] { border:2px solid #ddc984; padding:3px; color:#f0dfac; }
#backgroundPickerStatus { min-height:18px; margin:8px 20px 0; font:12px/1.5 system-ui; color:#b8bdc9; }
@media(max-width:360px) {
 html body .app-header { padding:0 44px; gap:1px; }
 html body .app-header .menu-trigger { left:8px; width:30px; }
 html body .app-header #headerSaveBtn { right:8px!important; width:30px!important; }
 html body .app-header .hf-stable { gap:3px; }
 html body .app-header .hf-badge span { font-size:10px; }
 html body .app-header .hf-img { width:18px; height:18px; }
 #headerBackgroundButton { width:30px; }
 html body .app-header .header-study-time { padding:6px 4px; font-size:11px; }
}

.background-preview { position:relative; background:#1a2537; }
.background-preview[aria-pressed="true"]::after { content:"✓"; position:absolute; top:12px; right:12px; width:24px; height:24px; border-radius:50%; background:#0f172a; color:#e4d394; font:16px/24px system-ui; text-align:center; }
.background-preview img:not([src]) { visibility:hidden; }

/* Keep the book actions in one row, including the hidden-books action on small phones. */
.vocab-library-header > .library-toolbar { flex-wrap:nowrap; gap:6px; }
.vocab-library-header > .library-toolbar button { flex:1 1 auto; min-width:0; white-space:nowrap; padding:9px clamp(4px,1.6vw,10px); font-size:clamp(9px,2.6vw,12px); }

/* Let the photograph show through the large analysis fields as well as the shared cards. */
#view-reader .modern-textarea,#view-reader .search-input{background:rgba(15,23,42,.35)!important;}

/* Keep settings inside their translucent dialog, and distinguish both card faces from photos. */
@layer rendering-safety {
html body .book-flashcard-dialog #flashcard-setup-screen > .card{background:transparent!important;}
html body .flashcard-face-front,html body .flashcard-face-back{outline:2px solid var(--flashcard-rim-color,#94a3b8)!important;outline-offset:1px;}
}
/* Safari's native select must keep its white label on a dark control surface. */
#flashcardSourceSelect{color-scheme:dark; background:#172033!important; color:#fff!important;}
:root .sidebar-sounds{display:grid;gap:12px;padding:14px;border:1px solid var(--border);border-radius:12px;background:rgba(15,23,42,.35);}
:root .sound-toggle{display:flex;align-items:center;justify-content:space-between;font-size:13px;cursor:pointer;}
:root .sound-toggle span{display:flex;align-items:center;gap:8px;}
:root .sound-toggle input{width:18px;height:18px;accent-color:var(--accent);}
:root .sound-volume{display:grid;grid-template-columns:auto minmax(0,1fr) 38px;align-items:center;gap:10px;font-size:12px;color:var(--text-sub);}
:root .sound-volume input{width:100%;margin:0;accent-color:var(--accent);}
:root .sound-volume output{text-align:right;font-variant-numeric:tabular-nums;}

:root .music-track-label{font-size:12px;color:var(--text-sub);}
:root .music-track-select{min-width:0;width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:#172033;color:var(--text-main);color-scheme:dark;font-size:13px;}

/* Compact menu and native centered dialogs; no blur or perpetual animation. */
.sidebar-menu-list{padding:22px 8px;display:grid;gap:6px;}
.sidebar-menu-list .sidebar-item{margin:0;width:100%;padding:17px 18px;gap:14px;border-radius:12px;font-size:14px;}
.sidebar-menu-list .sidebar-item span{flex:1;text-align:left;}
.sidebar-menu-list .sidebar-item:hover{background:rgba(255,255,255,.06);}
.sidebar-menu-list .sidebar-item:active{transform:scale(.98);}
.sidebar .sidebar-version{margin-top:auto;padding:20px 26px;}
.menu-dialog{box-sizing:border-box;width:min(390px,calc(100vw - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:22px;border:1px solid rgba(148,163,184,.3);border-radius:22px;background:#131d30;color:var(--text-main);overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35);}
.menu-dialog[open]{animation:menu-dialog-enter .18s ease-out;}
.menu-dialog::backdrop{background:rgba(4,9,18,.65);}
.menu-dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.menu-dialog-heading h2{margin:0;font-size:18px;letter-spacing:.08em;}
.menu-dialog-heading button{border:0;background:rgba(255,255,255,.06);color:var(--text-main);border-radius:50%;width:34px;height:34px;font-size:24px;cursor:pointer;}
.menu-dialog .sidebar-sounds{margin-bottom:14px;}
.profile-identity-preview{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
#profileAvatarPreview{width:56px;height:56px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:none;}
#sideOptPlayerName{overflow-wrap:anywhere;font-size:16px;}
#sideInputNameColor{width:100%;height:36px;padding:3px;cursor:pointer;}
.profile-frame-placeholder{padding:10px;border:1px dashed var(--border);background:transparent;color:var(--text-sub);border-radius:8px;font-size:12px;}
#settingsSaveStatus{font-size:12px;color:var(--text-sub);margin-bottom:0;}
@keyframes menu-dialog-enter{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.menu-dialog[open]{animation:none;}.sidebar-menu-list .sidebar-item:active{transform:none;}}



.icon-framed{position:relative!important;overflow:visible!important;border-color:transparent!important;background:transparent!important;}
.icon-framed>img{position:absolute;left:-18%;top:-18%;width:136%!important;height:136%!important;max-width:none!important;border-radius:0!important;object-fit:cover;mask:var(--frame-aperture) center/100% 100% no-repeat;-webkit-mask:var(--frame-aperture) center/100% 100% no-repeat;}
.icon-frame-art{pointer-events:none;position:absolute;inset:-18%;background:var(--frame-image) center/contain no-repeat;}
.frame-wood{--frame-image:url("assets/frames/wood.webp");}
.frame-stone{--frame-image:url("assets/frames/stone.webp");}
.frame-copper{--frame-image:url("assets/frames/copper.webp");}
.frame-silver{--frame-image:url("assets/frames/silver.webp");}
.frame-gold{--frame-image:url("assets/frames/gold.webp");}
.frame-diamond{--frame-image:url("assets/frames/diamond.webp");}
.frame-platinum{--frame-image:url("assets/frames/platinum.webp");}
.frame-black-diamond{--frame-image:url("assets/frames/black-diamond.webp");}
.profile-frame-label{font-size:12px;color:var(--text-sub);}
.profile-frame-slider{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:10px 4px;min-width:0;}
.frame-option{flex:0 0 82px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px 8px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:12px;color:var(--text-main);font-size:10px;cursor:pointer;}
.frame-option.selected{border-color:#d5b96b;background:rgba(213,185,107,.09);}
.frame-option small{font-size:9px;color:var(--text-sub);}
.frame-example{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#26334b!important;color:#eee;font-size:15px;margin:4px;}
.profile-frame-action{padding:11px;border:1px solid #d5b96b66;border-radius:9px;background:#d5b96b11;color:#e4d291;font-size:11px;cursor:pointer;}
.profile-frame-action:disabled{opacity:.45;cursor:default;}
#profileFrameStatus{font-size:11px;color:var(--text-sub);margin:0;}

.sidebar-identity{display:flex;align-items:center;gap:20px;padding:24px 24px 20px;border-bottom:1px solid var(--border);margin-bottom:12px;}
.sidebar-identity .podium-avatar{width:48px;height:48px;box-shadow:none;animation:none;}
#sidebarIdentityName{font-size:15px;line-height:1.6;overflow-wrap:anywhere;min-width:0;}
.frame-example.podium-avatar{width:40px;height:40px;font-size:15px;box-shadow:none;animation:none;border:0;}

/* Fine contrast outline; no large-area shadows or backdrop filters. */
body{-webkit-text-stroke:.2px rgba(5,9,20,.85);paint-order:stroke fill;}
input,textarea{-webkit-text-stroke:0;}
.frame-option.is-locked .icon-frame-art,.frame-preview-locked .icon-frame-art{filter:blur(3px);opacity:.1;}
.ranking-mini-panel .podium-avatar,.ranking-mini-panel .place-1 .podium-avatar{width:40px;height:40px;font-size:20px;margin-top:8px;margin-bottom:6px;}
.ranking-mini-panel .place-1 .podium-avatar{width:44px;height:44px;}
@media(max-height:700px){.ranking-mini-panel .podium-avatar{width:28px;height:28px;font-size:16px;}.ranking-mini-panel .place-1 .podium-avatar{width:32px;height:32px;}}
#idleSleepWarning{position:fixed;z-index:200000;left:50%;top:20%;transform:translateX(-50%);width:min(85vw,360px);padding:18px;border:1px solid #d5b96b;border-radius:14px;background:#151d30;color:#fff;font-size:14px;line-height:1.8;}
#idleSleepOverlay{position:fixed;z-index:200001;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.94);color:#a8afbb;text-align:center;}
#idleSleepOverlay p{font-size:17px;letter-spacing:3px;}
#idleSleepOverlay small{display:block;max-width:80vw;margin:20px auto;line-height:1.7;}
#idleSleepOverlay button{border:1px solid #677180;border-radius:999px;padding:12px 24px;background:#111824;color:#b5bdc9;}

#idleSleepWarning{margin:0;}
#idleSleepOverlay{margin:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;box-sizing:border-box;}
#idleSleepOverlay::backdrop{background:rgba(0,0,0,.94);}

#headerStudyPoints{font-size:10px;white-space:nowrap;color:#d5bf86;margin-left:5px;font-variant-numeric:tabular-nums;}
.duel-entry{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;margin:0 0 14px;border:1px solid #d5bf8644;border-radius:14px;background:#14213799;color:#ece5d1;text-align:left;cursor:pointer;}
.duel-entry>span:last-child{margin-left:auto;font-size:22px;}.duel-entry small{display:block;margin-top:4px;font-size:10px;color:var(--text-sub);}
.duel-screen-open{overflow:hidden!important;}
.word-duel-screen{position:fixed;inset:0;z-index:10000;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;color:#fff3df;background:linear-gradient(#0b132777,#0b132777),var(--app-background-image,url('assets/background-night.webp')) var(--app-background-position,center)/cover;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));font-family:system-ui,sans-serif;}
.word-duel-screen [hidden]{display:none!important;}
.duel-screen-header{width:min(100%,640px);margin:0 auto 18px;display:flex;align-items:center;gap:12px;flex-shrink:0;}.duel-screen-header small{font-size:9px;letter-spacing:2px;color:#ffd983;}.duel-screen-header h2{font:700 18px/1.3 system-ui,sans-serif;margin:3px 0;}.duel-screen-badge{margin-left:auto;border:1px solid #ffc86655;border-radius:20px;padding:7px 12px;font-size:12px;color:#ffda8e;}
.word-duel-screen button{cursor:pointer;color:#fff3df;border:1px solid #d5bf8650;background:#142137c9;border-radius:14px;padding:12px;font:600 14px system-ui,sans-serif;transition:transform .12s,background .12s;}.word-duel-screen button:focus-visible{outline:3px solid #ffdf8e;outline-offset:3px;}
.word-duel-screen button:disabled{opacity:.65;cursor:default;}.word-duel-screen button:active:not(:disabled){transform:scale(.96);background:#415476;}.word-duel-screen [data-duel-back]{font-size:26px;padding:1px 14px;background:transparent;}
.duel-content{width:min(100%,640px);margin:0 auto;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;flex:1;}
.duel-intro,.duel-rules,.duel-status{font-size:11px;line-height:1.7;color:var(--text-sub);}.duel-book-label{display:grid;gap:8px;font-size:12px;}.duel-book-label select,.duel-join input{min-width:0;width:100%;box-sizing:border-box;background:#101b2d;color:#eee;border:1px solid var(--border);border-radius:8px;padding:10px;font-size:16px;}
.duel-lobby-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;}.duel-join{display:flex;gap:8px;}.duel-join button{flex-shrink:0;}
.duel-wait{text-align:center;padding:25px;}.duel-wait strong{display:block;font:32px monospace;letter-spacing:6px;color:#e5cf91;}.duel-scoreboard{display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center;gap:8px;align-items:center;}.duel-scoreboard small{font-size:10px;display:block;overflow-wrap:anywhere;}.duel-scoreboard strong{font:26px 'Noto Serif JP',serif;}.duel-clock{font-size:28px;color:#e5cf91;font-variant-numeric:tabular-nums;}
.duel-combo{height:24px;text-align:center;margin-top:10px;font-size:12px;color:#e5cf91;}.duel-combo.is-miss{color:#ff9a9a;}.duel-prompt{text-align:center;font-size:24px;line-height:1.5;overflow-wrap:anywhere;margin:8px 0 16px;}.duel-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}.duel-options button{min-height:52px;overflow-wrap:anywhere;line-height:1.45;padding:7px;font-size:11px;}.duel-options .duel-none{grid-column:1/-1;min-height:38px;}.duel-leave{width:100%;margin-top:6px;}.duel-result{font:28px 'Noto Serif JP',serif;text-align:center;color:#e5cf91;letter-spacing:3px;}
.duel-rank-switch{display:flex;gap:6px;margin-right:auto;}.duel-rank-switch button{background:transparent;border:1px solid var(--border);border-radius:999px;color:var(--text-sub);font-size:11px;padding:6px 12px;}.duel-rank-switch button[aria-pressed=true]{color:#e5cf91;border-color:#e5cf9166;}
@media(max-width:340px){#headerStudyPoints{font-size:9px;margin-left:3px;}.duel-options button{font-size:10px;}}

.duel-clock.is-urgent{color:#ff9a9a;animation:duel-pulse 1s ease-in-out infinite;}.duel-result{animation:duel-reveal .3s ease-out;}@keyframes duel-pulse{50%{opacity:.55;}}@keyframes duel-reveal{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}@media(prefers-reduced-motion:reduce){.duel-clock.is-urgent,.duel-result{animation:none;}}
.duel-lobby-hero{text-align:center;padding:clamp(20px,8vh,70px) 0 25px;}.duel-lobby-hero>span{font-size:11px;color:#ffcf74;letter-spacing:3px;}.duel-lobby-hero h3{font:800 clamp(28px,7vw,42px)/1.3 system-ui,sans-serif;color:#fff1c5;margin:12px 0;}.duel-lobby-hero .duel-intro{font-size:13px;color:#e3d9f1;}
.word-duel-screen .duel-book-label{font-size:13px;}.word-duel-screen .duel-lobby-actions{margin:14px 0;}.word-duel-screen [data-duel-solo]{background:#142137c9;}.word-duel-screen [data-duel-create]{background:#142137c9;}.word-duel-screen .duel-rules{margin:8px 0;}
.word-duel-screen .duel-scoreboard{gap:12px;margin:4px 0;}.duel-player{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;}.duel-player .podium-avatar{width:64px;height:64px;font:28px system-ui,sans-serif;box-shadow:none;animation:none;}.duel-player small{max-width:100%;font-size:11px;line-height:1.3;min-height:14px;}.word-duel-screen .duel-scoreboard strong{font:800 28px system-ui,sans-serif;color:#ffe2a0;}.duel-clock-label{font-size:9px;letter-spacing:1px;color:#bdbad0;}.word-duel-screen .duel-clock{font:800 38px system-ui,sans-serif;}
.duel-time-track{height:5px;overflow:hidden;background:#ffffff16;border-radius:6px;margin:2px 0;}.duel-time-track span{display:block;width:100%;height:100%;background:#88cfdf;transform-origin:left;transition:transform .15s linear;}
.word-duel-screen .duel-combo{height:24px;flex-shrink:0;font:800 16px/24px system-ui,sans-serif;margin:0;color:#ffdb8b;}.word-duel-screen .duel-combo.is-miss{color:#ff9c9c;}
.duel-question-card{border:1px solid #ffd98a40;border-radius:20px;background:#142137ad;text-align:center;padding:18px 12px;}.duel-question-label{font-size:10px;letter-spacing:2px;color:#d1b5fb;}.word-duel-screen .duel-prompt{font:800 clamp(24px,6vw,36px)/1.35 system-ui,sans-serif;margin:8px 0 0;}
.word-duel-screen .duel-options{gap:9px;flex-shrink:0;}.word-duel-screen .duel-options button{min-height:clamp(62px,9dvh,90px);font:600 12px/1.5 system-ui,sans-serif;padding:8px;}.word-duel-screen .duel-options .duel-none{min-height:44px;background:#142137c9;}.word-duel-screen .duel-options button.is-correct{opacity:1;background:#1b6355;border:2px solid #82f0c7;color:#e5fff7;}.word-duel-screen .duel-options button.is-wrong{opacity:1;background:#73383e;border:2px solid #ff9b9b;}
.duel-correction{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 12px;border:1px solid #91e6bd65;background:#18382fe8;border-radius:14px;padding:12px;}.duel-correction small{font-size:10px;color:#a0ebc7;}.duel-correction strong{font-size:14px;line-height:1.5;overflow-wrap:anywhere;grid-column:1;}.duel-correction button{grid-column:2;grid-row:1/3;}.word-duel-screen .duel-leave{margin-top:auto;flex-shrink:0;background:transparent;font-size:12px;}.word-duel-screen .duel-status{margin:0;min-height:0;}
.duel-solo-result{text-align:center;padding:16px;animation:duel-reveal .3s ease-out;}.duel-solo-result small{display:block;color:#ffcc73;font:800 20px system-ui,sans-serif;letter-spacing:3px;}.duel-solo-result strong{display:block;font:900 54px system-ui,sans-serif;color:#fff0bb;margin-top:10px;}.duel-result-hero{margin:12dvh auto 20px;}.duel-result-hero .podium-avatar{width:100px;height:100px;}.word-duel-screen .duel-result{font:900 40px system-ui,sans-serif;margin:0;}.duel-result-score{text-align:center;color:#ffdfa0;font-size:20px;}
.duel-rank-switch button{padding:6px 9px;white-space:nowrap;}

@media(max-height:740px){.duel-screen-header{margin-bottom:8px;}.duel-content{gap:7px;}.duel-player .podium-avatar{width:48px;height:48px;}.word-duel-screen .duel-scoreboard strong{font-size:23px;}.word-duel-screen .duel-clock{font-size:30px;}.duel-question-card{padding:11px;}.word-duel-screen .duel-options button{min-height:54px;font-size:11px;}.word-duel-screen .duel-options .duel-none{min-height:38px;}.duel-correction{padding:8px;}.duel-correction button{font-size:11px;padding:9px;}}
@media(prefers-reduced-motion:reduce){.word-duel-screen *{animation:none!important;transition:none!important;}}

/* Both battle podiums stay on screen, using the same surfaces as learning. */
.ranking-podium-grid.is-battle-mode{grid-template-rows:repeat(2,minmax(0,1fr));}
.is-battle-mode .podium-avatar{width:clamp(44px,8dvh,64px)!important;height:clamp(44px,8dvh,64px)!important;}
.is-battle-mode .podium-name{font-size:13px;line-height:1.35;margin:5px 0;}
.is-battle-mode .learning-podium-place>strong{font-size:15px;margin-bottom:5px;}
.is-battle-mode .podium-step{height:clamp(35px,6dvh,55px);font-size:24px;padding-top:6px;}
.is-battle-mode .place-1 .podium-step{height:clamp(50px,8dvh,75px);}
.is-battle-mode .place-3 .podium-step{height:clamp(25px,4dvh,40px);}
.word-duel-screen .duel-options button.is-selected{box-shadow:0 0 0 2px #f5f9ff inset;transform:scale(.96);}
.word-duel-screen .duel-question-label{letter-spacing:0;color:var(--text-sub);}

/* Rate podium with an optional, independently scrollable remainder. */
.ranking-podium-grid.is-battle-mode{grid-template-rows:minmax(0,1fr);}
.is-battle-mode .ranking-mini-panel{display:flex;flex-direction:column;}
.is-battle-mode .learning-podium{flex:1;min-height:180px;}
.points-roster{flex-shrink:0;border-top:1px solid var(--border);margin-top:12px;}
.points-roster summary{cursor:pointer;padding:12px 0;font-size:13px;color:var(--text-sub);}
.points-roster ol{list-style:none;margin:0;padding:0;max-height:30dvh;overflow:auto;overscroll-behavior:contain;}
.points-roster button{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;width:100%;padding:10px 0;color:var(--text-main);background:transparent;border:0;border-bottom:1px solid var(--border);text-align:left;cursor:pointer;}
.points-roster button.is-self{color:#e5cf91;}.points-roster button>span:nth-child(2){overflow-wrap:anywhere;}.points-roster strong{font-variant-numeric:tabular-nums;}
.duel-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0;}.duel-settings label{display:grid;gap:6px;font-size:13px;}.duel-settings select{width:100%;box-sizing:border-box;color:#eee;background:#101b2d;border:1px solid var(--border);border-radius:8px;padding:10px;font-size:16px;}
.word-duel-screen .duel-scoreboard{grid-template-columns:repeat(var(--duel-players,2),minmax(0,1fr));gap:8px;}
.duel-clock-row{display:flex;justify-content:center;align-items:baseline;gap:5px;}.duel-clock-row small{font-size:12px;}
.duel-player.is-abandoned{opacity:.45;}.duel-player small{overflow-wrap:anywhere;}
.duel-results{list-style:none;margin:20px 0;padding:0;}.duel-results li{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:8px;padding:14px;border:1px solid var(--border);border-radius:14px;background:#142137b0;}.duel-results small{grid-column:1/-1;color:var(--text-sub);}
@media(max-width:340px){.duel-player .podium-avatar{width:42px;height:42px;}.word-duel-screen .duel-scoreboard strong{font-size:20px;}.points-roster ol{max-height:25dvh;}}
.is-battle-mode.ranking-podium-grid{display:block;overflow:auto;}
.is-battle-mode .ranking-mini-panel{height:auto;max-height:none;}
.is-battle-mode .learning-podium{flex:none;height:clamp(185px,32dvh,270px);min-height:0;}
.points-roster ol{max-height:min(30dvh,max(60px,calc(100dvh - 500px)));}

/* Keep exit away from answers and make meanings legible on small screens. */
.duel-settings input{width:100%;box-sizing:border-box;color:#eee;background:#101b2d;border:1px solid var(--border);border-radius:8px;padding:10px;font-size:16px;}
.word-duel-screen .duel-clock-row{position:relative;min-height:44px;}
.word-duel-screen .duel-clock-row .duel-leave{position:absolute;left:0;top:0;width:auto;margin:0;padding:10px 12px;font-size:13px;}
.word-duel-screen .duel-options button{font-size:16px;line-height:1.5;}
@media(max-height:740px){.word-duel-screen .duel-options button{font-size:15px;}}
/* Keep reverse-side text from bleeding through the expanded 3D card on WebKit. */
#activeFlashcard:not(.flipped) .flashcard-face-back > div,
#activeFlashcard.flipped .flashcard-face-front > div{visibility:hidden;}

.word-main-line .vocab-sticky-button{display:inline-grid;place-items:center;width:32px;height:32px;min-height:32px;padding:0;margin:0;border:0;border-radius:50%;background:transparent;box-shadow:none;color:#d8d2c180;flex-shrink:0;transition:color .16s ease;}
.word-main-line .vocab-sticky-button svg{width:13px;height:13px;stroke-width:1.7;}
.word-main-line .vocab-sticky-button[aria-pressed="true"]{color:#e4cc91;background:transparent;}
.word-main-line .vocab-sticky-button[aria-pressed="true"] svg{fill:#e4cc911a;}
.word-main-line .vocab-sticky-button:focus-visible{outline:1px solid #e4cc91;outline-offset:1px;}
@media(hover:hover){.word-main-line .vocab-sticky-button:hover{color:#e4cc91;}}
.vocab-note-text{display:block;max-height:3.1em;overflow:hidden;}.vocab-note-text.expanded{max-height:none;}.vocab-note-expand,.flashcard-note-more{border:0;background:transparent;color:var(--text-sub);font-size:11px;padding:5px;}.vocab-note-text:empty+.vocab-note-expand{display:none;}
.flashcard-note-preview{position:relative;width:calc(100% - 32px);box-sizing:border-box;margin:8px auto;padding:10px 14px;background:#101827b8;border:1px solid #cdb78044;border-radius:10px;flex-shrink:0;}.flashcard-note-content{font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-height:3em;overflow:hidden;filter:blur(12px);}.flashcard-note-preview.revealed .flashcard-note-content{filter:none;}.flashcard-note-content.expanded{max-height:20vh;overflow:auto;}.flashcard-note-reveal{position:absolute;inset:0;z-index:1;background:transparent;border:0;color:#ddd;font-size:12px;}.flashcard-note-more{display:none;}.flashcard-note-preview.revealed .flashcard-note-more{display:block;}
.vocab-note-expand[hidden],.flashcard-note-more[hidden]{display:none!important;}

.vocab-word-markers{position:absolute;right:12px;top:9px;display:flex;align-items:center;gap:2px;height:32px;}.vocab-word-markers.with-admin{right:88px;}.vocab-word-markers .loading-quiz-pin{margin:0;width:17px;height:17px;}
.word-row-container.has-sticky{border-color:#e4cc91!important;}

.filter-scroller{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;}.filter-scroller .pill-btn{min-width:0;width:100%;padding:7px 4px;font-size:12px;box-sizing:border-box;white-space:normal;}.shared-vocab-notes:has(.shared-vocab-notes-list:empty):has(.shared-vocab-notes-message:empty){display:none;}

.vocab-note-author{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid #d8d2c155;color:#d8d2c1;font-size:10px;overflow:hidden;flex-shrink:0;}.vocab-note-author img{width:100%;height:100%;object-fit:cover;}.vocab-own-note-row{display:flex;align-items:center;gap:8px;}.vocab-own-note-row .vocab-note-text{flex:1;min-width:0;}.vocab-own-note-row:has(.vocab-note-text:empty){display:none;}.shared-vocab-note-row{align-items:center;gap:8px;}

/* Reserve expansion-control space: observing a note must not resize that note. */
.shared-vocab-note-more{flex:0 0 70px;width:70px;box-sizing:border-box;}
.shared-vocab-note-more[hidden]{display:inline-block!important;visibility:hidden;pointer-events:none;}
/* Keep every answer and the exit control inside the visible mobile viewport. */
.word-duel-screen.is-playing{height:100dvh;box-sizing:border-box;overflow:hidden;}
.word-duel-screen.is-playing .duel-screen-header{display:none;}
.word-duel-screen.is-playing .duel-content{min-height:0;gap:6px;}
.word-duel-screen.is-playing .duel-options{flex:1;min-height:160px;display:grid;grid-template-rows:repeat(3,minmax(0,1fr)) 36px;gap:5px;}
.word-duel-screen.is-playing .duel-options button{min-height:0;max-height:100%;overflow:auto;padding:5px;font-size:15px;line-height:1.35;}
.word-duel-screen.is-playing .duel-options .duel-none{min-height:0;}
.word-duel-screen.is-playing .duel-question-card{box-sizing:border-box;flex-shrink:0;max-height:90px;overflow:auto;padding:8px;}
.word-duel-screen.is-playing .duel-question-card h3{margin:4px 0;font-size:20px;line-height:1.3;}
.word-duel-screen.is-playing .duel-player small{max-height:2.6em;overflow:hidden;}
.word-duel-screen.is-playing .duel-status{max-height:26px;overflow:auto;flex-shrink:0;font-size:10px;line-height:1.3;}
.word-duel-screen.is-playing .duel-status:empty{display:none;}
.word-duel-screen.is-playing .duel-correction{box-sizing:border-box;flex-shrink:0;padding:6px;display:grid;grid-template-columns:1fr auto;gap:3px 8px;}
.word-duel-screen.is-playing .duel-correction[hidden]{display:none;}
.word-duel-screen.is-playing .duel-correction strong{max-height:44px;overflow:auto;font-size:14px;}
.word-duel-screen.is-playing .duel-correction button{grid-column:2;grid-row:1 / 3;padding:7px;}
@media(max-height:740px){
.word-duel-screen.is-playing{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom));}
.word-duel-screen.is-playing .duel-content{gap:4px;}
.word-duel-screen.is-playing .duel-player-avatar,.word-duel-screen.is-playing .duel-player .podium-avatar{width:34px;height:34px;}
.word-duel-screen.is-playing .duel-player{gap:4px;}
.word-duel-screen.is-playing .duel-scoreboard{margin:0;}
.word-duel-screen.is-playing .duel-correction small{display:none;}
.word-duel-screen.is-playing .duel-correction strong{max-height:26px;}
.word-duel-screen.is-playing .duel-player small{font-size:10px;max-height:26px;overflow:hidden;}
.word-duel-screen.is-playing .duel-player strong{font-size:20px;}
.word-duel-screen.is-playing .duel-question-card{max-height:65px;}
.word-duel-screen.is-playing .duel-combo{height:20px;min-height:20px;font-size:12px;}
}

.admin-players-dialog{width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;}
.admin-players-dialog [data-body]{display:flex;flex-direction:column;gap:8px;}
.admin-players-dialog form{display:grid;gap:12px;}
.admin-players-dialog label{display:grid;gap:5px;font-size:13px;}
.admin-players-dialog input{box-sizing:border-box;width:100%;min-height:42px;border:1px solid var(--border);border-radius:9px;background:#111827;color:#fff;padding:8px;font-size:16px;}
.admin-players-dialog button{min-height:40px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.07);color:var(--text-main);padding:8px;}
.admin-players-dialog button:disabled{opacity:.5;}
.admin-player-row{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;}
.admin-player-row strong{overflow-wrap:anywhere;}
.admin-player-row small{flex-shrink:0;color:var(--text-sub);}
.admin-player-delete{color:#fca5a5!important;}
.admin-player-confirm{padding:10px;border:1px solid #b45353;border-radius:9px;}
.admin-player-confirm p{font-size:13px;line-height:1.6;}
.admin-player-confirm button{margin-right:8px;}

/* Conceal flashcard hints even when iOS disables decorative filters.
   Keep the exception bounded to the two-line note until explicitly revealed. */
@layer rendering-safety {
html.ios-stable-rendering body .flashcard-note-preview:not(.revealed) .flashcard-note-content { filter:blur(12px)!important; }
html.ios-stable-rendering body .flashcard-note-preview.revealed .flashcard-note-content { filter:none!important; }
}

/* Workbook details use bounded header controls instead of two extra rows. */
.workbook-unit-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.workbook-detail-toggle{min-width:38px;height:32px;padding:0 7px;border:1px solid rgba(198,183,144,.32);border-radius:6px;background:rgba(255,255,255,.045);color:var(--text-sub);font:inherit;font-size:11px;cursor:pointer;touch-action:manipulation;}
.workbook-detail-toggle[aria-expanded="true"]{background:rgba(198,183,144,.16);border-color:rgba(198,183,144,.7);color:#eee8da;}
.workbook-unit-card .workbook-detail-panel[hidden],.workbook-unit-footer[hidden]{display:none!important;}
.workbook-unit-card .workbook-inline-error:empty{display:none;}

.workbook-unit-actions .workbook-ai-help{margin:0;color:#c7d2fe;}
.workbook-math-preview{display:block;width:100%;box-sizing:border-box;border:0;background:transparent;color:inherit;text-align:left;padding:6px 0;border-radius:6px;cursor:text;white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto;font:inherit;line-height:1.65;}
.workbook-math-preview math{font-size:1.08em;}
.workbook-unit-card .workbook-math-preview.workbook-question{font-size:16px;font-weight:700;color:#fff;}
.workbook-unit-card .workbook-inline-input[hidden],.workbook-math-preview[hidden]{display:none!important;}
.workbook-math-preview:focus-visible{outline:1px solid rgba(198,183,144,.65);}

.workbook-detail-panel .workbook-math-preview{font-size:14px;padding:8px 10px;background:rgba(0,0,0,.25);}

.workbook-math-preview .katex-display{display:inline-block;vertical-align:middle;}

.workbook-math-preview math{display:inline-block;vertical-align:middle;}

#workbookExplanation{white-space:normal;line-height:1.85;font-size:14px;color:var(--text-main);font-weight:400;}
#workbookExplanation h3{font-size:15px;line-height:1.5;margin:18px 0 8px;color:#ddd1ad;}
#workbookExplanation p{margin:8px 0 14px;}
#workbookExplanation ul,#workbookExplanation ol{padding-left:24px;margin:10px 0 16px;}
#workbookExplanation li{margin:7px 0;}
#workbookExplanation strong{font-weight:700;color:#eee8da;}
#workbookExplanation .workbook-explanation-equation{max-width:100%;overflow-x:auto;margin:14px 0;padding:10px 8px;box-sizing:border-box;border-radius:6px;background:rgba(0,0,0,.18);}
#workbookExplanation math,#workbookExplanation .katex-display{display:inline-block;vertical-align:middle;}
#workbookExplanation code,#workbookExplanation pre{white-space:pre-wrap;overflow-wrap:anywhere;}

.workbook-sync-status{font-size:11px;line-height:1.5;color:#d9c394;margin:8px 0;}

.shared-vocab-note-open{background:transparent;border:1px solid rgba(199,210,254,.25);border-radius:999px;padding:4px 10px;color:#C7D2FE;font-size:11px;cursor:pointer;transition:background .15s,border-color .15s;}
.shared-vocab-note-open:hover,.shared-vocab-note-open:focus-visible{background:rgba(199,210,254,.08);border-color:rgba(199,210,254,.6);}
.shared-vocab-note-open[hidden],.shared-vocab-notes-list[hidden],.shared-vocab-notes-heading[hidden]{display:none!important;}
.shared-vocab-notes:has(.shared-vocab-note-open:not([hidden])){display:block!important;}

.vocab-pages{scroll-margin-top:90px;}

/* Shared study spaces: quiet surfaces, short feedback and no continuous effects. */
.community-segments{display:flex;gap:6px;position:sticky;top:0;z-index:2;padding:8px 0 14px;background:var(--bg-color,#0f172a)}
.community-segments button{flex:1;padding:11px;border:1px solid var(--border);border-radius:14px;color:var(--text-sub);background:rgba(15,23,42,.65)}
.community-segments button[aria-pressed=true]{color:var(--cosmic-cyan);border-color:currentColor;background:rgba(0,220,230,.08)}
#communityFriends[hidden],#communityGroups[hidden],.warmup-ratings[hidden],.duel-join[hidden]{display:none!important}
#view-community .duel-entry{margin:18px 0 24px}#friendListContainer{padding-bottom:12px!important}
.group-toolbar,.group-actions{display:flex;gap:8px;flex-wrap:wrap}.group-toolbar button,.group-actions button,.group-list-row,.group-goal button,.group-battle,.flash-resume,.meaning-history-button{border:1px solid var(--border);border-radius:12px;background:rgba(19,31,49,.72);color:var(--text-main,#fff);padding:10px 14px;font:inherit;cursor:pointer}
.group-list-row{display:flex;gap:12px;align-items:center;width:100%;margin:8px 0;text-align:left;font-weight:700}.group-list-row span{color:var(--cosmic-cyan)}
.group-members{font-size:12px;line-height:1.8;color:var(--text-sub)}.group-battle{width:100%;border-color:var(--cosmic-cyan);margin:10px 0 18px}
.group-goal{border:1px solid var(--border);border-radius:16px;padding:14px;margin:0 0 20px;background:rgba(18,27,44,.6)}.group-goal h4,.group-timeline h4{margin:0 0 12px}.group-goal progress{width:100%;accent-color:var(--cosmic-cyan)}.group-goal select,.group-goal input{max-width:100%;box-sizing:border-box;margin:6px 0}.group-goal input{width:90px;margin-right:8px}
.group-timeline article{padding:12px 0;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr auto;gap:6px}.group-timeline article p{grid-column:1/-1;margin:0;overflow-wrap:anywhere}.group-timeline small{color:var(--text-sub);font-size:11px}.group-timeline button{padding:5px 12px;border:1px solid var(--border);border-radius:16px;background:transparent;color:var(--text-sub)}.group-timeline button[aria-pressed=true]{color:#fbbf24;border-color:currentColor}.group-actions{margin-top:20px;font-size:12px}.group-friend-picker{max-height:35dvh;overflow:auto;margin:12px 0}.group-friend-picker label{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--border)}.group-friend-picker input{width:auto}
.flash-resume{width:100%;margin-bottom:16px;color:var(--cosmic-cyan)}.meaning-history-button{display:block;margin:0 0 12px auto;font-size:12px}.meaning-chart svg{display:block;width:100%;height:auto}.meaning-chart-legend{display:flex;justify-content:space-around;font-size:13px;margin:12px 0 20px}
.warmup-count{text-align:center;color:var(--text-sub)}.warmup-card{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;display:flex;align-items:center;justify-content:center;min-height:220px;width:100%;padding:24px;box-sizing:border-box;overflow-wrap:anywhere;white-space:pre-wrap;font-size:clamp(22px,7vw,34px);line-height:1.55;border:1px solid var(--border);border-radius:26px;background:rgba(17,29,48,.8);color:var(--text-main,#fff);cursor:pointer}.warmup-ratings{display:flex;justify-content:center;gap:18px;margin:22px 0}.warmup-ratings button{width:56px;height:56px;border:1px solid currentColor;border-radius:50%;font-size:25px;background:rgba(15,23,42,.8);color:#94a3b8}.warmup-ratings button[data-warmup=ok]{color:#34d399}.warmup-ratings button[data-warmup=so]{color:#fbbf24}.warmup-ratings button[data-warmup=bad]{color:#fb7185}.warmup-ratings button:disabled{opacity:.35}
@media(prefers-reduced-motion:no-preference){.group-list-row,.group-timeline button,.community-segments button,.warmup-card{transition:background .15s,border-color .15s,transform .15s}.group-list-row:active,.warmup-card:active{transform:scale(.985)}}
.warmup-card{touch-action:none}
/* The community switch sits directly on the app wallpaper. */
.community-segments{background:transparent;border-bottom:1px solid rgba(255,255,255,.12);gap:24px;padding:0;margin-bottom:18px;position:relative}
.community-segments button,.community-segments button[aria-pressed=true]{background:transparent;border:0;border-radius:0;box-shadow:none;padding:12px 6px;color:var(--text-sub)}
.community-segments button[aria-pressed=true]{color:var(--text-main,#fff);box-shadow:inset 0 -2px var(--cosmic-cyan)}
.group-toolbar{align-items:center;justify-content:space-between;margin-bottom:12px}
.group-toolbar #createStudyGroup{display:flex;align-items:center;gap:12px;background:none;border:0;box-shadow:none;padding:8px 0;font-weight:650}
.group-create-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#06c755;color:white}.group-create-icon svg{width:23px;height:23px}
.group-toolbar #refreshStudyGroups{background:transparent;border:0;box-shadow:none;font-size:12px;color:var(--text-sub)}
.statistics-switch{display:flex;gap:6px;padding:4px;border-bottom:1px solid var(--border);margin:4px 0 18px}.statistics-switch button{flex:1;border:0;background:transparent;padding:10px;color:var(--text-sub);font:inherit;font-size:12px}.statistics-switch button[aria-pressed=true]{color:var(--cosmic-cyan);box-shadow:inset 0 -2px currentColor}
.vocab-statistics-card{max-height:calc(100dvh - 60px);overflow:auto;box-sizing:border-box}.vocab-statistics-card [hidden]{display:none!important}.meaning-chart svg{overflow:visible}.meaning-chart-legend{gap:8px;font-size:12px;flex-wrap:wrap}
.flashcard-number{font-size:11px;color:var(--text-sub);position:absolute;top:24px;font-weight:800}
body.flash-warmup-open .tab-view,body.flash-warmup-open .app-header,body.flash-warmup-open .nav-bar{visibility:hidden}
html body dialog.flash-warmup-dialog{inset:0;margin:0;padding:calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;box-sizing:border-box;background:rgba(8,15,29,.12);display:flex;flex-direction:column;justify-content:center;overflow:auto;box-shadow:none}
.flash-warmup-dialog::backdrop{background:rgba(5,12,24,.18)}.flash-warmup-dialog>.library-editor-eyebrow{display:none}.flash-warmup-dialog>h2{font-size:15px;text-align:center;position:absolute;top:calc(20px + env(safe-area-inset-top));left:90px;right:90px;margin:0}.flash-warmup-dialog>[data-library-close]{position:absolute;top:calc(14px + env(safe-area-inset-top));left:16px;border:1px solid var(--border);border-radius:12px;background:rgba(8,15,29,.55);padding:8px 12px;color:var(--text-main,#fff);font:inherit;font-size:12px}
.flash-warmup-dialog .warmup-count{position:absolute;right:16px;top:calc(14px + env(safe-area-inset-top));margin:0;padding:6px 12px;font-size:12px;border:1px solid var(--border);border-radius:20px;background:rgba(99,102,241,.25)}
.warmup-directions{display:flex;justify-content:space-between;align-items:center;width:100%;gap:6px;font-size:10px;font-weight:700;max-width:420px;margin:0 auto}.warmup-directions span:first-child{color:var(--word-bad)}.warmup-directions span:last-child{color:var(--word-ok)}.warmup-stage{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;margin:8px auto;max-width:420px;min-height:280px}
.flash-warmup-dialog .warmup-card{position:relative;display:block;flex-shrink:0;width:240px;height:240px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;touch-action:none;font:inherit;overflow:visible}
.flash-warmup-dialog .warmup-ratings{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}.flash-warmup-dialog .warmup-ratings:focus-within{position:relative;width:auto;height:auto;clip-path:none;overflow:visible;margin:12px 0}.flash-warmup-dialog [data-warmup-status]{text-align:center;color:#fca5a5;font-size:12px}
.file-backup-actions{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}.file-backup-actions h3{font-size:14px;margin:0 0 8px}.file-backup-actions p{font-size:12px;line-height:1.7;color:var(--text-sub);overflow-wrap:anywhere}.file-backup-actions>div{display:flex;gap:10px;flex-wrap:wrap}.file-backup-actions button{border:1px solid var(--border);border-radius:12px;background:transparent;padding:10px 12px;color:var(--text-main,#fff);font:inherit;font-size:12px}.file-backup-actions [hidden]{display:none!important}.fbsv-card{max-height:calc(100dvh - 48px);overflow-y:auto;box-sizing:border-box}

.fbsv-card>details{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}.fbsv-card>details>summary{font-size:12px;color:var(--text-sub);cursor:pointer}.fbsv-card>details .file-backup-actions{border:0;margin-top:10px;padding-top:0}

/* iOS: reveal one flat face instead of rotating two scrolling surfaces in 3D.
   Keep tap/drag feedback and understanding rims without preserve-3d/backface layers. */
@layer rendering-safety {
html.ios-stable-rendering body .flashcard-wrapper-3d{perspective:none!important;-webkit-perspective:none!important;}
html.ios-stable-rendering body .flashcard-inner-rotator{transform:none!important;transform-style:flat!important;-webkit-transform-style:flat!important;transition:none!important;}
html.ios-stable-rendering body .flashcard-face-front,
html.ios-stable-rendering body .flashcard-face-back{transform:none!important;backface-visibility:visible!important;-webkit-backface-visibility:visible!important;visibility:hidden!important;pointer-events:none!important;animation:none!important;box-shadow:inset 0 2px 8px #ffffff22,0 3px 10px #0005!important;}
html.ios-stable-rendering body .flashcard-wrapper-3d:not(.flipped) .flashcard-face-front,
html.ios-stable-rendering body .flashcard-wrapper-3d.flipped .flashcard-face-back{visibility:visible!important;pointer-events:auto!important;}
html.ios-stable-rendering body #flashcardLiveRippleLayer{mix-blend-mode:normal!important;}
@media(prefers-reduced-motion:no-preference){
html.ios-stable-rendering body .flashcard-wrapper-3d:not(.flipped) .flashcard-face-front,
html.ios-stable-rendering body .flashcard-wrapper-3d.flipped .flashcard-face-back{animation:fcFlatReveal .18s ease-out!important;}
}
html.ios-stable-rendering body .fc-flat-ghost .flashcard-face-front{animation:none!important;}
}
@keyframes fcFlatReveal{from{opacity:.35;}to{opacity:1;}}

/* The login warm-up mounts the normal flashcard layout and its exact chrome. */
html body dialog.flash-warmup-dialog{padding:4px 0 0!important;justify-content:flex-start;touch-action:none;overflow:hidden!important;}
.flash-warmup-dialog>.library-editor-eyebrow,.flash-warmup-dialog>h2{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);}
.flash-warmup-dialog>.flashcard-session-screen{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;min-height:0;display:flex!important;background:none!important;}
.flash-warmup-dialog .warmup-count{position:static;margin:0;}
.flash-warmup-dialog .warmup-stage{max-width:320px;margin:0;min-height:0;}
.flash-warmup-dialog .warmup-card{position:absolute;width:240px;height:240px;}
.flash-warmup-dialog [data-warmup-status]{position:absolute;bottom:15px;left:16px;right:16px;}
/* Familiar contact-list spacing, green actions and quiet separators. */
#view-community{--community-green:#06c755;}
.community-segments{gap:0;border-bottom:1px solid #ffffff20;margin-bottom:12px;}
.community-segments button{font-size:15px;font-weight:700;padding:16px 8px;}
.community-segments button[aria-pressed=true]{color:var(--community-green);box-shadow:inset 0 -3px var(--community-green);}
.people-section-heading{font:600 11px var(--font-main,sans-serif);letter-spacing:0;color:var(--text-sub);padding:12px 0 7px;margin:8px 0 0;}
.people-row{padding:12px 0;border-bottom:1px solid #ffffff12;gap:12px;}
.people-profile-button{gap:17px;padding:4px 8px;min-height:52px;}
.people-profile-button .podium-avatar{width:44px;height:44px;flex-shrink:0;font-size:20px;animation:none;box-shadow:none;}
.people-name{font-size:15px;font-weight:600;line-height:1.5;}
.people-profile-button small{font-size:10px;margin-top:5px;opacity:.75;}
.people-remove{font-size:10px;padding:9px;color:var(--text-sub);}
.group-toolbar{padding:8px 0 12px;border-bottom:1px solid #ffffff12;}
.group-list-row{border:0;border-bottom:1px solid #ffffff12;border-radius:0;background:transparent;box-shadow:none;margin:0;padding:18px 8px;gap:17px;min-height:80px;font-size:15px;}
.group-list-row .group-list-avatar{width:44px;height:44px;flex-shrink:0;border-radius:16px;display:grid;place-items:center;color:var(--community-green);background:#06c75518;}
.group-list-avatar svg{width:25px;height:25px;}
.group-list-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;}
.group-list-row .group-list-name{color:var(--text-main);overflow-wrap:anywhere;}
.group-list-row .group-list-meta{font-size:11px;font-weight:400;color:var(--text-sub);}
.group-list-chevron{font-size:20px;font-weight:400;color:var(--text-sub)!important;}
#view-community .duel-entry{margin-top:24px;border-top:1px solid #ffffff20;padding-top:20px;}

button.flashcard-ghost{padding:0;border:0;background:transparent;font:inherit;}

/* Closed warm-ups must not remain visible because of their flex layout. */
html body dialog.flash-warmup-dialog:not([open]){display:none!important;}
/* Session exits share the surrounding outlined controls rather than stone art. */
html body .game-finish-inline-btn{
 background-image:none!important;background-color:rgba(15,23,42,.55)!important;
 border:1px solid var(--border,#ffffff40)!important;border-radius:12px!important;
 color:var(--text-main,#fff)!important;text-shadow:none!important;box-shadow:none!important;
 justify-content:center;transition:background-color .15s,border-color .15s,transform .15s;
}
html body .game-finish-inline-btn:hover{background-color:rgba(255,255,255,.09)!important;}
html body .game-finish-inline-btn:focus-visible{outline:2px solid var(--cosmic-cyan,#00dceb);outline-offset:3px;}
.cloud-usage-dialog{width:min(92vw,620px);max-height:85dvh;overflow:auto}.cloud-usage-content p{font-size:12px;line-height:1.8;color:var(--text-sub)}.cloud-usage-content table{width:100%;border-collapse:collapse;font-size:12px}.cloud-usage-content td,.cloud-usage-content th{padding:10px 4px;border-bottom:1px solid var(--border);text-align:right}.cloud-usage-content td:first-child,.cloud-usage-content th:first-child{text-align:left}.cloud-usage-content section{padding:10px 0;border-bottom:1px solid var(--border)}.cloud-usage-content h4{font-size:13px;margin:0 0 5px}.cloud-usage-content strong{font-size:12px;color:var(--cosmic-cyan)}
html body dialog.group-chat-dialog{width:min(100vw,620px);height:100dvh;max-height:100dvh;margin:auto;padding:20px 16px;border-radius:0;box-sizing:border-box;overflow:auto;background:rgba(13,25,39,.97)}
.group-chat-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:12px}.group-chat-tabs button{flex:1;background:none;border:0;color:var(--text-sub);padding:12px;font:inherit}.group-chat-tabs button[aria-pressed=true]{color:#06c755;box-shadow:inset 0 -2px #06c755}.group-chat[hidden],.group-content[hidden]{display:none!important}
.group-chat{display:flex;flex-direction:column;height:calc(100dvh - 215px);min-height:230px}.group-chat-messages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 6px}.group-chat-message{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px}.group-chat-message .podium-avatar{width:30px;height:30px;font-size:14px;box-shadow:none;animation:none;flex-shrink:0}.group-chat-message>div{max-width:78%}.group-chat-message p{white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0;padding:10px 13px;border-radius:3px 16px 16px;background:#e9edf2;color:#17212b;font-size:14px;line-height:1.6}.group-chat-message small,.group-chat-message time{font-size:10px;color:#a7b5c6}.group-chat-message.is-self{flex-direction:row-reverse}.group-chat-message.is-self p{border-radius:16px 3px 16px 16px;background:#8de393}.group-chat-message.is-self small{display:none}.group-chat-message.is-self time{display:block;text-align:right}.group-chat-compose{display:flex;align-items:flex-end;gap:8px;border-top:1px solid var(--border);padding:10px 0}.group-chat-compose textarea{flex:1;min-width:0;resize:none;border-radius:18px;background:#ffffff12;border:1px solid var(--border);padding:10px;color:var(--text-main);font:inherit;font-size:16px}.group-chat-compose button{border:0;border-radius:18px;background:#06c755;color:white;padding:12px 16px;font:inherit}.group-chat [data-chat-status]{font-size:11px;min-height:16px;margin:4px}
html body dialog.group-chat-dialog{max-width:100vw!important}.group-chat-dialog h2{font-size:19px;margin:0 0 14px}.group-chat [data-chat-reconnect]{align-self:center;background:transparent;border:1px solid var(--border);border-radius:16px;color:var(--text-sub);padding:6px 14px;font-size:11px}.group-chat [data-chat-reconnect][hidden]{display:none!important}

/* A bounded, monochrome reveal: two shutters and two rings, no blur or 3D. */
html body .flash-warmup-dialog .warmup-start-card{border:1px solid #ffffff85;border-radius:50%;background:rgba(8,12,18,.4);box-shadow:inset 0 0 0 8px #ffffff05,0 0 0 12px #ffffff0a;overflow:visible;}
.warmup-start-label{display:block;padding-left:.28em;font:italic 42px Georgia,'Times New Roman',serif;letter-spacing:.28em;color:#fff;text-shadow:0 1px 8px #000;}
.warmup-start-card::before,.warmup-start-card::after{content:'';position:absolute;inset:-16px;border:1px solid #ffffff60;border-radius:50%;pointer-events:none;}
.warmup-start-card::after{inset:-30px;border-color:#ffffff25;}
html body dialog.warmup-start-exiting{background:none!important;pointer-events:none;}
.warmup-start-exiting::backdrop{background:transparent;}
.warmup-start-exiting::before,.warmup-start-exiting::after{content:'';position:absolute;top:0;bottom:0;width:50%;background:#080d16;z-index:0;pointer-events:none;animation:warmupCurtainLeft 1s cubic-bezier(.7,0,.2,1) forwards;}
.warmup-start-exiting::before{left:0}.warmup-start-exiting::after{right:0;animation-name:warmupCurtainRight;}
.warmup-start-exiting>.flashcard-session-screen{z-index:1;}
.warmup-start-exiting .warmup-count,.warmup-start-exiting .flashcard-session-screen>div:first-child,.warmup-start-exiting .flashcard-session-screen>div:nth-child(2){visibility:hidden;}
html body .warmup-start-exiting .warmup-start-card{animation:warmupStartOpen 1s cubic-bezier(.2,.8,.2,1) forwards!important;}
.warmup-start-exiting .warmup-start-card::before{animation:warmupStartRing 1s ease-out forwards;}
.warmup-start-exiting .warmup-start-card::after{animation:warmupStartRing 1s .12s ease-out forwards;}
@keyframes warmupCurtainLeft{to{transform:translateX(-105%);}}
@keyframes warmupCurtainRight{to{transform:translateX(105%);}}
@keyframes warmupStartOpen{0%{transform:scale(1);opacity:1}25%{transform:scale(.94);opacity:1}100%{transform:scale(1.65);opacity:0}}
@keyframes warmupStartRing{to{transform:scale(3.4);opacity:0;}}
@media(prefers-reduced-motion:reduce){.warmup-start-exiting::before,.warmup-start-exiting::after,.warmup-start-exiting .warmup-start-card::before,.warmup-start-exiting .warmup-start-card::after{animation:none!important;display:none;}}
.warmup-start-ready .flashcard-session-screen>div:first-child,.warmup-start-ready .flashcard-session-screen>div:nth-child(2),.warmup-start-ready .flashcard-session-screen>.card,.warmup-start-ready .warmup-stage~small{visibility:hidden!important;}
.warmup-start-ready .warmup-stage~small,.warmup-start-ready .warmup-stage:before{pointer-events:none;}
.warmup-start-ready .warmup-stage{z-index:1;}
.warmup-start-ready .warmup-stage~div{visibility:hidden!important;}
@layer rendering-safety{
html.ios-stable-rendering body .warmup-start-exiting .flashcard-session-screen :is(#activeFlashcard,.warmup-start-card){animation:warmupStartOpen 1s cubic-bezier(.2,.8,.2,1) forwards!important;}
}
.warmup-start-stage>div:not(.warmup-stage){visibility:hidden;}
html body .warmup-start-ready:not(.warmup-start-exiting) .warmup-start-card{animation:none!important;}
@layer rendering-safety{
html.ios-stable-rendering body .warmup-start-ready:not(.warmup-start-exiting) .flashcard-session-screen :is(#activeFlashcard,.warmup-start-card){animation:none!important;}
}
.warmup-start-ready .flashcard-info-button{display:none!important;}
@media(prefers-reduced-motion:reduce){html body .warmup-start-exiting .warmup-start-card{animation:none!important;}}
@layer rendering-safety{
@media(prefers-reduced-motion:reduce){html.ios-stable-rendering body .warmup-start-exiting .flashcard-session-screen :is(#activeFlashcard,.warmup-start-card){animation:none!important;}}
}
@layer rendering-safety{
@media(prefers-reduced-motion:no-preference){
html.ios-stable-rendering body dialog.warmup-start-exiting::before{animation:warmupCurtainLeft 1s cubic-bezier(.7,0,.2,1) forwards!important;}
html.ios-stable-rendering body dialog.warmup-start-exiting::after{animation:warmupCurtainRight 1s cubic-bezier(.7,0,.2,1) forwards!important;}
html.ios-stable-rendering body .warmup-start-exiting .warmup-start-card::before{animation:warmupStartRing 1s ease-out forwards!important;}
html.ios-stable-rendering body .warmup-start-exiting .warmup-start-card::after{animation:warmupStartRing 1s .12s ease-out forwards!important;}
}}
.group-chat-tabs button{display:flex;align-items:center;justify-content:center;gap:7px}.group-member-list{margin-bottom:22px}.group-member-list .people-profile-button{width:100%}.group-member-list .people-row:last-child{border-bottom:0}
.group-race-summary{font-size:13px;line-height:1.8;color:var(--text-main)}.group-race-lane{padding:16px 0 8px;border-bottom:1px solid #ffffff12}.group-race-caption{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}.group-race-caption>span{min-width:0;overflow-wrap:anywhere}.group-race-caption strong{flex-shrink:0;font-size:11px;color:var(--text-sub)}
.group-race-track{position:relative;height:48px;margin:12px 24px 0;background:linear-gradient(#ffffff35,#ffffff35) center/100% 1px no-repeat,repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#ffffff24 calc(25% - 1px),#ffffff24 25%) center/100% 12px no-repeat;border-left:2px solid #ffffff60;border-right:3px double #ffffffa0;}
.group-race-track .group-race-runner{position:absolute;left:var(--race-progress,0%);top:50%;transform:translate(-50%,-50%);width:32px;height:32px;font-size:15px;border:2px solid #ffffff9a;box-shadow:0 2px 6px #0005;animation:none;transition:left .8s cubic-bezier(.2,.8,.2,1);z-index:1;}
.group-race-ends{display:flex;justify-content:space-between;font-size:9px;color:var(--text-sub);margin-top:4px}.group-race-lane.is-complete .group-race-caption strong,.group-race-lane.is-complete .group-race-ends>span{color:#8de393}.group-goal>select{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:#ffffff09;color:var(--text-main);font-size:13px}.group-goal>select option{background:#152332;color:#fff}
@media(prefers-reduced-motion:reduce){.group-race-track .group-race-runner{transition:none;}}
@layer rendering-safety{@media(prefers-reduced-motion:no-preference){html.ios-stable-rendering body .group-race-track .group-race-runner{transition:left .8s cubic-bezier(.2,.8,.2,1)!important;}}}
.users-toolbar{display:flex;justify-content:flex-end;margin:-4px 0 4px}.users-toolbar button{width:36px;height:36px;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--text-sub);display:grid;place-items:center;cursor:pointer}.users-toolbar button:disabled{opacity:.4}#usersStatus:empty{display:none}#usersStatus{font-size:11px;color:var(--text-sub)}#friendListContainer{gap:0!important;padding-bottom:20px!important}.group-friend-picker .podium-avatar{width:32px;height:32px;flex-shrink:0;font-size:15px;animation:none;box-shadow:none}.nav-bar .nav-item{min-width:0;flex:1;white-space:nowrap}

#view-battle{min-height:calc(100dvh - 116px)}

/* Battle entry: one plain card on the app background. */
#view-battle.active{position:fixed;inset:56px 0 60px;padding:0;min-height:0;overflow:hidden;}
.battle-mode-grid{height:100%;display:grid;place-items:center;padding:24px 16px;box-sizing:border-box;}
.battle-mode-card{width:min(100%,380px);display:block;border:1px solid rgba(213,201,172,.28);border-radius:20px;padding:34px 22px;background:linear-gradient(150deg,rgba(27,35,49,.82),rgba(15,22,36,.9));color:#f0ece3;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .2s,border-color .2s;}
.battle-mode-card>span{display:block;font:700 26px/1.4 Georgia,"Yu Mincho",serif;letter-spacing:.12em;}
.battle-mode-card small{display:block;margin-top:10px;color:#b9b3a4;font:12px/1.6 system-ui,sans-serif;letter-spacing:.02em;}.battle-mode-card:active{transform:scale(.98);border-color:#c6b790;}.battle-mode-card:focus-visible{outline:3px solid #e1c994;outline-offset:3px;}
.word-duel-screen.is-configuring{height:100dvh;overflow:hidden;padding: max(10px,env(safe-area-inset-top)) 16px max(10px,env(safe-area-inset-bottom));}
.is-configuring .duel-screen-header{margin-bottom:10px;}.is-configuring .duel-screen-badge{font-size:10px;padding:6px 9px;}.is-configuring .duel-content{min-height:0;gap:10px;overflow:hidden;}
.battle-config-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;border:1px solid #ffffff20;border-radius:14px;background:#101a2bd9;flex-shrink:0;}
.word-duel-screen .battle-config-tabs button{border:0;background:transparent;padding:10px 4px;color:#b9c3d4;border-radius:10px;font-size:13px;}.word-duel-screen .battle-config-tabs [aria-pressed=true]{color:#f7e5bc;background:#ffffff13;}
.battle-config-panel{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;background:#142035b0;border:1px solid #ffffff20;border-radius:18px;padding:16px;overflow:auto;overscroll-behavior:contain;animation: battle-panel-in .2s ease-out;}
.battle-book-heading{font-size:12px;color:#d8c69e;display:flex;justify-content:space-between;}.battle-book-heading span{color:#9eacc1;}.battle-book-picker{flex:1;min-height:70px;overflow:auto;overscroll-behavior:contain;}
.battle-book-picker label{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #ffffff12;font-size:14px;line-height:1.4;}.battle-book-picker span{overflow-wrap:anywhere;}.battle-book-picker input,.battle-event-list input,.battle-event-toggle input{accent-color:#d5bd85;flex-shrink:0;width:18px;height:18px;}
.battle-range{display:flex;align-items:flex-end;gap:10px;}.battle-range label{flex:1;min-width:0;}.battle-range>span{padding-bottom:10px;color:#a4afc0;}
.battle-field{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;}.battle-field select{max-width:75%;}
.battle-config-panel label{color:#c4cede;font-size:12px;}.battle-config-panel input[type=number],.battle-config-panel select{box-sizing:border-box;width:100%;min-width:0;border:1px solid #ffffff2a;background:#0f1a2c;color:#fff1d3;border-radius:9px;padding:9px;font:16px system-ui;margin-top:5px;}.battle-field select{margin:0;}
.battle-status-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}.battle-status-picker label{position:relative;}.battle-status-picker input{position:absolute;opacity:0;width:1px;height:1px;}.battle-status-picker span{display:block;text-align:center;border:1px solid #ffffff25;border-radius:9px;padding:8px 2px;color:#8d9bb0;}.battle-status-picker input:checked+span{background:#d5bd8520;border-color:#d5bd8580;color:#f1dba7;}.battle-status-picker input:focus-visible+span{outline:2px solid #f1dba7;}
.battle-config-hint{font:10px/1.6 system-ui;color:#a8b4c6;margin:0;}.battle-time>span{font-size:12px;color:#c4cede;}.battle-time-wheels{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0;padding:6px;border-top:1px solid #ffffff15;border-bottom:1px solid #ffffff15;}.battle-time-wheels label{display:flex;align-items:center;gap:8px;}.battle-time-wheels select{width:75px;text-align:center;font:28px/1.3 serif;margin:0;padding:7px;border:0;background:transparent;}.battle-time-wheels b{font:24px serif;color:#a0adbe;}
.battle-rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;}.battle-rule-grid label{min-width:0;}.battle-event-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid #ffffff20;}.battle-event-list{display:flex;flex-direction:column;gap:13px;}.battle-event-list label{display:flex;align-items:center;gap:10px;}.battle-event-list.is-disabled{opacity:.4;}
.battle-config-footer{flex-shrink:0;display:grid;gap:8px;}.battle-config-footer .duel-lobby-actions{margin:0;gap:8px;}.battle-config-footer .duel-lobby-actions button:last-child{border-color:#d5bd8590;background:#d5bd8520;}.battle-config-footer .duel-status:empty{display:none;}.battle-config-footer .duel-status{max-height:44px;overflow:auto;font-size:11px;color:#ffd1b8;}.battle-config-footer .duel-join input{width:100%;text-align:center;letter-spacing:.1em;}.battle-config-footer button{padding:11px;}
.word-duel-screen [data-tone=score]{--tone:#ffd36b;}.word-duel-screen [data-tone=rank]{--tone:#cfa8ff;}.word-duel-screen [data-tone=combo]{--tone:#7fd3ff;}.word-duel-screen [data-tone=challenge]{--tone:#86f0b5;}.word-duel-screen [data-tone=special]{--tone:#ff9d8a;}.word-duel-screen [data-tone=urgent]{--tone:#ff8a8a;}.word-duel-screen [data-tone=count]{--tone:#fff1c5;}
.word-duel-screen.is-playing .duel-event-banner{position:relative;overflow:hidden;flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:1px 8px;padding:5px 10px 7px;border:1px solid var(--tone,#e2c78e);border-radius:10px;background:#0f1a2ce0;color:#fff3df;text-align:left;}
.duel-event-banner[data-phase=preview]{border-style:dashed;}.duel-event-banner b{font:800 13px/1.3 system-ui,sans-serif;color:var(--tone,#ffdfa6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.duel-event-banner em{font:800 13px/1.3 system-ui,sans-serif;font-style:normal;font-variant-numeric:tabular-nums;color:#fff;}
.duel-event-banner span{grid-column:1/-1;justify-self:start;max-width:100%;box-sizing:border-box;font:700 12px/1.4 system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.duel-event-banner span:is([data-kind=good],[data-kind=bad]){margin:2px 0;padding:1px 9px;border-radius:999px;background:var(--tone,#ffdfa6);color:#0c1525;}.duel-event-banner span[data-kind=bad]{background:#ff8a8a;color:#2a0b0b;}
.duel-event-banner small{grid-column:1/-1;font-size:10.5px;line-height:1.35;color:#c3cbda;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}.duel-event-banner small:empty{display:none;}
.duel-event-banner i{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--tone,#ffdfa6);transform-origin:left;}
.word-duel-screen .duel-announce{position:absolute;left:50%;top:max(20%,110px);z-index:5;box-sizing:border-box;width:min(86%,420px);padding:14px 16px;border:2px solid var(--tone,#ffd98a);border-radius:18px;background:#0c1525f0;box-shadow:0 6px 24px #0007;text-align:center;pointer-events:none;transform:translateX(-50%);}
.duel-announce small{display:block;font:800 11px/1.4 system-ui,sans-serif;letter-spacing:2px;color:var(--tone,#ffd98a);}.duel-announce strong{display:block;margin:4px 0;font:900 clamp(28px,8vw,42px)/1.2 system-ui,sans-serif;color:#fff6dc;overflow-wrap:anywhere;}
.duel-announce p{margin:2px 0 0;font:700 16px/1.45 system-ui,sans-serif;color:#fff;}.duel-announce .duel-announce-detail{margin-top:6px;font:500 11px/1.5 system-ui,sans-serif;color:#c9cfdc;}
.word-duel-screen .duel-announce:is([data-tone=count],[data-tone=combo],[data-tone=urgent]){width:auto;max-width:90%;padding:2px 26px;border-width:1px;border-radius:999px;background:#0c1525e6;}.duel-announce:is([data-tone=count],[data-tone=combo],[data-tone=urgent]) strong{font-size:clamp(44px,14vw,76px);color:var(--tone);text-shadow:0 3px 14px #000c;white-space:nowrap;}.duel-announce[data-tone=combo] strong,.duel-announce[data-tone=urgent] strong{font-size:clamp(34px,10vw,52px);}
.word-duel-screen .duel-player{position:relative;}
.duel-announce.is-effect small{letter-spacing:1px;}.duel-announce.is-effect strong{font-size:clamp(24px,7.2vw,34px);line-height:1.3;}
.word-duel-screen .duel-scoreboard{align-items:end;}.duel-step{position:relative;box-sizing:border-box;width:min(100%,96px);height:28px;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff26;border-bottom:0;border-radius:10px 10px 3px 3px;background:linear-gradient(#ffffff1c,#ffffff06);}
.duel-step::before{position:absolute;top:2px;left:6px;font:900 9px/1 system-ui,sans-serif;color:#ffffffa0;}.duel-player[data-rank="1"] .duel-step{height:46px;border-color:#ffd36b99;background:linear-gradient(#ffd36b4d,#ffd36b10);}.duel-player[data-rank="1"] .duel-step::before{content:"1";color:#ffd36b;}
.duel-player[data-rank="2"] .duel-step{height:38px;border-color:#d7e0ec88;background:linear-gradient(#d7e0ec40,#d7e0ec0c);}.duel-player[data-rank="2"] .duel-step::before{content:"2";color:#d7e0ec;}
.duel-player[data-rank="3"] .duel-step{height:32px;border-color:#e3a87088;background:linear-gradient(#e3a87040,#e3a8700c);}.duel-player[data-rank="3"] .duel-step::before{content:"3";color:#e3a870;}.duel-player[data-rank="4"] .duel-step::before{content:"4";}
.duel-step .duel-score-pop{bottom:100%;margin-bottom:2px;}.duel-score-pop{position:absolute;left:50%;bottom:22px;z-index:2;font:900 16px system-ui,sans-serif;color:#8ff0c4;text-shadow:0 2px 6px #000a;white-space:nowrap;pointer-events:none;transform:translateX(-50%);}.duel-score-pop.is-minus{color:#ff9c9c;}
.word-duel-screen [data-tone=rainbow]{--tone:#ffd36b;}.duel-announce[data-tone=rainbow] strong{background:linear-gradient(90deg,#ff8a8a,#ffd36b,#86f0b5,#7fd3ff,#cfa8ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.word-duel-screen .duel-combo[data-tier=blue]{color:#7fd3ff;font-size:17px;}.word-duel-screen .duel-combo[data-tier=gold]{color:#ffd36b;font-size:19px;text-shadow:0 0 10px #ffb84d88;}.word-duel-screen .duel-combo[data-tier=rainbow]{font-size:20px;background:linear-gradient(90deg,#ff8a8a,#ffd36b,#86f0b5,#7fd3ff,#cfa8ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.duel-player-avatar{border-radius:50%;}.duel-player-correct{position:absolute;top:0;left:calc(50% + 12px);z-index:2;padding:0 5px;border-radius:999px;background:#0c1525e6;border:1px solid #86f0b580;font:800 10px/15px system-ui,sans-serif;font-style:normal;color:#9ff3c9;white-space:nowrap;pointer-events:none;}
.duel-confetti{position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none;}.duel-confetti i{position:absolute;top:0;width:8px;height:12px;border-radius:2px;}
.duel-results li.is-first{border-color:#ffd36b;background:#3a2f12cc;}.duel-results li.is-first span::before{content:"👑 ";}.word-duel-screen .duel-result[data-place="1"]{color:#ffe27a;}.duel-result[data-place="1"]::before{content:"👑";display:block;font-size:44px;line-height:1.1;}
.duel-player.is-leading::before{content:"👑";position:absolute;top:-9px;left:50%;z-index:1;font-size:15px;line-height:1;transform:translateX(-50%);}.word-duel-screen .duel-player.is-leading strong{color:#ffe27a;}
@keyframes battle-panel-in{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-height:720px){.is-configuring .duel-content{gap:7px;}.battle-config-panel{gap:8px;padding:12px;}.battle-config-panel input[type=number],.battle-config-panel select{padding:7px;}.battle-event-list{gap:8px;}.battle-time-wheels{margin:4px 0;}.battle-config-tabs button{padding:8px 4px!important;}.battle-rule-grid{gap:7px 10px;}.battle-config-hint{font-size:9px;}.battle-config-footer button{padding:9px;}}
@media(prefers-reduced-motion:reduce){.battle-config-panel{animation:none;}.battle-mode-card{transition:none;}}
@media(max-height:650px){.battle-event-list{gap:5px;}.battle-event-list label{font-size:11px;gap:7px;}.battle-event-list input{width:16px;height:16px;}.battle-config-panel{gap:7px;}}
.battle-config-panel input[type=number],.battle-config-panel select{color-scheme:dark;-webkit-appearance:none;appearance:none;background-color:#0f1a2c;}
.battle-config-panel input[type=number]::-webkit-inner-spin-button,.battle-config-panel input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.battle-time-wheels select{background-color:transparent;}
.battle-field select{padding-right:24px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23c4cede' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;}
.battle-time-wheels label{position:relative;}.battle-time-wheels .battle-native-time{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;pointer-events:none;}
.battle-time-wheel{--wheel-step:24px;width:78px;height:calc(var(--wheel-step)*3);box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;padding-block:var(--wheel-step);border-block:1px solid #d5bd8540;background:linear-gradient(transparent 33.33%,#ffffff08 33.33%,#ffffff08 66.66%,transparent 66.66%);}
.battle-time-wheel::-webkit-scrollbar{display:none;}.word-duel-screen .battle-time-wheel button{display:block;width:100%;height:var(--wheel-step);min-height:0;scroll-snap-align:center;border:0;border-radius:0;padding:0;background:transparent;color:#7e8999;font:24px/var(--wheel-step) serif;opacity:.6;}.word-duel-screen .battle-time-wheel [aria-selected=true]{color:#fff1d3;opacity:1;}.battle-time-wheel:focus-visible{outline:2px solid #d5bd85;border-radius:4px;}.battle-time-wheels{margin:0;padding:0;border:0;}
/* Clear create/join routes; join never builds the textbook or event settings. */
.battle-entry-screen .duel-content{justify-content:center;min-height:0;}.battle-entry-screen .duel-screen-badge[hidden]{display:none!important;}
.battle-entry{width:min(100%,420px);margin:auto;display:grid;gap:14px;}.battle-entry>p{font-size:12px;color:#bfc9d9;letter-spacing:.12em;margin:0 0 8px;}
.word-duel-screen .battle-entry>button{display:flex;align-items:center;gap:18px;padding:24px 18px;text-align:left;background:#142035c9;border:1px solid #d5bd8555;border-radius:18px;}
.battle-entry button>span:nth-child(2){flex:1;font-size:20px;}.battle-entry small{display:block;font-size:11px;font-weight:400;color:#b5c1d4;margin-top:7px;}.battle-route-symbol{width:32px;text-align:center;color:#e3cfa3;font:26px serif;}
.word-duel-screen .battle-entry .battle-solo-link{justify-content:center;padding:14px;background:transparent;border-color:transparent;font-size:12px;color:#bac5d6;}
.battle-join-card{margin:auto;width:min(100%,400px);box-sizing:border-box;padding:28px 20px;border:1px solid #d5bd8555;border-radius:20px;background:#142035d9;}.battle-join-card>p{font-size:20px;margin:0 0 25px;}.battle-join-card .duel-join{display:grid;gap:18px;}.battle-join-card label{font-size:11px;color:#bfc9d9;}.battle-join-card input{font:36px/1.5 serif;letter-spacing:.4em;text-align:center;margin-top:10px;}.battle-join-card small{display:block;font-size:10px;line-height:1.6;color:#a9b6c9;margin-top:16px;}
.is-configuring .duel-lobby-actions{grid-template-columns:1fr;}
.battle-event-presets{display:flex;gap:5px;align-items:center;flex-shrink:0;}.word-duel-screen .battle-event-presets button{padding:6px 8px;font-size:10px;border-radius:7px;}.battle-event-presets>span{margin-left:auto;font-size:10px;color:#c9b68e;}
.battle-event-categories{display:flex;flex-wrap:wrap;gap:4px;flex-shrink:0;}.word-duel-screen .battle-event-categories button{flex:1;padding:7px 4px;min-width:44px;font-size:10px;border-radius:8px;background:transparent;color:#a7b5c9;}.word-duel-screen .battle-event-categories [aria-pressed=true]{color:#f5dfae;border-color:#d5bd85aa;background:#d5bd8515;}
[data-config-panel=events]{overflow:hidden;}.battle-event-list{flex:1;min-height:45px;overflow:auto;overscroll-behavior:contain;display:block;}.battle-event-group{display:flex;flex-direction:column;gap:12px;}.battle-event-list label{align-items:flex-start;gap:10px;cursor:pointer;}.battle-event-list input{margin-top:2px;}.battle-event-list strong{display:block;font-size:12px;font-weight:600;color:#e1d7c2;}.battle-event-list small{display:block;font-size:10px;font-weight:400;line-height:1.6;color:#9fadc2;margin-top:3px;}
.word-duel-screen.is-playing .duel-event-banner[data-phase=preview]{border-style:dashed;background:#18233766;color:#c3cbd8;}
@media(max-height:650px){.battle-event-group{gap:9px;}.battle-event-list strong{font-size:11px;}.battle-event-list small{font-size:9px;margin-top:2px;}.battle-event-categories button{padding:5px 3px!important;}.battle-event-presets button{padding:5px!important;}.battle-entry>button{padding:18px 14px!important;}}
/* One-shot entrance, only while the battle tab is visible. No continuous effects. */
@keyframes battle-choice-enter {from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){#communityBattle:not([hidden]) .battle-mode-card{animation:battle-choice-enter .42s cubic-bezier(.2,.7,.2,1) both}}
.study-group-dialog .group-back-button{position:absolute;left:12px;top:12px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--text-main);cursor:pointer}
.study-group-dialog>h2{margin-left:48px!important;min-height:32px}.study-group-dialog>.library-editor-eyebrow{margin-left:48px}
.group-list-meta{white-space:normal;line-height:1.5}
html body dialog.group-chat-dialog[open]{display:flex;flex-direction:column;overflow:hidden}
.group-chat-dialog>.library-editor-eyebrow,.group-chat-dialog>h2,.group-chat-tabs{flex-shrink:0}
.group-chat-dialog .group-chat{height:auto;flex:1;min-height:0}
.group-chat-dialog .group-content{flex:1;min-height:0;overflow:auto}
.group-chat-dialog>[data-group-status]:empty{display:none}

/* Structured word entry: compact controls, native keyboard, no persistent visual effects. */
.vocab-book-heading { gap: 10px; }
.vocab-book-heading > div { min-width: 0; flex: 1; }
.vocab-add-word { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; min-height: 40px; padding: 8px 11px; color: #e2d4b2; border: 1px solid #d5c9ac55; border-radius: 12px; background: #c6b79012; font: 600 12px system-ui,sans-serif; cursor: pointer; }
.vocab-add-word[hidden] { display: none; }
.vocab-add-word:focus-visible { outline: 2px solid #d5c9ac; outline-offset: 3px; }
.vocab-entry-dialog { padding: 20px; max-height: calc(100dvh - 24px); }
.vocab-entry-dialog header { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.vocab-entry-dialog header h2 { margin: 0; font-size: 21px; }
.vocab-entry-book { margin: 5px 0 0; color: #b4b0a6; font-size: 12px; overflow-wrap: anywhere; }
.vocab-entry-where { margin: 4px 0 0; color: #e7cf98; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
/* The small ＋ between word cards (only where words can be added): a hairline with a dot. */
.vocab-insert { position: relative; display: block; width: 100%; height: 22px; margin: -8px 0 4px; padding: 0; border: 0; background: none; color: rgba(231, 207, 152, 0.7); font: 600 14px/22px system-ui, sans-serif; cursor: pointer; }
.vocab-insert::before { content: ""; position: absolute; left: 24px; right: 24px; top: 50%; border-top: 1px dashed rgba(231, 207, 152, 0.18); }
.vocab-insert span { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(231, 207, 152, 0.35); border-radius: 50%; background: rgba(14, 18, 28, 0.92); font-size: 13px; line-height: 1; }
.vocab-insert:hover, .vocab-insert:focus-visible { color: #e7cf98; }
.vocab-insert:hover::before, .vocab-insert:focus-visible::before { border-top-color: rgba(231, 207, 152, 0.5); }
.vocab-entry-dialog header button { flex: 0 0 auto; background: transparent; color: #ddd6c6; border: 0; font-size: 24px; width: 40px; height: 40px; cursor: pointer; }
.vocab-entry-dialog input,.vocab-entry-dialog textarea,.vocab-entry-dialog select { font-size: 16px; }
.vocab-entry-meaning-controls { display: grid; grid-template-columns: minmax(0,1fr) 100px 32px; gap: 6px; align-items: center; }
.vocab-entry-meaning-controls select { padding: 10px 4px; font-size: 12px; }
.vocab-entry-meaning-controls button { width: 32px; height: 40px; padding: 0; border: 0; background: transparent; color: #c5bda9; font-size: 20px; cursor: pointer; }
.vocab-entry-meaning-controls button[hidden] { visibility: hidden; display: block; }
.vocab-entry-add-meaning { margin: 9px 0 16px; padding: 8px 0; min-height: 40px; border: 0; background: transparent; color: #d5c9ac; font-size: 12px; cursor: pointer; }
.vocab-entry-dialog details { border-top: 1px solid #d5c9ac25; padding-top: 12px; }
.vocab-entry-dialog summary { color: #c2baaa; cursor: pointer; font-size: 12px; }
.vocab-entry-dialog .vocab-entry-continue { display: flex; align-items: center; gap: 8px; }
.vocab-entry-dialog #vocabEntryContinue { width: 17px; height: 17px; margin: 0; accent-color: #c6b790; }
.vocab-entry-status { font-size: 12px; line-height: 1.6; color: #c6d8bd; overflow-wrap: anywhere; }
.vocab-entry-status:empty,.vocab-entry-dialog .library-editor-error:empty { display: none; }
.vocab-entry-dialog .library-editor-actions { position: sticky; bottom: -20px; background: #141d2a; padding: 12px 0 4px; margin-top: 12px; }
@media(max-width:360px) { .vocab-entry-dialog { padding: 16px; } .vocab-entry-meaning-controls { grid-template-columns: minmax(0,1fr) 85px 28px; } .vocab-entry-meaning-controls button { width: 28px; } .vocab-entry-dialog .library-editor-actions { bottom: -16px; } }

.vocab-book-heading > div > div:last-child { min-width: 0; flex: 1; }
.vocab-book-heading h2 { min-width: 0; }
.vocab-book-heading #vocabBookTitle { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vocab-book-heading #vocabCoverContainer { flex-shrink: 0; }

/* 「わからない」, the correct meaning in the middle of the screen after a miss, and rematch. */
.word-duel-screen.is-playing .duel-options{grid-auto-rows:32px;}.word-duel-screen .duel-options .duel-pass{grid-column:1/-1;min-height:0;background:transparent;border-style:dashed;color:#c9d2e0;font-size:13px;}
.word-duel-screen.is-playing .duel-correction{position:absolute;left:50%;top:50%;z-index:4;box-sizing:border-box;width:min(88%,420px);max-height:70dvh;padding:16px;grid-template-columns:1fr;gap:8px;text-align:center;border:2px solid #86f0b5;border-radius:18px;background:#123329f5;box-shadow:0 8px 30px #000a;transform:translate(-50%,-50%);}
.word-duel-screen.is-playing .duel-correction small{display:block;font-size:11px;letter-spacing:2px;color:#a0ebc7;}.word-duel-screen.is-playing .duel-correction strong{grid-column:1;max-height:34dvh;overflow:auto;font:800 clamp(20px,6vw,28px)/1.4 system-ui,sans-serif;color:#effff8;}
.word-duel-screen.is-playing .duel-correction button{grid-column:1;grid-row:auto;padding:11px;font-size:14px;}
.duel-rematch{display:grid;gap:8px;margin:4px 0 10px;}.duel-rematch [data-rematch-invite]{margin:0;text-align:center;font:700 13px/1.5 system-ui,sans-serif;color:#ffe2a0;}.word-duel-screen .duel-rematch [data-rematch-join]{background:#1b6355;border-color:#82f0c7;}
.duel-rematch-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}.word-duel-screen .duel-rematch-actions button{padding:11px 6px;font-size:13px;}.duel-rematch .duel-status:empty{display:none;}.word-duel-screen .duel-again{width:100%;margin:6px 0;}

/* Pronunciation: speaker buttons hide when reading is off or unsupported. */
html.pronounce-off .pronounce-button{display:none!important;}
.flashcard-speak-button{left:auto;right:max(18px,env(safe-area-inset-right));}.flashcard-speak-button:disabled{opacity:.35;}
.word-speak-button{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(15,23,42,.55);color:#fff;cursor:pointer;touch-action:manipulation;flex-shrink:0;}.word-speak-button:active{transform:scale(.92);background:rgba(99,102,241,.6);}
.duel-correction-say{display:flex;align-items:center;justify-content:center;gap:8px;}.duel-correction-say em{font:700 16px/1.3 'Times New Roman',serif;font-style:normal;color:#e7fff4;overflow-wrap:anywhere;}
.word-duel-screen .duel-correction .duel-speak{grid-column:auto;grid-row:auto;display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;}
.sidebar-pronounce .pronounce-accent{grid-template-columns:auto minmax(0,1fr) auto;}.sidebar-pronounce select{min-width:0;padding:5px 6px;border-radius:8px;border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--text-main);font-size:12px;}.sidebar-pronounce #pronounceTest{padding:5px 10px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text-main);font-size:12px;}
.sidebar-pronounce .pronounce-option{font-size:12px;color:var(--text-sub);}.pronounce-status{margin:0;font-size:11px;color:#ffb4a8;}

/* Hands-free flashcards: toggle above the speaker, status bar, pocket cover. */
.flashcard-handsfree-button{left:auto;right:max(18px,env(safe-area-inset-right));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 52px);}.flashcard-handsfree-button.is-active{background:rgba(16,122,92,.9);border-color:#86f0b5;}
.handsfree-bar{position:absolute;left:50%;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 108px);z-index:121;display:flex;align-items:center;gap:6px;max-width:calc(100% - 32px);box-sizing:border-box;padding:6px 8px 6px 12px;border:1px solid #86f0b580;border-radius:999px;background:rgba(10,30,26,.9);color:#e7fff4;font:700 12px/1.3 system-ui,sans-serif;transform:translateX(-50%);white-space:nowrap;}
.handsfree-bar[hidden]{display:none;}.handsfree-bar span{overflow:hidden;text-overflow:ellipsis;}.handsfree-bar button{flex-shrink:0;padding:5px 10px;border:1px solid #ffffff40;border-radius:999px;background:#ffffff14;color:#fff;font:700 11px system-ui,sans-serif;}
.handsfree-pocket{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:#000;color:#4b4f57;text-align:center;touch-action:none;user-select:none;-webkit-user-select:none;}
.handsfree-pocket p{margin:0;font:700 15px/1.6 system-ui,sans-serif;}.handsfree-pocket small{display:block;margin-top:6px;font-size:12px;font-weight:500;}.handsfree-pocket.is-holding .handsfree-pocket-exit{color:#9aa1ad;}
.sidebar-pronounce .handsfree-delay label{white-space:nowrap;}

/* Units (table of contents) and chosen word numbers. */
.vocab-unit-contents{margin:0 0 12px;}.vocab-unit-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin;}
.vocab-unit-chip{flex-shrink:0;display:grid;gap:2px;max-width:220px;padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(15,23,42,.55);color:var(--text-main);text-align:left;cursor:pointer;}
.vocab-unit-chip strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.vocab-unit-chip small{font-size:10px;color:var(--text-sub);white-space:nowrap;}.vocab-unit-chip[aria-pressed=true]{border-color:var(--accent);background:rgba(99,102,241,.35);}
.vocab-unit-assign{margin-top:4px;font-size:12px;color:var(--text-sub);}.vocab-unit-assign summary{cursor:pointer;padding:4px 0;}.vocab-unit-assign>div{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px;margin-top:6px;}
.vocab-unit-assign label{display:grid;gap:3px;font-size:11px;}.vocab-unit-assign input{width:70px;box-sizing:border-box;padding:7px;border:1px solid var(--border);border-radius:8px;background:rgba(0,0,0,.25);color:var(--text-main);font-size:16px;}.vocab-unit-assign input[data-unit-name]{width:150px;}
.vocab-unit-assign button{padding:8px 14px;border:1px solid var(--accent);border-radius:8px;background:rgba(99,102,241,.3);color:#fff;font-weight:700;}
.inline-edit-place{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;margin-bottom:12px;}.inline-edit-place label{display:grid;gap:4px;font-size:11px;font-weight:700;color:var(--cosmic-cyan);}.inline-edit-place input{margin:0;}
.flashcard-unit-field{display:grid;gap:6px;margin:0 0 16px;text-align:left;font-size:12px;font-weight:700;color:var(--text-sub);}.flashcard-unit-field[hidden]{display:none;}.flashcard-unit-field select{width:100%;padding:9px;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.3);color:var(--text-main);font-size:16px;}
.battle-unit{display:grid;gap:4px;flex-basis:100%;}.battle-unit[hidden]{display:none;}.battle-unit select{width:100%;box-sizing:border-box;color:#eee;background:#101b2d;border:1px solid var(--border);border-radius:8px;padding:8px;font-size:16px;}
.vocab-entry-insert{display:flex;align-items:flex-start;gap:8px;margin:6px 0 0;font-size:12px;line-height:1.5;}.vocab-entry-insert input{margin-top:3px;flex-shrink:0;}
.vocab-entry-dialog .vocab-entry-insert{display:flex;flex-direction:row;align-items:flex-start;gap:8px;text-align:left;}.vocab-entry-dialog .vocab-entry-insert input{width:18px;height:18px;min-height:0;margin:2px 0 0;padding:0;flex:0 0 auto;}

/* 用語・年号モード: light markers coloured by each question's results, typed year answers. */
mark.term-mark{background:none;color:inherit;padding:0 1px;border-radius:3px;}
mark.term-mark.is-rated{background:linear-gradient(90deg,rgba(var(--mark),.32),rgba(var(--mark),.14)) left bottom/100% 52% no-repeat;cursor:pointer;}
.term-answer-panel{position:absolute;left:50%;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 150px);z-index:121;width:min(86%,340px);box-sizing:border-box;display:grid;gap:6px;padding:10px 12px;border:1px solid #ffd36b80;border-radius:14px;background:rgba(12,21,37,.92);transform:translateX(-50%);}
.term-answer-panel[hidden]{display:none;}.term-answer-panel label{font:700 12px system-ui,sans-serif;color:#ffd36b;}.term-answer-panel div{display:flex;gap:8px;}
.term-answer-panel input{flex:1;min-width:0;box-sizing:border-box;padding:10px;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.35);color:#fff;font:700 20px/1.2 system-ui,sans-serif;letter-spacing:.08em;text-align:center;}
.term-answer-panel button{flex-shrink:0;padding:10px 16px;border:1px solid #ffd36b;border-radius:10px;background:rgba(255,211,107,.2);color:#fff;font-weight:800;}
.term-answer-panel p{margin:0;min-height:1.2em;font:700 13px system-ui,sans-serif;text-align:center;}.term-answer-panel[data-result=right] p{color:#86f0b5;}.term-answer-panel[data-result=wrong] p{color:#ff9a8a;}
.library-term-mode{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:4px 8px;margin:4px 0;font-weight:700;}.library-term-mode input{width:18px!important;height:18px;margin:0;}.library-term-mode small{grid-column:1/-1;font-weight:400;font-size:11px;color:var(--text-sub);line-height:1.5;}
.vocab-entry-dialog.is-term-mode .vocab-entry-year{flex:0 0 70px;width:70px;text-align:center;}.vocab-entry-term-hint{margin:0 0 6px;}
/* 用語・年号モードのバトル：長い説明文と年号の入力 */
.word-duel-screen .duel-prompt.is-term{font:700 clamp(15px,4.2vw,20px)/1.6 system-ui,sans-serif;white-space:pre-line;text-align:left;max-height:30dvh;overflow:auto;}
.word-duel-screen.is-playing .duel-options.is-typed{display:flex;flex-direction:column;justify-content:center;gap:10px;}
.duel-typed{display:flex;gap:8px;}
.duel-typed input{flex:1;min-width:0;font:800 28px/1.2 system-ui,sans-serif;text-align:center;letter-spacing:4px;padding:12px;border-radius:14px;border:2px solid #ffd98a80;background:#0d1729;color:#f5f9ff;}
.duel-typed input.is-correct{border-color:#82f0c7;background:#1b6355;}
.duel-typed input.is-wrong{border-color:#ff9b9b;background:#73383e;}
.word-duel-screen .duel-options .duel-typed button{flex:0 0 auto;min-height:56px;padding:0 20px;font-size:16px;}
.word-duel-screen .duel-options.is-typed .duel-pass{min-height:40px;}
/* 年代並べ替え */
.term-order-screen .review-content{display:flex;flex-direction:column;gap:12px;overflow:auto;}
.term-order-screen h3{margin:0;font-size:18px;text-align:center;}
.term-order-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.term-order-item{box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;padding:14px 14px 14px 56px;border-radius:16px;border:1px solid #ffffff2e;background:#142137c9;line-height:1.5;}
.term-order-item b{font-size:15px;}.term-order-item span{font-size:14px;color:#d8e0ee;}
.term-order-item::before{content:attr(data-place);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:2px dashed #ffffff55;display:grid;place-items:center;font:800 15px/1 system-ui,sans-serif;}
.term-order-item[aria-pressed="true"]{border-color:#ffd98a;background:#2a2a3fd9;}
.term-order-item[aria-pressed="true"]::before{border:2px solid #ffd98a;background:#ffd98a;color:#1a1a2a;}
.is-judged .term-order-item{padding-left:84px;}
.is-judged .term-order-item em{position:absolute;left:12px;top:50%;transform:translateY(-50%);font:800 15px/1 system-ui,sans-serif;font-style:normal;color:#ffd98a;}
.is-judged .term-order-item.is-right{border-color:#82f0c7;background:#1b635580;}
.is-judged .term-order-item.is-wrong{border-color:#ff9b9b;background:#73383e80;}
.is-judged .term-order-item::before{content:none;}
.term-order-verdict{font-size:22px!important;}
.term-order-score{text-align:center;font:800 32px/1.4 system-ui,sans-serif;color:#ffd98a;}
/* Bottom card buttons: the icon is pinned to the circle's centre, so it cannot drift on iOS. */
.flashcard-info-button svg{position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);}
/* Battle: one-line event bar — what the event does and the seconds left; a personal line only when there is one. */
.word-duel-screen.is-playing .duel-event-banner{align-items:center;gap:4px 10px;padding:8px 12px 10px;}
.duel-event-banner b{font:800 15px/1.35 system-ui,sans-serif;white-space:normal;overflow:visible;color:#fff6e4;}
.duel-event-banner[data-phase=preview] b{color:#c9d2e0;}
.duel-event-banner em{justify-self:end;padding:2px 9px;border-radius:999px;background:var(--tone,#ffdfa6);color:#0c1525;font-size:13px;}
.duel-event-banner[data-phase=preview] em{background:transparent;color:var(--tone,#ffdfa6);border:1px dashed var(--tone,#ffdfa6);}
.duel-event-banner span:empty,.duel-event-banner small{display:none;}
/* The correct answer card hides what is behind it, and wide buttons do not shrink when chosen. */
.word-duel-screen.is-playing .duel-correction{background:#123329;}
.word-duel-screen .duel-correction .duel-speak{width:30px;height:30px;flex-shrink:0;}
.word-duel-screen .duel-options button{margin:0;}
.word-duel-screen .duel-options :is(.duel-none,.duel-pass).is-selected{transform:none;}
/* Solo result: a single card; the play-time controls are hidden. */
.word-duel-screen.is-solo-result :is(.duel-clock-row,.duel-scoreboard,.duel-time-track,.duel-combo,.duel-event-banner,.duel-announce,.duel-status){display:none!important;}
.word-duel-screen.is-solo-result .duel-solo-result{margin:8dvh auto 0;width:min(100%,420px);box-sizing:border-box;padding:22px 18px;border:1px solid #ffd98a55;border-radius:22px;background:#0f1a2ce6;}
.duel-solo-result small{font-size:14px!important;letter-spacing:4px!important;}
.duel-solo-result strong{margin:6px 0 14px!important;font-size:60px!important;line-height:1.1;}
.duel-solo-result dl{display:grid;gap:8px;margin:0 0 18px;}
.duel-solo-result dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:#ffffff0d;}
.duel-solo-result dt{color:#c3cbda;font:700 13px system-ui,sans-serif;}.duel-solo-result dd{margin:0;color:#fff;font:800 14px system-ui,sans-serif;font-variant-numeric:tabular-nums;}
.duel-solo-actions{display:grid;gap:10px;}.word-duel-screen .duel-solo-actions button{width:100%;margin:0;padding:14px;font-size:15px;}
.word-duel-screen .duel-solo-actions .duel-again{background:#1b6355;border-color:#82f0c7;}
/* The correct-answer card's button rule (padding 11px) must not reach the round speaker button. */
.word-duel-screen.is-playing .duel-correction button.duel-speak{position:relative;width:32px;height:32px;padding:0;flex-shrink:0;}
.word-duel-screen .duel-correction .duel-speak svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
/* Group talk: an opaque screen, a one-line input as tall as the send button, read marks,
   achievements posted in the talk, unread dots in the list, online dots on avatars. */
html body dialog.group-chat-dialog{background:#0d1927;}
.group-chat-compose{align-items:flex-end;}
.group-chat-compose textarea{box-sizing:border-box;height:44px;min-height:44px;max-height:132px;padding:11px 14px;line-height:1.35;overflow-y:auto;}
.group-chat-compose button{box-sizing:border-box;height:44px;padding:0 18px;flex-shrink:0;}
.group-chat-meta{display:flex;align-items:flex-end;gap:6px;}
.group-chat-message.is-self .group-chat-meta{justify-content:flex-end;}
.group-chat-read{font-size:10px;color:#8de393;font-weight:700;}
.group-chat-event{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;margin:4px auto 18px;max-width:92%;padding:8px 12px;border:1px solid #ffd98a40;border-radius:14px;background:#ffd98a12;text-align:center;}
.group-chat-event p{margin:0;flex-basis:100%;font-size:13px;line-height:1.5;color:#ffe9b8;overflow-wrap:anywhere;}
.group-chat-event time{font-size:10px;color:#a7b5c6;}
.group-chat-event button{padding:2px 10px;border:1px solid #ffffff30;border-radius:999px;background:transparent;color:#fff;font-size:12px;}
.group-chat-event button[aria-pressed=true]{background:#ffd98a33;border-color:#ffd98a;}
.group-list-unread{flex-shrink:0;width:10px;height:10px;margin-left:auto;border-radius:50%;background:#06c755;box-shadow:0 0 0 3px #06c75533;}
.group-list-row.has-unread .group-list-meta{color:#5fe39a;font-weight:700;}
.has-online-dot{position:relative;overflow:visible!important;}
.online-dot{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#22c55e;border:2px solid #0d1927;box-sizing:content-box;pointer-events:none;}
/* データとバックアップ */
.data-save-state{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:#ffffff0d;}
.data-save-state strong{display:block;font-size:15px;}.data-save-state p{margin:4px 0 0;font-size:12px;color:var(--text-sub);}
.data-usage{margin-top:14px;}.data-usage summary{cursor:pointer;font-size:13px;color:var(--text-sub);}.data-usage table{width:100%;margin-top:8px;font-size:12px;}
.has-online-dot img{border-radius:50%;}
.cloud-usage-dialog .file-backup-actions h3{margin:10px 0 4px;font-size:14px;}
.cloud-usage-dialog details>summary{cursor:pointer;padding:10px 0;font-size:13px;color:var(--text-main);}
.cloud-usage-dialog .file-backup-actions div{display:flex;gap:8px;flex-wrap:wrap;}
.cloud-usage-dialog .file-backup-actions button,.cloud-usage-dialog>button[data-library-close]{padding:10px 16px;border-radius:12px;border:1px solid var(--border);background:#ffffff10;color:var(--text-main);font:inherit;font-size:13px;}
.cloud-usage-dialog>button[data-library-close]{width:100%;margin-top:14px;}
/* Talk tools: word quiz, tappable English words, the bottom sheets */
.group-chat-tool{flex-shrink:0;box-sizing:border-box;width:44px;height:44px;padding:0!important;border-radius:50%!important;background:#ffffff14!important;border:1px solid var(--border)!important;color:#ffd98a!important;font:800 16px system-ui,sans-serif!important;}
.talk-word{display:inline;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline dotted 1px;text-underline-offset:3px;cursor:pointer;}
.group-chat-message p.has-quiz{padding:12px;min-width:220px;}
.talk-quiz{display:grid;gap:8px;}
.talk-quiz-label{font-size:10px!important;letter-spacing:2px;color:#5b6b80!important;}
.talk-quiz-word{font:800 22px/1.3 'Times New Roman',serif;color:#17212b;}
.talk-quiz-options{display:grid;gap:6px;}
.talk-quiz-options button{padding:9px 10px;border:1px solid #c5ccd6;border-radius:10px;background:#fff;color:#17212b;font:600 13px/1.4 system-ui,sans-serif;text-align:left;}
.talk-quiz-options button.is-right{background:#c9f2d6;border-color:#22a35a;}
.talk-quiz-options button.is-wrong{background:#ffd6d6;border-color:#d14b4b;}
.talk-quiz-options button.is-picked{outline:2px solid #17212b;}
.talk-quiz-options button:disabled{opacity:1;}
.group-chat-message .talk-quiz-result{margin:0!important;padding:0!important;background:none!important;font-size:12px!important;color:#3b4a5c!important;}
.talk-quiz-speak{justify-self:start;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid #c5ccd6;background:#fff;}
dialog.talk-sheet{position:fixed;inset:auto 0 0 0;width:min(100%,520px);max-height:80dvh;margin:auto auto 0;box-sizing:border-box;padding:18px 16px calc(18px + env(safe-area-inset-bottom));border:1px solid var(--border);border-radius:20px 20px 0 0;background:#101d2e;color:var(--text-main);}
dialog.talk-sheet::backdrop{background:#0008;}
.talk-sheet h3{margin:0 0 6px;font-size:17px;}.talk-sheet-hint{margin:0 0 10px;font-size:12px;color:var(--text-sub);}
.talk-sheet select{width:100%;margin-bottom:10px;padding:10px;border-radius:10px;border:1px solid var(--border);background:#ffffff10;color:var(--text-main);font:inherit;}
.talk-quiz-preview{display:grid;gap:6px;margin-bottom:8px;}.talk-quiz-preview strong{font:800 22px 'Times New Roman',serif;}
.talk-quiz-preview span{padding:8px 10px;border-radius:10px;background:#ffffff0d;font-size:13px;}.talk-quiz-preview span.is-answer{background:#1b635580;border:1px solid #82f0c7;}
.talk-sheet-status{min-height:1em;margin:0 0 8px;font-size:12px;color:#ffb4a8;}
.talk-sheet-actions{display:flex;flex-wrap:wrap;gap:8px;}.talk-sheet-actions button{flex:1;min-width:30%;padding:12px;border-radius:12px;border:1px solid var(--border);background:#ffffff10;color:var(--text-main);font:inherit;font-size:14px;}
.talk-sheet-actions .talk-primary{background:#06c755;border-color:#06c755;color:#fff;font-weight:700;}
.talk-word-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}.talk-word-head strong{font:800 26px 'Times New Roman',serif;}
.talk-word-meaning{display:flex;justify-content:space-between;gap:10px;margin:0 0 8px;padding:10px 12px;border-radius:12px;background:#ffffff0d;font-size:14px;}.talk-word-meaning small{color:var(--text-sub);flex-shrink:0;}
/* Studying now (above the talk) and everyone's weak words (members tab) */
[data-chat-studying]:empty{display:none;}
.group-studying{display:flex;flex-direction:column;gap:4px;margin:0 0 8px;padding:8px 12px;border-radius:12px;background:#1b635540;border:1px solid #82f0c766;font-size:12px;color:#c9f7e2;}
.group-weak{margin:0 0 22px;}.group-weak h4{margin:0 0 8px;}
.group-weak-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px;}
.group-weak-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:8px 12px;border-radius:10px;background:#ffffff0a;}
.group-weak-list strong{font:700 15px 'Times New Roman',serif;}.group-weak-list span{font-size:13px;color:var(--text-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.group-weak-list small{color:#ffb4a8;font-weight:700;}
.group-weak-actions button{width:100%;padding:12px;border-radius:12px;border:1px solid #ffb4a8aa;background:#73383e66;color:#fff;font:inherit;font-weight:700;}.group-weak-actions button:disabled{opacity:.45;}
.group-weak-preset{margin:0 0 10px;padding:12px;border-radius:12px;background:#73383e55;border:1px solid #ffb4a8;font-weight:700;text-align:center;}
/* 声で答える: the mic toggle in the hands-free bar and what was heard */
#handsFreeVoice.is-on{border-color:#86f0b5;background:#86f0b533;}
#handsFreeVoice.is-listening{animation:none;border-color:#ffd98a;background:#ffd98a33;}
.handsfree-heard{position:absolute;left:50%;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 156px);z-index:121;max-width:calc(100% - 48px);box-sizing:border-box;padding:6px 14px;border-radius:999px;background:rgba(10,30,26,.92);border:1px solid #86f0b580;color:#e7fff4;font:700 14px/1.3 system-ui,sans-serif;transform:translateX(-50%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.handsfree-heard[hidden]{display:none;}.handsfree-heard[data-verdict=bad]{border-color:#ff9b9b;background:rgba(60,18,22,.92);}
/* Word entry: a wide, solid sheet with large fields. The meaning gets the full width; the part of
   speech (or the year in 用語・年号モード) and the remove button sit under it. */
html body dialog.vocab-entry-dialog{width:min(560px,calc(100vw - 16px));max-height:calc(100dvh - 16px);padding:18px 16px;background:#141d2a;}
.vocab-entry-dialog input:not([type=checkbox]),.vocab-entry-dialog select{min-height:52px;font-size:17px;padding:12px 14px;border-radius:12px;}
.vocab-entry-dialog textarea{min-height:96px;font-size:17px;padding:12px 14px;border-radius:12px;}
.vocab-entry-dialog label{font-size:13px;}
.vocab-entry-meaning-controls{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;}
.vocab-entry-meaning-controls>.vocab-entry-meaning-text{grid-column:1/-1;grid-row:1;}
.vocab-entry-dialog textarea.vocab-entry-meaning-text{min-height:52px;resize:none;overflow:hidden;line-height:1.4;}
textarea.inline-m-input{min-height:36px;resize:none;overflow:hidden;line-height:1.4;padding-top:7px;padding-bottom:7px;font:inherit;}
.vocab-entry-meaning-controls>select,.vocab-entry-meaning-controls>.vocab-entry-year{grid-column:1;grid-row:2;}
.vocab-entry-meaning-controls>select{min-height:40px!important;width:auto;min-width:130px;padding:8px 10px!important;font-size:14px!important;}
.vocab-entry-meaning-controls>button{grid-column:3;grid-row:2;width:40px;height:40px;}
.vocab-entry-meaning-controls>select[hidden]+button,.vocab-entry-meaning-controls>select[hidden]{grid-row:2;}
.vocab-entry-dialog.is-term-mode .vocab-entry-meaning-controls>.vocab-entry-year{width:110px;flex:none;min-height:44px;}
.vocab-entry-add-meaning{font-size:14px;}
.vocab-entry-dialog .library-editor-actions button{min-height:52px;font-size:16px;}
/* Word cards: the title row leaves room for the buttons at the top right (sticky note, and edit /
   delete when the book is editable), so a long word wraps before them instead of running under. */
.word-row-container .word-main-line{padding-right:48px!important;}
.word-row-container .word-main-line:has(.vocab-word-markers.with-admin){padding-right:128px!important;}
.word-row-container .word-main-line>div:first-child{min-width:0;}
/* When the row is narrow (a phone, with the edit buttons), the word moves under its number
   instead of splitting: it breaks between words, and inside one only if it cannot fit a line. */
.word-row-container .word-main-line>div:first-child{flex-wrap:wrap;row-gap:4px;}
.word-row-container .word-title{display:inline-flex;align-items:center;gap:8px;max-width:100%;}
.word-row-container .word-title>span{min-width:0;overflow-wrap:break-word;word-break:normal;line-height:1.35;}
.word-row-container .word-main-line .word-speak-button{flex-shrink:0;}
/* The sticky-note button matches the edit and delete buttons beside it (44 × 47 px, 24 px icon). */
.vocab-word-markers{top:8px;height:47px;}.vocab-word-markers.with-admin{right:98px;}
.word-main-line .vocab-sticky-button{width:44px;height:47px;min-height:47px;border-radius:8px;color:var(--text-sub);}
.word-main-line .vocab-sticky-button svg{width:24px;height:24px;stroke-width:2;}
.word-row-container .word-main-line{padding-right:56px!important;}
.word-row-container .word-main-line:has(.vocab-word-markers.with-admin){padding-right:148px!important;}
/* The inline editor's year box in 用語・年号モード */
.inline-year-input{flex:0 0 72px;width:72px!important;height:36px;margin:0 6px 0 0!important;text-align:center;}
/* Year answer panel: the same frosted dark glass as the card screen's round buttons, one row of
   a number field and an answer button (the field no longer takes the whole width). */
.term-answer-panel{width:min(88%,360px);gap:8px;padding:12px;border:1px solid rgba(255,255,255,.22);border-radius:22px;background:rgba(15,23,42,.72);box-shadow:0 8px 28px rgba(0,0,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.term-answer-panel label{justify-self:center;font:700 11px/1 system-ui,sans-serif;letter-spacing:.12em;color:#c7d2fe;}
.term-answer-panel div{display:flex;align-items:stretch;gap:8px;}
.term-answer-panel input{flex:1 1 auto;width:auto!important;min-width:0!important;max-width:none;height:48px;margin:0!important;padding:0 12px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.06);font:800 22px/1 system-ui,sans-serif;letter-spacing:.12em;font-variant-numeric:tabular-nums;}
.term-answer-panel input::placeholder{color:rgba(255,255,255,.32);font-weight:700;letter-spacing:.06em;}
.term-answer-panel input:focus{outline:none;border-color:#a5b4fc;box-shadow:0 0 0 3px rgba(129,140,248,.25);}
.term-answer-panel button{flex:0 0 auto;width:auto!important;height:48px;margin:0!important;padding:0 18px;border:0;border-radius:14px;background:rgba(99,102,241,.88);color:#fff;font:800 15px system-ui,sans-serif;}
.term-answer-panel button:active{transform:scale(.96);}
.term-answer-panel p{font-size:14px;}.term-answer-panel p:empty{display:none;}
.term-answer-panel[data-result=right]{border-color:rgba(134,240,181,.6);}.term-answer-panel[data-result=wrong]{border-color:rgba(255,154,138,.6);}
.term-answer-panel{grid-template-columns:minmax(0,1fr);}.term-answer-panel div{min-width:0;}.term-answer-panel input{width:0!important;}
/* App alert dialog (replaces the browser's alert) */
dialog.app-alert{width:min(340px,calc(100vw - 48px));box-sizing:border-box;padding:22px 20px 16px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:#101a2b;color:#eef2f8;box-shadow:0 18px 50px rgba(0,0,0,.5);text-align:center;}
dialog.app-alert::backdrop{background:rgba(4,8,16,.6);backdrop-filter:blur(3px);}
dialog.app-alert p{margin:0 0 18px;font:600 15px/1.7 system-ui,sans-serif;white-space:pre-line;overflow-wrap:anywhere;}
dialog.app-alert button{width:100%;min-height:46px;border:0;border-radius:14px;background:rgba(99,102,241,.9);color:#fff;font:800 15px system-ui,sans-serif;}
/* Reader: what to do when there is no API key */
.reader-key-notice{display:grid;gap:6px;margin:0 0 14px;padding:12px 14px;border:1px solid rgba(192,132,252,.45);border-radius:14px;background:rgba(192,132,252,.1);font-size:12px;line-height:1.6;color:var(--text-sub);}
.reader-key-notice strong{font-size:13px;color:#fff;}.reader-key-notice button{justify-self:start;padding:8px 14px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font:700 12px system-ui,sans-serif;}
/* Reader: the bookshelf and history use the word book list's rows (reader-shelf.js). */
.reader-shelf{padding:4px 2px 28px;color:#e7e3da;}
.reader-shelf .shelf-header .library-toolbar{flex-wrap:nowrap;gap:6px;}
.reader-shelf .shelf-header .library-toolbar button{flex:0 1 auto;min-width:0;white-space:nowrap;}
.shelf-entry > .textbook-list-item{min-height:84px;}
.shelf-entry .textbook-list-details{gap:6px;}
.shelf-entry-sub{overflow:hidden;color:#aaa397;font:600 11px/1.4 system-ui,sans-serif;text-overflow:ellipsis;white-space:nowrap;}
.shelf-entry.is-compact > .textbook-list-item{grid-template-columns:minmax(0,1fr);min-height:58px;padding:8px 4px;}
.shelf-entry.is-compact .textbook-list-name{font-size:14px;}
.reader-history-card #historyListContainer .shelf-entry:last-child{border-bottom:0;}
.shelf-history-empty{margin:0;color:var(--text-sub);font-size:12px;}
/* Reader: input */
.reader-field-label{display:block;margin-bottom:6px;color:var(--text-sub);font-size:11px;font-weight:700;}
.reader-english-input{height:150px;margin-bottom:6px!important;}
.reader-input-meta{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.reader-input-meta span{margin-right:auto;color:var(--text-sub);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;}
.reader-input-meta button{min-height:32px;padding:0 12px;border:1px solid rgba(220,211,186,.28);border-radius:16px;background:rgba(15,23,42,.32);color:#eee8da;font:600 11px/1 system-ui,sans-serif;cursor:pointer;}
.reader-input-meta button:active{background:rgba(220,211,186,.12);}
.reader-manual-ja{margin-bottom:14px;}
.reader-manual-ja summary{cursor:pointer;color:var(--text-sub);font-size:12px;font-weight:700;padding:6px 0;}
.reader-manual-ja[open] summary{margin-bottom:6px;}
/* Reader: result */
.reader-analyzing{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 16px;color:var(--cosmic-cyan);font-size:14px;font-weight:700;}
.reader-title-row{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;}
.reader-title-text{min-width:0;overflow:hidden;color:#f0ece3;font:700 16px/1.4 Georgia,"Yu Mincho",serif;text-overflow:ellipsis;white-space:nowrap;}
.reader-save-button{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 12px;border:1px solid rgba(220,211,186,.28);border-radius:16px;background:rgba(15,23,42,.32);color:#eee8da;font:600 11px/1 system-ui,sans-serif;cursor:pointer;}
.reader-save-button:active{background:rgba(220,211,186,.12);}
.reader-title-meta{display:block;margin-top:6px;color:var(--text-sub);font-size:10px;font-weight:600;}
/* Loading overlay and its quiz (was injected at runtime by several app.js patches). */
#penguinLoadingOverlay{position:fixed;top:0;left:0;width:100%;height:100%;
background:radial-gradient(circle at 50% 38%, rgba(30,27,75,0.97) 0%, rgba(15,23,42,0.985) 72%);
z-index:99998;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
opacity:0;transition:opacity .25s ease;overflow:hidden;}
#penguinLoadingOverlay.penguin-visible{opacity:1;}
#penguinLoadingOverlay.penguin-fade-out{opacity:0;}
.lq-spark{position:absolute;width:4px;height:4px;border-radius:50%;pointer-events:none;opacity:0;animation:lqSparkFloat linear infinite;}
@keyframes lqSparkFloat{0%{transform:translateY(20px) scale(.6);opacity:0;}20%{opacity:.9;}80%{opacity:.6;}100%{transform:translateY(-90vh) scale(1);opacity:0;}}
.lq-area{display:flex;flex-direction:column;align-items:center;gap:14px;z-index:2;}
.lq-score{font-size:13px;font-weight:800;color:#E2E8F0;letter-spacing:.5px;display:flex;gap:10px;align-items:center;
background:rgba(7,11,25,.55);border:1px solid rgba(0,240,255,.35);padding:6px 14px;border-radius:20px;box-shadow:0 0 12px rgba(0,240,255,.25);}
.lq-card-wrap{position:relative;width:230px;height:230px;perspective:1000px;touch-action:none;}
.lq-hint{font-size:10px;color:rgba(255,255,255,.5);font-weight:700;letter-spacing:.5px;z-index:2;}
.penguin-loading-text{font-size:13px;font-weight:800;color:#00F0FF;letter-spacing:1px;z-index:2;text-shadow:0 0 10px rgba(0,240,255,.5);display:flex;align-items:center;gap:2px;}
.pg-dot{animation:lqDotBlink 1.2s infinite;}
.pg-dot:nth-of-type(2){animation-delay:.2s;}
.pg-dot:nth-of-type(3){animation-delay:.4s;}
@keyframes lqDotBlink{0%,80%,100%{opacity:.2;}40%{opacity:1;}}
#penguinLoadingOverlay{position:fixed;top:0;left:0;width:100%;height:100%;
background:radial-gradient(circle at 50% 38%, rgba(30,27,75,0.97) 0%, rgba(15,23,42,0.985) 72%);
z-index:99998;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
opacity:0;transition:opacity .25s ease;overflow:hidden;}
#penguinLoadingOverlay.penguin-visible{opacity:1;}
#penguinLoadingOverlay.penguin-fade-out{opacity:0;}
.lq-spark{position:absolute;width:4px;height:4px;border-radius:50%;pointer-events:none;opacity:0;animation:lqSparkFloat linear infinite;}
@keyframes lqSparkFloat{0%{transform:translateY(20px) scale(.6);opacity:0;}20%{opacity:.9;}80%{opacity:.6;}100%{transform:translateY(-90vh) scale(1);opacity:0;}}
.lq-area{display:flex;flex-direction:column;align-items:center;gap:14px;z-index:2;width:min(360px,calc(100vw - 32px));}
.lq-progress{width:100%;}
.lq-progress[hidden],.lq-quiz[hidden]{display:none!important;}
.lq-progress-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;color:#E2E8F0;font-size:12px;font-weight:700;}
.lq-progress-head strong{color:#00F0FF;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(0,240,255,.45);}
.lq-progress-track{height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;}
.lq-progress-track span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#00F0FF,#C084FC);transition:width .35s ease;}
.lq-quiz{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;}
.lq-quiz-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.lq-score{margin-left:auto;background:rgba(99,102,241,0.4);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;border:1px solid var(--accent);white-space:nowrap;}
.lq-up{display:flex;align-items:center;gap:4px;color:#fff;font-size:11px;font-weight:700;}
.lq-up i,.lq-up svg{color:var(--word-so);}
.lq-stage{position:relative;width:100%;min-height:260px;display:flex;align-items:center;justify-content:center;}
.lq-side{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:900;pointer-events:none;z-index:20;}
.lq-side.is-bad{left:0;color:var(--word-bad);}
.lq-side.is-ok{right:0;color:var(--word-ok);}
.lq-card-wrap{position:relative;width:240px;height:240px;touch-action:none;-webkit-tap-highlight-color:transparent;}
.lq-card-wrap .flashcard-wrapper-3d{left:0;top:0;}
.lq-card-wrap.glow-ok .flashcard-face-front,.lq-card-wrap.glow-ok .flashcard-face-back{border-color:#10B981!important;box-shadow:0 0 30px rgba(16,185,129,.6)!important;}
.lq-card-wrap.glow-bad .flashcard-face-front,.lq-card-wrap.glow-bad .flashcard-face-back{border-color:#EF4444!important;box-shadow:0 0 30px rgba(239,68,68,.6)!important;}
.lq-card-wrap.glow-so .flashcard-face-front,.lq-card-wrap.glow-so .flashcard-face-back{border-color:#F59E0B!important;box-shadow:0 0 30px rgba(245,158,11,.6)!important;}
.lq-ratings{margin:0!important;}
.lq-hint{font-size:10px;color:rgba(255,255,255,.55);font-weight:700;letter-spacing:.5px;z-index:2;}
.lq-book-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:800;color:var(--cosmic-purple-light);background:rgba(192,132,252,0.1);border:1px solid rgba(192,132,252,0.3);padding:3px 10px;border-radius:12px;letter-spacing:0.5px;}
.lq-book-label:empty{display:none;}
#penguinLoadingOverlay.has-progress .penguin-loading-text{display:none;}
.penguin-loading-text{font-size:13px;font-weight:800;color:#00F0FF;letter-spacing:1px;z-index:2;text-shadow:0 0 10px rgba(0,240,255,.5);display:flex;align-items:center;gap:2px;}
.pg-dot{animation:lqDotBlink 1.2s infinite;}
.pg-dot:nth-of-type(2){animation-delay:.2s;}
.pg-dot:nth-of-type(3){animation-delay:.4s;}
@keyframes lqDotBlink{0%,80%,100%{opacity:.2;}40%{opacity:1;}}
.lq-ratings button[data-lq=ok]{color:#34d399}.lq-ratings button[data-lq=so]{color:#fbbf24}.lq-ratings button[data-lq=bad]{color:#fb7185}
@media (max-width:359px){.lq-side span{display:none}}
/* Reader: grammar points get a purple underline (an older rule removed every underline). */
#englishContainer .grammar-span{border-bottom:2px solid #C084FC !important;background:rgba(192,132,252,.14);border-radius:4px;padding:0 1px;margin-right:2px;}
#englishContainer .grammar-span:active{background:rgba(192,132,252,.28);}
.flashcard-detail-note{margin:0 44px 10px 2px;padding:8px 12px;border:1px solid rgba(16,185,129,.45);border-radius:10px;background:rgba(16,185,129,.12);color:#D1FAE5;font-size:13px;font-weight:700;line-height:1.5;}
.flashcard-detail-note{white-space:pre-line;}
.flashcard-detail-content.is-readonly .word-row-container{pointer-events:none;}
.flashcard-detail-content.is-readonly .word-row-container :is(.pronounce-button,.word-expand-toggle){pointer-events:auto;}
.flashcard-detail-content.is-readonly :is(.card-edit-btn,.card-delete-btn){display:none!important;}
.reader-books-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;color:var(--text-sub);font-size:11px;font-weight:700;}
.reader-books-row button{min-width:0;max-width:65%;min-height:32px;padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(220,211,186,.28);border-radius:16px;background:rgba(15,23,42,.32);color:#eee8da;font:600 11px/1 system-ui,sans-serif;cursor:pointer;}
.reader-book-choices{display:grid;gap:10px;margin:14px 0;}
.reader-book-choices label{display:flex;align-items:center;gap:10px;font-size:14px;}
.reader-book-choices input{width:18px;height:18px;flex:none;}
.shelf-entry .shelf-move{flex:0 0 34px;font-size:12px;}
.shelf-entry .shelf-move:disabled{opacity:.25;}
.library-toolbar .shelf-sort.is-on{border-color:var(--cosmic-cyan);color:#fff;}
.reader-shelf .shelf-header .library-toolbar{flex-wrap:wrap;}
.shelf-entry .shelf-move{color:#eee8da;}
.flashcard-detail-content.is-readonly .word-row-container button:not(.pronounce-button):not(.word-expand-toggle){opacity:.4;}
/* Warm-up opening: the word count grows in, then the first card appears. */
/* Admin editing mode for shared word books. */
.admin-book-editing{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:8px 8px 8px 14px;border:1px solid rgba(245,158,11,.6);border-radius:14px;background:rgba(41,25,5,.92);color:#FDE68A;font:700 11px/1.4 system-ui,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.45);}
.admin-book-editing button{flex:none;min-height:30px;padding:0 12px;border:1px solid rgba(253,230,138,.5);border-radius:10px;background:transparent;color:#FDE68A;font:700 11px system-ui,sans-serif;cursor:pointer;}
.admin-players-dialog .admin-books-button{margin-left:8px;}
html body .flash-warmup-dialog:not(.warmup-intro-playing)>.flashcard-session-screen{transition:opacity .5s ease .15s,transform .5s cubic-bezier(.2,.8,.2,1) .15s;}
/* Hidden at once while the opening plays, so the first card never shows through first. */
html body .flash-warmup-dialog.warmup-intro-playing>.flashcard-session-screen{opacity:0!important;transform:scale(.94);transition:none!important;}
@media(prefers-reduced-motion:reduce){html body .flash-warmup-dialog>.flashcard-session-screen{transition:none!important}}
/* Study tab: summary tiles, a heat-map calendar and a week chart with its average. */
.study-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:22px 0 0;padding:0;}
.study-stats div{padding:10px 4px;border:1px solid rgba(218,204,169,.14);border-radius:12px;background:rgba(255,255,255,.025);}
.study-stats dt{margin:0 0 4px;color:#a8a08f;font-size:10px;letter-spacing:.12em;}
.study-stats dd{margin:0;color:#eee8da;font:400 13px/1.3 Georgia,"Yu Mincho",serif;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.study-day{position:relative;min-height:46px;transition:background-color .3s ease,border-color .3s ease;}
.study-day small{margin-top:5px;font-size:9px;color:#d8cfb8;min-height:1.3em;}
.study-day[data-level="1"]{background:rgba(198,183,144,.12);}
.study-day[data-level="2"]{background:rgba(198,183,144,.24);}
.study-day[data-level="3"]{background:rgba(214,186,118,.38);}
.study-day[data-level="4"]{background:rgba(230,200,128,.55);color:#1c2130;}
.study-day[data-level="4"] small{color:#2a2f3e;}
.study-day.is-future{opacity:.45;}
.study-day.is-today{border-color:rgba(233,217,166,.7);box-shadow:0 0 0 1px rgba(233,217,166,.25);}
.study-day.is-selected{outline:2px solid rgba(233,217,166,.75);outline-offset:-2px;}
.study-legend{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin:10px 2px 0;color:#a8a08f;font-size:10px;}
.study-legend i{width:12px;height:12px;border-radius:3px;}
.study-legend .lv1{background:rgba(198,183,144,.12);}.study-legend .lv2{background:rgba(198,183,144,.24);}.study-legend .lv3{background:rgba(214,186,118,.38);}.study-legend .lv4{background:rgba(230,200,128,.55);}
.study-day-detail{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:10px 12px;border:1px solid rgba(218,204,169,.14);border-radius:12px;background:rgba(255,255,255,.025);}
.study-day-detail #studySelectedDay{margin:0;font-size:13px;}
.study-week-area{position:relative;}
.study-week-average{position:absolute;left:0;right:0;bottom:calc(27px + 140px * var(--avg,0));height:0;border-top:1px dashed rgba(233,217,166,.55);pointer-events:none;}
.study-week-average span{position:absolute;right:0;bottom:2px;color:#d8c690;font-size:9px;}
.study-week-value{min-height:1.3em;font-size:10px;color:#d8cfb8;}
.study-week-column.is-future .study-week-fill{opacity:.3;}
@media(prefers-reduced-motion:no-preference){
.study-week-fill{animation:studyBarGrow .6s calc(var(--i,0) * .05s) cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom;}
.study-stats div{animation:studyRise .45s cubic-bezier(.2,.8,.2,1) both;}
.study-stats div:nth-child(2){animation-delay:.05s}.study-stats div:nth-child(3){animation-delay:.1s}.study-stats div:nth-child(4){animation-delay:.15s}
}
@keyframes studyBarGrow{from{transform:scaleY(0)}to{transform:none}}
@keyframes studyRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* The value sits right on top of its bar. */
.study-week-track{flex-direction:column;justify-content:flex-end;align-items:center;overflow:visible;width:80%;}
.study-week-track .study-week-value{margin-bottom:4px;white-space:nowrap;}
.study-week-fill{width:80%;min-height:2px;}
/* Users tab: search, online and recent sections, and a line of facts under each name. */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.users-toolbar{align-items:center;gap:10px;margin:0 0 8px;}
.users-search{flex:1;min-width:0;}
.users-search input{width:100%;height:38px;box-sizing:border-box;padding:0 14px;border:1px solid rgba(218,204,169,.22);border-radius:999px;background:rgba(8,12,20,.55);color:#eee8da;font-size:14px;}
.users-search input::placeholder{color:#8f8a7e;}
.users-count{flex:none;color:#a8a08f;font-size:12px;}
.people-text{display:flex;flex-direction:column;min-width:0;text-align:left;}
.people-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px!important;opacity:1!important;font-size:11px!important;color:#a8a08f;}
.people-meta .is-online{color:#7dd3a8;font-weight:700;}
.people-today{padding:1px 8px;border-radius:999px;background:rgba(198,183,144,.14);color:#e6d6a8;}
.people-friend{padding:1px 8px;border:1px solid rgba(159,213,194,.45);border-radius:999px;color:#9fd5c2;}
#friendListContainer .people-section-heading{margin:14px 4px 2px;font-size:12px;}
@media(prefers-reduced-motion:no-preference){
#friendListContainer .people-row{animation:peopleRise .4s calc(var(--i,0) * .035s) cubic-bezier(.2,.8,.2,1) both;}
}
@keyframes peopleRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Reader sub-tabs and shelf rows, and the scrolling sidebar (were injected at runtime by app.js patches). */
.reader-subtab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0;border-radius:10px;font-size:12px;font-weight:900;letter-spacing:1px;cursor:pointer;transition:all 0.25s ease;border:1px solid rgba(255,255,255,0.15);background:rgba(7,11,25,0.6);color:var(--text-sub);-webkit-tap-highlight-color:transparent;}
.reader-subtab-btn.reader-subtab-active{border-color:var(--cosmic-cyan);background:linear-gradient(135deg, rgba(0,240,255,0.25) 0%, rgba(192,132,252,0.25) 100%);color:#FFFFFF;box-shadow:0 0 15px rgba(0,240,255,0.35);text-shadow:0 0 8px rgba(0,240,255,0.5);}
.shelf-book-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);margin-bottom:8px;cursor:pointer;transition:all 0.2s ease;}
.shelf-book-row:active{transform:scale(0.98);border-color:var(--cosmic-cyan);background:rgba(0,240,255,0.08);}
.shelf-item-row{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.05);padding:10px 14px;border-radius:8px;margin-bottom:8px;}
@keyframes shelfSlideInFromRight{0%{opacity:0;transform:translateX(50px);}100%{opacity:1;transform:translateX(0);}}
@keyframes shelfSlideInFromLeft{0%{opacity:0;transform:translateX(-50px);}100%{opacity:1;transform:translateX(0);}}
.shelf-slide-from-right{animation:shelfSlideInFromRight 0.3s cubic-bezier(0.25,1,0.5,1) forwards;}
.shelf-slide-from-left{animation:shelfSlideInFromLeft 0.3s cubic-bezier(0.25,1,0.5,1) forwards;}
#sidebarMenu{overflow-y:auto !important;-webkit-overflow-scrolling:touch;box-sizing:border-box;padding-bottom:96px !important;}
#sidebarMenu > *{flex-shrink:0 !important;}
#sidebarMenu::-webkit-scrollbar{width:4px;}
#sidebarMenu::-webkit-scrollbar-track{background:transparent;}
#sidebarMenu::-webkit-scrollbar-thumb{background:rgba(0,240,255,0.35);border-radius:2px;}
/* Quieter primary buttons and no glow from the closed menu at the screen edge. */
html body .modern-btn{border:1px solid rgba(213,201,172,.45)!important;border-image:none!important;background:rgba(15,22,36,.85)!important;box-shadow:none!important;}
html body .modern-btn:active{box-shadow:0 0 0 3px rgba(213,201,172,.18)!important;}
.sidebar:not(.open){box-shadow:none!important;}
.sidebar{border-image:none!important;border-right:1px solid rgba(213,201,172,.18)!important;}.sidebar.open{box-shadow:8px 0 30px rgba(0,0,0,.35)!important;}
/* Flashcard settings: one quiet accent instead of alternating cyan and purple. */
.book-flashcard-dialog{border-color:rgba(213,201,172,.3)!important;}
#flashcard-setup-screen>div{border-color:rgba(213,201,172,.2)!important;}
#flashcard-setup-screen div[style*="font-size:11px"]{color:#c6b790!important;letter-spacing:.04em;}
#flashcard-setup-screen .pill-btn.active{background:#c6b790;border-color:#c6b790;color:#18202d;}
#flashcard-setup-screen .modern-btn,#flashcard-setup-screen button[onclick*="startFlashcard"]{border-image:none!important;}
.library-editor-eyebrow:empty,.vocab-library-kicker:empty{display:none!important;}
/* Word battle inside the users tab. */
#communityBattle .battle-mode-grid{height:auto;padding:18px 0 8px;}
#communityBattle #view-battle{min-height:0;}
/* On a phone with the edit buttons, the word stays beside its number: the 付箋, edit and
   delete buttons get smaller instead (30 px wide, 18 px icons), and the speaker moves under the
   word when the line is still too short. */
@media(max-width:430px){
.word-row-container .word-main-line:has(.vocab-word-markers.with-admin){padding-right:98px!important;}
.word-row-container :is(.card-edit-btn,.card-delete-btn){width:30px;height:40px;padding:0!important;display:inline-grid;place-items:center;}
.word-row-container :is(.card-edit-btn,.card-delete-btn) svg{width:18px;height:18px;}
.word-row-container .vocab-word-markers.with-admin{right:72px;top:8px;height:40px;}
.word-row-container .vocab-word-markers.with-admin .vocab-sticky-button{width:30px;height:40px;min-height:40px;}
.word-row-container .vocab-word-markers.with-admin .vocab-sticky-button svg{width:18px;height:18px;}
.word-row-container .word-main-line:has(.vocab-word-markers.with-admin) .word-title{flex:1 1 0%;min-width:min-content;flex-wrap:wrap;row-gap:4px;}
.word-row-container .word-main-line:has(.vocab-word-markers.with-admin)>div:first-child{align-items:flex-start!important;}
.word-row-container .word-main-line:has(.vocab-word-markers.with-admin) .word-num-badge{margin-top:3px;}
}
/* 目次: the units like a book's contents, each opening its words; editors change a unit in place. */
.vocab-unit-toc{list-style:none;margin:0 0 12px;padding:0;max-height:60dvh;overflow:auto;}
.vocab-unit-toc li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--border);}
.vocab-unit-toc li.is-current .vocab-unit-toc-open strong{color:#e4cc91;}
.vocab-unit-toc-open{flex:1;min-width:0;display:grid;gap:2px;padding:10px 4px;border:0;background:none;color:var(--text-main);text-align:left;cursor:pointer;}
.vocab-unit-toc-open strong{font-size:15px;overflow-wrap:anywhere;}.vocab-unit-toc-open small{font-size:11px;color:var(--text-sub);}
.vocab-unit-toc-edit{flex-shrink:0;padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-sub);font-size:12px;}
.vocab-unit-toc-form{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px;padding:4px 0 10px;font-size:11px;color:var(--text-sub);}
.vocab-unit-toc-form label{display:grid;gap:3px;}
.vocab-unit-toc-form input{width:70px;box-sizing:border-box;padding:7px;border:1px solid var(--border);border-radius:8px;background:rgba(15,23,42,.7);color:#fff;font-size:16px;}
.vocab-unit-toc-form input[data-unit-edit-name]{width:min(100%,220px);}
.vocab-unit-toc-form button{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.06);color:#fff;font-size:12px;}
.vocab-unit-toc-form button[type=submit]{border-color:var(--accent);background:rgba(99,102,241,.3);font-weight:700;}
.vocab-unit-toc-empty{font-size:13px;color:var(--text-sub);}
.vocab-unit-toc-button strong{color:#e4cc91;}
/* Seldom-used meanings: under the main ones, smaller and quieter, each still with its own rating. */
.vocab-minor-heading{margin:8px 0 4px;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text-sub);}
.vocab-meaning-minor .vocab-meaning-text{font-size:12px!important;font-weight:500!important;color:#d6d3cb!important;}
.vocab-meaning-minor button{width:22px!important;height:22px!important;}
.inline-minor-input{display:flex;align-items:center;gap:6px;flex-basis:100%;margin-top:6px;font-size:11px;color:var(--text-sub);}
.vocab-entry-minor{display:flex!important;align-items:center;gap:6px;margin:4px 0 0;font-size:12px;color:var(--text-sub);}
.vocab-entry-minor input{width:auto!important;margin:0;}
/* 用語・年号モード questions: the headword, a year and the blank never split across lines, and a
   line does not start with a closing bracket or small kana. */
.term-text{line-break:strict;word-break:normal!important;overflow-wrap:break-word!important;}
.term-keep{white-space:nowrap;}
mark.term-mark:not(.is-rated){box-shadow:inset 0 -1px 0 rgba(228,204,145,.6);border-radius:0;}

/* A meaning's part of speech, small before its text. */
.vocab-meaning-pos{display:inline-block;margin-right:6px;padding:0 5px;border:1px solid rgba(255,255,255,.35);border-radius:5px;font-size:10px;font-weight:700;line-height:16px;color:#d6dbe6;vertical-align:2px;}
/* Links to other words (同義語・反意語・関連): tap one to open that word's card. */
.vocab-word-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 10px;}
.vocab-link-kind{font-size:11px;font-weight:700;color:#c9c2b0;}
.vocab-link-kind:not(:first-child){margin-left:6px;}
.vocab-link{min-height:28px;padding:2px 10px;border:1px solid rgba(226,207,155,.55);border-radius:999px;background:rgba(226,207,155,.1);color:#f3e9cf;font:600 13px system-ui,sans-serif;cursor:pointer;}
.inline-links{margin-bottom:12px;}
.inline-links-title{margin:0 0 4px;font-size:11px;font-weight:700;color:var(--text-sub);}
.inline-links-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.inline-link-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 10px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:12px;}
.inline-link-chip button{width:24px;height:24px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:inherit;cursor:pointer;}
.inline-links-add{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center;}
.inline-links-add select{height:36px;}
.inline-links-add .inline-link-input{margin:0;height:36px;}
.inline-links-add button{height:36px;padding:0 12px;}
.inline-links-message{min-height:1em;margin:4px 0 0;font-size:11px;color:#fca5a5;}
.inline-links-message:empty{display:none;}
.vocab-entry-dialog.is-term-mode .vocab-entry-meaning-controls>select{grid-column:2;justify-self:start;}
/* 用語・年号モード rows: the description on its own line, then year, part of speech and delete. */
.is-term-row textarea.inline-m-input{flex:1 1 100%!important;order:-1;margin-bottom:6px!important;}
.inline-links-add select{height:36px;padding:0 6px;border:1px solid var(--border);border-radius:9px;background:#111827;color:#fff;font-size:14px;}
.inline-links-add button{border:1px solid var(--border);background:rgba(255,255,255,.08);color:#fff;border-radius:9px;}

/* The add form: a numbered box per meaning, part of speech as one-tap chips, and a preview of
   the cards it makes. */
.vocab-entry-meaning{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.vocab-entry-meaning-head{display:grid;grid-template-columns:22px minmax(0,1fr) 36px;gap:6px;align-items:start;}
.vocab-entry-meaning-no{padding-top:14px;font-size:13px;font-weight:700;color:#c9c2b0;text-align:center;}
.vocab-entry-dialog textarea.vocab-entry-meaning-text{min-height:48px;}
.vocab-entry-remove{width:36px;height:48px;border:0;background:transparent;color:#c5bda9;font-size:20px;cursor:pointer;}
.vocab-entry-remove[hidden]{visibility:hidden;display:block;}
.vocab-entry-tools{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0 28px;}
.vocab-entry-pos{display:flex;flex-wrap:wrap;gap:6px;}
.vocab-entry-chip{min-width:36px;min-height:34px;padding:0 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:transparent;color:#d6dbe6;font:600 14px system-ui,sans-serif;cursor:pointer;}
.vocab-entry-chip[aria-pressed=true]{border-color:#e2cf9b;background:#e2cf9b;color:#1b2333;}
.vocab-entry-wrap{border-style:dashed;}
.vocab-entry-preview{display:flex;flex-direction:column;gap:2px;margin:8px 0 0 28px;font-size:12px;color:#cfc8ba;}
.vocab-entry-preview:empty{display:none;}
.vocab-entry-preview-label{font-size:11px;font-weight:700;color:#9ea6b5;}
.vocab-entry-preview-card b{color:#f3e9cf;font-weight:700;}
.vocab-entry-dup{margin:4px 0 0;font-size:12px;color:#f3c77a;}
.vocab-entry-dup:empty{display:none;}

/* メモ and the rating history on one line at the foot of a word card. */
.vocab-note-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.vocab-note-head .vocab-note-toggle{flex:none;}
.vocab-note-head [data-vocab-history]{margin-top:0!important;padding-top:0!important;border-top:0!important;flex:0 1 auto;min-width:0;}
.word-row-container .vocab-note-section{margin-top:6px;}

/* The headword in a 用語・年号モード card, bold against the rest. */
.term-text b.term-head{font-weight:900;}