:root{
  --ink:#56336f;
  --ink-dark:#4a285f;
  --muted:#8c7094;
  --gold:#c89a48;
  --cream:#fff1d8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;background:#0f0837;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;overflow:hidden}
button,select,input{font:inherit}
button{cursor:pointer}
.app{position:relative;width:min(100vw,440px);height:100dvh;min-height:720px;margin:0 auto;overflow:hidden;background:#170d4b;color:var(--ink)}
.scene{position:absolute;inset:0;background:url('assets/scene_bg.webp') 58% center/cover no-repeat;transform:scale(1.01)}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,7,42,.08),rgba(16,9,54,.08) 58%,rgba(15,7,42,.46) 100%)}
.scene-glow{position:absolute;z-index:1;left:50%;top:44%;width:88%;height:70%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(255,224,163,.20),rgba(119,81,191,.09) 45%,transparent 72%);filter:blur(12px);pointer-events:none}
.sparkles{position:absolute;z-index:2;inset:0;pointer-events:none;background-image:radial-gradient(circle at 12% 18%,rgba(255,238,185,.95) 0 1px,transparent 1.7px),radial-gradient(circle at 81% 13%,rgba(255,226,153,.8) 0 1.3px,transparent 2px),radial-gradient(circle at 74% 38%,rgba(255,255,255,.62) 0 1px,transparent 1.8px),radial-gradient(circle at 22% 71%,rgba(255,236,187,.7) 0 1px,transparent 1.8px);opacity:.72}

