/* Each mood keeps one calm colour everywhere, so the colour itself becomes a cue */
:root{
  --bg:#f3f6f4; --ink:#2e3a44; --soft:#5c6b75; --line:#dde5e2; --card:#fff;
  --o:#4f8a9b; --o-soft:#e2f0f3; --o-ink:#27596a;
  --y:#8173ad; --y-soft:#ece9f6; --y-ink:#4c3f7d;
  --p:#bb7a5a; --p-soft:#f8ebe3; --p-ink:#854a2e;
  --main:#4a7d69; --main-deep:#39604f; --main-soft:#e3f1ea;
  --good-ink:#2c6450; --try:#8a5a1c; --try-soft:#fbf1dd; --star:#d9a93a;
  --f-display:'Comfortaa','Trebuchet MS',Verdana,sans-serif;
  --f-body:'Didact Gothic','Comfortaa',Verdana,sans-serif;
  color-scheme:light;
}
.k-o{--k:var(--o);--k-soft:var(--o-soft);--k-ink:var(--o-ink)}
.k-y{--k:var(--y);--k-soft:var(--y-soft);--k-ink:var(--y-ink)}
.k-p{--k:var(--p);--k-soft:var(--p-soft);--k-ink:var(--p-ink)}
.m-o{color:var(--o-ink)}.m-y{color:var(--y-ink)}.m-p{color:var(--p-ink)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* the font kerning spaced words unevenly (Learning  Fast) */
body{margin:0;background:var(--bg);color:var(--ink);font:20px/1.5 var(--f-body);font-kerning:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none}
/* no double-tap zoom delay, no grey flash on tap */
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--main);outline-offset:2px}
[hidden]{display:none!important}
#app{max-width:820px;margin:0 auto;padding:6px max(16px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.2;margin:0}

/* top bar */
/* Middle column = the content column of #app, so the logo lines up with the cards below it */
.top{display:grid;grid-template-columns:1fr minmax(0,788px) 1fr;align-items:center;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left))}
.top>.pill{justify-self:start;display:inline-flex;align-items:center;min-height:44px}
.top-right{display:flex;align-items:center;gap:10px;justify-self:end}
.pill{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:700 .9rem var(--f-display);color:var(--ink);text-decoration:none;white-space:nowrap}
.brand{background:none;border:0;padding:0;display:flex;align-items:center;min-height:44px;--logo:84px}
/* logo.png has wide transparent margins: the negative margins cut them, so the drawing itself touches the edge */
.brand img{display:block;height:var(--logo);width:auto;pointer-events:none;margin:calc(var(--logo)*-.2094) calc(var(--logo)*-.3982) calc(var(--logo)*-.1872) calc(var(--logo)*-.3967)}
/* Too narrow for the logo to share a row with the button: it gets its own row, still on the cards' edge */
@media (max-width:1159px){
  .top{grid-template-columns:1fr auto}
  .logo-slot{grid-row:2;grid-column:1/-1;width:100%;max-width:788px;justify-self:center;margin-top:8px}
}
.star{color:var(--star)}
.icon-btn{width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--line);font-size:1.15rem;display:grid;place-items:center;flex:none}
@media (max-width:480px){.brand{--logo:64px}.top{padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right));padding-top:max(8px,env(safe-area-inset-top));padding-bottom:2px}.top-right{gap:6px}.top .pill{padding:6px 10px;font-size:.78rem}.logo-slot{margin-top:2px}}

