/* ============================================================
   单词卡丁车 Word Kart · 卡丁车风格 UI
   ============================================================ */
:root{
  --blue:#2f9bff; --blue-d:#1668cc; --orange:#ff8a1e; --orange-d:#d96b00;
  --red:#ff4d5e; --red-d:#d62d3f; --yellow:#ffd93b; --green:#2ecc71; --green-d:#1b9e55;
  --purple:#7c5cff; --pink:#ff7ab8; --teal:#22c9c9;
  --ink:#1b2b4b; --ink-soft:#4a5b7c; --paper:#ffffff; --paper-2:#f2f7ff;
  --line:#c9d8f2; --shadow:rgba(27,43,75,.18);
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --font:"ZCOOL KuaiLe","Comic Sans MS","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; overflow:hidden;}
body{
  font-family:var(--font); color:var(--ink); background:transparent;
  user-select:none; touch-action:manipulation;
}
#app{position:fixed; inset:0; overflow:hidden;}
/* —— 天空背景 —— */
.sky{position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,#7ec8ff 0%,#a8dcff 34%,#d6efff 62%,#eaf7d6 100%);}
.cloud{position:absolute; background:#fff; border-radius:50%; opacity:.9; filter:blur(.4px);
  box-shadow:32px 8px 0 -6px #fff, 64px 0 0 -10px #fff, -30px 10px 0 -8px #fff;}
.cloud::before,.cloud::after{content:""; position:absolute; background:#fff; border-radius:50%;}
.cloud::before{width:60%; height:130%; top:-40%; left:12%;}
.cloud::after{width:44%; height:110%; top:-24%; right:14%;}
@keyframes drift{from{transform:translateX(-30vw);}to{transform:translateX(130vw);}}
.sun{position:absolute; top:26px; right:44px; width:74px; height:74px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff7ae,#ffd93b 60%,#ffb61e);
  box-shadow:0 0 34px 10px rgba(255,217,59,.55); animation:sunPulse 4s ease-in-out infinite;}
@keyframes sunPulse{50%{transform:scale(1.07);}}
.hill{position:absolute; bottom:-6%; border-radius:50% 50% 0 0; opacity:.9;}

/* —— 屏幕容器 —— */
.screen{position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  padding:18px; overflow:auto; animation:screenIn .35s cubic-bezier(.2,1.4,.4,1);}
.screen.hidden{display:none !important;}
@keyframes screenIn{from{opacity:0; transform:scale(.96) translateY(14px);}to{opacity:1; transform:none;}}
.card{background:var(--paper); border:4px solid var(--ink); border-radius:var(--r-lg);
  box-shadow:0 10px 0 var(--shadow), 0 22px 44px var(--shadow); padding:26px 28px; width:100%; max-width:860px; position:relative;}
.card.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1);}
@keyframes pop{from{transform:scale(.7); opacity:0;}to{transform:scale(1); opacity:1;}}
.card h1,.card h2{font-weight:400; letter-spacing:1px;}
.row{display:flex; gap:14px; flex-wrap:wrap;}
.center{justify-content:center;}
.col{display:flex; flex-direction:column; gap:12px;}
.grow{flex:1;}

/* —— Logo —— */
.logo{text-align:center; margin-bottom:6px;}
.logo .title{font-size:clamp(44px,8vw,76px); line-height:1.05; color:#fff; letter-spacing:4px;
  text-shadow:0 3px 0 var(--blue-d), 0 6px 0 var(--ink), 0 10px 18px var(--shadow);
  -webkit-text-stroke:3px var(--ink); paint-order:stroke fill;}
.logo .title .k{color:var(--yellow);}
.logo .sub{font-size:clamp(15px,2.4vw,21px); color:var(--ink); letter-spacing:6px; margin-top:8px;
  background:#fff; display:inline-block; padding:4px 18px; border-radius:999px; border:3px solid var(--ink);}
.logo .kart-ico{font-size:clamp(40px,7vw,64px); display:inline-block; animation:kartBounce 1.1s ease-in-out infinite;}
@keyframes kartBounce{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-12px) rotate(4deg);}}

/* —— 按钮 —— */
.btn{font-family:var(--font); cursor:pointer; border:4px solid var(--ink); color:#fff; font-size:20px;
  letter-spacing:2px; padding:13px 30px; border-radius:999px; background:linear-gradient(180deg,var(--blue),var(--blue-d));
  box-shadow:0 6px 0 var(--ink), 0 10px 16px var(--shadow); transition:transform .08s, box-shadow .08s, filter .15s;}
.btn:hover{filter:brightness(1.08);}
.btn:active{transform:translateY(5px); box-shadow:0 1px 0 var(--ink), 0 3px 8px var(--shadow);}
.btn.orange{background:linear-gradient(180deg,#ffa24d,var(--orange-d));}
.btn.green{background:linear-gradient(180deg,#57db8b,var(--green-d));}
.btn.red{background:linear-gradient(180deg,#ff7a86,var(--red-d));}
.btn.purple{background:linear-gradient(180deg,#9d86ff,#5b3fd9);}
.btn.big{font-size:26px; padding:16px 44px;}
.btn.small{font-size:15px; padding:8px 18px; border-width:3px; box-shadow:0 4px 0 var(--ink);}
.btn.ghost{background:#fff; color:var(--ink);}
.btn:disabled{filter:grayscale(.8); opacity:.55; cursor:not-allowed;}

/* —— 个人进度条 —— */
.profilebar{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin:14px 0 4px;}
.pill{background:#fff; border:3px solid var(--ink); border-radius:999px; padding:6px 16px; font-size:15px;
  display:flex; align-items:center; gap:7px; box-shadow:0 4px 0 var(--shadow);}
.pill b{color:var(--orange-d);}
.xpbar{width:170px; height:14px; background:#e7eefc; border:3px solid var(--ink); border-radius:999px; overflow:hidden;}
.xpbar i{display:block; height:100%; background:linear-gradient(90deg,var(--yellow),var(--orange)); width:0%; transition:width .5s;}

/* —— 角色选择 —— */
.char-grid{display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin:16px 0 6px;}
@media (max-width:640px){.char-grid{grid-template-columns:repeat(4,1fr);}}
.char{position:relative; cursor:pointer; background:var(--paper-2); border:3px solid var(--line); border-radius:var(--r-md);
  padding:8px 4px 9px; text-align:center; transition:transform .12s, border-color .12s, background .12s;}
.char:hover{transform:translateY(-4px);}
.char.sel{border-color:var(--ink); background:#fff; box-shadow:0 5px 0 var(--orange); transform:translateY(-3px);}
.char .face{width:44px; height:44px; margin:0 auto 4px; border-radius:50%; border:3px solid var(--ink); position:relative;
  background:var(--c,#ff8a8a);}
.char .face::before,.char .face::after{content:""; position:absolute; top:14px; width:7px; height:9px; background:var(--ink); border-radius:40%;}
.char .face::before{left:9px;} .char .face::after{right:9px;}
.char .helmet{position:absolute; inset:-9px auto auto 50%; transform:translateX(-50%); width:52px; height:20px;
  background:var(--c,#ff8a8a); border:3px solid var(--ink); border-radius:12px 12px 0 0; z-index:1;}
.char .name{font-size:13px; margin-top:6px;}
.char .tag{font-size:10px; color:var(--ink-soft);}

/* —— 菜单 —— */
.menu{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px;}
@media (max-width:560px){.menu{grid-template-columns:1fr;}}
.menu .btn{width:100%; font-size:22px;}
.mini-note{font-size:13px; color:var(--ink-soft); text-align:center; margin-top:10px;}

/* —— 模式选择 —— */
.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:14px 0;}
@media (max-width:640px){.mode-grid{grid-template-columns:1fr;}}
.mode-card{cursor:pointer; border:4px solid var(--line); border-radius:var(--r-lg); padding:18px; background:var(--paper-2);
  transition:transform .12s, border-color .12s;}
.mode-card:hover{transform:translateY(-4px);}
.mode-card.sel{border-color:var(--orange); background:#fff8ec; box-shadow:0 6px 0 rgba(255,138,30,.35);}
.mode-card .ico{font-size:44px;}
.mode-card h3{font-weight:400; font-size:22px; margin:6px 0 4px;}
.mode-card p{font-size:14px; color:var(--ink-soft); line-height:1.5;}
.opt-title{font-size:17px; margin:12px 0 8px; display:flex; align-items:center; gap:8px;}
.opt-title::before{content:""; width:10px; height:22px; border-radius:4px; background:var(--orange);}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{cursor:pointer; font-family:var(--font); font-size:15px; padding:7px 16px; border-radius:999px;
  border:3px solid var(--line); background:#fff; color:var(--ink-soft); transition:all .12s;}
.chip.sel{border-color:var(--blue); background:var(--blue); color:#fff; box-shadow:0 3px 0 var(--blue-d);}
.switch{display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:15px;}
.switch input{display:none;}
.switch i{width:52px; height:28px; border-radius:999px; background:#dfe7f5; border:3px solid var(--ink); position:relative; transition:background .15s;}
.switch i::after{content:""; position:absolute; top:1px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff;
  border:2px solid var(--ink); transition:left .15s;}
.switch input:checked + i{background:var(--green);}
.switch input:checked + i::after{left:24px;}

/* ============ 比赛界面 ============ */
#screen-race{padding:0; display:block; overflow:hidden; background:#79c94f;}
#game{position:absolute; inset:0; width:100%; height:100%; display:block;}
.hud{position:absolute; z-index:20; pointer-events:none;}
#hud-top{top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:flex-start; padding:12px 14px; gap:10px;}
.hud-box{background:rgba(255,255,255,.92); border:3px solid var(--ink); border-radius:var(--r-md);
  padding:7px 14px; font-size:16px; box-shadow:0 4px 0 var(--shadow); display:flex; align-items:center; gap:9px;}
.hud-box .num{color:var(--orange-d); font-size:21px;}
#hud-minimap{width:132px; height:104px; background:rgba(255,255,255,.9); border:3px solid var(--ink);
  border-radius:var(--r-md); box-shadow:0 4px 0 var(--shadow);}
#hud-timer{font-variant-numeric:tabular-nums;}
#hud-item{margin-left:auto;}
.item-slot{width:52px; height:52px; border-radius:12px; border:3px dashed var(--ink); display:flex; align-items:center;
  justify-content:center; font-size:26px; background:#fff; position:relative; overflow:hidden;}
.item-slot.filled{border-style:solid; background:linear-gradient(180deg,#fff,#ffe9b8); animation:itemGlow 1s infinite alternate;}
@keyframes itemGlow{to{box-shadow:0 0 14px 3px var(--yellow);}}
.item-slot .charge{position:absolute; left:0; bottom:0; right:0; background:rgba(47,155,255,.35); height:0%;}
.item-slot .ico{position:relative; z-index:1;}
#hud-bottom{left:0; right:0; bottom:0; padding:12px 14px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px;}
#hud-speed{width:150px; height:96px;}
#hud-word-ticker{background:rgba(255,255,255,.92); border:3px solid var(--ink); border-radius:var(--r-md);
  padding:8px 14px; font-size:15px; max-width:46vw; box-shadow:0 4px 0 var(--shadow);}
#hud-word-ticker .t{color:var(--ink-soft); font-size:12px; margin-bottom:2px;}
#hud-word-ticker .w{font-size:16px;}
#hud-word-ticker .w b{color:var(--blue-d);} #hud-word-ticker .w .ok{color:var(--green-d);} #hud-word-ticker .w .no{color:var(--red-d);}
#hud-combo{position:absolute; left:50%; top:23%; transform:translateX(-50%); z-index:21; font-size:34px; color:#fff;
  -webkit-text-stroke:2.5px var(--ink); text-shadow:0 4px 0 var(--orange-d); opacity:0; pointer-events:none;}
#hud-combo.show{animation:comboPop .9s cubic-bezier(.2,1.6,.4,1) forwards;}
@keyframes comboPop{0%{opacity:0; transform:translateX(-50%) scale(.4);}25%{opacity:1; transform:translateX(-50%) scale(1.15);}
70%{opacity:1; transform:translateX(-50%) scale(1);}100%{opacity:0; transform:translateX(-50%) translateY(-46px) scale(1);}}
#hud-msg{position:absolute; left:50%; top:38%; transform:translateX(-50%); z-index:21; background:rgba(27,43,75,.88);
  color:#fff; font-size:26px; letter-spacing:3px; padding:14px 34px; border-radius:999px; border:3px solid #fff;
  box-shadow:0 6px 0 rgba(0,0,0,.25); display:none; pointer-events:none; white-space:nowrap;}
#countdown{position:absolute; inset:0; z-index:25; display:none; align-items:center; justify-content:center; pointer-events:none;}
#countdown .n{font-size:120px; color:#fff; -webkit-text-stroke:5px var(--ink); text-shadow:0 8px 0 var(--orange-d);
  animation:cdPop .9s cubic-bezier(.2,1.6,.4,1);}
@keyframes cdPop{0%{transform:scale(2.4); opacity:0;}30%{transform:scale(1); opacity:1;}100%{transform:scale(1); opacity:1;}}

/* —— 问题卡片 —— */
#question-card{position:absolute; z-index:30; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px,92vw);
  background:#fff; border:5px solid var(--ink); border-radius:24px; box-shadow:0 12px 0 var(--shadow),0 26px 50px var(--shadow);
  padding:20px 22px 22px; display:none; animation:pop .35s cubic-bezier(.2,1.6,.4,1);}
#question-card.show{display:block;}
.q-tag{display:inline-block; font-size:13px; color:#fff; background:var(--purple); border:2px solid var(--ink);
  padding:2px 12px; border-radius:999px; margin-bottom:8px;}
.q-word{font-size:34px; text-align:center; margin:4px 0 2px; letter-spacing:1px;}
.q-hint{font-size:14px; color:var(--ink-soft); text-align:center; margin-bottom:10px;}
.q-hint b{color:var(--orange-d);}
.q-timerbar{height:12px; background:#eef3fc; border:2px solid var(--ink); border-radius:999px; overflow:hidden; margin-bottom:14px;}
.q-timerbar i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--green),var(--yellow));}
.q-timerbar i.low{background:linear-gradient(90deg,var(--red),var(--orange));}
.q-options{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media (max-width:520px){.q-options{grid-template-columns:1fr;}}
.q-opt{cursor:pointer; font-family:var(--font); font-size:17px; text-align:left; padding:12px 16px; border-radius:14px;
  border:3px solid var(--ink); background:var(--paper-2); transition:transform .08s, background .12s; display:flex; gap:10px; align-items:center;}
.q-opt .k{width:26px; height:26px; flex:none; border-radius:8px; background:var(--blue); color:#fff; border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:14px;}
.q-opt:hover{transform:translateY(-2px); background:#e8f2ff;}
.q-opt.right{background:#d9ffe7; border-color:var(--green-d);}
.q-opt.right .k{background:var(--green-d);}
.q-opt.wrong{background:#ffe0e4; border-color:var(--red-d);}
.q-opt.wrong .k{background:var(--red-d);}
.q-opt:disabled{cursor:default;}
.q-spell{display:flex; gap:10px; margin-top:4px;}
.q-spell input{flex:1; font-family:var(--font); font-size:20px; padding:11px 16px; border-radius:14px;
  border:3px solid var(--ink); outline:none; letter-spacing:2px; background:var(--paper-2);}
.q-spell input:focus{background:#fff; border-color:var(--blue);}
.q-result{margin-top:12px; text-align:center; font-size:16px; min-height:24px;}
.q-result .ok{color:var(--green-d);} .q-result .no{color:var(--red-d);}
.q-result .mean{font-size:14px; color:var(--ink-soft);}

/* —— 触屏控制 —— */
#touch{position:absolute; inset:auto 0 0 0; z-index:22; display:none; justify-content:space-between; padding:0 14px 16px; pointer-events:none;}
#touch .pad{display:flex; gap:12px; pointer-events:auto;}
.tbtn{width:66px; height:66px; border-radius:50%; border:4px solid var(--ink); background:rgba(255,255,255,.9);
  font-size:26px; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 0 var(--shadow); font-family:var(--font);}
.tbtn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--shadow); background:#fff;}
.tbtn.fire{background:rgba(255,217,59,.92); width:78px; height:78px; font-size:22px;}
@media (pointer:coarse){#touch{display:flex;}}

/* —— 结算 —— */
.rank-badge{width:118px; height:118px; margin:-70px auto 8px; border-radius:50%; border:5px solid var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:40px; color:#fff;
  background:linear-gradient(180deg,var(--blue),var(--blue-d)); box-shadow:0 8px 0 var(--shadow); position:relative;}
.rank-badge small{font-size:14px; letter-spacing:2px;}
.rank-badge.r1{background:linear-gradient(180deg,#ffe082,#f5b400); color:var(--ink);}
.rank-badge.r2{background:linear-gradient(180deg,#e8edf5,#aebdd4); color:var(--ink);}
.rank-badge.r3{background:linear-gradient(180deg,#f0b98a,#c57b3a); color:#fff;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0;}
@media (max-width:560px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat{background:var(--paper-2); border:3px solid var(--line); border-radius:var(--r-md); padding:10px; text-align:center;}
.stat .v{font-size:24px; color:var(--blue-d);}
.stat .l{font-size:12px; color:var(--ink-soft);}
.word-review{max-height:210px; overflow:auto; border:3px solid var(--line); border-radius:var(--r-md); margin:8px 0 14px;}
.word-review table{width:100%; border-collapse:collapse; font-size:15px;}
.word-review th,.word-review td{padding:7px 10px; text-align:left; border-bottom:2px solid var(--paper-2);}
.word-review th{background:var(--paper-2); font-size:13px; color:var(--ink-soft); position:sticky; top:0;}
.word-review tr:last-child td{border-bottom:none;}
.mark{font-size:17px;}
.mark.ok{color:var(--green-d);} .mark.no{color:var(--red-d);}
.empty-tip{text-align:center; color:var(--ink-soft); font-size:14px; padding:22px 0;}

/* —— 单词本 —— */
.wb-toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
.wb-toolbar input{flex:1; min-width:150px; font-family:var(--font); font-size:16px; padding:9px 16px;
  border:3px solid var(--ink); border-radius:999px; outline:none; background:var(--paper-2);}
.wb-toolbar input:focus{background:#fff; border-color:var(--blue);}
.wb-list{max-height:56vh; overflow:auto; border:3px solid var(--line); border-radius:var(--r-md);}
.wb-row{display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:2px solid var(--paper-2); font-size:15px;}
.wb-row:last-child{border-bottom:none;}
.wb-row:hover{background:var(--paper-2);}
.wb-row .w{width:170px; font-size:17px; color:var(--ink);}
.wb-row .m{flex:1; color:var(--ink-soft); font-size:14px;}
.gtag{flex:none; font-size:11px; color:#fff; border-radius:999px; padding:2px 9px; border:2px solid var(--ink);}
.gtag.g7{background:var(--green);} .gtag.g8{background:var(--blue);} .gtag.g9{background:var(--purple);}
.stars{flex:none; letter-spacing:1px; font-size:13px;}
.stars .on{color:var(--orange);} .stars .off{color:#dbe4f3;}
.wb-stat{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.wb-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.wb-head h2{font-size:26px;}

/* —— 帮助/设置 —— */
.help-list{display:flex; flex-direction:column; gap:12px; margin:12px 0; font-size:15px; line-height:1.65;}
.help-item{display:flex; gap:12px; align-items:flex-start; background:var(--paper-2); border:3px solid var(--line);
  border-radius:var(--r-md); padding:12px 14px;}
.help-item .ico{font-size:26px; flex:none;}
.help-item b{color:var(--blue-d);}
.kbd{display:inline-block; border:2px solid var(--ink); border-bottom-width:4px; border-radius:6px; background:#fff;
  padding:1px 8px; font-size:13px; font-family:inherit; margin:0 2px;}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 4px; border-bottom:2px dashed var(--line); font-size:16px;}
.set-row:last-child{border-bottom:none;}
input[type=range]{width:190px; accent-color:var(--orange);}

/* —— 彩带 —— */
.confetti{position:absolute; top:-12px; width:10px; height:14px; z-index:40; opacity:.95; animation:confFall linear forwards;}
@keyframes confFall{to{transform:translateY(110vh) rotate(720deg);}}
.shake{animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(8px);}
60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}
.float-up{animation:floatUp 1s ease-out forwards;}
@keyframes floatUp{to{transform:translateY(-70px); opacity:0;}}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:#b9cdf0; border-radius:8px; border:2px solid #fff;}
::-webkit-scrollbar-track{background:transparent;}