@font-face {
  font-family: "Play"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../../assets/fonts/play-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Play"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../../assets/fonts/play-greek-700-normal.woff2") format("woff2");
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../../assets/fonts/manrope-greek-wght-normal.woff2") format("woff2");
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../../assets/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* παλέτα: ζεστή, κυριακάτικη (ντομάτα, κίτρινο, θάλασσα) */
:root {
  --ink: #2a1f2a;
  --paper: #fffaf0;
  --tomato: #ff6b45;
  --tomato-d: #d94a2a;
  --sun: #ffcf2e;
  --sea: #2f8fd8;
  --mint: #55c08a;
  --keftes: #8a4a2a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd3f4; color: var(--ink); font-family: "Manrope", system-ui, sans-serif; user-select: none; -webkit-user-select: none; }
#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }

.screen { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(ellipse at 50% 40%, rgba(255, 250, 240, .05), rgba(42, 31, 42, .35)); }
.screen.solid { background: linear-gradient(180deg, #8fd3f4, #ffe9c4); }
.box { width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--paper); border-radius: 28px; padding: 20px 22px 22px; text-align: center; box-shadow: 0 6px 0 rgba(42, 31, 42, .18), 0 18px 40px rgba(42, 31, 42, .25); }
h1, h2 { font-family: "Play", sans-serif; margin: 4px 0 10px; }
h2 { font-size: 24px; }
p { margin: 8px 0; line-height: 1.45; }
.small { font-size: 13px; opacity: .8; }

.logo { font-family: "Play", sans-serif; font-weight: 700; font-size: 48px; letter-spacing: -1px; color: var(--tomato-d); text-shadow: 0 3px 0 #9a3018, 0 6px 14px rgba(0, 0, 0, .15); display: inline-flex; align-items: center; gap: 8px; }
.kf { display: inline-block; width: .78em; height: .7em; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, #c27a4a 0 18%, var(--keftes) 45%, #5a2a14 100%); box-shadow: 0 .06em 0 #4a2210, inset -.05em -.05em 0 rgba(0, 0, 0, .25); position: relative; }
.kf::after { content: ""; position: absolute; left: 45%; top: -38%; width: .06em; height: .5em; background: #c9ccd2; border-radius: 2px; transform: rotate(18deg); box-shadow: -.06em -.02em 0 #c9ccd2, .06em -.02em 0 #c9ccd2; }
.tag { font-weight: 700; font-size: 15px; margin: 2px 0 14px; }

.btn { display: block; width: 100%; border: 0; border-radius: 16px; padding: 12px 16px; margin-top: 10px; font: 700 17px "Play", sans-serif; color: var(--ink); background: #f1ece2; box-shadow: 0 4px 0 #d8d0c0; cursor: pointer; transition: transform .08s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d8d0c0; }
.btn.primary { background: linear-gradient(180deg, #ffe066, var(--sun)); box-shadow: 0 4px 0 #d9a414; }
.btn.big { font-size: 24px; padding: 16px; }
.row { display: flex; gap: 10px; }
.row .btn { flex: 1; }
.stats { display: flex; justify-content: center; gap: 18px; margin: 12px 0 2px; font-size: 15px; }
.stats i { font-style: normal; font-family: "Play", sans-serif; font-weight: 700; }
.coin { display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff3a8, var(--sun) 55%, #d9a414); box-shadow: inset 0 0 0 .12em #f2b81a; vertical-align: -.15em; margin-right: .25em; }

.keys { display: grid; gap: 6px; margin: 10px 0; text-align: left; }
.keys div { display: flex; gap: 10px; align-items: center; font-size: 14px; }
kbd { min-width: 110px; font: 700 13px "Play", sans-serif; background: #f1ece2; border-radius: 8px; padding: 4px 8px; text-align: center; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; font-weight: 700; text-align: left; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.seg button, .tog { border: 0; border-radius: 12px; padding: 8px 11px; background: #f1ece2; color: var(--ink); font: 700 13px "Manrope", sans-serif; cursor: pointer; }
.seg button.on, .tog.on { background: var(--sun); }

/* φόρτωση */
.load-box { text-align: center; }
.load-box .bar { width: 240px; height: 14px; border-radius: 10px; background: rgba(255, 255, 255, .6); margin: 14px auto 8px; overflow: hidden; }
.load-box .bar b { display: block; height: 100%; width: 0; border-radius: 10px; background: linear-gradient(90deg, var(--sun), var(--tomato)); transition: width .25s ease; }
.load-box p { font-weight: 700; }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.hud-top { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%); text-align: center; }
.score { font: 700 34px "Play", sans-serif; color: #fff; text-shadow: 0 3px 0 rgba(42, 31, 42, .45), 0 0 12px rgba(42, 31, 42, .25); }
.coins { display: inline-flex; align-items: center; gap: 2px; margin-top: 2px; padding: 3px 12px; border-radius: 999px; background: rgba(42, 31, 42, .45); color: #fff; font: 700 18px "Play", sans-serif; }
.pause-btn { pointer-events: auto; position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: calc(env(safe-area-inset-right, 0px) + 10px); width: 44px; height: 44px; border: 0; border-radius: 14px; background: rgba(255, 250, 240, .9); color: var(--ink); font: 700 15px sans-serif; box-shadow: 0 3px 0 rgba(42, 31, 42, .25); cursor: pointer; }
#tip { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 30%); transform: translateX(-50%); max-width: 90%; padding: 10px 18px; border-radius: 16px; background: rgba(255, 250, 240, .95); font: 700 18px "Play", sans-serif; text-align: center; box-shadow: 0 4px 0 rgba(42, 31, 42, .25); animation: pop .3s ease-out; }
#warn { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 96px); transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: var(--tomato); color: #fff; font: 700 14px "Manrope", sans-serif; white-space: nowrap; animation: pulse .6s ease-in-out infinite alternate; }
#bubble { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%) rotate(-3deg); padding: 8px 16px; border-radius: 18px; background: #fff; border: 3px solid var(--ink); font: 700 22px "Play", sans-serif; color: var(--tomato-d); animation: pop .25s ease-out; }
@keyframes pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes pulse { from { opacity: .75; } to { opacity: 1; } }

/* αποτέλεσμα */
.over-box h2 { color: var(--tomato-d); }
.slipper { width: 70px; height: 34px; margin: 2px auto 6px; border-radius: 40% 60% 60% 40% / 50%; background: linear-gradient(180deg, #f28cb1 0 45%, #7a3a6a 45%); transform: rotate(-12deg); box-shadow: 0 4px 0 rgba(42, 31, 42, .2); animation: wobble 1s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(10deg) translateY(-3px); } }
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.results div { background: #f7f1e4; border-radius: 14px; padding: 8px 4px; }
.results small { display: block; font-size: 12px; font-weight: 700; opacity: .7; }
.results b { font: 700 22px "Play", sans-serif; }
.best { font-weight: 800; }
.best.nb { color: var(--tomato-d); font-size: 20px; animation: pulse .5s ease-in-out infinite alternate; }

/* τίτλος σε κάθετο κινητό: η κάρτα κάτω, ώστε να φαίνονται ο Τάκης και η γιαγιά */
@media (max-aspect-ratio: 3/4) { #title { align-items: flex-end; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); } }
@media (max-height: 460px) {
  .logo { font-size: 36px; }
  .box { padding: 12px 16px 14px; }
  .btn { padding: 9px 14px; margin-top: 7px; }
  .btn.big { font-size: 20px; padding: 11px; }
  .title-box { width: min(560px, 100%); }
  .score { font-size: 28px; }
  #warn { top: calc(env(safe-area-inset-top, 0px) + 78px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- φάση β: κατάστημα, αποστολές, power-ups, πατίνι ---------- */
.mult { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #b83a22; color: #fff; font: 700 14px "Play", sans-serif; vertical-align: middle; }
.score .mult { font-size: 16px; vertical-align: 6px; text-shadow: none; }
.event { margin: 10px 0 0; padding: 6px 10px; border-radius: 12px; background: #fff1c2; font-weight: 700; font-size: 14px; }
.small { font-size: 14px; opacity: .8; }
/* κατάστημα: πάνελ στο πλάι (οριζόντια) ή κάτω (κάθετα), ώστε να φαίνεται ο χαρακτήρας */
.screen.side { justify-content: flex-end; background: none; }
.panel { width: min(400px, 100%); display: flex; flex-direction: column; text-align: left; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-head h2 { margin: 0; }
.wallet { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: #f7f1e4; font: 700 18px "Play", sans-serif; }
.tabs { display: flex; gap: 6px; margin: 10px 0 8px; }
.tabs button { flex: 1; }
.shop-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; overflow: auto; max-height: 260px; padding: 2px; }
.card { position: relative; border: 0; border-radius: 16px; padding: 8px 4px 6px; background: #f7f1e4; box-shadow: 0 3px 0 #e2d8c4; cursor: pointer; font: 700 11px "Manrope", sans-serif; color: var(--ink); text-align: center; }
.card.sel { outline: 3px solid var(--sun); }
.card.lock { opacity: .85; }
.card > div { overflow: hidden; text-overflow: ellipsis; }
.card .pr { display: block; margin-top: 3px; font-size: 11px; }
.card .tick { position: absolute; top: 4px; right: 6px; color: var(--mint); font-size: 14px; }
.ava { position: relative; width: 44px; height: 52px; margin: 0 auto 4px; }
.ava .bd { position: absolute; left: 7px; right: 7px; bottom: 0; height: 22px; border-radius: 12px 12px 6px 6px; }
.ava .hd { position: absolute; left: 8px; top: 6px; width: 28px; height: 28px; border-radius: 50%; }
.ava .hr { position: absolute; left: 6px; top: 2px; width: 32px; height: 16px; border-radius: 16px 16px 4px 4px; }
.ava .ey { position: absolute; top: 19px; width: 5px; height: 6px; border-radius: 50%; background: #121218; }
.deck { width: 50px; height: 16px; margin: 14px auto 14px; border-radius: 10px; box-shadow: 0 5px 0 -1px #3a3a44; }
.pw-ico { width: 40px; height: 40px; margin: 4px auto; border-radius: 50%; display: grid; place-items: center; font: 700 15px "Play", sans-serif; color: #fff; }
.lv { display: flex; gap: 2px; justify-content: center; margin-top: 3px; }
.lv i { width: 7px; height: 7px; border-radius: 2px; background: #d8d0c0; }
.lv i.on { background: var(--mint); }
.shop-info { margin: 8px 2px 0; min-height: 40px; }
.shop-info b { display: block; font: 700 18px "Play", sans-serif; }
.shop-info small { display: block; font-size: 13px; opacity: .8; }
.btn:disabled { opacity: .55; cursor: default; }
@media (max-aspect-ratio: 1/1) {
  .screen.side { align-items: flex-end; justify-content: center; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .panel { width: 100%; max-height: 56vh; }
  .shop-list { max-height: 24vh; }
}
/* αποστολές */
.mis-list { list-style: none; margin: 8px 0; padding: 0; text-align: left; }
.mis-list li, .mis-list.day > div { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 8px 10px; border-radius: 14px; background: #f7f1e4; font-weight: 700; font-size: 14px; }
.mis-list .bar { flex: 0 0 74px; height: 9px; border-radius: 9px; background: #e2d8c4; overflow: hidden; }
.mis-list .bar b { display: block; height: 100%; background: var(--mint); }
.mis-list .done { color: var(--mint); }
.mis-list span { flex: 1; }
h3 { margin: 12px 0 0; font: 700 17px "Play", sans-serif; }
.o-mis { font-size: 14px; font-weight: 700; }
.o-mis p { margin: 4px 0; }
/* HUD: χρονόμετρα power-ups, κουμπί πατινιού, ειδοποιήσεις */
.pws { position: absolute; left: calc(env(safe-area-inset-left, 0px) + 10px); top: calc(env(safe-area-inset-top, 0px) + 64px); display: flex; flex-direction: column; gap: 6px; }
.pw { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 999px; background: rgba(42, 31, 42, .5); color: #fff; font: 700 12px "Manrope", sans-serif; }
.pw i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px "Play", sans-serif; font-style: normal; }
.pw .bar { width: 54px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.pw .bar b { display: block; height: 100%; background: var(--sun); }
.board-btn { pointer-events: auto; position: absolute; right: calc(env(safe-area-inset-right, 0px) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); width: 62px; height: 62px; border: 0; border-radius: 50%; background: rgba(255, 250, 240, .92); box-shadow: 0 4px 0 rgba(42, 31, 42, .3); font-size: 28px; cursor: pointer; }
.board-btn b { position: absolute; right: -2px; top: -2px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--tomato); color: #fff; font: 700 13px/22px "Play", sans-serif; }
.board-btn.on { background: var(--sun); animation: pulse .5s ease-in-out infinite alternate; }
.board-btn:disabled { opacity: .45; }
#toast { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 22%); transform: translateX(-50%); padding: 8px 16px; border-radius: 14px; background: rgba(42, 31, 42, .78); color: #fff; font: 700 16px "Play", sans-serif; white-space: nowrap; animation: pop .3s ease-out; }
@media (min-aspect-ratio: 4/3) { #title { justify-content: flex-end; padding-right: max(4vw, 16px); } }
/* μικρά κινητά: καρτέλες σε μία γραμμή, περισσότερες κάρτες ορατές */
.tabs button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 8px 4px; }
@media (max-width: 420px) {
  .tabs button { font-size: 12px; }
  .panel { padding: 12px 12px 12px; }
  .shop-list { gap: 6px; }
  .card { padding: 6px 2px 4px; font-size: 10px; }
  .ava { transform: scale(.85); margin-bottom: 0; }
}
@media (max-aspect-ratio: 1/1) { .shop-list { max-height: 31vh; } .panel { max-height: 64vh; } .panel .btn { margin-top: 7px; padding: 10px 14px; } }
/* γραμμές ταχύτητας: ακτίνες στις άκρες της οθόνης (η αδιαφάνεια ακολουθεί την ταχύτητα) */
#speed { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 255, 255, .0) 0deg 5deg, rgba(255, 255, 255, .22) 5deg 5.6deg, rgba(255, 255, 255, 0) 5.6deg 11deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, transparent 38%, #000 80%); mask-image: radial-gradient(ellipse at 50% 45%, transparent 38%, #000 80%);
  animation: zoom .25s linear infinite; }
@keyframes zoom { from { transform: scale(1); } to { transform: scale(1.06); } }