/* home */
.hero{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px 24px;margin-bottom:18px}
.hero h1{font-size:clamp(1.7rem,5vw,2.3rem);margin-bottom:6px}
.hero p{margin:0;color:var(--soft)}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.legend span{background:var(--k-soft);color:var(--k-ink);border-radius:999px;padding:3px 14px;font:700 .85rem var(--f-display)}
.levels,.stages{display:grid;gap:12px}
.level,.stage{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 16px;transition:border-color .15s,transform .15s}
/* Only where a mouse exists: on touch screens hover stays stuck after the finger has left */
@media (hover:hover){.level:hover,.stage:hover{border-color:var(--main);transform:translateY(-1px)}}
.level:active,.stage:active{border-color:var(--main);background:var(--main-soft)}
.num{width:46px;height:46px;border-radius:50%;background:var(--main-soft);color:var(--main-deep);display:grid;place-items:center;font:700 1.15rem var(--f-display);flex:none}
.stage.done .num{background:var(--main);color:#fff}
.txt{flex:1;min-width:0}
.txt strong{display:block;font:700 1.05rem/1.25 var(--f-display)}
.txt small{display:block;color:var(--soft);font-size:.95rem}
.bar{display:block;height:8px;border-radius:99px;background:var(--main-soft);margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--main);border-radius:99px}
.meta{font:700 .9rem var(--f-display);color:var(--soft);white-space:nowrap}
.stars{color:var(--star);letter-spacing:2px;white-space:nowrap}
.stars i{color:var(--line);font-style:normal}
.lf-foot{text-align:center;color:var(--soft);font-size:.82rem;margin-top:24px}
.lf-foot p{margin:0}
.lf-foot a{color:inherit}

/* heads, lesson */
.back{background:none;border:0;color:var(--main-deep);font:700 .95rem var(--f-display);padding:8px 4px;flex:none;min-height:44px}
.head{margin:6px 0 16px}
.head h2{font-size:1.45rem}
.head p{margin:4px 0 0;color:var(--soft)}
.lesson{display:grid;gap:12px}
.lcard{background:var(--k-soft);border-radius:20px;padding:16px 18px;border-left:6px solid var(--k)}
.lcard h3{color:var(--k-ink);font-size:1.1rem;margin-bottom:6px}
.lcard p{margin:0 0 8px}
.lcard ul{margin:0;padding:0;list-style:none}
.lcard li{padding:2px 0}
.lcard b{color:var(--k-ink)}
.tip{background:var(--card);border:1px dashed var(--main);border-radius:16px;padding:12px 16px;margin:14px 0 0}
.tip p{margin:0}
.tip ul{margin:6px 0;padding:0;list-style:none}
.tip li{padding:2px 0}

