/* ============================================================
   REJUV OS — prototype
   Όλα τα χρώματα/μεγέθη είναι tokens εδώ. Άλλαξε μόνο αυτά.
   ============================================================ */
:root{
  --tb: 34px;                 /* ύψος taskbar */
  --kb: 0px;                  /* ύψος πληκτρολογίου (visualViewport) */
  --chrome: Tahoma, Verdana, "DejaVu Sans", sans-serif;
  --flyer: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;

  /* --- shell: μένει XP --- */
  --title-a:#0058e6; --title-b:#3f8cf3; --title-c:#0044c8;
  --tb-a:#2a5fdb;    --tb-b:#1941a5;
  --start-a:#5eae3a; --start-b:#2f7a17;
  --face:#ece9d8;    --face-line:#ffffff; --face-shadow:#93917f;
  --sel:#316ac5;
  --ink:#12100c;     --ink-dim:#5b5850;

  /* --- brand: REJUV --- */
  --accent:#ff1a8c;        /* hot magenta */
  --accent-2:#c8ff3d;      /* lime — δευτερεύοντα σημάδια */
  --accent-ink:#c1006b;    /* magenta για κείμενο σε λευκό (contrast AA) */
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{
  font:11px/1.45 var(--chrome); color:var(--ink);
  -webkit-text-size-adjust:100%;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

/* ---------- WALLPAPER ---------- */
#wall{position:fixed;inset:0;overflow:hidden;z-index:0}
#wall::before,#wall::after{content:"";position:absolute;pointer-events:none}

/* -- night: η δυνατότερη, μένει ως έχει -- */
#wall.night{background:radial-gradient(120% 90% at 70% -10%,#2a1250 0%,#140b28 45%,#07060f 100%)}
#wall.night::before{
  inset:0;
  background:
    radial-gradient(38vmin 38vmin at 18% 78%, rgba(255,0,140,.34), transparent 70%),
    radial-gradient(46vmin 46vmin at 82% 30%, rgba(0,224,255,.28), transparent 70%),
    radial-gradient(30vmin 30vmin at 55% 95%, rgba(190,60,255,.30), transparent 70%);
  filter:blur(6px);
}
#wall.night::after{
  inset:0;opacity:.5;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:64px 64px;
}

