:root{color-scheme:dark;--night:#08152c;--card:#132948;--gold:#ffd47c;--ink:#fff5e1;--muted:#cad6e5;--line:#465974;font:17px/1.55 system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 20%,#172f50,var(--night) 65%);color:var(--ink);min-height:100dvh}
a{color:var(--gold)}
button,a,input{touch-action:manipulation}
:focus-visible{outline:3px solid #fff;outline-offset:4px}
button,.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.6rem 1rem;border:1px solid var(--line);border-radius:.7rem;background:#173653;color:var(--ink);font:inherit;font-weight:750;text-align:center;text-decoration:none;cursor:pointer}
.primary{background:linear-gradient(#ffe3a2,#f4ab38);color:#291801;border-color:#efbd60}
button:disabled{cursor:default;opacity:.63}
.top{display:flex;justify-content:space-between;align-items:center;gap:.7rem;padding:.85rem max(1rem,calc((100vw - 1100px)/2));background:#08152c;border-bottom:1px solid var(--line);font-weight:750}
.top a{text-decoration:none}.top span,.muted{color:var(--muted);font-size:.9rem}
main:focus{outline:none}
main{width:min(1100px,calc(100% - 2rem));margin:1.1rem auto 3rem;outline:none}
h1,h2,p{margin-top:0}h1,h2{font-family:Georgia,serif;line-height:1.13}h1{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:.45rem}h2{font-size:1.45rem}
.eyebrow{color:var(--gold);font-size:.82rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:1rem;overflow:hidden}
.hero img{width:100%;height:100%;max-height:520px;object-fit:cover}
.hero section,.panel{padding:clamp(1rem,4vw,2rem)}.panel{background:var(--card);border:1px solid var(--line);border-radius:1rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}.lead{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:.75rem}
.tile{justify-content:flex-start;min-height:72px}.tile b{color:var(--gold);margin-right:.6rem}.tile .lock{margin-left:auto;padding-left:.35rem}
.map{position:relative;margin:0 auto;max-width:1000px}.map img{width:100%;height:auto;display:block;border-radius:.8rem}
.map button{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);min-height:0;padding:0;background:transparent;border:0;display:block;border-radius:.45rem}
.map button:first-of-type{background:url("assets/scoarta.svg") center/100% 100% no-repeat;
  color:#fff0c9;text-shadow:0 1px 2px #2a1206,0 0 3px #2a1206;
  font:750 clamp(.62rem,1.65vw,1.1rem)/1.06 Georgia,serif;
  padding:0 1.2%;filter:drop-shadow(0 3px 3px #1c0d0ab3)}
.map button:hover,.map button:focus-visible{box-shadow:0 0 16px 5px #ffd47c}
.map-clouds{position:absolute;inset:0;overflow:hidden;border-radius:.8rem;pointer-events:none}
.map-clouds span{position:absolute;left:var(--cloud-x);top:var(--cloud-y);width:var(--cloud-width);aspect-ratio:2.2;background:center/100% 100% no-repeat url("assets/nor.svg?v=desi");opacity:var(--cloud-opacity,.85);transform:rotate(var(--cloud-angle,0deg)) scaleX(var(--cloud-mirror,1))}
.map-clouds span:nth-child(1){--cloud-x:30%;--cloud-y:25%;--cloud-width:41%;--cloud-angle:-12deg;--cloud-opacity:.48}
.map-clouds span:nth-child(2){--cloud-x:56%;--cloud-y:14%;--cloud-width:54%;--cloud-angle:9deg;--cloud-mirror:-1}
.map-clouds span:nth-child(3){--cloud-x:27%;--cloud-y:22%;--cloud-width:56%;--cloud-opacity:.77;--cloud-angle:-8deg}
.map-clouds span:nth-child(4){--cloud-x:-14%;--cloud-y:53%;--cloud-width:57%;--cloud-mirror:-1}
.map-clouds span:nth-child(5){--cloud-x:54%;--cloud-y:44%;--cloud-width:61%;--cloud-angle:-11deg}
.map-clouds span:nth-child(6){--cloud-x:6%;--cloud-y:62%;--cloud-width:67%;--cloud-angle:9deg;--cloud-mirror:-1}
.map-clouds span:nth-child(7){--cloud-x:46%;--cloud-y:72%;--cloud-width:67%;--cloud-angle:-8deg;--cloud-opacity:.92}
@media(max-width:600px){
  .map-clouds span{aspect-ratio:1.7}
  .map-clouds span:nth-child(1){--cloud-x:45%;--cloud-y:12%;--cloud-width:64%}
  .map-clouds span:nth-child(2){--cloud-x:47%;--cloud-y:19%;--cloud-width:78%}
  .map-clouds span:nth-child(3){--cloud-x:29%;--cloud-y:34%;--cloud-width:98%}
  .map-clouds span:nth-child(4){--cloud-x:-15%;--cloud-y:45%;--cloud-width:100%}
  .map-clouds span:nth-child(5){--cloud-x:22%;--cloud-y:54%;--cloud-width:101%}
  .map-clouds span:nth-child(6){--cloud-x:-24%;--cloud-y:68%;--cloud-width:112%}
  .map-clouds span:nth-child(7){--cloud-x:13%;--cloud-y:76%;--cloud-width:114%}
}
.status{min-height:1.55em;margin:.7rem 0;color:var(--gold)}
.writing-landscape{--writing-art:url("assets/scriere-ladite.webp");position:relative;max-width:950px;margin-inline:auto;
  overflow:hidden;border-radius:.85rem;background:#365324;box-shadow:0 .45rem 1.5rem #040b1a99}
.writing-entry,.writing-clearing{position:relative;isolation:isolate}
.writing-entry{position:absolute;z-index:1;top:0;left:0;display:flex;align-items:center;min-height:56px;padding:.35rem .7rem}
.writing-entry .back{margin:0;min-height:44px;padding:.35rem .9rem;color:#fff0ca;
  background:#59351c url("assets/scoarta.svg") center/100% 100% no-repeat;
  border-color:#b98447;text-shadow:0 1px 2px #27150b;box-shadow:0 2px 6px #1e100ad9}
.writing-scene{position:relative}
.writing-scene img{display:block;width:100%;height:auto}
.writing-clearing{padding:.7rem .75rem 1.1rem;
  background:#665333 url("assets/scriere-potecuta.webp") center top / cover no-repeat}
.writing-clearing::before{content:'';position:absolute;z-index:-1;inset:0 0 auto;height:2.8rem;
  background:var(--writing-art) center bottom / 100% auto no-repeat;transform:scaleY(-1);
  mask-image:linear-gradient(transparent,#000)}
.writing-hit{position:absolute;top:43%;width:21%;height:25%;min-height:0;padding:0;border:0;background:transparent;border-radius:.55rem}
.writing-chest:nth-of-type(1){left:14%}
.writing-chest:nth-of-type(2){left:41%}
.writing-key{left:70%;top:35%;width:18%;height:43%}
.writing-hit:hover,.writing-hit:focus-visible{box-shadow:0 0 .7rem #ffd47c}
.writing-earned::after{content:'✓';position:absolute;right:0;top:0;background:#173c27;color:#fff8e2;border:1px solid #ffda80;border-radius:50%;width:1.45em;line-height:1.45em;font-size:clamp(.75rem,2.5vw,1.15rem)}
.writing-sign{position:relative;max-width:580px;margin:0 auto .55rem;padding-bottom:.55rem}
.writing-sign::before,.writing-sign::after{content:'';position:absolute;bottom:0;left:12%;width:.65rem;height:1.1rem;
  background:linear-gradient(90deg,#3d2314,#a16b3b 38%,#53301a);border-radius:0 0 .15rem .15rem;
  box-shadow:0 2px 3px #2e1a12a8;transform:rotate(3deg)}
.writing-sign::after{left:auto;right:12%;transform:rotate(-3deg)}
.writing-board{position:relative;margin:0;padding:.75rem 1.65rem;
  color:#fff0ca;text-align:center;font-weight:750;line-height:1.4;
  background:#6a4025 url("assets/scoarta.svg") center/100% 100% no-repeat;
  border:2px solid #a06d40;border-radius:.45rem;box-shadow:0 3px 8px #080608b3;
  text-shadow:0 1px 2px #2d170d}
.writing-board::before,.writing-board::after{content:'';position:absolute;top:50%;width:.48rem;height:.48rem;
  transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 32% 28%,#f4cf82,#9e6831 62%,#593419);box-shadow:0 1px 2px #241005}
.writing-board::before{left:.6rem}
.writing-board::after{right:.6rem}
#progress{display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem .45rem;margin:0;color:#422713}
#progress span{padding:.2rem .5rem;border:1px solid #8b562c;border-radius:.4rem;font-size:.82rem;font-weight:750;
  background:linear-gradient(#ffe7b4,#d8a76a);box-shadow:0 2px 4px #261708a6,inset 0 0 0 1px #fff4cc8a}
.writing-scene .writing-open-art{position:absolute;inset:0;pointer-events:none}
.writing-open-1{clip-path:inset(31% 64% 31% 13%)}
.writing-open-2{clip-path:inset(31% 36% 31% 39%)}
.writing-key-art{
  mask-image:linear-gradient(to right,transparent 69%,#000 71%,#000 87%,transparent 89%),
    linear-gradient(transparent 32%,#000 34.5%,#000 67.5%,transparent 70%);
  mask-composite:intersect
}
.writing-chest-open{top:33%;height:35%}
.writing-restart{position:absolute;top:72%;transform:translateX(-50%);min-height:44px;padding:.2rem .75rem;
  border-color:#e2af59;background:linear-gradient(#ffe6ab,#d7a25c);color:#2f190b;box-shadow:0 2px 5px #21130ac4}
.writing-restart-1{left:24.5%}
.writing-restart-2{left:51.5%}
@media(max-width:600px){
  .writing-landscape{--writing-art:url("assets/scriere-telefon.webp");max-width:420px}
  .writing-entry{position:relative;background:#463922 url("assets/scriere-coronament.webp") center bottom / cover no-repeat}
  .writing-entry::before{content:'';position:absolute;z-index:-1;inset:auto 0 0;height:10px;
    background:var(--writing-art) center top / 100% auto no-repeat;transform:scaleY(-1);
    mask-image:linear-gradient(#000,transparent)}
  .writing-entry .back{font-size:.9rem}
  .writing-clearing{padding-inline:.55rem}
  .writing-hit{top:26.5%;width:44%;height:26%}
  .writing-chest:nth-of-type(1){left:5.5%}
  .writing-chest:nth-of-type(2){left:50.5%}
  .writing-key{left:34.5%;top:56.5%;width:31%;height:35%}
  .writing-open-1{clip-path:inset(16% 50% 46% 4%)}
  .writing-open-2{clip-path:inset(16% 4% 46% 50%)}
  .writing-key-art{
    mask-image:linear-gradient(to right,transparent 34.5%,#000 37.5%,#000 62%,transparent 65%),
      linear-gradient(transparent 54%,#000 56.5%,#000 82.8%,transparent 84.5%)
  }
  .writing-chest-open{top:16%;height:37%}
  .writing-restart{top:54.2%}
  .writing-restart-1{left:27%}
  .writing-restart-2{left:73%}
}
.writing-exercise{--crest:#9d2118;position:relative;isolation:isolate;display:grid;align-content:center;
  max-width:950px;min-height:560px;margin-inline:auto;padding:clamp(1.25rem,5vw,3rem) clamp(.8rem,7vw,5.5rem) clamp(1rem,4vw,2.25rem);
  border:2px solid #785024;border-radius:.9rem;
  background:#264426 url("assets/scriere-poiana.webp") center / cover no-repeat;
  box-shadow:0 .5rem 1.5rem #040b1ab3}
.writing-exercise-2{--crest:#145098}
.writing-exercise-board{position:relative;min-width:0;
  padding:0 clamp(.65rem,4.5vw,2.65rem) clamp(.8rem,2.8vw,1.7rem);
  color:#35200d;text-align:center;
  border:clamp(.7rem,2.35vw,1.6rem) solid #88501f;
  border-image:url("assets/tabla-scriere.webp") 7% 4.6% fill stretch;
  background:#f4d98e;box-shadow:0 .55rem 1rem #17200cb0}
.exercise-heading{position:relative;display:flex;justify-content:center;align-items:center;
  z-index:1;width:fit-content;max-width:100%;min-height:2.25rem;margin:-.65rem auto 1.25rem;padding:.36rem .8rem .36rem 2.55rem;
  color:#fff1cd;font-weight:800;line-height:1.2;text-shadow:0 1px 2px #281409;
  background:#654023 url("assets/scoarta.svg") center / 100% 100% no-repeat;
  border:2px solid #c38742;border-radius:.5rem;box-shadow:0 3px 5px #37200d82}
.exercise-heading p{margin:0}
.exercise-crest{display:grid;place-items:center;position:absolute;left:-.35rem;top:50%;
  transform:translateY(-48%);width:2.8rem;height:3.25rem;padding:.25rem;
  background:linear-gradient(145deg,#ffe5a0 12%,#cd842b 48%,#ffe2a1 68%,#8b501c);
  clip-path:polygon(50% 0,98% 17%,94% 63%,79% 81%,50% 100%,21% 81%,6% 63%,2% 17%)}
.exercise-crest span{display:grid;place-items:center;width:100%;height:100%;padding-bottom:.3rem;
  background:linear-gradient(150deg,#ffffff33,transparent 60%,#1b0c045e),var(--crest);font:800 1.45rem Georgia,serif;
  clip-path:inherit}
.writing-exercise-board h1{margin:0 0 1.15rem;font-size:clamp(1.3rem,4vw,2.2rem)}
.writing-exercise-board h1 strong{display:block;width:fit-content;max-width:100%;min-width:2.3em;margin:.65rem auto 0;
  padding:.15em .32em;color:var(--crest);font-size:clamp(1.7rem,6vw,3.45rem);line-height:1.12;
  border:1px solid #ab8050;border-radius:.35rem;overflow-wrap:anywhere}
.writing-exercise-board label{margin-bottom:.35rem;color:#4b2b14}
.exercise-answer{display:flex;justify-content:center;align-items:center;gap:.4rem}
.writing-exercise-board #answer{width:min(100%,23rem);min-width:0;min-height:52px;margin:0;padding:.4rem .6rem;
  background:#fff8df;color:#321a0c;border:2px solid #a16e37;text-align:center;
  box-shadow:inset 0 2px 4px #784b2030;font-size:clamp(1.12rem,4vw,1.45rem);font-weight:750}
.writing-exercise-board #answer[inputmode=numeric]{width:min(100%,8.5rem)}
.writing-exercise-board #answer:focus-visible{outline-color:#683a15}
.writing-exercise-board #answer[aria-invalid=true]{border-color:#9d2118}
.exercise-answer[data-result=correct] #answer{border-color:#347140;opacity:1}
.exercise-mark{display:grid;place-items:center;flex:0 0 2.35rem;height:2.35rem;visibility:hidden;
  border:1px solid #ffffff50;border-radius:.45rem;color:#fff;font-size:1.5rem;font-weight:850;line-height:1;
  box-shadow:0 2px 4px #39271070,inset 0 1px #ffffff50}
.exercise-answer[data-result=wrong] .exercise-mark{visibility:visible;background:linear-gradient(#bf312c,#8c191c)}
.exercise-answer[data-result=correct] .exercise-mark{visibility:visible;background:linear-gradient(#398748,#21602f)}
.writing-exercise-board .status{min-height:0;margin:.65rem 0 0;color:#862a1b;font-weight:800}
.writing-exercise-board .status:empty{display:none}
.writing-exercise-board .exercise-correct{color:#26522e;font-size:1.3rem}
.exercise-points{margin:.12rem 0 0;color:#5f492b;font-size:.9rem}
.exercise-points:empty{display:none}
.exercise-actions{display:flex;justify-content:space-between;align-items:stretch;gap:.55rem;margin-top:1.05rem}
.exercise-actions .back,.exercise-actions button{margin:0;min-height:48px;padding:.46rem .8rem;color:#fff7e0;
  border:2px solid #d5a45b;border-radius:.62rem;box-shadow:0 3px 7px #17170b99;text-shadow:0 1px 2px #16120c;
  line-height:1.2}
.exercise-actions .back{background:linear-gradient(#55346e,#302149)}
.exercise-actions .exercise-verify{background:linear-gradient(#426d3b,#204a2b);gap:.45rem}
.exercise-actions .exercise-verify[hidden]{display:none}
@media(max-width:600px){
  .writing-exercise{min-height:0;padding:2rem .65rem 1.35rem;background-position:center}
  .exercise-heading{font-size:clamp(.8rem,3.8vw,1rem)}
  .exercise-actions .back,.exercise-actions button{font-size:.88rem;padding-inline:.55rem}
}
form label{display:block;font-weight:700}input{display:block;color:var(--ink);font:inherit;background:#08152c;border:1px solid var(--line);border-radius:.6rem;min-height:48px;padding:.55rem .65rem;width:min(100%,24rem);margin:.3rem 0 .7rem}
.back{margin-bottom:1rem}
@media(max-width:600px){.hero{grid-template-columns:1fr}.hero img{max-height:255px;object-fit:cover}.top{align-items:flex-start}.top span{font-size:.72rem;text-align:right}.map{max-width:420px}.map button{left:var(--mx);top:var(--my);width:var(--mw);height:var(--mh)}.map button:first-of-type{font-size:clamp(.63rem,2.45vw,.9rem)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.forest-page{width:min(1180px,calc(100% - 1rem));margin-top:.5rem}
.forest-scene{position:relative;margin-inline:auto}
.forest-art{display:block;width:100%;height:auto;border-radius:1rem}
.forest-hit,.forest-reveal,.forest-progress{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h)}
.forest-hit{z-index:2;display:block;min-height:0;padding:0;border:0;background:transparent;border-radius:.75rem}
.forest-hit:hover{background:#ffe4a21c}
.forest-complete{box-shadow:0 0 12px 3px #ffc5519c,inset 0 0 10px 1px #ffd15e77}
.forest-progress{margin:0;display:grid;place-items:center;border-radius:.22rem;background:linear-gradient(#ffe6ad,#efbe74);color:#241406;font:700 clamp(.68rem,2.2vw,1.7rem)/1 Georgia,serif;white-space:nowrap}
.forest-reveal{opacity:0;pointer-events:none;transition:opacity .35s ease;mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent)}
.forest-reveal img{display:block;width:100%;height:100%}
.forest-open .forest-reveal{opacity:1}
.forest-status:empty{display:none}
.forest-status{position:fixed;z-index:4;inset:auto .5rem max(.75rem,env(safe-area-inset-bottom));width:fit-content;max-width:calc(100% - 1rem);margin:0 auto;padding:.65rem 1rem;background:#102542;border:1px solid var(--gold);border-radius:.65rem;text-align:center}
.forest-status-touch{inset:0 auto auto 0;width:max-content;max-width:min(22rem,calc(100% - 1rem));margin:0;pointer-events:none}
.forest-status-fading{opacity:0;transition:opacity .5s ease}
@media(max-width:600px),(max-width:900px) and (orientation:portrait){
  .forest-scene{max-width:520px}
  .forest-hit,.forest-reveal,.forest-progress{left:var(--mx);top:var(--my);width:var(--mw);height:var(--mh)}
  .forest-progress{font-size:clamp(.65rem,3.5vw,1.2rem)}
}
@media(prefers-reduced-motion:reduce){.forest-reveal,.forest-status-fading{transition:none}}

.home-hero { border-color: #866238; box-shadow: 0 1.2rem 3rem #030b1c85; }
.home-hero section { background: radial-gradient(ellipse at 100% 0%, #2c3f58, #132948 72%); }
.home-welcome { margin: .85rem 0 .35rem; font: 700 1.3rem/1.3 Georgia, serif; color: var(--gold); }
.home-actions { margin-top: 1.35rem; }
.account-layout {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.45fr);
  overflow: hidden;
  border: 1px solid #80623e;
  border-radius: 1rem;
  background: #132948;
  box-shadow: 0 1.2rem 3rem #030b1c85;
}
.account-art { background: #1d3148 url("assets/intrare.webp") center / cover no-repeat; }
.account-body { padding: clamp(1rem, 3.4vw, 2.2rem); }
.account-body h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.account-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
.account-form .full { grid-column: 1 / -1; }
.account-form label { display: grid; align-content: start; gap: .28rem; font-weight: 750; }
.account-form [hidden] { display: none; }
.account-form input, .account-form select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: .55rem .7rem;
  border: 1px solid #677b93;
  border-radius: .55rem;
  background: #091b32;
  color: var(--ink);
  font: inherit;
  font-weight: 400;
}
.account-form :disabled { opacity: .75; }
.account-form .status { margin: 0; }
.account-status:empty { display: none; }
.school-source { margin: 0; color: var(--muted); font-size: .78rem; }
.account-code { overflow-wrap: anywhere; font-size: 1.12rem; color: var(--gold); }
.account-details { margin-top: 1.4rem; }
.account-details summary { cursor: pointer; margin-bottom: .6rem; color: var(--gold); }
.remembered-name { margin: 0; color: var(--gold); font-size: 1.25rem; font-weight: 750; }
@media (max-width: 650px) {
  .home-hero img { max-height: 330px; }
  .home-actions .button { flex: 1 1 100%; }
  .account-layout { grid-template-columns: minmax(0, 1fr); }
  .account-art { min-height: 130px; background-position: center 25%; }
  .account-form { grid-template-columns: minmax(0, 1fr); }
}