/* play */
.pbar{display:flex;align-items:center;gap:10px}
.ptitle{flex:1;min-width:0;font:700 1rem/1.25 var(--f-display);text-align:center}
.progress{display:flex;gap:5px;margin:10px 0 14px}
.progress span{flex:1;height:8px;border-radius:99px;background:var(--line)}
.progress .on{background:var(--main)}
.progress .now{background:var(--star)}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:20px}
.again{margin:0 auto 8px;width:fit-content;background:var(--try-soft);color:var(--try);border-radius:999px;padding:3px 14px;font:700 .85rem var(--f-display)}
.ask{margin:0 0 10px;text-align:center;color:var(--soft);font-size:1.02rem}
.ask b{font-family:var(--f-display)}
.want{background:var(--k-soft);color:var(--k-ink);border-radius:14px;padding:10px 14px;margin:0 auto 14px;width:fit-content;max-width:100%;text-align:center;font:700 1.2rem/1.3 var(--f-display)}
.prompt{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--bg);border-radius:18px;padding:18px 14px;margin-bottom:16px}
.ptext{flex:1;min-width:0;text-align:center;font-size:clamp(1.25rem,4vw,1.55rem);line-height:1.5;overflow-wrap:anywhere}
.word{font-size:clamp(1.8rem,7vw,2.5rem)}
mark{background:var(--main-soft);color:var(--main-deep);border-radius:8px;padding:1px 8px;font-weight:700}
.blank{display:inline-block;min-width:4.5em;border-bottom:3px solid var(--soft)}
.say{width:42px;height:42px;border-radius:50%;background:var(--card);border:1px solid var(--line);font-size:1.05rem;display:grid;place-items:center;flex:none}
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.options.wide{grid-template-columns:1fr}
/* Οριστική alone on top, then each mood with its two tenses side by side */
.options.five{grid-template-columns:repeat(2,1fr)}
.options.five .opt:first-child{grid-column:1/-1}
.opt{min-height:56px;background:var(--k-soft,var(--card));color:var(--k-ink,var(--ink));border:2px solid var(--k-soft,var(--line));border-radius:16px;padding:10px 14px;font-size:1.08rem;line-height:1.25;transition:transform .12s,border-color .12s}
@media (hover:hover){.opt:not(:disabled):hover{border-color:var(--k,var(--main));transform:translateY(-1px)}}
.opt:not(:disabled):active{border-color:var(--k,var(--main))}
.opt:disabled{cursor:default}
.opt.right{background:var(--main);border-color:var(--main);color:#fff}
.opt.wrong{background:var(--bg);border-color:var(--line);color:var(--soft);text-decoration:line-through}
.fb{margin-top:14px;padding:0 4px;text-align:center;font-size:1rem}
.fb:empty{display:none}
.fb.good{background:var(--main-soft);color:var(--good-ink);border-radius:14px;padding:10px 14px}
.fb.try{background:var(--try-soft);color:var(--try);border-radius:14px;padding:10px 14px}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.btn{background:var(--main);color:#fff;border:2px solid var(--main);border-radius:999px;padding:10px 26px;font:700 1rem var(--f-display);min-height:48px}
@media (hover:hover){.btn:hover{background:var(--main-deep);border-color:var(--main-deep)}}
.btn:active{background:var(--main-deep);border-color:var(--main-deep)}
.btn.ghost{background:transparent;color:var(--main-deep)}
@media (hover:hover){.btn.ghost:hover{background:var(--main-soft);color:var(--main-deep);border-color:var(--main)}}
.btn.ghost:active{background:var(--main-soft);color:var(--main-deep);border-color:var(--main)}

/* result */
.result{text-align:center}
.result h2{font-size:1.6rem}
.bigstars{font-size:2.6rem;line-height:1.3}
.result p{margin:4px 0;color:var(--soft)}
.review{text-align:left;background:var(--bg);border-radius:16px;padding:12px 16px;margin-top:14px}
.review h3{font-size:1rem;margin-bottom:6px}
.review ul{margin:0;padding:0;list-style:none}
.review li{padding:6px 0;border-top:1px solid var(--line)}
.review li:first-child{border-top:0}
.review small{display:block;color:var(--soft);font-size:.9rem}
.review .word{font-size:1.05rem}

/* help, toast */
.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(46,58,68,.4);display:flex;align-items:flex-start;justify-content:center;padding:max(20px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:10}
.mcard{background:var(--bg);border-radius:24px;padding:20px;max-width:680px;width:100%}
.mcard h2{font-size:1.25rem;margin-bottom:12px}
.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 16px;border-radius:999px;font-size:.92rem;opacity:0;transition:opacity .2s;pointer-events:none;max-width:calc(100% - 24px);text-align:center}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:480px){
  #app{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .card{padding:12px}
  .options,.options.five{grid-template-columns:1fr;gap:8px}
  .opt{min-height:48px;padding:8px 12px}
  .level,.stage{gap:10px;padding:12px}
  .num{width:40px;height:40px}
  .ptitle{font-size:.9rem}
  .progress{margin:6px 0 10px}
  .ask{font-size:.95rem;margin-bottom:8px;line-height:1.3}
  .prompt{padding:12px 10px;margin-bottom:12px}
  .want{margin-bottom:10px;font-size:1.1rem}
  .fb{margin-top:10px}
  .actions{margin-top:10px}
}
/* Phone on its side: little height, so the header takes one row (the logo cannot reach the cards' edge here) and all five answers share a row */
@media (max-height:500px) and (min-width:481px){
  .top{grid-template-columns:auto auto 1fr auto;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:2px}
  .logo-slot{grid-row:1;grid-column:2;width:auto;max-width:none;margin:0 0 0 14px}
  .top-right{grid-column:4}
  .brand{--logo:64px}
  #app{padding-top:0}
  .progress{margin:4px 0 8px}
  .card{padding:10px 12px}
  .ask{font-size:.95rem;margin-bottom:6px}
  .prompt{padding:8px 12px;margin-bottom:10px}
  .word{font-size:1.7rem}
  .ptext{font-size:1.2rem}
  .want{margin-bottom:8px;padding:6px 12px;font-size:1.05rem}
  .options.five{grid-template-columns:repeat(5,1fr);gap:6px}
  .options.five .opt:first-child{grid-column:auto}
  .options.five .opt{padding:6px 4px;font-size:.88rem}
  .opt{min-height:48px;padding:8px 12px}
  .fb{margin-top:8px}
  .actions{margin-top:8px}
}