/* ===== Stjerneblomsten – visual novel styles ===== */
:root {
  --gold: #d9b15c;
  --gold-2: #f3d58a;
  --red: #7a0f12;
  --red-2: #a3191d;
  --ink: #2a1c10;
  --parch: #f4e8c8;
  --parch-2: #e7d3a4;
  --box: rgba(22, 15, 12, 0.80);
  --box-border: rgba(255, 236, 190, 0.28);
  --ok: #3f9a52;
  --bad: #c0392b;
  --muted: #b9ab93;
  --ui-font: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --title-font: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --head-font: 'Cinzel', Georgia, serif;
  --hand-font: 'Caveat', 'Segoe Print', cursive;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0806; color: #fff; font-family: var(--ui-font); overflow: hidden; -webkit-text-size-adjust: 100%; }
body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

#wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage {
  position: relative; width: 1280px; height: 720px; flex: none;
  overflow: hidden; background: #000; transform-origin: center center;
  box-shadow: 0 0 60px rgba(0,0,0,.8);
  user-select: none;
}
.layer { position: absolute; inset: 0; }

/* ---------- background ---------- */
#bg .bgimg { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
#bg .bgimg.on { opacity: 1; }
#bg svg, #bg img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* ---------- sprites ---------- */
#sprites .sprite {
  position: absolute; bottom: 0; transform: translateX(-50%);
  transition: left .45s ease, opacity .45s ease, filter .3s ease;
  opacity: 0; pointer-events: none;
}
#sprites .sprite.on { opacity: 1; }
#sprites .sprite.dim { filter: brightness(.62) saturate(.8); }
#sprites .sprite svg { display: block; width: 100%; height: 100%; overflow: visible; }
#sprites .sprite.bob svg { animation: bob 3s ease-in-out infinite; }
#sprites .sprite.shake svg { animation: shake .25s linear infinite; }
#sprites .sprite.ghost svg { animation: ghostfloat 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes ghostfloat { 50% { transform: translateY(-16px); } }
@keyframes shake { 0%,100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(-4px,2px) rotate(-2deg); } 75% { transform: translate(4px,-2px) rotate(2deg); } }

#stage.shake { animation: shake .12s linear 4; }
#fxlayer { pointer-events: none; }
#fxlayer .flash { position: absolute; inset: 0; background: #fff; animation: flash .8s ease-out forwards; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
#fxlayer .sparkle { position: absolute; font-size: 28px; animation: sparkle 1.6s ease-out forwards; }
@keyframes sparkle { from { opacity: 1; transform: translate(0,0) scale(.6); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.4) rotate(160deg); } }
#fxlayer .tint { position: absolute; inset: 0; transition: background 1s; }

/* ---------- textbox ---------- */
#textbox {
  position: absolute; left: 24px; right: 24px; bottom: 18px; min-height: 168px;
  background: var(--box); border: 1px solid var(--box-border); border-radius: 6px;
  padding: 22px 120px 22px 30px; box-shadow: 0 6px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
#textbox.narration #text { font-style: normal; }
#nametag {
  position: absolute; left: 22px; top: -40px; height: 40px; padding: 0 22px;
  display: flex; align-items: center; font-family: var(--head-font); font-size: 21px; letter-spacing: .5px;
  background: linear-gradient(180deg, var(--nt, #7a0f12), rgba(0,0,0,.55)); border: 1px solid var(--box-border);
  border-bottom: none; border-radius: 6px 6px 0 0; color: #fff; text-shadow: 0 1px 2px #000;
}
#text { font-size: 27px; line-height: 1.5; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
#trans { margin-top: 8px; font-size: 18px; color: #e8d9b5; font-style: italic; opacity: .9; min-height: 0; }
#trans.off { display: none; }
#tb-tools { position: absolute; right: 16px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
#tb-tools button {
  width: 46px; height: 34px; border-radius: 6px; border: 1px solid var(--box-border);
  background: rgba(255,255,255,.08); color: #fff; font-size: 15px; font-weight: 800;
}
#tb-tools button:hover { background: rgba(255,220,140,.25); }
#tb-tools button.active { background: rgba(217,177,92,.55); }
#next-arrow { position: absolute; right: 22px; bottom: 10px; font-size: 26px; color: #fff; opacity: 0; transition: opacity .2s; }
#textbox.done #next-arrow { opacity: .9; animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(5px); } }

