*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root {
  --bg:        #F5F0E8;
  --bg-2:      #EDE8E0;
  --bg-3:      #CAC9B7;
  --bg-card:   #FFFFFF;
  --border:    rgba(94,94,74,0.12);
  --border-2:  rgba(94,94,74,0.24);
  --text:      #1C1C1E;
  --text-2:    #3A3A2E;
  --text-3:    #A2A28C;
  --accent:    #1C1C1E;
  --accent-2:  rgba(200,230,50,0.09);
  --accent-3:  rgba(200,230,50,0.20);
  --lime:      #C8E632;
  --lavender:  #C8E632;
  --sand-dark: #5E5E4A;
  --sand-mid:  #A2A28C;
  --font-serif: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'SFMono-Regular', 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;
  --font-ui:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  --radius-win: 16px;
  --tracking-tightest:-0.05em;
  --tracking-tight:-0.022em;
  --tracking-normal:-0.011em;
  --leading-copy:1.55;
}

html,body {
  width:100%; height:100%; overflow:hidden;
  font-family: var(--font-ui);
  font-weight:500;
  letter-spacing:var(--tracking-normal);
  line-height:var(--leading-copy);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  user-select: none;
}

input,textarea,select,button { font: inherit; letter-spacing: inherit; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
}

/* WALLPAPER */
#desktop {
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 18% 16%, rgba(236,45,140,0.10) 0%, transparent 62%),
    radial-gradient(ellipse 58% 46% at 86% 78%, rgba(255,182,213,0.18) 0%, transparent 60%),
    linear-gradient(160deg, #FFFFFF 0%, #FFF7FB 48%, #FDEBF4 100%);
  overflow:hidden;
}
#desktop::before,#desktop::after { display:none; }
.blob1,.blob2,.blob3 { display:none; }

/* MENU BAR */
#menubar {
  position:fixed; top:0; left:0; right:0; height:30px; z-index:1000;
  background: rgba(245,240,232,0.82);
  backdrop-filter: blur(32px) saturate(2);
  -webkit-backdrop-filter: blur(32px) saturate(2);
  border-bottom: 1px solid rgba(94,94,74,0.08);
  display:flex; align-items:center; padding:0 14px; gap:0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
}
.mb-apple {
  font-size:13px; color: var(--accent); margin-right:8px; cursor:default;
  display:flex; align-items:center; font-weight:900; letter-spacing:-0.02em;
}
.mb-app-name {
  font-size:12px; font-weight:700; color: var(--text); margin-right:4px;
  letter-spacing:var(--tracking-normal);
}
.mb-menu { display:flex; gap:0; align-items:center; }
.mb-item {
  font-size:12px; font-weight:600; color: var(--text-2); padding:0 9px; height:30px;
  display:flex; align-items:center; cursor:pointer; border-radius:5px;
  transition: background .1s, color .1s;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mb-item:hover, .mb-item:active { background: rgba(5,5,23,0.07); color: var(--text); }
.mb-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.mb-icon { font-size:12px; color: var(--text-3); cursor:default; }
#mb-clock {
  font-family: var(--font-ui); font-size:12px; font-weight:700; color: var(--text-2);
  letter-spacing:-0.01em;
}