/* -- hills: ξαναγραμμένο. Dusk ουρανός, ήλιος Y2K, τρία επίπεδα λόφων. -- */
#wall.hills{
  background:
    radial-gradient(23vmin 23vmin at 74% 43%,
      #fff6d2 0 13%, #ffcf62 14% 19%, rgba(255,26,140,.62) 20% 45%, rgba(255,26,140,0) 74%),
    linear-gradient(#08163f 0%,#1c3f8e 15%,#4d84c9 31%,#9cc6e4 46%,#e9c3dd 60%,#ff9ecd 80%,#ff6fb4 100%);
}
#wall.hills::before{
  left:0;right:0;bottom:0;height:62%;
  background:
    radial-gradient(130% 60% at 50% 115%, #06170f 0 99%, transparent 100%),
    radial-gradient(62% 69% at 74% 109%, #0e3423 0 99%, transparent 100%),
    radial-gradient(70% 77% at 22% 104%, #1a4a33 0 99%, transparent 100%);
}
#wall.hills::after{
  left:0;right:0;bottom:44.5%;height:4px;
  background:linear-gradient(90deg,transparent 2%,rgba(200,255,61,.5) 26%,rgba(255,255,255,.35) 48%,rgba(255,26,140,.45) 72%,transparent 98%);
  filter:blur(2.5px);
}

/* -- grid: ξαναγραμμένο. Outrun ήλιος + perspective δάπεδο. -- */
#wall.grid{background:linear-gradient(#04030a 0%,#120926 38%,#33113f 51%,#0c0616 66%,#050310 100%)}
#wall.grid::before{
  left:50%;top:30%;width:42vmin;height:42vmin;margin:-21vmin 0 0 -21vmin;
  border-radius:50%;
  background:linear-gradient(#c8ff3d 0%,#ffe14d 24%,#ff5fae 58%,#ff1a8c 78%,#6d0740 100%);
  -webkit-mask-image:linear-gradient(#000 0 46%, transparent 46%),
    repeating-linear-gradient(#000 0 10px, transparent 10px 15px);
  mask-image:linear-gradient(#000 0 46%, transparent 46%),
    repeating-linear-gradient(#000 0 10px, transparent 10px 15px);
  -webkit-mask-composite:source-over;mask-composite:add;
}
#wall.grid::after{
  left:-60%;right:-60%;top:51%;bottom:-42%;
  background:
    repeating-linear-gradient(90deg, rgba(255,26,140,.5) 0 2px, transparent 2px 62px),
    repeating-linear-gradient(rgba(255,26,140,.38) 0 2px, transparent 2px 54px);
  transform:perspective(46vmin) rotateX(64deg);
  transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(transparent 0, #000 26%, #000 100%);
  mask-image:linear-gradient(transparent 0, #000 26%, #000 100%);
}

/* ---------- ΑΔΕΙΑ ΕΠΙΦΑΝΕΙΑ ---------- */
#idle{
  position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);z-index:1;
  text-align:center;pointer-events:none;color:#fff;
}
#idle[hidden]{display:none}
#idle b{
  display:block;font:400 clamp(30px,7vw,58px)/1 var(--flyer);letter-spacing:.12em;
  text-transform:uppercase;opacity:.17;text-shadow:0 2px 14px rgba(0,0,0,.6);
}
#idle small{display:block;margin-top:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.4}

/* ---------- DESKTOP ICONS ---------- */
#desk{
  position:fixed;inset:0 0 var(--tb) 0;z-index:2;
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,84px);
  justify-content:start;align-content:start;gap:2px;
  padding:8px calc(6px + env(safe-area-inset-right,0px)) 8px calc(6px + env(safe-area-inset-left,0px));
}
.ico{
  width:82px;padding:5px 2px 4px;border:1px dotted transparent;background:none;
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:default;
}
.ico svg{width:34px;height:34px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.ico span{
  color:#fff;text-align:center;font-size:11px;line-height:1.25;
  text-shadow:0 1px 2px rgba(0,0,0,.85);padding:1px 3px;
}
.ico[aria-pressed="true"] span{background:var(--sel)}
.ico[aria-pressed="true"] svg{filter:drop-shadow(0 0 0 #000) saturate(1.4) brightness(1.05)}
.ico:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px}

/* ---------- WINDOWS ---------- */
.win{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  min-width:260px;min-height:160px;z-index:10;
  display:flex;flex-direction:column;
  background:var(--face);
  border:1px solid var(--title-c);border-radius:7px 7px 2px 2px;
  box-shadow:0 8px 26px rgba(0,0,0,.4);
}
.win[hidden]{display:none}
.win.max{left:0;top:0;width:100%;height:calc(100% - var(--tb));border-radius:0}
.win:focus{outline:none}

.bar{
  height:26px;flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:0 3px 0 6px;
  background:linear-gradient(#0e6ff0 0%,var(--title-a) 8%,var(--title-b) 42%,var(--title-a) 60%,var(--title-c) 100%);
  color:#fff;font-weight:bold;font-size:12px;text-shadow:1px 1px 1px rgba(0,0,0,.5);
  cursor:default;touch-action:none;border-radius:6px 6px 0 0;
}
.win.max .bar{border-radius:0}
.win.blur .bar{background:linear-gradient(#7ba7e8,#6b93d6 50%,#5f86c9);color:#e9eef7}
.bar svg{width:15px;height:15px;flex:0 0 auto}
.bar b{flex:1 1 auto;font-weight:bold;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.btns{display:flex;gap:2px}
.btns button{
  width:21px;height:19px;border:1px solid rgba(255,255,255,.75);border-radius:3px;
  background:linear-gradient(#5b9bf4,#1c5fd4 55%,#0b47b0);
  color:#fff;font:bold 11px/1 var(--chrome);cursor:pointer;
  display:grid;place-items:center;
}
.btns button:hover{background:linear-gradient(#7db3f8,#3a7ae4 55%,#1a56c0)}
.btns button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.btns .x{background:linear-gradient(#f08a72,#d0431c 55%,#a72f0e)}
.btns .x:hover{background:linear-gradient(#f7a48f,#e1552c 55%,#bb3a14)}

/* ---------- MENU BAR + DROPDOWNS ---------- */
.menu{
  flex:0 0 auto;display:flex;gap:1px;padding:2px 4px;
  border-bottom:1px solid var(--face-shadow);background:var(--face);font-size:11px;
}
.menu .mtop{
  padding:3px 8px;border:0;background:none;cursor:pointer;border-radius:0;
}
.menu .mtop:hover,.menu .mtop[aria-expanded="true"]{background:var(--sel);color:#fff}
.menu .mtop u{text-decoration:none;border-bottom:1px solid currentColor}

.drop{
  position:fixed;z-index:90;min-width:186px;padding:2px;
  background:var(--face);border:1px solid #7a7768;
  box-shadow:2px 3px 7px rgba(0,0,0,.35);
  display:flex;flex-direction:column;
}
.drop[hidden]{display:none}
.drop button{
  display:flex;align-items:center;gap:8px;width:100%;padding:5px 10px 5px 8px;
  border:0;background:none;text-align:left;font-size:11px;cursor:pointer;white-space:nowrap;
}
.drop button:hover,.drop button:focus-visible{background:var(--sel);color:#fff;outline:none}
.drop button i{flex:0 0 12px;font-style:normal;text-align:center;color:var(--accent-ink)}
.drop button:hover i,.drop button:focus-visible i{color:var(--accent-2)}
.drop button s{flex:1 1 auto;text-decoration:none}
.drop button em{flex:0 0 auto;font-style:normal;opacity:.55;padding-left:14px}
.drop hr{width:100%;border:0;border-top:1px solid var(--face-shadow);border-bottom:1px solid #fff;margin:3px 0}

.body{
  flex:1 1 auto;overflow:auto;background:#fff;margin:3px;
  border:1px solid var(--face-shadow);box-shadow:inset 1px 1px 0 #6f6d5f;
  padding:14px 16px;user-select:text;-webkit-overflow-scrolling:touch;
  overflow-wrap:anywhere;
}
.status{
  flex:0 0 auto;display:flex;gap:4px;padding:2px 5px;font-size:11px;color:var(--ink-dim);
  border-top:1px solid var(--face-line);
}
.status i{flex:1 1 auto;font-style:normal;border:1px solid var(--face-shadow);border-right-color:var(--face-line);border-bottom-color:var(--face-line);padding:1px 5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.status i.s2{flex:0 0 90px}
.grip{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;touch-action:none}

/* ---------- CONTENT ---------- */
.body h2{
  font:400 clamp(26px,4.4vw,40px)/.92 var(--flyer);letter-spacing:.5px;
  text-transform:uppercase;margin:0 0 2px;color:var(--ink);
}
.body h3{font:bold 12px/1.3 var(--chrome);margin:20px 0 6px;text-transform:uppercase;letter-spacing:.9px;color:var(--accent-ink)}
.body p{margin:0 0 10px;font-size:12px;max-width:62ch}
.body a{color:var(--accent-ink);text-underline-offset:2px}
.body a:hover{background:var(--accent-2);color:#12100c;text-decoration:none}
.eyebrow{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-dim);margin:0 0 8px}
.todo{color:var(--accent-ink);background:rgba(200,255,61,.42);padding:0 3px;font-weight:bold}
hr.rule{border:0;border-top:1px solid #d6d3c6;margin:16px 0}

.ev{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #e6e3d8}
.ev:last-child{border-bottom:0}
.ev .when{
  flex:0 0 52px;text-align:center;border:1px solid #d6d3c6;background:#faf9f4;padding:4px 0;
  align-self:flex-start;
}
.ev .when b{display:block;font:400 22px/1 var(--flyer)}
.ev .when i{display:block;font-style:normal;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-dim)}
.ev h4{margin:0 0 3px;font:400 20px/1 var(--flyer);text-transform:uppercase}
.ev small{color:var(--ink-dim)}
.tag{display:inline-block;font-size:9px;letter-spacing:1px;text-transform:uppercase;background:var(--accent);color:#12100c;font-weight:bold;padding:1px 5px;margin-left:5px;vertical-align:2px}
.tag.pick{background:var(--accent-2)}
.tag.off{background:#d9d6c9;color:#4a473f}

/* Σειρές αγοράς: κάθε event κρατά τη δική του τιμή και το δικό του link. */
.buy{margin:6px 0 14px;border-top:1px solid #d6d3c6}
.buyrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid #d6d3c6}
.buyrow .who{flex:1 1 200px;min-width:0}
.buyrow .who b{display:block;font:400 20px/1.05 var(--flyer);font-weight:normal;text-transform:uppercase}
.buyrow .who small{color:var(--ink-dim)}
.buyrow .cost{flex:0 0 auto;min-width:62px;text-align:right;font:400 26px/1 var(--flyer);font-variant-numeric:tabular-nums}
.buyrow .cost.tba{color:var(--ink-dim)}
.buyrow .xpbtn,.buyrow .todo{flex:0 0 auto}

/* Γραμμή τιμής/link μέσα στην κάρτα του event */
.evbuy{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:7px 0 0!important}
.evbuy .cost{font:400 19px/1 var(--flyer);font-variant-numeric:tabular-nums}

/* Δεύτερη γραμμή κάτω από την τιμή: community tickets και φθηνότερα tiers.
   Τα tiers δεν απαριθμούνται εδώ — το ζωντανό tier το δείχνει το RA. */
.tiers{font-size:11px;line-height:1.35;color:var(--ink-dim);font-variant-numeric:tabular-nums;margin:5px 0 0!important}
.buyrow .tiers{flex:1 0 100%}

.xpbtn{
  font:11px/1 var(--chrome);padding:6px 16px;background:linear-gradient(#fff,var(--face) 45%,#d6d2c2);
  border:1px solid #7a7768;border-radius:3px;box-shadow:inset 0 0 0 1px #fff;cursor:pointer;
  display:inline-block;text-decoration:none;color:var(--ink);
}
.xpbtn:hover{background:linear-gradient(#fff,#ffe7f4 45%,#ffb9dc);border-color:var(--accent)}
.xpbtn:active{background:linear-gradient(#cfcbb9,#e6e2d1)}

.shots{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(min(96px,100%),1fr))}
.shot{aspect-ratio:1;border:1px solid #d6d3c6;background:
  repeating-conic-gradient(#eceae0 0 25%,#f8f7f1 0 50%) 0 0/16px 16px;
  display:grid;place-items:center;color:#fff;font-size:9px;letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.shot.n1{background:linear-gradient(135deg,#2a1250,#ff1a8c)}
.shot.n2{background:linear-gradient(135deg,#c8ff3d,#2a1250)}
.shot.n3{background:linear-gradient(135deg,#ff1a8c,#0c0616)}
.shot.n4{background:linear-gradient(135deg,#6d1bb0,#c8ff3d)}

/* Αρχείο */
.arc{padding:8px 0 9px;border-bottom:1px solid #e6e3d8}
.arc h4{margin:0 0 2px;font:bold 12px/1.3 var(--chrome);text-transform:none}
.arc h4 a{color:var(--ink);text-decoration:none}
.arc h4 a:hover{color:var(--accent-ink);text-decoration:underline}
.arc small{display:block;color:var(--ink-dim);font-size:11px}
.arc .lu{margin:3px 0 0;font-size:11px;color:#3f3d36;line-height:1.35}
.body h3 .cnt{font:11px var(--chrome);color:var(--ink-dim);letter-spacing:0;margin-left:4px}
.more{margin:16px 0 4px}
/* Gallery: flyers */
.flyers{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(132px,100%),1fr));margin-top:10px}
.fly{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#1a1426;border:1px solid #b6b3a4;box-shadow:1px 1px 0 #fff inset}
.fly img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.fly span{position:absolute;inset:auto 0 0 0;padding:16px 6px 5px;font:bold 10px/1.2 var(--chrome);color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.82));opacity:0;transition:opacity .2s}
.fly span i{display:block;font-weight:normal;font-style:normal;opacity:.8;margin-top:2px}
.fly:hover img,.fly:focus-visible img{transform:scale(1.04)}
.fly:hover span,.fly:focus-visible span{opacity:1}
@media (hover:none){.fly span{opacity:1}}
/* Mixes: YouTube */
.vids{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));margin-top:10px}
.vid{margin:0}
.vid figcaption{font-size:11px;margin-top:4px;color:#3f3d36}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:1px solid #7a7768;background:#000;cursor:pointer;overflow:hidden}
.yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88}
.yt b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:32px;border-radius:7px;
  background:var(--accent);color:#fff;font:14px/32px var(--chrome);text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.yt i{position:absolute;right:5px;bottom:5px;font:bold 10px/1 var(--chrome);font-style:normal;color:#fff;background:rgba(0,0,0,.75);padding:3px 4px}
.yt:hover img{opacity:1}
.yt:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.track{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #e6e3d8;font-size:12px}
.track .no{font:400 16px/1 var(--flyer);color:var(--accent-ink);width:22px;flex:0 0 22px}
.track b{flex:1 1 auto;font-weight:normal}
.track small{color:var(--ink-dim);flex:0 0 auto;text-align:right}
.track kbd{
  flex:0 0 auto;font:bold 10px/1 var(--chrome);background:var(--face);border:1px solid #b6b3a4;
  border-bottom-width:2px;padding:4px 6px;white-space:nowrap;
}

.note{background:#ffffe1;border:1px solid #c9c69b;border-left:3px solid var(--accent-2);padding:8px 10px;font-size:11px;margin:14px 0 0}
.hitline{background:#ffe98a;box-shadow:0 0 0 6px #ffe98a;animation:flash 1.4s ease-out}
@keyframes flash{from{background:#ffcf3a}to{background:#ffe98a}}

/* ---------- TASKBAR ---------- */
#taskbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  height:calc(var(--tb) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:stretch;gap:5px;
  background:linear-gradient(var(--tb-a) 0%,#1d49b5 9%,var(--tb-a) 18%,#1f4ec2 88%,var(--tb-b) 100%);
  border-top:1px solid #4b8bf5;
  padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
#start{
  display:flex;align-items:center;gap:6px;padding:0 16px 2px 9px;border:0;cursor:pointer;
  background:linear-gradient(var(--start-a) 0%,#4c9d2c 46%,var(--start-b) 100%);
  border-radius:0 9px 9px 0;box-shadow:inset 0 1px 0 #9ede76;
  color:#fff;font:italic bold 15px/1 var(--chrome);text-shadow:1px 1px 2px rgba(0,0,0,.45);
  flex:0 0 auto;
}
#start:hover{filter:brightness(1.09)}
#start[aria-expanded="true"]{background:linear-gradient(#3f8a22,#2a6b13);box-shadow:inset 0 2px 4px rgba(0,0,0,.45)}
#start svg{width:21px;height:21px;flex:0 0 auto}

#tasks{flex:1 1 auto;display:flex;align-items:center;gap:3px;padding:3px 0;overflow:hidden;min-width:0}
.task{
  display:flex;align-items:center;gap:5px;min-width:0;max-width:168px;flex:0 1 168px;
  padding:0 8px;height:100%;border:0;cursor:pointer;
  background:#3f78e0;color:#fff;font-size:11px;box-shadow:inset 1px 1px 0 rgba(255,255,255,.28);
  overflow:hidden;white-space:nowrap;
}
.task svg{width:14px;height:14px;flex:0 0 auto}
.task b{font-weight:normal;overflow:hidden;text-overflow:ellipsis}
.task[aria-current="true"]{background:#1b46ad;box-shadow:inset 1px 1px 3px rgba(0,0,0,.5)}

#tray{
  display:flex;align-items:center;gap:8px;padding:0 10px 0 12px;color:#fff;font-size:11px;
  background:linear-gradient(#18aae5 0%,#1287c9 12%,#0f6cb5 90%);
  border-left:1px solid #3ec6ff;text-shadow:1px 1px 1px rgba(0,0,0,.35);
  flex:0 0 auto;
}
#tray svg{width:14px;height:14px}
#lang{
  display:flex;align-items:stretch;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.22);
  padding:0;cursor:pointer;font:bold 10px/1 var(--chrome);letter-spacing:.06em;
}
#lang span{padding:4px 5px;display:grid;place-items:center;color:#dbe8f7;text-shadow:none}
#lang span[data-on="1"]{background:var(--accent-2);color:#12100c}
#lang:hover{border-color:var(--accent-2)}
#clock{font-variant-numeric:tabular-nums}

/* ---------- START MENU ---------- */
#menu{
  position:fixed;left:3px;bottom:calc(var(--tb) + env(safe-area-inset-bottom,0px) - 2px);
  width:396px;z-index:70;
  border:1px solid #0b3fb5;border-radius:7px 7px 0 0;overflow:hidden;
  box-shadow:0 -6px 30px rgba(0,0,0,.45);
  transform-origin:0 100%;
}
#menu[hidden]{display:none}
#menu.in{animation:pop .13s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

#menu header{
  display:flex;align-items:center;gap:9px;padding:7px 10px;
  /* chrome sheen πάνω από το XP μπλε */
  background:
    linear-gradient(rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 34%,rgba(255,255,255,0) 46%,rgba(0,0,0,.12) 62%,rgba(255,255,255,.16) 100%),
    linear-gradient(var(--title-a),var(--title-b) 45%,var(--title-c));
  color:#fff;font:bold 14px/1 var(--chrome);text-shadow:1px 1px 2px rgba(0,0,0,.5);
  border-bottom:2px solid var(--accent-2);
}
#menu header .pfp{
  width:34px;height:34px;flex:0 0 auto;border:2px solid #d9e6ff;
  background:linear-gradient(135deg,#ff1a8c,#2a1250 62%,#c8ff3d);
  display:grid;place-items:center;font:400 17px/1 var(--flyer);color:#fff;
}
#find{
  display:flex;gap:5px;align-items:center;padding:7px 9px;background:#d3e5fa;border-bottom:1px solid #9db8de;
}
#find input{
  flex:1 1 auto;min-width:0;font:12px/1 var(--chrome);padding:6px 7px;
  border:1px solid #7f9db9;box-shadow:inset 1px 1px 0 #b7c9dc;background:#fff;border-radius:0;
}
#find input:focus{outline:2px solid var(--accent);outline-offset:-1px}

#cols{display:flex;background:#fff}
#cols nav{flex:1 1 56%;padding:6px 5px;border-right:1px solid #b6cff0}
#cols aside{flex:1 1 44%;padding:6px 5px;background:#d3e5fa}
.item{
  display:flex;align-items:center;gap:9px;width:100%;padding:6px 7px;border:0;background:none;
  text-align:left;font-size:12px;cursor:pointer;
}
.item svg{width:24px;height:24px;flex:0 0 auto}
.item.sm svg{width:18px;height:18px}
.item b{font-weight:bold;display:block}
.item small{display:block;color:var(--ink-dim);font-size:10px}
.item:hover,.item:focus-visible{background:var(--sel);color:#fff;outline:none}
.item:hover small,.item:focus-visible small{color:#dbe6f8}
.item[data-on="1"] b::after{content:" •";color:var(--accent-ink)}
.item:hover[data-on="1"] b::after{color:var(--accent-2)}
.sep{height:1px;background:#c4d8f0;margin:5px 8px}
.cap{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:#3a5f96;padding:4px 8px}
#menu footer{
  display:flex;justify-content:flex-end;gap:8px;padding:6px 10px;
  background:linear-gradient(var(--title-b),var(--title-a) 40%,var(--title-c));border-top:1px solid #9dc0f5;
}
#menu footer button{display:flex;align-items:center;gap:6px;background:none;border:0;color:#fff;font-size:11px;cursor:pointer;padding:3px 5px}
#menu footer button:hover{background:rgba(255,255,255,.18)}
#menu footer svg{width:16px;height:16px}
#hits .item small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#empty{padding:16px 12px;font-size:12px;color:var(--ink-dim)}
#empty b{color:var(--ink)}

/* ---------- SHUTDOWN ---------- */
#bye{
  position:fixed;inset:0;z-index:99;display:grid;place-items:center;text-align:center;
  background:radial-gradient(120% 90% at 70% -10%,#2a1250 0%,#140b28 45%,#07060f 100%);color:#fff;padding:24px;
}
#bye[hidden]{display:none}
#bye .bye-h{font:400 clamp(38px,9vw,84px)/.9 var(--flyer);text-transform:uppercase;margin:0 0 10px;letter-spacing:1px;color:var(--accent-2)}
#bye p{font-size:13px;opacity:.85;margin:0 0 22px}

/* ---------- HINT ---------- */
#hint{
  position:fixed;left:96px;top:14px;z-index:40;max-width:210px;
  background:#ffffe1;border:1px solid #b7b48c;border-left:3px solid var(--accent);
  padding:8px 10px;font-size:11px;box-shadow:2px 2px 6px rgba(0,0,0,.3);
}
#hint[hidden]{display:none}
#hint button{margin-top:6px}

/* ============================================================
   ΣΥΣΚΕΥΕΣ — τρία επίπεδα
   phone ≤767 · tablet 768–1023 · desktop ≥1024
   ============================================================ */

/* ---------- TABLET 768–1023 ---------- */
@media (min-width:768px) and (max-width:1023px){
  :root{--tb:44px}
  #desk{grid-template-rows:repeat(auto-fill,104px);gap:4px;padding-top:12px}
  .ico{width:100px;padding:8px 4px}
  .ico svg{width:46px;height:46px}
  .ico span{font-size:12px}

  .bar{height:34px;font-size:13px;padding-left:9px}
  .bar svg{width:17px;height:17px}
  .btns button{width:28px;height:28px;font-size:12px}
  .grip{width:24px;height:24px}
  .menu{font-size:12px;padding:3px 4px}
  .menu .mtop{padding:6px 11px;min-height:30px}
  .drop button{padding:9px 12px 9px 9px;font-size:12px;min-height:34px}
  .body{padding:16px 18px}

  #menu{width:min(460px,94vw)}
  .item{padding:9px 8px;font-size:13px;min-height:40px}
  .item small{font-size:11px}
  .item svg{width:26px;height:26px}
  .item.sm svg{width:22px;height:22px}
  #find input{font-size:16px;padding:9px 9px}
  #menu footer button{padding:7px 9px;min-height:34px}

  #start{font-size:16px;padding:0 18px 2px 11px}
  .task{flex:0 1 150px;max-width:150px}
  #lang span{padding:6px 7px}
  #hint{left:120px}
}

/* ---------- PHONE ≤767 ---------- */
@media (max-width:767px){
  :root{--tb:52px}
  #desk{
    grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(4,1fr);
    align-content:start;gap:6px 0;padding:14px 8px;
  }
  .ico{width:auto;min-height:64px}
  .ico svg{width:42px;height:42px}
  .ico span{font-size:11px}

  .win{
    position:fixed;left:0;top:0;width:100%;
    height:calc(100dvh - var(--tb) - env(safe-area-inset-bottom,0px));
    border:0;border-radius:0;box-shadow:none;min-width:0;min-height:0;
  }
  .bar{height:48px;font-size:15px;padding-left:calc(12px + env(safe-area-inset-left,0px));border-radius:0}
  .bar svg{width:20px;height:20px}
  .btns button{width:44px;height:44px;font-size:15px;border-radius:0}
  .btns .mini,.btns .mx{display:none}
  .menu,.status,.grip{display:none}
  .body{
    margin:0;border:0;box-shadow:none;
    padding:18px calc(16px + env(safe-area-inset-right,0px)) 30px calc(16px + env(safe-area-inset-left,0px));
  }
  .xpbtn{min-height:44px;padding:12px 18px}

  #menu{
    left:0;right:0;width:auto;
    bottom:calc(var(--tb) + env(safe-area-inset-bottom,0px) + var(--kb));
    max-height:calc(100dvh - var(--tb) - env(safe-area-inset-bottom,0px) - var(--kb));
    display:flex;flex-direction:column;border-radius:0;border-left:0;border-right:0;
  }
  #find input{font-size:16px;padding:12px 10px}   /* 16px = χωρίς zoom στο iOS */
  #cols{flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch}
  #cols nav{border-right:0}
  #cols aside{background:#e8f1fc;border-top:1px solid #b6cff0}
  .item{padding:11px 9px;font-size:14px;min-height:44px}
  .item small{font-size:11px}
  .item svg,.item.sm svg{width:26px;height:26px}
  #menu footer button{min-height:44px;padding:6px 10px}

  #start{font-size:16px;padding:0 20px 2px 12px;min-height:44px}
  #start svg{width:24px;height:24px}
  #tasks{gap:2px}
  .task{flex:0 0 44px;max-width:44px;padding:0;justify-content:center}
  .task b{display:none}
  .task svg{width:20px;height:20px}
  #tray{font-size:12px;padding:0 8px;gap:6px}
  #tray svg{display:none}
  #lang span{padding:0 7px;min-height:44px}
  #hint{display:none}
  #idle small{font-size:10px}
}

/* ---------- ΠΟΛΥ ΣΤΕΝΑ (<360) ---------- */
@media (max-width:359px){
  #desk{grid-template-columns:repeat(3,1fr);padding:12px 6px}
  .ico svg{width:38px;height:38px}
  .body{padding-left:12px;padding-right:12px}
  .ev{gap:9px}
  .ev .when{flex:0 0 44px}
  #start{font-size:14px;padding:0 12px 2px 8px}
  #tray{padding:0 6px;gap:5px}
  #lang span{padding:0 5px}
}

/* ---------- LANDSCAPE ΣΕ ΧΑΜΗΛΟ ΥΨΟΣ ---------- */
@media (max-width:1023px) and (max-height:450px){
  :root{--tb:42px}
  #desk{grid-template-columns:repeat(6,1fr);padding-top:8px}
  .ico svg{width:34px;height:34px}
  .bar{height:40px}
  .btns button{width:40px;height:38px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ============================================================
   HB — κρυφό birthday app (μόνο με ?hb στο URL).
   Αυτόνομο: σβήσε αυτό το CSS block και το JS block "HB" στο τέλος
   του script και δεν μένει τίποτα.
   ============================================================ */
/* Εικονίδιο — .bmp στην επιφάνεια εργασίας, πάνω δεξιά */
.hb-ico{
  position:fixed;top:16px;right:calc(24px + env(safe-area-inset-right,0px));z-index:3;
  width:98px;padding:5px 2px 4px;border:1px dotted transparent;background:none;
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:default;font:inherit;
}
.hb-ico svg{width:40px;height:40px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.hb-ico span{
  color:#fff;text-align:center;font-size:11px;line-height:1.25;
  text-shadow:0 1px 2px rgba(0,0,0,.85);padding:1px 3px;
}
.hb-ico[aria-pressed="true"] span{background:var(--sel)}
.hb-ico[aria-pressed="true"] svg{filter:drop-shadow(0 0 0 #000) saturate(1.4) brightness(1.05)}
.hb-ico:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px}

/* Παράθυρο — προβολή εικόνων, όχι κανονικό έγγραφο */
.win[data-app="hb"] .body{
  display:flex;flex-direction:column;padding:0;overflow:hidden;
  background:#3d3d3d;color:#e6e6e6;
}
.hb-canvas{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch}
.hb-stage{flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px;max-width:100%}
.hb-stage img{
  display:block;flex:0 1 auto;min-height:120px;max-width:100%;max-height:62vh;width:auto;height:auto;object-fit:contain;
  background:#2c2c2c;box-shadow:0 0 0 1px #1d1d1d,0 6px 20px rgba(0,0,0,.45);
}
.hb-missing{
  display:none;width:min(320px,72vw);aspect-ratio:4/3;place-items:center;
  border:2px dashed #9a9a9a;color:#d8d8d8;font:12px/1 var(--chrome);letter-spacing:.1em;
}
.hb-nofile img{display:none}
.hb-nofile .hb-missing{display:grid}
.hb-title{
  flex:0 0 auto;font:400 clamp(26px,4.6vw,44px)/1.05 var(--flyer);letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);text-align:center;max-width:100%;text-shadow:0 2px 0 rgba(0,0,0,.35);
}
.hb-tools{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:2px;padding:4px 8px;
  background:linear-gradient(#f4f3ec,var(--face) 60%,#dcd8c8);border-top:1px solid #9d9a8a;
  box-shadow:inset 0 1px 0 #fff;
}
.hb-tools i{
  width:26px;height:24px;display:grid;place-items:center;font-style:normal;
  border:1px solid transparent;border-radius:3px;
}
.hb-tools i:hover{border-color:#7a7768;background:linear-gradient(#fff,#e8e6da)}
.hb-tools i svg{width:16px;height:16px;fill:none;stroke:#3f3d36;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hb-tools s{width:1px;height:18px;margin:0 5px;background:#9d9a8a;box-shadow:1px 0 0 #fff}

/* Μία ήσυχη κίνηση: fade + scale στο άνοιγμα */
.win.hb-in{animation:hb-in .42s cubic-bezier(.2,.7,.2,1);transform-origin:50% 50%}
@keyframes hb-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* Κομφετί — CSS μόνο, σταματά μόνο του */
.hb-confetti{position:fixed;inset:0;z-index:58;pointer-events:none;overflow:hidden}
.hb-confetti i{
  position:absolute;top:-18px;left:var(--x);width:8px;height:14px;background:var(--accent);
  opacity:0;animation:hb-fall var(--d) linear var(--dl) forwards;
}
.hb-confetti i:nth-child(odd){background:var(--accent-2);width:10px;height:10px}
.hb-confetti i:nth-child(3n){width:6px;height:16px}
@keyframes hb-fall{
  0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}
  50%{transform:translate3d(var(--sw),52vh,0) rotate(400deg)}
  100%{opacity:.85;transform:translate3d(calc(var(--sw) * -1),108vh,0) rotate(760deg)}
}

@media (min-width:768px) and (max-width:1023px){
  .hb-ico{width:112px;padding:8px 4px}
  .hb-ico svg{width:50px;height:50px}
  .hb-ico span{font-size:12px}
}
@media (max-width:767px){
  .hb-ico{position:static;width:auto;min-height:64px}   /* μπαίνει στο κανονικό grid */
  .hb-ico svg{width:46px;height:46px}
  .hb-stage{padding:16px 12px}
  .hb-tools{padding:6px 8px}
  .hb-tools i{width:34px;height:32px}
}
/* ---- τέλος HB CSS ---- */

/* ============================================================
   Φάση 2: σελίδες ανά URL
   ============================================================ */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#os{display:contents}

/* Το παράθυρο που φτιάχνει ο server, πριν το «πιάσει» το engine
   (ή αν δεν τρέξει καθόλου JavaScript). */
.win[data-ssr]{left:50%;top:24px;transform:translateX(-50%);width:min(760px,94vw);height:calc(100dvh - var(--tb) - 48px);z-index:20}
@media (max-width:767px){.win[data-ssr]{left:0;top:0;transform:none;width:100%;height:calc(100dvh - var(--tb))}}

/* Τίτλοι events ως links */
.ev h4 a,.buyrow .who b a{color:inherit;text-decoration:none}
.ev h4 a:hover,.buyrow .who b a:hover{color:var(--accent-ink);text-decoration:underline}

/* Σελίδα event */
.evd{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px;align-items:start;margin:10px 0 12px}
.evd-fly{display:block;border:1px solid #b6b3a4;background:#1a1426;box-shadow:2px 2px 0 rgba(0,0,0,.12)}
.evd-fly img{display:block;width:100%;height:auto}
.evd-info dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0 0 6px;font-size:12px}
.evd-info dt{color:var(--ink-dim);font-size:10px;letter-spacing:1px;text-transform:uppercase;padding-top:2px}
.evd-info dd{margin:0;line-height:1.4}
.evd-tags{margin:0 0 8px!important}
.evd:not(:has(.evd-fly)){grid-template-columns:1fr}
@media (max-width:560px){.evd{grid-template-columns:1fr}.evd-fly{max-width:280px}}

/* 404 */
.nf{position:fixed;inset:0;display:grid;place-items:center;padding:16px}
.nf-win{position:relative!important;left:auto!important;top:auto!important;width:min(440px,100%)!important;height:auto!important}
.nf-win .bar{cursor:default}
.nf-row{display:flex;gap:14px;align-items:flex-start;font-size:12px}
.nf-x{flex:0 0 32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a7a,#d0331b);color:#fff;font:bold 16px/32px var(--chrome);text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.nf-btns{text-align:right;margin-top:16px}