/* Εύγευστο — κοινό theme (grill / dark)
 * Κάρβουνο + σκουριά/θράκα, condensed «φθαρμένα» γράμματα, υφή στο φόντο.
 */
:root {
  /* Εσωτερικό: σκούρο κάρβουνο */
  --coal: #0c0c0b;          /* βασικό φόντο */
  --coal-2: #141413;
  --coal-3: #1c1c1a;
  --coal-4: #282826;
  --deep: #060606;          /* sidebar, κάρτες, πάνελ */
  --deep-a: 6,6,6;          /* για rgba() */
  /* Πλαίσιο: σκούρο πράσινο ελιάς */
  --frame-c: #1d3a2b;
  --outside: #040504;       /* ό,τι φαίνεται έξω από το πλαίσιο */
  --line: rgba(240,230,215,.1);
  /* Χρώμα έμφασης: πράσινο (δένει με το πλαίσιο) */
  --ember: #3d6b4b;         /* κουμπιά, ενεργά στοιχεία */
  --ember-a: 61,107,75;     /* για rgba() */
  --ember-2: #e6d5b8;       /* τιμές, τίτλοι, αστεράκια (ζεστό κρεμ) */
  --ember-deep: #1d3a2b;
  --bone: #f1e8da;          /* κείμενο */
  --bone-dim: rgba(241,232,218,.62);
  --bone-faint: rgba(241,232,218,.35);
  --olive: #8b9a5b;

  --display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --sans: "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Noto Serif Display", Georgia, serif;

  /* Πλαίσιο γύρω από την οθόνη */
  --edge: 14px;
  --bw: 9px;
  --frame-r: 30px;
  --in: calc(var(--edge) + var(--bw));

  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Υφή θορύβου (φόντο) & μάσκα «φθοράς» για τίτλους */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --wear: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -11 7.6'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--deep); }
body { margin: 0; font-family: var(--sans); color: var(--bone); background: var(--coal); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--ember); color: #fff; }
:focus-visible { outline: 2px solid var(--ember-2); outline-offset: 3px; border-radius: 6px; }

/* Υφή σε όλη τη σελίδα */
.grain::before { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--noise); opacity: .055; mix-blend-mode: screen; }

/* Πράσινο πλαίσιο — καλύπτει και ό,τι είναι έξω από αυτό */
.frame { position: fixed; inset: var(--edge); z-index: 200; pointer-events: none; border: var(--bw) solid var(--frame-c); border-radius: var(--frame-r); box-shadow: 0 0 0 calc(var(--edge) + 4px) var(--outside), inset 0 0 40px rgba(0,0,0,.6); }

/* Τίτλοι */
.display { color: #fff; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: .005em; margin: 0; }
.worn { -webkit-mask-image: var(--wear); mask-image: var(--wear); -webkit-mask-size: 260px; mask-size: 260px; }
.ember { color: var(--ember-2); }

/* Λογότυπο */
.logo { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; color: var(--bone); }
.logo .mark { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: .62rem; letter-spacing: .28em; color: var(--bone-dim); }
.logo .mark svg { width: 34px; height: 18px; color: var(--ember-2); }
.logo .word { font-family: var(--script); font-style: italic; font-weight: 500; font-size: 2.05rem; letter-spacing: -.01em; margin-top: 4px; }
.logo .sub { font-family: var(--display); font-weight: 800; font-size: .66rem; letter-spacing: .5em; text-transform: uppercase; color: var(--ember-2); padding-left: .5em; margin-top: 4px; }

/* Το επίσημο λογότυπο (assets/logo.png) ως μάσκα — παίρνει το χρώμα του κειμένου */
.logo-img { display: block; width: 190px; aspect-ratio: 1836 / 886; background: currentColor; -webkit-mask: url("logo.png") center / contain no-repeat; mask: url("logo.png") center / contain no-repeat; }
.logo:hover .logo-img { opacity: .9; }

/* Κουμπιά */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .85em 1.9em; border-radius: 999px; font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 16px; height: 16px; }
.btn-ember { background: var(--ember); color: #fff; box-shadow: 0 10px 30px -12px rgba(var(--ember-a),.8); }
.btn-ember:hover { background: var(--ember-2); }
.btn-dark { background: var(--deep); color: var(--bone); box-shadow: inset 0 0 0 1px var(--line); }
.btn-dark:hover { background: #000; box-shadow: inset 0 0 0 1px var(--ember); }

/* Επιλογή γλώσσας */
.lang { display: inline-flex; background: rgba(var(--deep-a),.6); border-radius: 999px; padding: 3px; box-shadow: inset 0 0 0 1px var(--line); font-family: var(--display); font-weight: 800; font-size: .82rem; letter-spacing: .1em; }
.lang button { border: 0; background: none; padding: .32em .85em; border-radius: 999px; cursor: pointer; color: var(--bone-dim); transition: background .2s, color .2s; }
.lang button[aria-pressed="true"] { background: var(--ember); color: #fff; }

/* Στολίδι δάφνης */
.laurel { display: block; width: 120px; height: 26px; color: var(--bone); }

/* Κείμενα ανά γλώσσα */
html[lang="el"] [lang="en"], html[lang="en"] [lang="el"] { display: none !important; }

@media (max-width: 900px) {
  :root { --edge: 6px; --bw: 5px; --frame-r: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}