/* WIDGETS */
.widget {
  position:absolute;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius:20px;
  backdrop-filter: blur(40px) saturate(2);
  -webkit-backdrop-filter: blur(40px) saturate(2);
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 6px 28px rgba(5,5,23,0.09),
    0 1px 3px rgba(5,5,23,0.05);
  transition: transform .18s cubic-bezier(.34,1.3,.64,1), box-shadow .18s;
}
.widget:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 12px 36px rgba(5,5,23,0.12),
    0 2px 6px rgba(5,5,23,0.07);
}
#wg-clock { top:48px; right:20px; width:168px; padding:18px 18px 16px; text-align:center; }
.wg-clock-time { font-family:var(--font-ui); font-size:48px; font-weight:900; color:var(--text); line-height:1; letter-spacing:-0.05em; }
.wg-clock-time em { color:var(--lime); font-style:normal; }
.wg-clock-date { font-size:10px; color:var(--text-3); margin-top:5px; font-family:var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; }
.wg-clock-lang { margin-top:9px; font-size:10px; color:var(--accent); font-family:var(--font-ui); font-weight:700; background:var(--accent-2); border:1px solid var(--accent-3); border-radius:20px; padding:3px 10px; display:inline-block; }
#wg-streak { top:48px; right:204px; width:152px; padding:16px; }
.wg-streak-n { font-family:var(--font-ui); font-size:38px; font-weight:900; color:var(--lime); line-height:1; letter-spacing:-0.03em; }
.wg-streak-fire { font-size:20px; margin-left:4px; }
.wg-streak-label { font-size:9px; color:var(--text-3); margin-top:4px; font-family:var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; }
.wg-streak-sub { font-size:11px; color:var(--text-2); margin-top:7px; line-height:1.4; }
#wg-today { top:48px; right:372px; width:210px; padding:16px 18px; }
.wg-today-label { font-size:9px; font-family:var(--font-mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; }
.wg-today-title { font-family:var(--font-ui); font-size:17px; font-weight:650; color:var(--text); line-height:1.2; letter-spacing:var(--tracking-normal); margin-bottom:5px; }
.wg-today-meta { font-size:10px; color:var(--text-3); font-family:var(--font-mono); display:flex; gap:8px; margin-top:5px; flex-wrap:wrap; }
.wg-today-badge { display:inline-flex; align-items:center; gap:4px; font-size:9px; font-family:var(--font-mono); color:var(--accent); background:var(--accent-2); border:1px solid var(--accent-3); border-radius:20px; padding:2px 8px; margin-top:8px; letter-spacing:0.06em; }
.wg-today-prog { margin-top:10px; height:2px; background:rgba(202,201,183,0.20); border-radius:2px; overflow:hidden; }
.wg-today-prog-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--lime)); border-radius:2px; width:68%; }
#wg-vocab { top:278px; right:20px; width:168px; padding:16px; }
.wg-vocab-label { font-size:9px; font-family:var(--font-mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:10px; }
.wg-vocab-word { font-family:var(--font-ui); font-size:22px; font-weight:650; color:var(--text); line-height:1.15; letter-spacing:var(--tracking-tight); margin-bottom:3px; }
.wg-vocab-lang { font-size:9px; color:var(--text-3); font-family:var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:7px; }
.wg-vocab-trans { font-size:12px; color:var(--accent); margin-bottom:5px; font-weight:700; }
.wg-vocab-ex { font-size:10px; color:var(--text-3); line-height:1.5; font-style:italic; }
.wg-vocab-next { margin-top:10px; width:100%; background:var(--lime); border:none; border-radius:10px; padding:7px; font-size:11px; font-family:var(--font-ui); font-weight:800; color:#1C1C1E; cursor:pointer; transition:opacity .15s; text-align:center; box-shadow:0 2px 8px rgba(200,230,50,0.22); }
.wg-vocab-next:hover { opacity:0.88; }

/* DOCK */
#dock-wrap {
  position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
  z-index:999;
}
#dock {
  display:flex; align-items:flex-end; gap:6px;
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(48px) saturate(2.2);
  -webkit-backdrop-filter: blur(48px) saturate(2.2);
  border: 1px solid rgba(255,255,255,0.78);
  border-radius:24px; padding:9px 14px 9px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 10px 36px rgba(5,5,23,0.16),
    0 2px 8px rgba(5,5,23,0.08);
}
.di {
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer; position:relative;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.di:hover { transform: translateY(-14px) scale(1.18); }
.di-icon {
  width:52px; height:52px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; position:relative; transition:inherit;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 4px 16px rgba(5,5,23,0.24);
}
.di-label {
  position:absolute; bottom:-22px;
  font-size:11px; font-weight:700; font-family:var(--font-ui);
  white-space:nowrap; pointer-events:none;
  background: rgba(5,5,23,0.82); color:#fff;
  padding:3px 9px; border-radius:7px;
  opacity:0; transition:opacity .12s;
}
.di:hover .di-label { opacity:1; }
.di-dot {
  width:4px; height:4px; border-radius:50%;
  background: var(--lime); position:absolute; bottom:-10px; left:50%;
  transform:translateX(-50%); display:none;
}
.di.open .di-dot { display:block; }
.di-sep {
  width:1px; height:44px; background: rgba(94,94,74,0.16);
  margin:0 3px; align-self:center;
}
.di-icon.curriculum { background: linear-gradient(145deg,#C8E632,#99B329); }
.di-icon.flashcards  { background: linear-gradient(145deg,#1C1C1E,#7a6bc0); }
.di-icon.progress    { background: linear-gradient(145deg,#C8E632,#a8c050); }
.di-icon.schedule    { background: linear-gradient(145deg,#5E5E4A,#3a3a2e); }
.di-icon.notes       { background: linear-gradient(145deg,#CAC9B7,#8a8a74); }
.di-icon.dictionary  { background: linear-gradient(145deg,#1C1C1E,#6a5cc0); }
.di-icon.games       { background: linear-gradient(145deg,#C8E632,#C8E632); }
.di-icon.settings    { background: linear-gradient(145deg,#3A3A2E,#1C1C1E); }

/* ═══════════════════════════ WINDOWS ═══════════════════════════ */
.win {
  position:fixed; border-radius:var(--radius-win); overflow:hidden;
  background: rgba(250,250,246,0.96);
  border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  box-shadow:
    0 0 0 1px rgba(94,94,74,0.08),
    0 20px 56px rgba(5,5,23,0.18),
    0 4px 14px rgba(5,5,23,0.08),
    0 1px 0 rgba(255,255,255,0.9) inset;
  display:none; flex-direction:column; z-index:100;
  min-width:480px; min-height:320px;
  transition: opacity .18s, transform .18s;
}
.win-resize-handle {
  position:absolute;
  right:0;
  bottom:0;
  width:20px;
  height:20px;
  cursor:nwse-resize;
  z-index:4;
  opacity:0;
  transition:opacity .15s ease;
}
.win::after {
  content:'';
  position:absolute;
  right:6px;
  bottom:6px;
  width:10px;
  height:10px;
  border-right:2px solid rgba(94,94,74,0.28);
  border-bottom:2px solid rgba(94,94,74,0.28);
  border-bottom-right-radius:4px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.win.open { display:flex; }
.win:hover .win-resize-handle,
.win:hover::after { opacity:1; }
.win.appear { animation: winAppear .22s cubic-bezier(.34,1.3,.64,1); }
@keyframes winAppear {
  from { opacity:0; transform:scale(0.92); }
  to   { opacity:1; transform:scale(1); }
}
.win-titlebar {
  height:40px; display:flex; align-items:center; padding:0 14px; gap:0;
  background: rgba(242,242,236,0.92);
  border-bottom: 1px solid rgba(94,94,74,0.07);
  cursor:default; flex-shrink:0; position:relative;
  -webkit-app-region: drag;
}
.win-controls { display:flex; gap:8px; align-items:center; z-index:1; }
.tl {
  width:12px; height:12px; border-radius:50%; cursor:pointer;
  transition:filter .12s, transform .12s; flex-shrink:0;
}
.tl.close  { background:#ff5f57; box-shadow:0 0 0 0.5px rgba(0,0,0,0.18); }
.tl.min    { background:#febc2e; box-shadow:0 0 0 0.5px rgba(0,0,0,0.18); }
.tl.max    { background:#28c840; box-shadow:0 0 0 0.5px rgba(0,0,0,0.18); }
.win-controls:hover .tl { filter:brightness(1.08); }
.win-title {
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:13px; font-weight:650; color: var(--text-2); white-space:nowrap;
  letter-spacing:var(--tracking-normal); opacity:0.8;
}
.win-body { flex:1; overflow:hidden; display:flex; }
.win-sidebar {
  width:200px; flex-shrink:0;
  background: rgba(245,240,232,0.60);
  border-right: 1px solid rgba(94,94,74,0.08);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.win-main {
  flex:1; overflow-y:auto; overflow-x:hidden;
  background: rgba(255,255,255,0.80);
}

/* sidebar items */
.sb-section-label {
  font-size:10px; font-family: var(--font-mono); letter-spacing:0.12em;
  text-transform:uppercase; color: var(--text-3);
  padding:16px 14px 6px; font-weight:600;
}
.sb-item {
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  font-size:13px; font-weight:600; color: var(--text-2); cursor:pointer;
  border-radius:12px; margin:2px 6px;
  transition: background .15s, color .15s;
}
.sb-item:hover { background: rgba(200,230,50,0.08); color: var(--accent); }
.sb-item.active {
  background: rgba(200,230,50,0.13); color: var(--accent);
}
.sb-item-ic { font-size:15px; flex-shrink:0; width:20px; text-align:center; }
.sb-item-badge {
  margin-left:auto; font-size:10px; font-family: var(--font-ui);
  background: var(--accent); color: #fff; border-radius:10px;
  padding:1px 8px; font-weight:800;
}

/* scrollbar */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(94,94,74,0.18); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(94,94,74,0.32); }

/* focus styles */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ═══════════════════════════ CURRICULUM APP ═══════════════════════════ */
#win-curriculum { top:60px; left:60px; width:820px; height:580px; }
.curr-header {
  padding:20px 24px 0;
}
.curr-eyebrow {
  font-size:10px; font-family: var(--font-mono); letter-spacing:0.12em;
  text-transform:uppercase; color: var(--text-3); margin-bottom:6px;
}
.curr-title {
  font-family: var(--font-ui); font-size:26px; font-weight:900;
  color: var(--text); line-height:1.2; letter-spacing:-0.04em;
}
.curr-title em { font-style:normal; color: var(--accent); }
.curr-search {
  margin:16px 24px 0;
  display:flex; align-items:center; gap:10px;
  background: rgba(200,230,50,0.05); border: 1px solid var(--border);
  border-radius:14px; padding:9px 16px;
}
.curr-search input {
  flex:1; background:none; border:none; outline:none;
  font-size:13px; font-weight:600; color: var(--text); font-family: var(--font-ui);
}
.curr-search input::placeholder { color: var(--text-3); font-weight:500; }
.curr-search-ic { font-size:14px; color: var(--text-3); }
.curr-tabs {
  display:flex; gap:4px; padding:14px 24px 0; flex-shrink:0;
  border-bottom: 1px solid var(--border);
}
.curr-tab {
  font-size:12px; font-family: var(--font-ui); font-weight:700; letter-spacing:0.01em;
  padding:6px 16px; border-radius:20px; cursor:pointer; color: var(--text-3);
  transition: background .15s, color .15s;
}
.curr-tab:hover { background: rgba(200,230,50,0.08); color: var(--text-2); }
.curr-tab.active {
  background: var(--accent); color: #fff;
}
.curr-grid {
  display:grid; grid-template-columns: repeat(2, 1fr); gap:14px;
  padding:20px 24px;
}
.lesson-card {
  background: #fff; border: 1.5px solid rgba(200,230,50,0.10);
  border-radius:16px; padding:18px; cursor:pointer;
  transition: box-shadow .18s, border-color .18s, transform .18s;
  position:relative; overflow:hidden;
  box-shadow: 0 2px 10px rgba(200,230,50,0.06);
}
.lesson-card:hover {
  border-color: rgba(200,230,50,0.30);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(94,94,74,0.14);
}
.lesson-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, #C8E632, var(--accent), var(--lavender));
  opacity:0; transition:opacity .18s;
}
.lesson-card:hover::before { opacity:1; }
.lc-lang {
  font-size:10px; font-family: var(--font-ui); font-weight:800; letter-spacing:0.04em;
  text-transform:uppercase; color: var(--accent);
  background: var(--accent-2); border: 1px solid var(--accent-3);
  border-radius:20px; padding:3px 10px; display:inline-block; margin-bottom:10px;
}
.lc-title {
  font-family: var(--font-ui); font-size:16px; font-weight:800;
  color: var(--text); line-height:1.3; margin-bottom:6px; letter-spacing:-0.01em;
}
.lc-desc {
  font-size:12px; color: var(--text-3); line-height:1.6; margin-bottom:12px; font-weight:500;
}
.lc-meta {
  display:flex; gap:12px; align-items:center;
}
.lc-level {
  font-size:10px; font-family: var(--font-mono); padding:2px 8px;
  border-radius:4px; font-weight:600;
}
.lc-level.a1 { background:rgba(110,201,138,.12); color:#6ec98a; }
.lc-level.a2 { background:rgba(96,165,250,.12); color:#60a5fa; }
.lc-level.b1 { background:rgba(245,158,11,.12); color:#f59e0b; }
.lc-level.b2 { background:rgba(28,28,30,.12); color:#1C1C1E; }
.lc-level.c1 { background:rgba(200,230,50,.12); color:#C8E632; }
.lc-dur {
  font-size:10px; color: var(--text-3); font-family: var(--font-mono);
}
.lc-prog {
  margin-top:10px; height:2px; background: rgba(202,201,183,0.15); border-radius:1px;
}
.lc-prog-fill {
  height:100%; background: linear-gradient(90deg, #C8E632, var(--accent));
  border-radius:1px; transition:width .4s;
}

/* ═══════════════════════════ FLASHCARDS APP ═══════════════════════════ */
#win-flashcards { top:80px; left:200px; width:600px; height:500px; }
.fc-wrap {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:32px; gap:24px; height:100%;
}
.fc-progress-bar {
  width:100%; max-width:420px; height:3px;
  background: rgba(202,201,183,0.15); border-radius:2px; overflow:hidden;
}
.fc-progress-fill {
  height:100%; background: linear-gradient(90deg, #C8E632, var(--accent));
  border-radius:2px; transition:width .4s;
}
.fc-counter {
  font-size:11px; font-family: var(--font-mono); color: var(--text-3);
  letter-spacing:0.06em; align-self:flex-end; margin-top:-14px;
}
.fc-scene {
  perspective:1200px; width:380px; height:220px; cursor:pointer;
}
.fc-card {
  width:100%; height:100%; position:relative;
  transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.fc-card.flipped { transform:rotateY(180deg); }
.fc-face {
  position:absolute; inset:0; border-radius:16px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:28px; text-align:center;
}
.fc-front {
  background: linear-gradient(145deg, #fff 0%, #FFFFFF 100%);
  border: 1.5px solid rgba(200,230,50,0.16);
  box-shadow: 0 4px 20px rgba(200,230,50,0.10);
}
.fc-back {
  background: linear-gradient(145deg, rgba(200,230,50,0.18) 0%, rgba(28,28,30,0.08) 100%);
  border: 1.5px solid rgba(94,94,74,0.20);
  box-shadow: 0 4px 20px rgba(94,94,74,0.14);
  transform:rotateY(180deg);
}
.fc-card-lang {
  font-size:9px; font-family: var(--font-mono); letter-spacing:0.12em;
  text-transform:uppercase; color: var(--text-3); margin-bottom:12px;
}
.fc-card-word {
  font-family: var(--font-ui); font-size:34px; font-weight:600;
  color: var(--text); line-height:1.1; margin-bottom:8px;
}
.fc-card-hint { font-size:12px; color: var(--text-3); font-style:italic; }
.fc-card-trans {
  font-family: var(--font-ui); font-size:22px; font-weight:600;
  color: var(--accent); margin-bottom:10px;
}
.fc-card-ex { font-size:12px; color: var(--text-2); line-height:1.6; font-style:italic; }
.fc-card-tap { font-size:10px; color: var(--text-3); margin-top:12px; font-family: var(--font-mono); }
.fc-btns {
  display:flex; gap:12px; align-items:center;
}
.fc-btn {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-family: var(--font-mono); letter-spacing:0.06em;
  padding:9px 20px; border-radius:10px; cursor:pointer;
  transition: background .15s, transform .1s; border:none;
  font-weight:500;
}
.fc-btn:active { transform:scale(0.96); }
.fc-btn.again { background:rgba(248,113,113,.12); color:#f87171; }
.fc-btn.hard  { background:rgba(245,158,11,.12); color:#f59e0b; }
.fc-btn.good  { background:rgba(110,201,138,.12); color:#6ec98a; }
.fc-btn.easy  { background:rgba(28,28,30,.12); color:#1C1C1E; }
.fc-set-picker {
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  max-width:400px;
}
.fc-set {
  font-size:12px; font-family: var(--font-ui); font-weight:700; padding:6px 16px;
  border-radius:20px; cursor:pointer; border: 1.5px solid rgba(200,230,50,0.16);
  color: var(--text-3); background: #fff;
  transition: background .15s, border-color .15s, color .15s;
}
.fc-set:hover { background: rgba(200,230,50,0.06); color: var(--accent); border-color: var(--accent); }
.fc-set.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ═══════════════════════════ PROGRESS APP ═══════════════════════════ */
#win-progress { top:70px; left:120px; width:680px; height:520px; }
.prog-body { padding:24px; display:flex; flex-direction:column; gap:20px; overflow-y:auto; }
.prog-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.prog-stat {
  background: #fff; border: 1.5px solid rgba(94,94,74,0.12);
  border-radius:16px; padding:16px 14px;
  display:flex; flex-direction:column; gap:4px;
  box-shadow: 0 2px 10px rgba(200,230,50,0.06);
}
.prog-stat-n {
  font-family: var(--font-ui); font-size:32px; font-weight:900;
  color: var(--text); line-height:1; letter-spacing:-0.02em;
}
.prog-stat-n em { color: var(--accent); font-style:normal; }
.prog-stat-l {
  font-size:10px; font-family: var(--font-ui); font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; color: var(--text-3); margin-top:2px;
}
.prog-section-title {
  font-family: var(--font-ui); font-size:18px; font-weight:900;
  color: var(--text); margin-bottom:10px; letter-spacing:-0.02em;
}
.prog-section-title em { color: var(--accent); font-style:normal; }
.prog-langs { display:flex; flex-direction:column; gap:10px; }
.prog-lang-row {
  display:flex; align-items:center; gap:12px;
}
.prog-lang-name {
  font-size:13px; color: var(--text-2); width:90px; flex-shrink:0;
}
.prog-lang-bar {
  flex:1; height:6px; background: rgba(202,201,183,0.12); border-radius:3px; overflow:hidden;
}
.prog-lang-fill {
  height:100%; border-radius:3px;
  background: linear-gradient(90deg, #C8E632, var(--accent));
}
.prog-lang-pct {
  font-size:11px; font-family: var(--font-mono); color: var(--text-3); width:36px;
  text-align:right;
}
.prog-activity {
  display:flex; flex-direction:column; gap:6px;
}
.prog-week {
  display:flex; gap:4px; align-items:flex-end;
}
.prog-day-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
.prog-bar-wrap {
  height:80px; display:flex; align-items:flex-end; width:100%;
}
.prog-bar {
  width:100%; border-radius:4px 4px 0 0;
  background: linear-gradient(180deg, var(--accent), #C8E632);
  min-height:4px; transition:height .4s;
}
.prog-day-label {
  font-size:9px; font-family: var(--font-mono); color: var(--text-3);
  letter-spacing:0.06em; text-transform:uppercase;
}
.prog-achievements {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.prog-ach {
  background: #fff; border: 1.5px solid rgba(94,94,74,0.12);
  border-radius:14px; padding:14px; display:flex; flex-direction:column; align-items:center;
  gap:6px; text-align:center; box-shadow: 0 2px 8px rgba(200,230,50,0.06);
}
.prog-ach-ic { font-size:24px; }
.prog-ach-name { font-size:12px; color: var(--text-2); font-weight:600; }
.prog-ach-desc { font-size:10px; color: var(--text-3); line-height:1.4; font-family: var(--font-mono); }
.prog-ach.locked { opacity:0.4; }

/* ═══════════════════════════ SCHEDULE APP ═══════════════════════════ */
#win-schedule { top:90px; left:80px; width:700px; height:540px; }
.sch-body { padding:0; display:flex; flex-direction:column; height:100%; }
.sch-nav {
  display:flex; align-items:center; padding:16px 20px;
  border-bottom: 1px solid var(--border); gap:12px;
}
.sch-nav-btn {
  width:30px; height:30px; border-radius:10px;
  background: rgba(200,230,50,0.07); border: 1.5px solid rgba(94,94,74,0.14);
  color: var(--accent); cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:14px; font-weight:700; transition:background .15s;
}
.sch-nav-btn:hover { background: rgba(94,94,74,0.14); }
.sch-month {
  font-family: var(--font-ui); font-size:18px; font-weight:900;
  color: var(--text); letter-spacing:-0.02em;
}
.sch-view-btns {
  margin-left:auto; display:flex; gap:4px;
}
.sch-view {
  font-size:11px; font-family: var(--font-ui); font-weight:700; padding:5px 14px;
  border-radius:20px; cursor:pointer; color: var(--text-3);
  transition:background .15s, color .15s;
}
.sch-view.active { background: var(--accent); color: #fff; }
.sch-grid-wrap { flex:1; overflow:auto; }
.sch-grid {
  display:grid; grid-template-columns:repeat(7,1fr);
  border-left: 1px solid var(--border);
}
.sch-dow {
  text-align:center; padding:8px 0;
  font-size:10px; font-family: var(--font-mono); letter-spacing:0.08em;
  text-transform:uppercase; color: var(--text-3);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.sch-cell {
  min-height:80px; padding:6px 8px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position:relative;
}
.sch-cell.other-month { opacity:0.35; }
.sch-cell.today { background: rgba(200,230,50,0.06); }
.sch-cell.today .sch-day-num {
  background: var(--accent); color:#fff; border-radius:50%;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  font-weight:800;
}
.sch-day-num {
  font-size:12px; color: var(--text-3); margin-bottom:4px;
  font-family: var(--font-mono); width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
}
.sch-event {
  background: linear-gradient(135deg, rgba(200,230,50,0.22), rgba(202,201,183,0.20));
  border: 1px solid rgba(202,201,183,0.28); border-radius:5px;
  font-size:10px; padding:2px 6px; color: var(--accent); margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family: var(--font-mono); cursor:pointer;
}
.sch-event.green {
  background: rgba(110,201,138,0.10); border-color: rgba(110,201,138,0.22); color:#6ec98a;
}
.sch-event.blue {
  background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.22); color:#60a5fa;
}

/* ═══════════════════════════ NOTES APP ═══════════════════════════ */
#win-notes { top:100px; left:160px; width:660px; height:500px; }
.notes-sidebar { overflow-y:auto; }
.notes-list { display:flex; flex-direction:column; padding:8px; }
.note-item {
  padding:10px 10px; border-radius:12px; cursor:pointer; margin:1px 0;
  transition: background .15s;
}
.note-item:hover { background: rgba(200,230,50,0.08); }
.note-item.active { background: rgba(94,94,74,0.14); }
.note-item-title { font-size:13px; color: var(--text); font-weight:500; margin-bottom:3px; }
.note-item-preview { font-size:11px; color: var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-item-date { font-size:9px; color: var(--text-3); font-family: var(--font-mono); margin-top:4px; }
.notes-toolbar {
  height:40px; display:flex; align-items:center; gap:4px; padding:0 12px;
  border-bottom: 1px solid var(--border); flex-shrink:0;
  background: rgba(245,240,232,0.60);
}
.notes-tb-btn {
  width:30px; height:30px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:700; color: var(--text-3); cursor:pointer;
  transition:background .15s, color .15s;
}
.notes-tb-btn:hover { background: rgba(200,230,50,0.10); color: var(--accent); }
.notes-tb-sep { width:1px; height:18px; background: var(--border); margin:0 4px; }
.notes-editor {
  flex:1; display:flex; flex-direction:column;
}
.notes-editor-area {
  flex:1; padding:20px 24px; resize:none; border:none; outline:none;
  background: #fff; color: var(--text); font-family: var(--font-ui);
  font-size:14px; font-weight:500; line-height:1.75; overflow-y:auto;
}
.notes-footer {
  height:28px; display:flex; align-items:center; padding:0 16px;
  border-top: 1px solid var(--border); flex-shrink:0;
  font-size:10px; font-weight:700; color: var(--text-3); font-family: var(--font-ui); gap:16px;
  background: rgba(245,240,232,0.50);
}
.notes-new-btn {
  display:flex; align-items:center; gap:6px; padding:8px 14px;
  margin:8px; border-radius:12px; cursor:pointer;
  background: var(--accent); color: #fff;
  font-size:12px; font-family: var(--font-ui); font-weight:800;
  transition:opacity .15s; box-shadow: 0 2px 8px rgba(200,230,50,0.25);
}
.notes-new-btn:hover { opacity:0.88; }

/* ═══════════════════════════ DICTIONARY APP ═══════════════════════════ */
#win-dictionary { top:70px; left:180px; width:560px; height:480px; }
.dict-body { padding:20px; display:flex; flex-direction:column; gap:16px; height:100%; overflow-y:auto; }
.dict-search-wrap {
  display:flex; align-items:center; gap:10px;
  background: #fff; border: 1.5px solid rgba(200,230,50,0.16);
  border-radius:16px; padding:10px 16px;
  box-shadow: 0 2px 8px rgba(200,230,50,0.06);
}
.dict-search-wrap input {
  flex:1; background:none; border:none; outline:none;
  font-size:15px; color: var(--text); font-family: var(--font-ui);
}
.dict-search-wrap input::placeholder { color: var(--text-3); }
.dict-lang-select {
  font-size:11px; font-family: var(--font-mono); color: var(--accent);
  background: var(--accent-2); border: 1px solid var(--accent-3);
  border-radius:8px; padding:4px 10px; cursor:pointer;
}
.dict-result {
  background: #fff; border: 1.5px solid rgba(94,94,74,0.12);
  border-radius:16px; padding:20px;
  box-shadow: 0 2px 10px rgba(200,230,50,0.06);
}
.dict-word {
  font-family: var(--font-ui); font-size:36px; font-weight:600;
  color: var(--text); margin-bottom:4px;
}
.dict-phonetic {
  font-size:14px; color: var(--text-3); margin-bottom:12px;
  font-family: var(--font-mono);
}
.dict-pos {
  display:inline-block; font-size:10px; font-family: var(--font-mono);
  letter-spacing:0.08em; text-transform:uppercase;
  color: var(--accent); background: var(--accent-2); border: 1px solid var(--accent-3);
  border-radius:20px; padding:2px 9px; margin-bottom:12px;
}
.dict-def {
  font-size:14px; color: var(--text-2); line-height:1.7; margin-bottom:8px;
}
.dict-example {
  font-size:13px; color: var(--text-3); font-style:italic; line-height:1.6;
  border-left: 2px solid var(--accent-3); padding-left:12px; margin-bottom:12px;
}
.dict-syns { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.dict-syn {
  font-size:12px; font-family: var(--font-ui); font-weight:700; padding:5px 13px;
  border-radius:20px; color: var(--text-3);
  background: rgba(200,230,50,0.05); border: 1.5px solid rgba(94,94,74,0.12);
  cursor:pointer; transition:background .15s, color .15s;
}
.dict-syn:hover { background: rgba(94,94,74,0.12); color: var(--accent); }
.dict-save-btn {
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-family: var(--font-mono); padding:8px 16px;
  border-radius:8px; cursor:pointer; border:none;
  background: linear-gradient(135deg, #C8E632, var(--lavender));
  color: #fff; transition:opacity .15s; font-weight:500;
}
.dict-save-btn:hover { opacity:0.88; }
.dict-history-label {
  font-size:10px; font-family: var(--font-mono); letter-spacing:0.1em;
  text-transform:uppercase; color: var(--text-3); margin-bottom:8px;
}
.dict-history { display:flex; flex-wrap:wrap; gap:6px; }
.dict-hist-item {
  font-size:12px; font-family: var(--font-ui); font-weight:700; padding:5px 13px;
  border-radius:20px; color: var(--text-3);
  background: rgba(200,230,50,0.05); border: 1.5px solid rgba(94,94,74,0.12);
  cursor:pointer; transition:background .15s, color .15s;
}
.dict-hist-item:hover { background: rgba(94,94,74,0.12); color: var(--accent); }

/* ═══════════════════════════ ABOUT / FINDER ═══════════════════════════ */
#win-about { top:80px; left:340px; width:480px; height:340px; }
.about-body {
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:12px; padding:40px; text-align:center;
  background: linear-gradient(160deg, #fff 0%, #F5F0E8 100%);
}
.about-logo {
  font-size:64px; margin-bottom:4px;
  filter:drop-shadow(0 4px 16px rgba(200,230,50,0.30));
}
.about-name {
  font-family: var(--font-ui); font-size:30px; font-weight:900; color: var(--text);
  letter-spacing:-0.03em;
}
.about-name em { color: var(--accent); font-style:normal; }
.about-ver {
  font-size:11px; font-family: var(--font-ui); font-weight:700;
  color: var(--text-3); letter-spacing:0.04em;
  background: var(--accent-2); border: 1px solid var(--accent-3);
  border-radius:20px; padding:3px 12px; display:inline-block;
}
.about-desc {
  font-size:13px; font-weight:500; color: var(--text-2);
  line-height:1.65; max-width:340px; margin-top:4px;
}
.about-tags { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
.about-tag {
  font-size:11px; font-family: var(--font-ui); font-weight:700; padding:5px 13px;
  border-radius:20px; color: var(--accent); background: var(--accent-2);
  border: 1px solid var(--accent-3);
}
.about-credits {
  font-size:11px; font-weight:600; color: var(--text-3);
  font-family: var(--font-ui); margin-top:4px;
}
.about-credits a { color: var(--accent); text-decoration:none; font-weight:800; }

/* ═══════════════════════════ GAMES APP ═══════════════════════════ */
#win-games { top:84px; left:110px; width:1040px; height:690px; }
.games-sidebar-list { display:flex; flex-direction:column; padding:4px 0 10px; }
.games-nav-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  font-size:13px; font-weight:700; color: var(--text-2); cursor:pointer;
  border-radius:14px; margin:2px 6px;
  transition: background .15s, color .15s, transform .15s;
}
.games-nav-item:hover {
  background: rgba(200,230,50,0.08); color: var(--accent); transform:translateX(2px);
}
.games-nav-item.active {
  background: rgba(200,230,50,0.13); color: var(--accent);
}
.games-nav-ic {
  width:28px; height:28px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(145deg, rgba(28,28,30,0.20), rgba(200,230,50,0.10));
  flex-shrink:0; font-size:15px;
}
.games-nav-copy {
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.games-nav-title {
  font-size:13px; color:inherit; font-weight:800; line-height:1.25;
}
.games-nav-sub {
  font-size:10px; color: var(--text-3); font-family: var(--font-mono);
  letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.games-layout {
  display:flex; flex-direction:column; gap:0; height:100%;
}
.games-hero {
  padding:20px 22px 16px;
  border-bottom: 1px solid rgba(200,230,50,0.10);
  background:
    radial-gradient(circle at top right, rgba(28,28,30,0.12), transparent 30%),
    linear-gradient(160deg, rgba(255,255,255,0.96) 0%, rgba(245,240,232,0.92) 100%);
}
.games-hero-top {
  display:flex; gap:16px; align-items:flex-start;
}
.games-hero-icon {
  width:58px; height:58px; border-radius:18px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:28px;
  color:#fff; box-shadow: 0 10px 24px rgba(200,230,50,0.18);
}
.games-hero-copy { min-width:0; }
.games-hero-eyebrow {
  font-size:10px; font-family: var(--font-mono); letter-spacing:0.12em;
  text-transform:uppercase; color: var(--text-3); margin-bottom:6px;
}
.games-hero-title {
  font-family: var(--font-ui); font-size:28px; font-weight:900; color: var(--text);
  line-height:1.05; letter-spacing:-0.03em;
}
.games-hero-title em { font-style:normal; color: var(--accent); }
.games-hero-desc {
  margin-top:8px; font-size:13px; color: var(--text-2); line-height:1.7; max-width:680px;
}
.games-meta {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.games-meta-chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-family: var(--font-mono); letter-spacing:0.06em;
  color: var(--accent); background: rgba(200,230,50,0.10);
  border: 1px solid rgba(200,230,50,0.16); border-radius:999px; padding:5px 10px;
}
.games-actions {
  margin-top:16px; display:flex; flex-wrap:wrap; gap:10px;
}
.games-btn {
  display:inline-flex; align-items:center; gap:8px;
  border:none; cursor:pointer; border-radius:14px; padding:10px 16px;
  font-size:12px; font-weight:800; font-family: var(--font-ui);
  transition: opacity .15s, transform .12s;
}
.games-btn:hover { opacity:0.92; transform:translateY(-1px); }
.games-btn.primary {
  color:#fff; background: linear-gradient(135deg, #C8E632, var(--accent));
  box-shadow: 0 8px 18px rgba(200,230,50,0.18);
}
.games-btn.ghost {
  color: var(--accent); background: rgba(200,230,50,0.08); text-decoration:none;
  border: 1px solid rgba(94,94,74,0.12);
}
.games-stage {
  flex:1; display:flex; flex-direction:column; min-height:0;
  padding:16px 18px 18px;
}
.games-stage-head {
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.games-stage-title {
  font-size:16px; font-weight:900; color: var(--text); letter-spacing:-0.02em;
}
.games-stage-sub {
  font-size:11px; font-family: var(--font-mono); color: var(--text-3);
}
.games-stage-shell {
  flex:1; min-height:0;
  border: 1px solid rgba(94,94,74,0.12); border-radius:20px; overflow:hidden;
  background: linear-gradient(180deg, rgba(245,240,232,0.92), rgba(240,240,228,0.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 24px rgba(200,230,50,0.06);
}
.games-frame {
  width:100%; height:100%; min-height:360px; border:none; background:transparent;
}
.games-quicklist {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.games-quick {
  padding:6px 10px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(94,94,74,0.12); background: rgba(255,255,255,0.88);
  font-size:11px; font-family: var(--font-mono); color: var(--text-3);
  transition: background .15s, color .15s, border-color .15s;
}
.games-quick:hover, .games-quick.active {
  background: rgba(200,230,50,0.10); color: var(--accent); border-color: rgba(94,94,74,0.22);
}

/* ═══════════════════════════ UTILS ═══════════════════════════ */
.hidden { display:none !important; }
.mob-win-header { display:none; } /* shown only inside mobile media query */
#mobile-spotlight { display:none; }

/* ═══════════════════════════ MOBILE RESPONSIVE ═══════════════════════════ */
@media (max-width: 860px) {
  body { background: #fff !important; }

  /* Hide desktop-only elements */
  .widget, .di-sep, .mb-menu, .mb-apple,
  .mb-icon, .blob1, .blob2, .blob3 { display:none !important; }

  /* Menubar → compact mobile header */
  #menubar {
    height:52px; padding:0 16px;
    background: rgba(255,255,255,0.96);
    backdrop-filter:blur(24px) saturate(1.8);
    -webkit-backdrop-filter:blur(24px) saturate(1.8);
    justify-content:space-between;
    border-bottom:1px solid rgba(94,94,74,0.08);
  }
  .mb-right .nav-user { border:none; background:transparent; padding:4px 6px; }
  .mb-app-name {
    font-size:20px; font-weight:900; color:var(--text);
    letter-spacing:-0.02em;
  }
  #mb-clock {
    font-size:14px; font-weight:700; color:var(--text-3);
  }

  /* Desktop → mobile cards */
  #desktop {
    background: #fff;
  }
  #mobile-spotlight {
    display:flex;
    position:fixed;
    top:68px;
    left:12px;
    right:12px;
    padding:14px 16px;
    border-radius:22px;
    background:rgba(255,255,255,0.88);
    border:1px solid rgba(94,94,74,0.12);
    box-shadow:0 12px 28px rgba(200,230,50,0.10);
    backdrop-filter:blur(22px);
    z-index:180;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
  }
  .mobile-spotlight-copy { min-width:0; }
  .mobile-spotlight-label {
    font-size:10px; font-family:var(--font-mono); color:var(--text-3);
    letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px;
  }
  .mobile-spotlight-title {
    font-size:20px; font-weight:900; line-height:1.05; color:var(--text); letter-spacing:-0.03em;
  }
  .mobile-spotlight-sub {
    margin-top:6px; font-size:12px; line-height:1.6; color:var(--text-2);
  }
  .mobile-spotlight-badge {
    flex-shrink:0; padding:8px 12px; border-radius:999px;
    background:rgba(200,230,50,0.10); color:var(--accent); font-size:11px; font-weight:800;
  }
  .win {
    position:fixed !important;
    top:52px !important; left:0 !important; right:0 !important;
    bottom:calc(60px + env(safe-area-inset-bottom,0px)) !important;
    width:100% !important; height:auto !important;
    min-width:0 !important; border-radius:0 !important;
    border:none !important;
    border-top:1px solid rgba(94,94,74,0.08) !important;
    box-shadow:none !important;
    display:none; flex-direction:column;
    background:#fff !important;
    z-index:200 !important;
  }
  .win.open { display:flex !important; }
  .win::after, .win-resize-handle { display:none !important; }

  /* Win titlebar on mobile */
  .win-titlebar { display:none; }
  .win-controls { display:none; }

  /* Mobile app header (shown inside each win) */
  .mob-win-header {
    display:flex; align-items:center; gap:10px;
    padding:14px 16px 10px; flex-shrink:0;
    border-bottom:1px solid rgba(94,94,74,0.08);
    background: rgba(255,255,255,0.96);
  }
  .mob-win-title {
    font-size:20px; font-weight:900; color:var(--text);
    letter-spacing:-0.02em;
  }
  .mob-sidebar-btn {
    margin-left:auto; width:34px; height:34px; border-radius:10px;
    background:rgba(200,230,50,0.09); border:1.5px solid var(--border);
    color:var(--accent); font-size:16px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }

  /* Sidebar overlay on mobile */
  .win-sidebar {
    display:none; position:absolute; top:0; left:0; bottom:0;
    z-index:12; width:260px;
    box-shadow:4px 0 24px rgba(94,94,74,0.12);
    background:rgba(255,255,255,0.98);
  }
  .win-sidebar.mob-open { display:flex !important; }
  .win-main { background:transparent; }

  /* Dock — hidden on mobile, replaced by mobile-nav.js */
  #dock-wrap { display:none !important; }

  /* Content tweaks */
  .curr-grid { grid-template-columns:1fr; }
  .curr-search { margin:12px 14px 0; }
  .curr-header { padding:14px 14px 0; }
  .curr-tabs { padding:10px 14px 0; overflow-x:auto; flex-wrap:nowrap; }
  .curr-grid { padding:14px; }

  .fc-scene { width:100%; max-width:340px; }
  .fc-card-word { font-size:26px; }
  .fc-btns { flex-wrap:wrap; gap:8px; }
  .fc-btn { flex:1; min-width:80px; justify-content:center; }

  .prog-body { padding:14px; gap:14px; }
  .prog-stats { grid-template-columns:1fr 1fr; gap:10px; }
  .prog-achievements { grid-template-columns:1fr 1fr; }
  .prog-stat-n { font-size:26px; }

  .sch-nav { padding:10px 14px; }
  .sch-grid-wrap { overflow:auto; -webkit-overflow-scrolling:touch; }

  .notes-editor-area { font-size:15px; padding:14px 16px; }
  .notes-sidebar { width:180px; }

  .dict-body { padding:14px; }
  .dict-word { font-size:28px; }

  .about-body { padding:28px 20px; }
  .about-logo { font-size:52px; }

  .games-hero { padding:14px 14px 12px; }
  .games-hero-top { gap:12px; }
  .games-hero-icon { width:48px; height:48px; border-radius:14px; font-size:24px; }
  .games-hero-title { font-size:22px; }
  .games-quicklist { overflow-x:auto; padding-bottom:4px; margin-right:-8px; flex-wrap:nowrap; }
  .games-quick { white-space:nowrap; }
  .games-stage { padding:12px 14px 14px; }
  .games-stage-shell { border-radius:16px; }
  .games-frame { min-height:360px; }

  /* Tools */
  #tools-grid { grid-template-columns:1fr !important; }
}

@media (max-width: 420px) {
  #mobile-spotlight {
    top:64px; left:10px; right:10px; padding:12px 14px;
  }
  .mobile-spotlight-title { font-size:18px; }
  .win {
    top:156px !important;
    left:10px !important;
    right:10px !important;
    bottom:84px !important;
  }
  .fc-scene { height:190px; }
  .prog-stats { grid-template-columns:1fr 1fr; }
  .stat-n { font-size:22px; }
  .di-label { display:none; }
  .di-icon { width:40px; height:40px; }
}