:root{
  --bg:#f4ecdd; --card:#fbf6ea; --card2:#f3e8d2; --ink:#33291c; --muted:#8a7a61;
  --accent:#9c6b1f; --green:#4c7f4c; --red:#b04a3c; --gold:#8f6a14; --border:#dcc9a4;
  --radius:16px;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:var(--serif); color:var(--ink); min-height:100vh; display:flex; flex-direction:column;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(213,168,90,.22), transparent 60%),
    radial-gradient(ellipse 70% 45% at 85% 0%, rgba(176,116,110,.14), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(95,125,156,.12), transparent 65%),
    var(--bg);
  background-attachment:fixed;
  position:relative; overflow-x:hidden;
}
a{color:var(--accent);}

.petal{
  position:fixed; top:-30px; pointer-events:none; z-index:0; opacity:.5;
  width:14px; height:11px; border-radius:80% 20% 70% 30% / 60% 40% 60% 40%;
  background:linear-gradient(135deg, #e0b1a0, #c98d76);
  animation:drift linear infinite;
}
.petal:nth-child(even){background:linear-gradient(135deg, #dcbe86, #c8a253); width:11px; height:9px;}
@keyframes drift{
  0%   {transform:translate(0,-4vh) rotate(0deg);}
  100% {transform:translate(var(--sway,6vw),106vh) rotate(340deg);}
}
@media (prefers-reduced-motion: reduce){ .petal{display:none;} }

#app-header{padding:22px 24px 4px; text-align:center; position:relative; z-index:1;}
.brand{font-size:1.7rem; font-weight:700; letter-spacing:1.5px;}
.brand::before, .brand::after{content:"—"; color:var(--border); margin:0 12px; font-weight:400;}
.tagline{color:var(--muted); font-size:.85rem; margin-top:4px; font-style:italic; letter-spacing:.4px;}

#main-nav{display:flex; gap:6px; justify-content:flex-start; overflow-x:auto; padding:14px; position:relative; z-index:1;}
@media(min-width:720px){#main-nav{justify-content:center; flex-wrap:wrap;}}
#main-nav button{
  background:var(--card); color:var(--ink); border:1px solid var(--border); border-radius:999px;
  padding:8px 16px; font-size:.85rem; cursor:pointer; white-space:nowrap; transition:.15s;
  font-family:var(--serif); letter-spacing:.5px; box-shadow:0 1px 2px rgba(90,70,35,.08);
}
#main-nav button:hover{border-color:var(--accent);}
#main-nav button.active{
  background:linear-gradient(160deg,#b5842f,#8f6a14); border-color:#8f6a14; color:#fdf8ec; font-weight:600;
  box-shadow:0 2px 6px rgba(143,106,20,.35);
}
main{max-width:660px; width:100%; margin:0 auto; padding:10px 20px 40px; flex:1; position:relative; z-index:1;}
footer{padding:14px; text-align:center; position:relative; z-index:1;}
footer::before{content:"❦"; display:block; color:var(--border); font-size:1rem; margin-bottom:6px;}
.small{font-size:.74rem; color:var(--muted);}
.loading{text-align:center; color:var(--muted); padding:60px 0; font-style:italic;}

.stats{display:flex; gap:10px; justify-content:center; margin-bottom:14px; flex-wrap:wrap;}
.stat{
  background:var(--card); border:1px solid var(--border); border-radius:10px; padding:8px 16px;
  font-size:.78rem; color:var(--muted); text-align:center; box-shadow:0 1px 3px rgba(90,70,35,.07);
}
.stat b{color:var(--ink); font-size:1.05rem; display:block; font-variant-numeric:tabular-nums;}
select,input[type=text]{
  background:var(--card); color:var(--ink); border:1px solid var(--border); border-radius:10px;
  padding:11px 12px; font-size:.95rem; width:100%; margin-bottom:12px; font-family:var(--serif);
}
input[type=text]:focus,select:focus{outline:2px solid var(--accent);}
.card{
  background:linear-gradient(160deg,var(--card),var(--card2)); border-radius:var(--radius);
  border:1px solid var(--border); padding:24px; box-shadow:0 3px 14px rgba(90,70,35,.10);
  position:relative;
}
.card::before{
  content:""; position:absolute; inset:6px; border:1px solid rgba(156,107,31,.18);
  border-radius:10px; pointer-events:none;
}
.flashcard{min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; cursor:pointer; user-select:none;}
.flashcard .word{font-size:2rem; font-weight:700; letter-spacing:.5px;}
.flashcard .ipa{color:var(--muted); font-size:1rem; margin-top:6px;}
.flashcard .pos{color:var(--gold); font-size:.72rem; text-transform:uppercase; letter-spacing:2px; margin-top:10px;}
.flashcard .hint{color:var(--muted); font-size:.8rem; margin-top:14px; font-style:italic;}
.flashcard .answer{font-size:1.35rem; color:var(--accent); margin-top:10px; font-style:italic;}
.btnrow{display:flex; gap:10px; margin-top:14px;}
.btnrow button{
  flex:1; padding:13px; border:none; border-radius:12px; font-size:1rem; font-weight:600; cursor:pointer;
  font-family:var(--serif); letter-spacing:.4px; box-shadow:0 2px 5px rgba(90,70,35,.15);
}
.btn-again{background:linear-gradient(160deg,#c05a49,#a4402f); color:#fdf1ee;}
.btn-good{background:linear-gradient(160deg,#5c905c,#43703f); color:#eef6ea;}
.btn-main{background:linear-gradient(160deg,#b5842f,#8f6a14); color:#fdf8ec;}
.btn-neutral{background:var(--card); color:var(--ink); border:1px solid var(--border) !important; box-shadow:none;}
.prompt{font-size:1.3rem; font-weight:600; text-align:center;}
.sub{color:var(--muted); font-size:.85rem; margin-top:6px; text-align:center; font-style:italic;}
.feedback{min-height:26px; margin-top:12px; font-weight:600; text-align:center;}
.feedback.ok{color:var(--green);}
.feedback.no{color:var(--red);}
.choices{display:grid; gap:10px; margin-top:16px;}
.choices button{
  background:var(--card); border:1px solid var(--border); color:var(--ink); border-radius:12px;
  padding:13px; font-size:1rem; cursor:pointer; text-align:left; transition:.12s; font-family:var(--serif);
}
.choices button:hover{border-color:var(--accent); box-shadow:0 2px 6px rgba(143,106,20,.18);}
.choices button.correct{background:#dcead2; color:#2f4d2a; border-color:var(--green);}
.choices button.wrong{background:#f0d7d1; color:#6e2a1f; border-color:var(--red);}
.accent-row{display:flex; gap:6px; justify-content:center; margin-top:10px; flex-wrap:wrap;}
.accent-row button{background:var(--card); border:1px solid var(--border); color:var(--ink); border-radius:8px; padding:6px 12px; font-size:1rem; cursor:pointer; font-family:var(--serif);}
.progressbar{height:6px; background:rgba(156,107,31,.15); border-radius:3px; margin:12px 0; overflow:hidden;}
.progressbar div{height:100%; background:linear-gradient(90deg,#b5842f,#8f6a14); transition:width .3s;}

.lesson-list{display:grid; gap:10px;}
.lesson-item{
  display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:14px 16px; cursor:pointer; transition:.12s; box-shadow:0 1px 4px rgba(90,70,35,.08);
}
.lesson-item:hover{border-color:var(--accent); box-shadow:0 3px 8px rgba(143,106,20,.16);}
.lesson-item.locked{opacity:.45; cursor:not-allowed;}
.lesson-item .num{
  width:38px; height:38px; border-radius:50%; background:var(--card2); display:flex; align-items:center;
  justify-content:center; font-weight:700; flex-shrink:0; border:1px solid var(--border); color:var(--gold);
}
.lesson-item.done .num{background:linear-gradient(160deg,#5c905c,#43703f); color:#eef6ea; border-color:var(--green);}
.lesson-item .t{font-weight:600;}
.lesson-item .d{color:var(--muted); font-size:.78rem; margin-top:2px; font-style:italic;}
.grammar-note{line-height:1.6; font-size:.97rem;}
.grammar-note h3{margin-bottom:10px; letter-spacing:.5px;}
.grammar-note h3::after{content:" ❧"; color:var(--border);}
.grammar-note table{border-collapse:collapse; margin:10px 0; width:100%;}
.grammar-note td,.grammar-note th{border:1px solid var(--border); padding:6px 10px; font-size:.88rem; text-align:left;}
.grammar-note .fr{color:var(--accent); font-weight:600;}
.done-msg{text-align:center; padding:36px 16px;}
.done-msg .big{font-size:2.3rem;}
.done-msg p{color:var(--muted); margin-top:8px;}

.home-grid{display:grid; gap:12px; grid-template-columns:1fr 1fr;}
.home-tile{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; cursor:pointer;
  box-shadow:0 1px 4px rgba(90,70,35,.08); transition:.12s;
}
.home-tile:hover{border-color:var(--accent); box-shadow:0 3px 10px rgba(143,106,20,.18); transform:translateY(-1px);}
.home-tile .big{font-size:1.5rem;}
.home-tile .t{font-weight:600; margin-top:6px;}
.home-tile .d{color:var(--muted); font-size:.78rem; margin-top:2px; font-style:italic;}

.dict-result{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 16px; margin-bottom:8px; box-shadow:0 1px 3px rgba(90,70,35,.07);}
.dict-result .w{font-weight:700; font-size:1.05rem;}
.dict-result .ipa{color:var(--muted); margin-left:8px; font-size:.9rem;}
.dict-result .g{color:var(--gold); font-size:.85rem; margin-left:6px; font-style:italic;}
.dict-result .tr{color:var(--muted); margin-top:4px; font-size:.92rem;}

#chat-log{display:flex; flex-direction:column; gap:10px; min-height:280px; max-height:420px; overflow-y:auto; padding:4px;}
.msg{max-width:85%; padding:11px 14px; border-radius:14px; line-height:1.5; font-size:.95rem;}
.msg.bot{background:var(--card2); border:1px solid var(--border); align-self:flex-start;}
.msg.me{background:linear-gradient(160deg,#b5842f,#8f6a14); color:#fdf8ec; align-self:flex-end;}
.chat-row{display:flex; gap:8px; margin-top:12px;}
.chat-row input{flex:1; margin-bottom:0;}
.chat-row button{
  padding:11px 18px; border:none; border-radius:10px; background:linear-gradient(160deg,#b5842f,#8f6a14);
  color:#fdf8ec; font-weight:600; cursor:pointer; font-family:var(--serif);
}
.notice{background:var(--card); border:1px solid var(--gold); border-radius:12px; padding:14px; font-size:.88rem; color:var(--muted); margin-bottom:12px;}

/* ============================================================
   CAFÉ HOME SHELL (immersive scene)
   ============================================================ */
body.cafe-mode{background:#120e16;overflow:hidden;height:100vh;display:block}
#cafe{position:fixed;inset:0;overflow:hidden}
#painting{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.045);
  width:max(100vw,177.78vh);height:max(100vh,56.25vw);object-fit:cover;transition:transform .25s ease-out}
#cafe .fx{position:absolute;pointer-events:none}
.credits{position:absolute;right:10px;bottom:6px;font-size:.62rem;color:rgba(240,227,196,.55);z-index:30}
.credits a{color:rgba(240,227,196,.7)}

#clouds{left:0;top:2%;width:36%;height:44%;overflow:hidden;opacity:.6;
  -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
.cloud{position:absolute;border-radius:50%;filter:blur(14px);
  background:radial-gradient(ellipse,rgba(255,224,190,.5),rgba(255,200,170,.12) 70%,transparent);
  animation:cloudDrift linear infinite}
@keyframes cloudDrift{from{transform:translateX(-130%)}to{transform:translateX(420%)}}
.wisp{position:absolute;width:16px;height:52px;border-radius:50%;filter:blur(6px);
  background:linear-gradient(to top,rgba(255,248,235,0),rgba(255,248,235,.75) 45%,rgba(255,248,235,0));
  transform-origin:center bottom;animation:steamRise 3.6s ease-in-out infinite;opacity:0}
.wisp.w2{animation-delay:-1.2s;width:12px}
.wisp.w3{animation-delay:-2.4s;width:14px}
@keyframes steamRise{0%{transform:translate(0,0) scaleX(1);opacity:0}18%{opacity:.8}
  55%{transform:translate(-7px,-52px) scaleX(1.4) rotate(-7deg);opacity:.45}
  100%{transform:translate(6px,-104px) scaleX(2) rotate(6deg);opacity:0}}
.scene-petal{position:absolute;top:-4%;width:15px;height:12px;border-radius:80% 20% 70% 30%/60% 40% 60% 40%;
  background:linear-gradient(135deg,#eec0aa,#cf8b6c);box-shadow:0 0 8px rgba(230,170,140,.5);
  opacity:0;animation:petalFall2 linear forwards;pointer-events:none}
.scene-petal.gold{background:linear-gradient(135deg,#ecd39a,#cfa758)}
@keyframes petalFall2{0%{transform:translate(0,-4vh) rotate(0);opacity:0}8%{opacity:.85}85%{opacity:.75}
  100%{transform:translate(var(--sway,5vw),108vh) rotate(320deg);opacity:0}}
.glowspot{position:absolute;border-radius:50%;filter:blur(10px);
  background:radial-gradient(circle,rgba(255,214,140,.5),transparent 70%);
  animation:lampPulse 5.5s ease-in-out infinite;mix-blend-mode:screen;pointer-events:none}
.glowspot.g2{animation-delay:-2.6s}
@keyframes lampPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.85;transform:scale(1.15)}}
.mote{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(255,235,190,.8);
  filter:blur(1px);animation:moteFloat ease-in-out infinite alternate, moteTwinkle 3s ease-in-out infinite;pointer-events:none}
@keyframes moteFloat{from{transform:translate(0,0)}to{transform:translate(var(--mx,1.5vw),var(--my,-2vh))}}
@keyframes moteTwinkle{0%,100%{opacity:.12}50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.cloud,.wisp,.scene-petal,.glowspot,.mote{animation:none;opacity:0}}

/* hotspots */
.hot{position:absolute;cursor:pointer;border-radius:14px;z-index:20}
.hot .ring{position:absolute;inset:0;border-radius:14px;border:2px solid rgba(255,222,150,0);transition:.3s}
.hot:hover .ring{border-color:rgba(255,222,150,.9);box-shadow:0 0 26px rgba(255,210,120,.45), inset 0 0 22px rgba(255,210,120,.18)}
.hot.spot .ring{border-color:rgba(255,222,150,1);box-shadow:0 0 40px rgba(255,210,120,.75), inset 0 0 30px rgba(255,210,120,.3);
  animation:spotPulse 1.4s ease-in-out}
@keyframes spotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.chip{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;
  background:rgba(24,18,28,.78);border:1px solid rgba(217,169,78,.55);color:#ffe9b0;
  padding:6px 13px;border-radius:999px;font-size:.8rem;letter-spacing:1.5px;font-variant:small-caps;
  backdrop-filter:blur(5px);transition:.25s;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.chip .cic{font-size:.95rem}
.hot:hover .chip{background:rgba(60,45,22,.92);border-color:#f3d58c;box-shadow:0 0 18px rgba(255,210,120,.4);
  transform:translateX(-50%) translateY(-2px)}
.chip.pulse{animation:chipPulse 1.4s ease-in-out}
@keyframes chipPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.14)}}

/* menu card */
#rail{position:absolute;left:22px;bottom:22px;z-index:40;width:200px;color:#8f6a14;
  background:linear-gradient(170deg,#fdf8ec,#f3e7cd);border-radius:4px;padding:32px 18px 24px;
  box-shadow:0 14px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3)}
#rail::before{content:"";position:absolute;inset:7px;border:3px double #8f6a14;border-radius:2px;pointer-events:none}
#rail::after{content:"";position:absolute;inset:12px;border:1px solid rgba(143,106,20,.4);border-radius:1px;pointer-events:none}
.orn{position:absolute;width:52px;height:52px;pointer-events:none;color:#8f6a14;z-index:3}
.orn.tl{top:-12px;left:-12px}
.orn.tr{top:-12px;right:-12px;transform:scaleX(-1)}
.orn.bl{bottom:-12px;left:-12px;transform:scaleY(-1)}
.orn.br{bottom:-12px;right:-12px;transform:scale(-1,-1)}
#rail .menu-title{text-align:center;color:#8f6a14;font-variant:small-caps;letter-spacing:4px;
  font-size:1.2rem;font-weight:700;position:relative;z-index:2}
#rail .menu-title::after{content:"❦";display:block;font-size:.8rem;color:#c9a86a;margin-top:1px}
.cup-progress{display:flex;align-items:center;gap:8px;justify-content:center;margin:4px 0 2px;position:relative;z-index:2}
.cup-progress svg{width:54px;height:50px;flex-shrink:0}
.cup-fill{transition:y .8s ease, height .8s ease}
.menu-stats{font-size:.7rem;color:#a08a5f;line-height:1.5;font-style:italic}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;
  border-bottom:1px dotted rgba(143,106,20,.45);padding:9px 6px;cursor:pointer;transition:.18s;
  color:#3a2d1a;font-family:var(--serif);font-size:.92rem;letter-spacing:1.2px;font-variant:small-caps;
  position:relative;z-index:2;text-align:left}
.menu-item .ic{font-size:1.05rem;width:22px;text-align:center;flex-shrink:0}
.menu-item:hover{background:rgba(217,169,78,.16);color:#8f6a14;padding-left:12px}
.menu-item:last-of-type{border-bottom:none}
.menu-item.primary{background:linear-gradient(165deg,#c0913a,#8f6a14);color:#fdf6e4;border-radius:999px;
  border-bottom:none;justify-content:center;font-weight:700;margin:8px 0 6px;padding:11px 6px;
  box-shadow:0 3px 10px rgba(143,106,20,.4)}
.menu-item.primary:hover{padding-left:6px;filter:brightness(1.08)}
.rail-hint{color:#a08a5f;font-size:.66rem;text-align:center;font-style:italic;margin-top:8px;position:relative;z-index:2}

/* Camille bubble */
#bubble{position:absolute;z-index:50;max-width:310px;background:#fdf6e4;color:#2e2417;
  border-radius:16px;border-bottom-right-radius:4px;padding:14px 17px;font-size:.94rem;line-height:1.5;
  box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transition:opacity .35s, transform .35s;transform:translateY(8px);pointer-events:none}
#bubble.show{opacity:1;transform:none;pointer-events:auto}
#bubble::after{content:"";position:absolute;bottom:-9px;right:30px;border:10px solid transparent;border-top-color:#fdf6e4;border-bottom:0}
#bubble .who{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:#a06b14;font-weight:700;margin-bottom:4px}
#bubble .cta{display:inline-block;margin-top:9px;background:linear-gradient(165deg,#c0913a,#8f6a14);color:#fdf6e4;
  border:none;border-radius:999px;padding:8px 16px;font-family:var(--serif);font-size:.85rem;letter-spacing:1px;
  font-variant:small-caps;cursor:pointer;font-weight:700}

/* view panel over the café */
#app-overlay{position:fixed;inset:0;background:rgba(14,10,18,.6);backdrop-filter:blur(6px);z-index:60;
  display:none;align-items:center;justify-content:center;padding:20px}
#app-overlay.show{display:flex}
.panel{background:linear-gradient(168deg,#fdf9ef,#f5ead2);border-radius:6px;color:#8f6a14;
  max-width:620px;width:100%;padding:40px 34px 30px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.55);animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.panel::before{content:"";position:absolute;inset:9px;border:3px double #8f6a14;border-radius:3px;pointer-events:none;z-index:0}
.panel .orn{width:64px;height:64px}
.panel .orn.tl{top:-16px;left:-16px}
.panel .orn.tr{top:-16px;right:-16px}
.panel .orn.bl{bottom:-16px;left:-16px}
.panel .orn.br{bottom:-16px;right:-16px}
.panel h2{font-variant:small-caps;letter-spacing:2.5px;color:#8f6a14;text-align:center;font-size:1.25rem;position:relative;z-index:2}
.panel .close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:1.3rem;cursor:pointer;color:#8d7c60;z-index:5}
.panel-content{margin-top:14px;max-height:min(66vh,560px);overflow-y:auto;position:relative;z-index:2;padding:4px 6px;color:#33291c}
@media (max-width:900px){
  #rail{left:0;right:0;top:0;bottom:auto;width:100%;border-radius:0;padding:8px 12px;display:flex;align-items:center;gap:2px;overflow-x:auto;
    background:linear-gradient(180deg,#fdf8ec,#f3e7cd);box-shadow:0 6px 24px rgba(0,0,0,.5)}
  #rail::before{inset:4px;border-width:2px}
  #rail::after{display:none}
  #rail .orn{width:32px;height:32px}
  #rail .orn.tl{top:-6px;left:-6px}
  #rail .orn.tr{top:-6px;right:-6px}
  #rail .orn.bl,#rail .orn.br{display:none}
  #rail .menu-title{font-size:.88rem;letter-spacing:2px;margin-right:8px;flex-shrink:0}
  #rail .menu-title::after{display:inline;margin-left:5px;font-size:.7rem}
  .cup-progress{margin:0 8px 0 0;flex-shrink:0}
  .cup-progress svg{width:34px;height:32px}
  .menu-stats{display:none}
  .menu-item{width:auto;flex-shrink:0;border-bottom:none;border-right:1px dotted rgba(143,106,20,.45);
    padding:7px 10px;font-size:.82rem;white-space:nowrap}
  .menu-item:hover{padding-left:10px}
  .menu-item:last-of-type{border-right:none}
  .menu-item.primary{margin:0 6px 0 0;padding:8px 12px;border-radius:999px}
  .rail-hint{display:none}
  .panel{padding:34px 20px 24px;max-width:100%}
  .panel-content{max-height:calc(100vh - 200px)}
  .credits{display:none}
}