/* clickable words */
.w { border-radius: 3px; cursor: pointer; transition: background .15s; }
.w:hover { background: rgba(255, 214, 120, .30); }
.w.saved { box-shadow: inset 0 -2px 0 rgba(243, 213, 138, .85); }
.w.active { background: rgba(255, 214, 120, .55); }
.hid { opacity: 0; }
.on-word { opacity: 1; transition: opacity .12s; }
.parch .w:hover, .light .w:hover { background: rgba(160, 110, 20, .22); }
.parch .w.saved, .light .w.saved { box-shadow: inset 0 -2px 0 rgba(150, 100, 20, .8); }

/* ---------- choices (like the reference image) ---------- */
#choices { position: absolute; left: 0; right: 0; top: 330px; bottom: 196px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
#choices .choice { pointer-events: auto; }
#choices .choice {
  width: 760px; padding: 10px 24px; text-align: center; font-size: 22px; color: #3a2a1a;
  background: linear-gradient(180deg, rgba(252,246,232,.94), rgba(236,226,204,.94));
  border: 2px solid rgba(255,255,255,.9); border-radius: 3px; box-shadow: 0 3px 12px rgba(0,0,0,.35);
  transition: transform .12s, background .12s; animation: fadein .3s ease both;
}
#choices .choice:hover { transform: scale(1.02); background: linear-gradient(180deg, #fffdf6, #f6ead0); }
#choices .choice .en { display: block; font-size: 15px; color: #6b5a44; font-style: italic; margin-top: 2px; }
#choices.trans-click .choice .en { display: none; }
#choices.trans-click .choice:hover .en { display: block; }
#choices.trans-never .choice .en { display: none; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- HUD ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 14px; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud-left { display: flex; gap: 8px; }
#hud-left > div, #hud-buttons button {
  background: rgba(15,10,8,.68); border: 1px solid var(--box-border); color: #fff; border-radius: 16px;
  padding: 5px 13px; font-size: 14px; font-weight: 700;
}
#hud-points { color: var(--gold-2); }
#hud-buttons { display: flex; gap: 6px; }
#hud-buttons button:hover { background: rgba(122,15,18,.85); }
#hud-buttons button.active { background: rgba(217,177,92,.7); color: #1a1008; }