.player-stage{position:absolute;z-index:4;left:50%;top:max(20px,env(safe-area-inset-top));width:min(104vw,458px);aspect-ratio:2/3;transform:translateX(-50%);filter:drop-shadow(0 15px 24px rgba(16,8,41,.28))}
.parchment-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.player-content{position:absolute;inset:0;padding:10.4% 9.5% 9.2%;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.player-topbar{width:100%;display:grid;grid-template-columns:112px 1fr 105px;align-items:center;gap:6px;height:40px;margin-bottom:3px}
.asset-btn{position:relative;border:0;background:transparent center/100% 100% no-repeat;padding:0;color:#71455f;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.asset-btn span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;white-space:nowrap}
.top-return{width:112px;height:36px;background-image:url('assets/return_button.webp');font-size:13px;justify-self:start}
.top-settings{width:102px;height:35px;background-image:url('assets/settings_button.webp');font-size:13px;justify-self:end}
.word-count{text-align:center;color:#6b3f8d;font:800 22px/1 Georgia,"Times New Roman",serif;letter-spacing:.5px}

.progress-wrap{width:100%;margin-top:4px}
.word-range{appearance:none;-webkit-appearance:none;width:100%;height:17px;background:transparent;margin:0;display:block}
.word-range::-webkit-slider-runnable-track{height:7px;border-radius:999px;background:linear-gradient(90deg,#8b53c7,#a16fd3 43%,#d5b66c 100%);box-shadow:inset 0 0 0 1px rgba(112,61,140,.17),0 1px 1px rgba(255,255,255,.7)}
.word-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-6.5px;border-radius:50%;border:2px solid #e8bc55;background:radial-gradient(circle,#fff6c7 0 22%,#d79b2a 28% 55%,#7e3bb6 58% 100%);box-shadow:0 0 8px rgba(217,174,65,.55)}
.word-range::-moz-range-track{height:7px;border-radius:999px;background:linear-gradient(90deg,#8b53c7,#a16fd3 43%,#d5b66c 100%)}
.word-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:2px solid #e8bc55;background:#8d4cbf}
.progress-helper{text-align:center;color:#94779c;font-size:10.5px;font-weight:600;margin-top:2px;line-height:1.2}
.ordinal{margin-top:8px;color:#60387f;font:800 16px/1.1 "Songti SC","STSong",serif;letter-spacing:.4px}
.ordinal::before,.ordinal::after{content:"✦";color:#d5a23c;font-size:10px;margin:0 8px;vertical-align:2px}

.prompt-card{position:relative;width:96%;height:121px;margin-top:8px;display:grid;place-items:center}
.prompt-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.prompt-copy{position:relative;z-index:1;text-align:center;transform:translateY(-1px)}
.pos{font:700 16px/1 Georgia,serif;color:#8b6899;margin-bottom:7px}
.meaning{font:900 clamp(35px,9.4vw,42px)/1.05 "Songti SC","STSong","STKaiti",serif;color:#55306d;letter-spacing:1px;text-shadow:0 1px 0 rgba(255,255,255,.65)}

.ipa-zone{height:58px;margin-top:5px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.ipa-btn{height:34px;min-width:112px;border:1px solid rgba(186,139,73,.65);border-radius:999px;background:linear-gradient(180deg,rgba(255,247,227,.96),rgba(245,226,194,.92));box-shadow:0 2px 5px rgba(101,63,54,.15),inset 0 1px rgba(255,255,255,.8);color:#69477f;padding:0 15px;display:flex;align-items:center;justify-content:center;gap:7px;font-weight:700;font-size:12px}
.ipa-icon{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#79548c;color:#fff2da;font:700 12px/1 Georgia,serif}
.ipa-text{height:20px;margin-top:3px;color:#6c4d7d;font:600 11.5px/20px Georgia,serif;opacity:0;transition:opacity .15s}
.ipa-text.show{opacity:1}
.play-state{height:25px;margin-top:-1px;color:#673d82;font:800 14.5px/25px "Songti SC","STSong",serif;letter-spacing:.2px}

.transport{position:relative;width:100%;height:151px;margin-top:0;display:grid;grid-template-columns:60px 1fr 60px;align-items:center}
.round-btn{width:50px;height:50px;border:0;background:transparent center/100% 100% no-repeat;display:grid;place-items:center;justify-self:center;color:#684186}
.round-btn.prev{background-image:url('assets/round_button_left.webp')}
.round-btn.next{background-image:url('assets/round_button_right.webp')}
.round-btn span{font:700 34px/1 Georgia,serif;transform:translateY(-1px)}
.pause-orb{position:relative;width:142px;height:142px;justify-self:center;border:0;background:transparent;padding:0;display:grid;place-items:center;color:#fff1cf;filter:drop-shadow(0 0 11px rgba(246,213,114,.45))}
.pause-orb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pause-symbol{position:relative;z-index:1;font:900 42px/1 Arial,sans-serif;letter-spacing:-4px;transform:translateY(-7px)}
.pause-label{position:absolute;z-index:1;left:0;right:0;bottom:29px;text-align:center;font:800 15px/1 "Songti SC","STSong",serif}
.replay-btn{width:68%;height:39px;background-image:url('assets/replay_button.webp');font-size:14px;color:#633d83;margin-top:-3px}
.setting-summary{margin-top:6px;color:#80698e;font-size:11px;font-weight:600;letter-spacing:.2px}

.foreground-art{position:absolute;z-index:6;left:50%;bottom:max(-7px,calc(env(safe-area-inset-bottom) - 12px));width:118%;height:auto;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 -3px 6px rgba(40,17,61,.18))}
.toast{position:absolute;z-index:40;left:50%;bottom:18%;transform:translate(-50%,14px);background:rgba(49,25,78,.88);color:#fff5dd;border:1px solid rgba(238,194,93,.55);border-radius:999px;padding:8px 14px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}

.settings-layer{position:absolute;z-index:30;inset:0;opacity:0;pointer-events:none;transition:opacity .22s ease}
.settings-layer.open{opacity:1;pointer-events:auto}
.settings-backdrop{position:absolute;inset:0;border:0;background:rgba(12,6,38,.48);backdrop-filter:blur(2px) saturate(.78);-webkit-backdrop-filter:blur(2px) saturate(.78)}
.settings-card{position:absolute;left:50%;top:50%;width:min(82%,356px);aspect-ratio:1209/1614;transform:translate(-50%,-48%) scale(.97);transition:transform .22s ease;filter:drop-shadow(0 15px 24px rgba(11,6,31,.36))}
.settings-layer.open .settings-card{transform:translate(-50%,-50%) scale(1)}
.settings-parchment{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.settings-content{position:absolute;inset:0;padding:11.5% 11.5% 10%;display:flex;flex-direction:column;align-items:stretch}
.settings-close{position:absolute;right:11%;top:7.3%;width:28px;height:28px;border:1px solid rgba(150,103,82,.34);border-radius:50%;background:rgba(255,245,224,.72);color:#795b73;font:500 25px/24px Arial,sans-serif}
.settings-content header{text-align:center;margin:1px 0 13px}
.settings-content h2{margin:0;color:#633b78;font:800 20px/1.1 "Songti SC","STSong",serif;letter-spacing:.5px}
.settings-content header span{display:block;margin-top:3px;color:#947985;font:600 9.5px/1.2 Georgia,serif;font-style:italic}
.setting-fields{display:flex;flex-direction:column;gap:10px}
.setting-fields label{display:block;color:#684f62;font-size:11px;font-weight:700}
.setting-fields label>span{display:block;margin:0 0 4px 3px}
.select-wrap{position:relative}
.select-wrap::after{content:"⌄";position:absolute;right:11px;top:50%;transform:translateY(-54%);color:#8a6692;font-size:14px;pointer-events:none}
.setting-fields select{appearance:none;-webkit-appearance:none;width:100%;height:35px;border:1px solid rgba(166,123,92,.36);border-radius:11px;background:linear-gradient(180deg,rgba(255,249,235,.95),rgba(244,229,203,.92));padding:0 30px 0 12px;color:#5e455d;font-size:12px;font-weight:650;outline:none;box-shadow:inset 0 1px rgba(255,255,255,.8)}
.settings-done{position:relative;margin-top:auto;align-self:center;width:78%;height:40px;border:0;background:transparent url('assets/settings_done_button.webp') center/100% 100% no-repeat;color:#fff3d8;font:800 14px/1 "Songti SC","STSong",serif;text-shadow:0 1px 1px rgba(58,21,89,.28)}
.settings-done span{position:relative;z-index:1}

@media(max-height:820px){
  .player-stage{width:min(96vw,422px);top:max(14px,env(safe-area-inset-top))}
  .player-content{padding-top:10%}
  .transport{height:137px}.pause-orb{width:130px;height:130px}.pause-label{bottom:26px}
  .prompt-card{height:112px}.meaning{font-size:34px}
  .foreground-art{width:112%}
}
@media(min-width:500px){
  .app{height:956px;min-height:956px}
}

/* V2 — scene fills by viewport height and stays right aligned. */
.scene{
  inset:0 !important;
  background-image:url('assets/scene_bg.webp') !important;
  background-repeat:no-repeat !important;
  background-size:auto 100% !important;
  background-position:right top !important;
  transform:none !important;
}

/* V2 — settings controls inherit the word-list drawer picker language. */
.setting-fields{gap:13px !important}
.setting-field{display:block;color:#684f62;font-weight:700}
.setting-field>span{
  display:block;
  margin:0 0 5px 3px;
  color:#684f62;
  font-size:12px; /* one step larger than drawer label */
  line-height:1.2;
}
.setting-picker{position:relative;min-width:0;width:100%}
.setting-picker-trigger{
  box-sizing:border-box;
  width:100%;
  height:32px;
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:2px 4px 2px 5px;
  border:0;
  border-bottom:1px solid rgba(141,113,101,.42);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#5e4569;
  text-align:left;
  font:550 13px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}
.setting-picker-trigger>span{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.setting-picker-trigger>i{flex:0 0 auto;color:#9773a4;font:400 15px/1 Georgia,serif;font-style:normal}
.setting-picker-menu{
  position:absolute;
  z-index:100;
  left:0;
  top:calc(100% + 4px);
  width:100%;
  min-width:100%;
  max-width:100%;
  margin:0;
  padding:5px;
  border:1px solid #c8a575;
  border-radius:11px;
  background:#fff0d4;
  box-shadow:0 6px 17px rgba(44,24,59,.23);
  overflow:hidden;
}
.setting-picker-menu[hidden]{display:none!important}
.setting-picker-menu button{
  box-sizing:border-box;
  display:block;
  width:100%;
  min-height:38px;
  padding:8px 11px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#563b60;
  text-align:left;
  white-space:nowrap;
  font:550 13px/20px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}
.setting-picker-menu button:active,
.setting-picker-menu button.selected{background:#ead8ed}

/* Retire native select styling from V1. */
.select-wrap,.setting-fields select{display:none!important}