@import "./tokens.css";

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }

body {
  font-family: var(--font-ui);
  color: var(--c-ink);
  background:
    radial-gradient(1200px 700px at 12% -10%, #fff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 105% 110%, var(--c-cream-2) 0%, rgba(255,255,255,0) 60%),
    var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.2; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
img { display: block; -webkit-user-drag: none; user-drag: none; pointer-events: none; }

/* ============================================================
   应用骨架：顶栏 + 舞台
   ============================================================ */
.app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  /* 老师任何时候都必须能退出。倒计时(90)、各种面板(80)都是全屏浮层，
     顶栏必须压在它们之上，否则浮层一旦卡住整块屏就锁死了 —— 真出过这个事。 */
  position: relative;
  z-index: 100;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 2px solid var(--c-line);
  backdrop-filter: blur(8px);
}

.brand { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; }
.brand__title { font-size: 22px; letter-spacing: 0.02em; }
.brand__sub { font-size: 13px; color: var(--c-ink-soft); }

/* --- 模式切换：像糖果药丸 --- */
.tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--c-cream-2);
  border-radius: var(--r-full);
  margin: 0 auto;
}
.tab {
  padding: 9px 22px;
  border-radius: var(--r-full);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink-soft);
  transition: all var(--t-fast) var(--ease-out);
}
.tab[aria-selected="true"] {
  background: var(--c-card);
  color: var(--c-primary-deep);
  box-shadow: 0 3px 0 rgba(0,0,0,.05), 0 6px 14px rgba(232,74,128,.16);
}
.tab:active { transform: scale(.96); }

/* --- 顶栏右侧的老师控制 --- */
.tools { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: var(--r-full);
  background: var(--c-card);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  box-shadow: 0 3px 0 rgba(0,0,0,.06), 0 6px 14px rgba(122,92,70,.10);
  transition: transform var(--t-fast) var(--ease-bounce), background var(--t-fast);
}
.btn:active { transform: translateY(2px) scale(.97); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.btn--accent { background: var(--c-primary); color: #fff; box-shadow: 0 3px 0 var(--c-primary-deep), 0 8px 18px rgba(232,74,128,.28); }
.btn--on { background: var(--c-mint); color: #fff; box-shadow: 0 3px 0 var(--c-mint-deep), 0 8px 18px rgba(33,176,168,.26); }
.btn__ico { font-size: 17px; line-height: 1; }

/* 分段控件：印刷体/手写体、Aa/A/a 这类二三选一 */
.seg { display: flex; background: var(--c-cream-2); border-radius: var(--r-full); padding: 4px; gap: 3px; }
.seg__b {
  padding: 7px 14px; border-radius: var(--r-full);
  font-size: 14px; font-weight: 700; color: var(--c-ink-soft);
  transition: all var(--t-fast) var(--ease-out);
}
.seg__b[aria-pressed="true"] { background: var(--c-card); color: var(--c-ink); box-shadow: 0 2px 0 rgba(0,0,0,.05); }

/* 教学模式专用的几个按钮，进了闯关就收起来——课堂上少一个能点错的东西 */
body[data-screen="game"] #btnShuffle,
body[data-screen="game"] #btnReset,
body[data-screen="game"] #btnRead,
body[data-screen="game"] #segCase,
body[data-screen="game"] #segFace,
body[data-screen="drill"] #btnShuffle,
body[data-screen="drill"] #btnReset,
body[data-screen="drill"] #btnRead { display: none; }

.stage { flex: 1 1 auto; position: relative; min-height: 0; }
.screen { position: absolute; inset: 0; display: none; }
.screen[data-active="true"] { display: flex; flex-direction: column; }

/* ============================================================
   通用动画
   ============================================================ */
@keyframes pop-in { 0% { opacity: 0; transform: scale(.72) translateY(14px); } 100% { opacity: 1; transform: none; } }
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes wiggle  { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes shake-x { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(9px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
@keyframes ring-out { 0% { opacity: .55; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.5); } }

/* ============================================================
   头像 · 字母徽章
   ------------------------------------------------------------
   不用 emoji 小人。这是字母乐园，孩子的头像就是一个字母：
   按名字散列固定取一个，用素材里那张真实的字母图和它自己的色相。
   同一个名字永远是同一个字母，孩子会认得"我是那个 K"。
   ============================================================ */
.ava {
  flex: 0 0 auto;
  border-radius: 50%;
  background: hsl(var(--lh) 72% 92%);
  box-shadow: inset 0 -2px 0 hsl(var(--lh) 55% 84%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ava img { width: 68%; height: 68%; object-fit: contain; }

/* 图标按钮里的 svg 跟文字对齐 */
.btn__ico { display: flex; align-items: center; justify-content: center; line-height: 1; }
.btn__ico svg { display: block; }