:root{
    --desk:#101B25; --paper:#E4E9E2; --ink:#17293D; --ink-soft:rgba(23,41,61,.55);
    --grid:rgba(23,41,61,.13); --grid-fine:rgba(23,41,61,.055);
    --red:#BE3A2B; --brass:#A8873C; --r:2px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:var(--desk);color:var(--paper);
    font-family:"IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
    overflow:hidden;overscroll-behavior:none;
  }
  .app{height:100dvh;display:grid;grid-template-columns:1fr 300px;gap:14px;padding:14px}
  .sheet{
    position:relative;border-radius:var(--r);background-color:var(--paper);
    background-image:
      linear-gradient(var(--grid) 1px,transparent 1px),
      linear-gradient(90deg,var(--grid) 1px,transparent 1px),
      linear-gradient(var(--grid-fine) 1px,transparent 1px),
      linear-gradient(90deg,var(--grid-fine) 1px,transparent 1px);
    background-size:100px 100px,100px 100px,20px 20px,20px 20px;
    box-shadow:0 18px 40px rgba(0,0,0,.45);overflow:hidden;color:var(--ink);
  }
  .sheet::after{content:"";position:absolute;inset:10px;border:1px solid rgba(23,41,61,.35);pointer-events:none}
  .stamp{
    position:absolute;top:22px;left:24px;pointer-events:none;z-index:3;
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
    color:var(--ink-soft);text-transform:uppercase;
  }

  /* ---- meniu ---- */
  .menu{position:absolute;inset:10px;display:flex;flex-direction:column;padding:52px 34px 26px;overflow:auto}
  .menu h1{
    font-family:"Saira Condensed",sans-serif;font-weight:800;text-transform:uppercase;
    font-size:clamp(32px,5.2vw,58px);line-height:.92;letter-spacing:.01em;
  }
  .menu h1 span{color:var(--red)}
  .lead{color:var(--ink-soft);font-size:14px;margin-top:8px;max-width:46ch}
  .field{margin-top:22px;max-width:340px}
  .field label,.legend{
    display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;
  }
  input[type=text]{
    width:100%;padding:11px 12px;border:1px solid rgba(23,41,61,.4);background:rgba(255,255,255,.55);
    border-radius:var(--r);font:500 16px/1.2 "IBM Plex Mono",monospace;color:var(--ink);
  }
  input[type=text]:focus{outline:2px solid var(--brass);outline-offset:1px}
  .shapes{
    margin-top:20px;display:grid;gap:8px;
    grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  }
  .shape{
    border:1px solid rgba(23,41,61,.28);border-radius:var(--r);background:rgba(255,255,255,.35);
    padding:10px 6px 8px;cursor:pointer;text-align:center;transition:background .12s,border-color .12s;
  }
  .shape svg{display:block;margin:0 auto 6px;width:38px;height:38px}
  .shape span{
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-soft);
  }
  .shape:hover{background:rgba(168,135,60,.16);border-color:var(--brass)}
  .shape[aria-pressed=true]{background:var(--ink);border-color:var(--ink)}
  .shape[aria-pressed=true] span{color:var(--paper)}
  .shape[aria-pressed=true] svg *{stroke:var(--paper)!important}
  .shape:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
  .menu .go{margin-top:auto;padding-top:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

  /* ---- joc ---- */
  .play{position:absolute;inset:0}
  canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
  .task{
    position:absolute;left:50%;bottom:34px;transform:translateX(-50%);text-align:center;
    pointer-events:none;transition:opacity .25s;z-index:2;
  }
  .task h2{
    font-family:"Saira Condensed",sans-serif;font-weight:800;text-transform:uppercase;
    font-size:clamp(24px,4vw,40px);line-height:1;
  }
  .task p{font-size:13px;color:var(--ink-soft);margin-top:5px}
  .task.hide{opacity:0}
  .ghost{position:absolute;inset:0;pointer-events:none;opacity:.5}
  .score{
    position:absolute;pointer-events:none;text-align:center;z-index:2;
    transform:translate(-50%,-50%) scale(.9);opacity:0;
    transition:opacity .3s,transform .3s cubic-bezier(.2,.9,.3,1.2);
  }
  .score.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .score b{
    display:block;font-family:"IBM Plex Mono",monospace;font-weight:600;
    font-size:clamp(40px,8vw,78px);line-height:.9;letter-spacing:-.03em;
  }
  .score b i{font-style:normal;font-size:.4em;vertical-align:super;opacity:.6}
  .roast{
    position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:min(90%,560px);
    text-align:center;z-index:2;opacity:0;transition:opacity .35s .25s;
  }
  .roast.show{opacity:1}
  .roast p{font-size:clamp(14px,2.2vw,18px);line-height:1.45;color:var(--ink)}
  .roast em{
    display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:8px;
  }

  /* ---- panou dreapta ---- */
  .block{display:flex;flex-direction:column;border:1px solid rgba(228,233,226,.22);border-radius:var(--r);background:#152431;overflow:hidden}
  .block header{padding:15px 16px 13px;border-bottom:1px solid rgba(228,233,226,.16)}
  .block header em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.2em;opacity:.5;text-transform:uppercase}
  .block header h3{font-family:"Saira Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:25px;line-height:1;margin-top:5px}
  .panel{flex:1;overflow:auto;display:flex;flex-direction:column}
  .row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid rgba(228,233,226,.1)}
  .row small{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.62}
  .row b{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:15px}
  .bar{grid-column:1/-1;height:3px;background:rgba(228,233,226,.14);border-radius:2px;overflow:hidden}
  .bar i{display:block;height:100%;width:0;background:var(--brass);transition:width .5s}
  .lb{list-style:none;font-family:"IBM Plex Mono",monospace;font-size:12.5px}
  .lb li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;padding:8px 16px;border-bottom:1px solid rgba(228,233,226,.08);align-items:baseline}
  .lb li i{font-style:normal;opacity:.4;font-size:11px}
  .lb li u{text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lb li u s{text-decoration:none;opacity:.4;font-size:10.5px;letter-spacing:.06em}
  .lb li b{font-weight:600}
  .lb li.me{background:rgba(168,135,60,.16)}
  .lb .empty{display:block;padding:16px;opacity:.45;font-size:11.5px;line-height:1.6;grid-template-columns:none}
  .tabs{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid rgba(228,233,226,.12)}
  .tabs button{flex:1;padding:8px 6px;font-size:10px}
  .foot{padding:13px 16px;display:grid;gap:9px}
  button{
    font:600 13px/1 "Saira Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;
    padding:13px 14px;border:1px solid var(--paper);background:var(--paper);color:var(--ink);
    border-radius:var(--r);cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  }
  button.ghostbtn{background:transparent;color:var(--paper);border-color:rgba(228,233,226,.35)}
  button.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  button:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
  button[aria-pressed=true]{background:var(--brass);border-color:var(--brass);color:var(--ink)}
  button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
  .note{font-family:"IBM Plex Mono",monospace;font-size:10.5px;line-height:1.5;opacity:.45}
  .hidden{display:none!important}

  @media (max-width:860px){
    .app{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:10px;padding:10px}
    .block{max-height:38dvh}
    .menu{padding:44px 20px 18px}
    .shapes{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
    .foot{grid-auto-flow:column;grid-auto-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* link inapoi la site */
.home{
  position:absolute;top:20px;right:24px;z-index:4;text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);padding:4px 2px;
}
.home:hover{color:var(--red)}
.home:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
@media (max-width:860px){ .home{top:18px;right:18px;font-size:10px} }