/* ---------- toasts ---------- */
#toasts { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; z-index: 60; }
.toast {
  background: linear-gradient(180deg, rgba(40,24,10,.95), rgba(20,12,6,.95)); color: var(--gold-2);
  border: 1px solid var(--gold); padding: 10px 22px; border-radius: 22px; font-weight: 800; font-size: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.5); animation: toast 3.4s ease forwards;
}
.toast small { display: block; color: #e9dcc0; font-weight: 600; font-size: 13px; text-align: center; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-10px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- overlay & modals ---------- */
#overlay { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.modal-back { position: absolute; inset: 0; background: rgba(5,3,2,.55); display: flex; align-items: center; justify-content: center; pointer-events: auto; animation: fadein .25s ease both; }
.modal {
  position: relative; width: min(940px, calc(100vw - 20px)); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px);
  overflow: auto; -webkit-overflow-scrolling: touch; padding: 26px 34px;
  border-radius: 10px; color: var(--ink); font-size: 18px;
}
.modal.dark { background: rgba(18,12,9,.96); color: #f3ead6; border: 1px solid var(--box-border); }
.modal.parch {
  background: radial-gradient(ellipse at 30% 20%, #fbf1d6, var(--parch) 45%, var(--parch-2));
  border: 1px solid #b89a5e; box-shadow: 0 10px 40px rgba(0,0,0,.6), inset 0 0 60px rgba(150,110,40,.25);
}
.modal h2 { font-family: var(--head-font); margin: 0 0 4px; font-size: 30px; }
.modal h3 { font-family: var(--head-font); margin: 18px 0 6px; font-size: 20px; }
.modal .sub { color: #7a6548; font-style: italic; margin: 0 0 14px; }
.modal.dark .sub { color: var(--muted); }
.modal .close { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(0,0,0,.12); font-size: 20px; color: inherit; }
.modal.dark .close { background: rgba(255,255,255,.1); }
.modal::-webkit-scrollbar { width: 10px; }
.modal::-webkit-scrollbar-thumb { background: rgba(120,90,40,.5); border-radius: 5px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font-size: 17px; font-weight: 800;
  border: 1px solid rgba(0,0,0,.25); background: linear-gradient(180deg, #a3191d, #6e0d10); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .45; cursor: default; filter: none; }
.btn.gold { background: linear-gradient(180deg, #e8c56f, #b88a2c); color: #2a1a06; }
.btn.ghost { background: rgba(0,0,0,.08); color: inherit; border-color: rgba(0,0,0,.2); box-shadow: none; }
.modal.dark .btn.ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.btn.small { padding: 6px 12px; font-size: 14px; }
.btn.rec { background: linear-gradient(180deg, #2f7d43, #1d5530); }
.btn.rec.live { background: linear-gradient(180deg, #d6332b, #8f1d18); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(214,51,43,.25); } }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }
.muted { color: #7a6548; }
.modal.dark .muted { color: var(--muted); }

/* ---------- exercise panels ---------- */
.ex-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.ex-badge { font-family: var(--head-font); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 12px; color: #fff; }
.ex-badge.listen { background: #2c5d8f; }
.ex-badge.speak { background: #2f7d43; }
.ex-badge.write { background: #8a5a12; }
.ex-badge.read { background: #6b3a8a; }
.ex-title { font-family: var(--head-font); font-size: 27px; font-weight: 700; }
.ex-prompt { font-size: 20px; margin: 8px 0 4px; }
.ex-prompt-en { font-size: 15px; color: #7a6548; font-style: italic; margin-bottom: 10px; }
.listen-box { display: flex; align-items: center; gap: 18px; padding: 18px; background: rgba(44,93,143,.1); border: 1px dashed rgba(44,93,143,.5); border-radius: 10px; margin: 12px 0; }
.big-play { width: 86px; height: 86px; border-radius: 50%; border: none; font-size: 34px; color: #fff; background: radial-gradient(circle at 35% 30%, #4b86c4, #1f4770); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.big-play.playing { animation: pulse 1s ease-in-out infinite; }
.wave { display: flex; gap: 3px; align-items: center; height: 40px; }
.wave i { width: 5px; background: #2c5d8f; border-radius: 3px; height: 6px; transition: height .1s; }
.wave.on i { animation: wave 0.9s ease-in-out infinite; }
.wave.on i:nth-child(2n) { animation-delay: .15s; } .wave.on i:nth-child(3n) { animation-delay: .3s; } .wave.on i:nth-child(5n) { animation-delay: .45s; }
@keyframes wave { 50% { height: 36px; } }
.q-block { margin: 14px 0; padding: 12px 16px; background: rgba(255,255,255,.45); border-radius: 8px; border: 1px solid rgba(120,90,40,.25); }
.q-text { font-weight: 800; font-size: 19px; }
.q-en { font-size: 14px; color: #7a6548; font-style: italic; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.opt { padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(90,60,20,.35); background: #fffaf0; font-size: 17px; text-align: left; color: var(--ink); }
.opt:hover { background: #fff3d6; }
.opt.right { background: #d8f0d8; border-color: var(--ok); }
.opt.wrong { background: #f6d6d2; border-color: var(--bad); }
.opt .en { display: block; font-size: 13px; color: #8a7558; font-style: italic; }
.transcript { margin: 10px 0; padding: 12px 16px; background: rgba(255,255,255,.55); border-radius: 8px; border-left: 4px solid #2c5d8f; }
.transcript .line { margin: 6px 0; }
.transcript .line .da { font-size: 19px; }
.transcript .line .en { font-size: 14px; color: #7a6548; font-style: italic; }
.mini-play { border: none; background: none; font-size: 17px; padding: 0 4px; }
.target { font-size: 25px; font-weight: 800; padding: 14px 18px; border-radius: 10px; background: rgba(47,125,67,.1); border: 1px dashed rgba(47,125,67,.6); margin: 8px 0; }
.target .label { display: block; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #2f7d43; font-weight: 800; margin-bottom: 4px; font-family: var(--head-font); }
.target .en { display: block; font-size: 15px; font-weight: 600; color: #7a6548; font-style: italic; margin-top: 4px; }
.heard { min-height: 34px; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.6); font-size: 19px; margin: 8px 0; }
.heard .ok { color: var(--ok); font-weight: 800; }
.heard .miss { color: var(--bad); text-decoration: line-through; }
.score-ok { color: var(--ok); font-weight: 800; }
.score-bad { color: var(--bad); font-weight: 800; }
.npc-line { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; padding: 10px 14px; border-radius: 10px; background: rgba(44,93,143,.08); }
.npc-line .who { font-weight: 800; white-space: nowrap; }
.turns { max-height: 230px; overflow: auto; }
textarea, input[type=text] {
  width: 100%; font-family: var(--ui-font); font-size: 19px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgba(90,60,20,.4); background: #fffdf6; color: var(--ink); outline: none; user-select: text;
}
textarea:focus, input[type=text]:focus { border-color: #a3191d; box-shadow: 0 0 0 3px rgba(163,25,29,.15); }
textarea { min-height: 120px; resize: vertical; }
.letters { display: flex; gap: 6px; margin: 6px 0; }
.letters button { width: 38px; height: 34px; border-radius: 6px; border: 1px solid rgba(90,60,20,.4); background: #fff7e6; font-size: 18px; font-weight: 800; color: var(--ink); }
.req { list-style: none; padding: 0; margin: 8px 0; }
.req li { padding: 3px 0; font-size: 16px; }
.req li.ok::before { content: '✓ '; color: var(--ok); font-weight: 800; }
.req li.no::before { content: '✗ '; color: var(--bad); font-weight: 800; }
.model { padding: 10px 14px; border-radius: 8px; background: rgba(138,90,18,.1); border-left: 4px solid #8a5a12; margin: 8px 0; }
.model .en { font-size: 14px; color: #7a6548; font-style: italic; display: block; }
.passage { padding: 14px 18px; background: rgba(255,255,255,.5); border-radius: 6px; border: 1px solid rgba(120,90,40,.3); font-family: Georgia, serif; font-size: 18px; line-height: 1.55; margin: 8px 0 12px; }
.passage .pl { margin: 4px 0; }
.passage .pl .en { display: block; font-size: 13px; color: #7a6548; font-style: italic; font-family: var(--ui-font); }
.hand { font-family: var(--hand-font); font-size: 27px; line-height: 1.35; }
.task { margin: 14px 0; }
.task .tq { font-weight: 800; margin-bottom: 6px; }
.task .tq .en { font-weight: 400; font-size: 14px; color: #7a6548; font-style: italic; display: block; }
.feedback { margin-top: 6px; font-weight: 700; }

/* phone UI for text messages */
.phone { width: 420px; margin: 8px auto; background: #111; border-radius: 34px; padding: 16px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.phone .screen { background: #f2efe9; border-radius: 22px; padding: 12px; min-height: 260px; display: flex; flex-direction: column; gap: 8px; }
.phone .ph-head { text-align: center; font-weight: 800; color: #333; font-size: 15px; padding-bottom: 6px; border-bottom: 1px solid #ddd; }
.bubble { max-width: 80%; padding: 8px 12px; border-radius: 16px; font-size: 16px; }
.bubble.in { background: #e3e0da; color: #222; align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.out { background: #a3191d; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble .en { display: block; font-size: 12px; opacity: .75; font-style: italic; }

/* sticky note / exam / letter variants */
.modal.note { background: #fff59d; border: none; box-shadow: 0 12px 40px rgba(0,0,0,.6); width: 760px; transform: rotate(-.6deg); }
.modal.exam { background: #fbfaf5; border: 1px solid #c9c2b0; background-image: repeating-linear-gradient(0deg, transparent 0 33px, rgba(80,120,200,.18) 33px 34px); }
.modal.phonebg { background: rgba(26,20,30,.97); color: #f3ead6; border: 1px solid var(--box-border); }
.modal.phonebg .ex-prompt-en, .modal.phonebg .muted { color: var(--muted); }
.modal.phonebg .heard { background: rgba(255,255,255,.08); color: #f3ead6; }
.modal.phonebg .target { background: rgba(47,125,67,.2); }
.modal.phonebg .target .en, .modal.phonebg .q-en, .modal.phonebg .tq .en { color: var(--muted); }
.modal.phonebg .btn.ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.modal.phonebg .w:hover { background: rgba(255, 214, 120, .25); }

/* ---------- word popup ---------- */
#wordpop {
  position: fixed; z-index: 100; width: 330px; padding: 14px 16px 12px; border-radius: 10px;
  background: #fbf3df; color: var(--ink); border: 1px solid #b89a5e; box-shadow: 0 10px 30px rgba(0,0,0,.55);
  font-size: 15px; font-family: var(--ui-font);
}
#wordpop .wp-word { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
#wordpop .wp-word button { border: none; background: none; font-size: 18px; }
#wordpop .wp-mean { font-size: 18px; margin: 6px 0; color: #5a1010; font-weight: 700; }
#wordpop .wp-note { font-size: 13px; color: #7a6548; }
#wordpop .wp-sent { font-size: 13px; color: #6b5a44; font-style: italic; border-top: 1px solid rgba(120,90,40,.25); margin-top: 8px; padding-top: 6px; }
#wordpop .wp-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; font-size: 13px; }
#wordpop .wp-actions a { color: #7a0f12; }
#wordpop .saved-tag { color: var(--ok); font-weight: 800; }
#wordpop input { font-size: 16px; padding: 6px 8px; margin-top: 6px; }

/* ---------- wheel ---------- */
.wheel-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wheel-wrap h2 { margin: 0; }
.wheel-wrap .sub { margin: 0; }
.wheel-box { position: relative; width: var(--wheel, 360px); height: var(--wheel, 360px); }
.wheel-box svg.wheel { width: var(--wheel, 360px); height: var(--wheel, 360px); transition: transform 4.2s cubic-bezier(.12,.8,.18,1); }
.wheel-pointer { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 36px solid var(--gold-2); filter: drop-shadow(0 3px 3px rgba(0,0,0,.6)); z-index: 2; }
.wheel-result { font-family: var(--head-font); font-size: 28px; min-height: 40px; text-align: center; }
.boom { animation: boom .6s ease-out; }
@keyframes boom { 0% { transform: scale(1); } 30% { transform: scale(1.25); filter: brightness(2); } 100% { transform: scale(1); } }
.quiz-word { font-size: 40px; font-weight: 800; text-align: center; margin: 10px 0 2px; }
.quiz-ctx { text-align: center; font-style: italic; color: var(--muted); font-size: 15px; margin-bottom: 10px; }
.fuse { height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; margin: 8px 0 14px; }
.fuse i { display: block; height: 100%; background: linear-gradient(90deg, #f3d58a, #e8572b); width: 100%; transition: width .4s; }

/* ---------- flashcard list ---------- */
.cards-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cards-table th { text-align: left; font-family: var(--head-font); font-size: 13px; letter-spacing: 1px; padding: 6px; border-bottom: 1px solid rgba(255,255,255,.2); }
.cards-table td { padding: 6px; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: top; }
.cards-table td.w-da { font-weight: 800; font-size: 17px; }
.cards-table td input { background: transparent; color: inherit; border: 1px solid transparent; padding: 3px 6px; font-size: 16px; }
.cards-table td input:hover, .cards-table td input:focus { border-color: rgba(255,255,255,.25); box-shadow: none; }
.acc { display: inline-block; min-width: 46px; text-align: center; border-radius: 10px; padding: 1px 6px; font-weight: 800; font-size: 13px; }

/* ---------- title screen ---------- */
#title { position: absolute; inset: 0; z-index: 20; }
#title .title-bg { position: absolute; inset: 0; }
#title .title-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
#title h1 { font-family: var(--title-font); font-size: 78px; margin: 0; color: var(--gold-2); text-shadow: 0 0 24px rgba(255,210,120,.55), 0 4px 6px #000; letter-spacing: 2px; }
#title .tagline { font-size: 21px; color: #f1e6cc; text-shadow: 0 2px 4px #000; margin-bottom: 24px; font-style: italic; }
#title .menu { display: flex; flex-direction: column; gap: 10px; width: 330px; }
#title .menu button {
  padding: 12px; font-size: 20px; font-family: var(--head-font); font-weight: 700; border-radius: 6px;
  background: rgba(18,12,8,.72); color: #f6ecd3; border: 1px solid rgba(243,213,138,.45); transition: all .15s;
}
#title .menu button:hover { background: rgba(122,15,18,.88); border-color: var(--gold-2); }
#title .server-status { position: absolute; bottom: 12px; left: 16px; font-size: 13px; color: #d9cdb2; background: rgba(0,0,0,.5); padding: 6px 12px; border-radius: 14px; }

/* chapter card */
.chapter-card { text-align: center; padding: 40px 30px; }
.chapter-card .num { font-family: var(--head-font); letter-spacing: 4px; color: #8a6a2a; font-size: 16px; }
.chapter-card h2 { font-family: var(--title-font); font-size: 44px; margin: 8px 0; color: #5a0d0f; }
.chapter-card .en { font-style: italic; color: #7a6548; font-size: 18px; }
.chapter-card .hurdle { margin: 24px auto 10px; max-width: 640px; padding: 14px 18px; border: 1px dashed #b89a5e; border-radius: 8px; background: rgba(255,255,255,.35); }

/* recipe / bag */
.recipe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ing { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.4); border: 1px solid rgba(120,90,40,.25); }
.ing .ic { font-size: 28px; width: 40px; text-align: center; }
.ing.have { background: rgba(63,154,82,.15); border-color: rgba(63,154,82,.5); }
.ing.missing .ic { filter: grayscale(1); opacity: .45; }
.hurdles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: 13px; }
.hurdles div { padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,.06); }
.hurdles div.done { background: rgba(63,154,82,.18); }
.hurdles div.cur { outline: 2px solid #a3191d; }

/* settings / misc */
.set-row { display: grid; grid-template-columns: 300px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.set-row label { font-weight: 700; }
.set-row small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; }
.set-row select, .set-row input[type=text], .set-row input[type=number] {
  font-family: var(--ui-font); font-size: 16px; padding: 6px 8px; border-radius: 6px; background: #241a14; color: #f3ead6; border: 1px solid rgba(255,255,255,.2); width: auto;
}
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pillar { padding: 14px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); text-align: center; }
.pillar .ic { font-size: 30px; }
.pillar .big { font-size: 30px; font-weight: 800; color: var(--gold-2); }
.bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--gold); }
.log-entry { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.log-entry .who { font-weight: 800; color: var(--gold-2); margin-right: 6px; }
.log-entry .en { display: block; font-size: 14px; color: var(--muted); font-style: italic; }
.log-entry.choice .da { color: #9fd3ff; }
.chap-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chap-list button { text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: #f3ead6; font-size: 15px; }
.chap-list button:hover:not(:disabled) { background: rgba(122,15,18,.6); }
.chap-list button:disabled { opacity: .35; cursor: default; }
.chap-list button b { display: block; font-family: var(--head-font); font-size: 16px; }
.kbd { display: inline-block; padding: 1px 7px; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); font-size: 13px; }
.help p { margin: 6px 0; }
.ending { text-align: center; }

/* ================= phones & small screens ================= */
#rotate { display: none; }
#choices.show-en .choice .en { display: block !important; }
:root { --wheel: min(360px, 52vh); }
.set-row select, .set-row input[type=text], .set-row input[type=number] { font-size: 16px; }

/* the stage is scaled down a lot on a phone: make its text and buttons bigger */
#stage.compact #textbox { min-height: 236px; padding: 26px 170px 24px 36px; }
#stage.compact #text { font-size: 40px; line-height: 1.38; }
#stage.compact #trans { font-size: 28px; }
#stage.compact #nametag { height: 58px; top: -58px; font-size: 32px; padding: 0 26px; }
#stage.compact #tb-tools { right: 18px; top: 16px; gap: 10px; }
#stage.compact #tb-tools button { width: 96px; height: 72px; font-size: 30px; border-radius: 12px; }
#stage.compact #next-arrow { font-size: 44px; }
#stage.compact #choices { top: 296px; bottom: 256px; gap: 12px; }
#stage.compact #choices .choice { width: 1040px; font-size: 34px; padding: 16px 28px; }
#stage.compact #choices .choice .en { font-size: 24px; }
#stage.compact #hud { padding: 14px 18px; }
#stage.compact #hud-left > div, #stage.compact #hud-buttons button { font-size: 26px; padding: 10px 20px; border-radius: 30px; }
#stage.compact #hud-buttons { gap: 10px; }
#stage.compact #hud-buttons .lbl, #stage.compact #hud .long { display: none; }
#stage.compact #title h1 { font-size: 96px; }
#stage.compact #title .tagline { font-size: 30px; margin-bottom: 26px; padding: 0 30px; text-align: center; }
#stage.compact #title .menu { display: grid; grid-template-columns: 1fr 1fr; width: 1000px; gap: 16px; }
#stage.compact #title .menu button { font-size: 30px; padding: 20px 14px; }
#stage.compact #title .menu button[data-a=cont] { grid-column: 1 / -1; }
#stage.compact #title .server-status { font-size: 22px; }

/* full-size panels on small screens */
@media (max-height: 520px), (max-width: 700px) {
  .modal { padding: 16px 18px; font-size: 17px; border-radius: 8px; }
  .modal h2 { font-size: 24px; }
  .ex-title { font-size: 22px; }
  .modal .close { width: 44px; height: 44px; right: 6px; top: 6px; }
  .btn { padding: 12px 16px; min-height: 44px; }
  .btn.small { padding: 8px 12px; min-height: 38px; }
  .opt { min-height: 44px; }
  .big-play { width: 72px; height: 72px; }
  .phone { width: min(420px, 100%); }
  .chapter-card { padding: 14px 10px; }
  .chapter-card h2 { font-size: 32px; }
  .chapter-card .hurdle { margin: 12px auto 6px; }
  .quiz-word { font-size: 32px; }
  .set-row { grid-template-columns: 1fr; gap: 4px; }
  .chap-list, .recipe, .pillars { grid-template-columns: 1fr 1fr; }
  .hurdles { grid-template-columns: 1fr 1fr; }
  .cards-table td.w-da { font-size: 16px; }
  #wordpop { width: min(330px, calc(100vw - 16px)); }
}
@media (max-width: 560px) {
  .opts, .chap-list, .recipe, .pillars { grid-template-columns: 1fr; }
}
/* phone held upright: ask to rotate (the game is designed for landscape) */
@media (orientation: portrait) and (max-width: 700px) {
  #rotate { display: flex; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; text-align: center;
    background: radial-gradient(ellipse at center, #1d1f4a, #070a24); color: #f3d58a; font-size: 20px; line-height: 1.5; padding: 30px; }
  #rotate .ic { font-size: 64px; margin-bottom: 10px; animation: tilt 2s ease-in-out infinite; }
}
@keyframes tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-90deg); } }
/* wheel side-by-side on short (landscape phone) screens so the spin button is always visible */
@media (max-height: 520px) {
  :root { --wheel: min(300px, 68vh); }
  .wheel-wrap { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "wheel h" "wheel sub" "wheel res" "wheel btn"; align-items: center; column-gap: 28px; row-gap: 8px; }
  .wheel-wrap h2 { grid-area: h; }
  .wheel-wrap .sub { grid-area: sub; text-align: left !important; font-size: 15px; }
  .wheel-wrap .wheel-box { grid-area: wheel; }
  .wheel-wrap .wheel-result { grid-area: res; text-align: left; font-size: 22px; min-height: 0; }
  .wheel-wrap .row { grid-area: btn; }
}

/* ================= word practice (part 2 after speaking) ================= */
.modal.drill-modal { width: min(720px, calc(100vw - 20px)); background: #fff; color: #222; border-radius: 12px; padding: 22px 30px 26px; overflow-x: hidden; }
.modal.drill-modal .close { color: #888; background: none; font-size: 26px; }
.modal.drill-modal:has(.drill[data-state=recording]) { background: #f9d7d7; overflow: hidden; }
.drill { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; font-family: var(--ui-font); }
.drill small { font-size: 13px; color: #8a8f98; font-weight: 600; margin-left: 4px; }
.dr-steps { display: flex; align-items: center; }
.dr-steps .st { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: #c9cdd3; color: #fff; z-index: 1; }
.dr-steps .st svg { width: 18px; height: 18px; }
.dr-steps .ln { width: 72px; height: 4px; background: #d9dce0; margin: 0 -2px; }
.drill[data-state=listen] .s1 { background: #1a73e8; }
.drill[data-state=recording] .s1, .drill[data-state=recording] .s2, .drill[data-state=recording] .l1 { background: #c40d2a; }
.drill[data-state=recording] .s3 { background: #fff; color: #555; }
.drill[data-state=recording] .l2 { background: #fff; }
.drill[data-state=compare] .st, .drill[data-state=compare] .ln { background: #1a73e8; }
.dr-count { font-size: 14px; color: #6b7280; text-align: center; }
.dr-count b { color: #c40d2a; font-family: var(--head-font); letter-spacing: .5px; margin-right: 6px; }
.dr-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.dr-card { width: 100%; border: 1px solid #7d9bc4; border-bottom-width: 3px; border-radius: 10px; text-align: center; overflow: hidden; }
.dr-card .dr-word { padding: 54px 16px 6px; }
.dr-card .dr-mean { padding: 0 16px 44px; }
.dr-card.compact .dr-word { padding: 18px 16px 2px; font-size: 34px; }
.dr-card.compact .dr-mean { padding: 0 16px 18px; }
.dr-word { font-size: 46px; font-weight: 800; letter-spacing: .5px; color: #111; word-break: break-word; }
.dr-word.big { font-size: 52px; margin: 36px 0 60px; position: relative; z-index: 1; }
.dr-mean { font-size: 19px; color: #6b7280; }
.dr-base { font-size: 15px; color: #9aa1ab; }
.dr-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; font-size: 20px; cursor: pointer; text-align: left; transition: background .15s; background: #fff; }
.dr-card .dr-row { border-top: 1px solid #d3dce8; }
.dr-row:hover, .dr-row.playing { background: #eef4ff; }
.dr-play { width: 44px; height: 44px; flex: none; border-radius: 50%; background: #1a73e8; color: #fff; display: grid; place-items: center; }
.dr-play svg { width: 24px; height: 24px; margin-left: 2px; }
.dr-row.playing .dr-play { animation: pulse 1s ease-in-out infinite; }
.dr-pair { width: 100%; display: flex; flex-direction: column; align-items: stretch; }
.dr-pair .dr-row { border: 1px solid #7d9bc4; border-radius: 6px; }
.dr-join { display: block; width: 1px; height: 22px; background: #9aa9bd; margin: 0 auto; }
.dr-compare { border: none; border-radius: 4px; background: #1a73e8; color: #fff; font-size: 24px; font-weight: 800; padding: 20px; font-family: var(--ui-font); }
.dr-compare small { color: #cfe0ff; }
.dr-compare:hover { filter: brightness(1.08); }
.dr-rec { display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; z-index: 1; }
.dr-label { font-size: 21px; font-weight: 800; color: #222; text-align: center; }
.dr-label small { display: block; margin: 2px 0 0; }
.dr-recbtn { width: 108px; height: 108px; border-radius: 50%; border: none; background: #c40d2a; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(196,13,42,.3); transition: transform .12s; }
.dr-recbtn:hover { transform: scale(1.04); }
.dr-recbtn i { width: 44px; height: 44px; border-radius: 50%; background: #fff; }
.dr-recbtn.stop i { border-radius: 10px; }
.dr-nav { display: flex; gap: 16px; justify-content: center; }
.dr-btn { min-width: 200px; padding: 14px 22px; border: 1px solid #c4c9d0; border-radius: 6px; background: #fff; color: #333; font-size: 17px; font-weight: 800; font-family: var(--ui-font); }
.dr-btn:hover:not(:disabled) { background: #f5f7fa; }
.dr-btn:disabled { opacity: .4; cursor: default; }
.drill[data-state=recording] .dr-nav, .drill[data-state=recording] .dr-count { visibility: hidden; }
.dr-recording { width: 100%; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; }
.dr-waves { position: absolute; left: -40px; right: -40px; bottom: -110px; height: 330px; --lvl: .5; pointer-events: none; }
.dr-waves svg { width: 100%; height: 100%; }
.dr-waves path { transform-origin: 50% 100%; transform: scaleY(var(--lvl)); transition: transform .12s linear; }
.dr-waves .w1 { fill: rgba(236,150,150,.30); animation: drift 7s ease-in-out infinite alternate; }
.dr-waves .w2 { fill: rgba(232,130,130,.28); animation: drift 5s ease-in-out infinite alternate-reverse; }
.dr-waves .w3 { fill: rgba(228,115,115,.25); animation: drift 9s ease-in-out infinite alternate; }
@keyframes drift { from { translate: -40px 0; } to { translate: 40px 0; } }
.dr-live { position: absolute; left: 0; bottom: -64px; display: flex; align-items: center; gap: 10px; color: #c40d2a; font-weight: 700; font-size: 17px; z-index: 1; }
.dr-live i { width: 18px; height: 18px; border-radius: 50%; background: #c40d2a; animation: pulse 1s ease-in-out infinite; }
/* phone held sideways: card on the left, buttons on the right */
@media (max-height: 520px) {
  .modal.drill-modal { width: min(820px, calc(100vw - 16px)); padding: 12px 18px 14px; }
  .drill { gap: 8px; }
  .dr-steps .st { width: 28px; height: 28px; font-size: 13px; }
  .dr-steps .ln { width: 48px; }
  .dr-body { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 16px; }
  .drill[data-state=recording] .dr-body { display: flex; }
  .dr-card .dr-word { padding: 18px 12px 2px; font-size: 34px; }
  .dr-card .dr-mean { padding: 0 12px 16px; font-size: 16px; }
  .dr-row { padding: 9px 14px; font-size: 17px; }
  .dr-play { width: 36px; height: 36px; }
  .dr-join { height: 10px; }
  .dr-compare { font-size: 19px; padding: 12px; }
  .dr-recbtn { width: 70px; height: 70px; }
  .dr-recbtn i { width: 30px; height: 30px; }
  .dr-label { font-size: 17px; }
  .dr-btn { min-width: 150px; padding: 9px 14px; font-size: 15px; }
  .dr-recording { min-height: 0; padding-bottom: 14px; }
  .dr-word.big { font-size: 40px; margin: 6px 0 14px; }
  .dr-waves { bottom: -40px; height: 200px; }
  .dr-live { bottom: -6px; font-size: 14px; }
  .drill[data-state=compare] .dr-body { grid-template-columns: 1.3fr 1fr; align-items: start; row-gap: 8px; }
  .drill[data-state=compare] .dr-body > .dr-pair { grid-column: 1; grid-row: 1 / span 2; }
  .drill[data-state=compare] .dr-body > .dr-card { grid-column: 2; grid-row: 1; }
  .drill[data-state=compare] .dr-body > .dr-rec { grid-column: 2; grid-row: 2; gap: 6px; }
  .dr-card.compact .dr-word { padding: 8px 10px 0; font-size: 26px; }
  .dr-card.compact .dr-mean { padding: 0 10px 8px; font-size: 14px; }
}
@media (max-width: 560px) { .dr-btn { min-width: 0; flex: 1; } .dr-word { font-size: 38px; } }