@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;
}

/* palette: Aegean blue, marble, gold */
:root {
  --ink: #1d2340;
  --paper: #fbf8f1;
  --blue: #2f6fd8;
  --blue-d: #1d4fa8;
  --gold: #ffcf3a;
  --gold-d: #d9a414;
  --red: #e2483a;
  --mint: #3fb67a;
  --marble: #efe9dc;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #9fd4f6; 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, 255, 255, .04), rgba(29, 35, 64, .35)); }
.screen.solid { background: linear-gradient(180deg, #9fd4f6, #fff1d2); }
.box { width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--paper); border-radius: 26px; padding: 20px 22px 22px; text-align: center; box-shadow: 0 6px 0 rgba(29, 35, 64, .18), 0 18px 40px rgba(29, 35, 64, .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: 44px; letter-spacing: -1px; color: var(--blue); text-shadow: 0 3px 0 #163a7a, 0 6px 14px rgba(0, 0, 0, .15); display: inline-flex; align-items: center; gap: 8px; }
/* little Corinthian helmet drawn in CSS */
.helm { display: inline-block; position: relative; width: .7em; height: .74em; border-radius: 50% 50% 18% 18%; background: radial-gradient(circle at 35% 30%, #ffe680, var(--gold) 50%, #b07a10); box-shadow: 0 .05em 0 #7a5208; }
.helm::before { content: ""; position: absolute; left: 22%; right: 22%; top: 42%; height: 18%; background: #1d2340; border-radius: 2px; box-shadow: 0 .14em 0 -.03em #1d2340; }
.helm::after { content: ""; position: absolute; left: 10%; right: 10%; top: -30%; height: 36%; border-radius: 50% 50% 0 0; background: var(--red); }
.tag { font-weight: 700; font-size: 15px; margin: 2px 0 6px; }
.world { margin: 0 0 10px; font: 700 14px "Play", sans-serif; color: var(--blue-d); }

.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: #efe9dc; box-shadow: 0 4px 0 #d4cab4; cursor: pointer; transition: transform .08s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d4cab4; }
.btn.primary { background: linear-gradient(180deg, #ffe27a, var(--gold)); box-shadow: 0 4px 0 var(--gold-d); }
.btn.big { font-size: 24px; padding: 16px; }
.btn.mini { font-size: 13px; padding: 7px 8px; margin-top: 6px; border-radius: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.daily { background: linear-gradient(180deg, #6fa6ff, var(--blue)); color: #fff; box-shadow: 0 4px 0 var(--blue-d); }
.btn.daily.done { background: #cfd8ea; color: #556; box-shadow: 0 4px 0 #aab4ca; }
.btn.daily.done::after { content: " ✔"; }
.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(--gold) 55%, var(--gold-d)); box-shadow: inset 0 0 0 .12em #f2b81a; vertical-align: -.15em; margin-right: .25em; }

.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: #efe9dc; color: var(--ink); font: 700 13px "Manrope", sans-serif; cursor: pointer; }
.seg button.on, .tog.on { background: var(--gold); }

/* loading */
.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(--gold), var(--blue)); transition: width .25s ease; }
.load-box p { font-weight: 700; }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.hud-top { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 50%; transform: translateX(-50%); padding: 5px 16px; border-radius: 999px; background: rgba(29, 35, 64, .5); color: #fff; font: 700 17px "Play", sans-serif; white-space: nowrap; }
.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(251, 248, 241, .92); color: var(--ink); font: 700 15px sans-serif; box-shadow: 0 3px 0 rgba(29, 35, 64, .25); cursor: pointer; }
#tip { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 22%); transform: translateX(-50%); width: max-content; max-width: 88%; padding: 10px 18px; border-radius: 16px; background: rgba(251, 248, 241, .95); font: 700 18px "Play", sans-serif; text-align: center; box-shadow: 0 4px 0 rgba(29, 35, 64, .25); animation: pop .3s ease-out; }
@keyframes pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
#bossbar { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 54px); transform: translateX(-50%); width: min(340px, 72vw); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 14px; background: rgba(29, 35, 64, .6); color: #fff; font: 700 14px "Play", sans-serif; }
#bossbar .bb { height: 12px; border-radius: 8px; background: rgba(255, 255, 255, .2); overflow: hidden; }
#bossbar .bb i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff8a5a, var(--red)); transition: width .15s; }

/* counts above the crowds (positioned by the game every frame) */
#labels { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
#cnt, .elabel { position: absolute; left: 0; top: 0; min-width: 40px; padding: 3px 10px; border-radius: 12px; text-align: center; font: 700 20px "Play", sans-serif; color: #fff; will-change: transform; }
#cnt { background: var(--blue); box-shadow: 0 3px 0 var(--blue-d); }
#cnt::after, .elabel::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: inherit; }
#cnt::after { border-top-color: var(--blue); }
.elabel { background: var(--red); box-shadow: 0 3px 0 #a52a20; font-size: 17px; }
.elabel::after { border-top-color: var(--red); }
#cnt.up { animation: up .35s ease-out; }
#cnt.down { animation: down .35s ease-out; }
@keyframes up { 40% { background: var(--mint); scale: 1.35; } }
@keyframes down { 40% { background: var(--red); scale: .8; } }

/* result */
.res-icon { width: 64px; height: 64px; margin: 0 auto 4px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; animation: bob 1.2s ease-in-out infinite; }
.res-icon.win { background: radial-gradient(circle at 40% 35%, #fff3a8, var(--gold) 60%, var(--gold-d)); }
.res-icon.win::before { content: "🏛️"; }
.res-icon.lose { background: #e8e3d8; }
.res-icon.lose::before { content: "🛡️"; filter: grayscale(.6); }
@keyframes bob { 50% { transform: translateY(-4px) rotate(4deg); } }
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 10px 0; }
.results div { background: #f3eee2; 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; }
.why { font-weight: 700; color: var(--red); }
.why:empty { display: none; }

/* side panels (Armoury, Acropolis): leave the 3D scene visible */
.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: #f3eee2; font: 700 18px "Play", sans-serif; }
.tabs { display: flex; flex-wrap: nowrap; gap: 6px; margin: 10px 0 8px; }
.tabs button { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 8px 6px; font-size: 12.5px; }
#shop .panel { width: min(460px, 100%); }
.shop-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: auto; max-height: 300px; padding: 2px; }
.shop-list:empty { display: none; }
.card { display: flex; flex-direction: column; border-radius: 16px; padding: 10px 10px 8px; background: #f3eee2; box-shadow: 0 3px 0 #e0d6c0; }
.card.on { outline: 3px solid var(--gold); }
.card b { font: 700 14px "Play", sans-serif; }
.card small { flex: 1; font-size: 12px; opacity: .8; margin-top: 2px; }
.wheel-box { text-align: center; }
#wheel { width: 180px; height: 180px; margin: 6px auto 0; display: block; cursor: pointer; border-radius: 50%; touch-action: none; }
.piece { font: 700 17px "Play", sans-serif; margin: 10px 0 6px; }
.pbar { height: 12px; border-radius: 8px; background: #e6dfd0; overflow: hidden; }
.pbar b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--blue)); transition: width .4s; }

@media (min-aspect-ratio: 4/3) { #title { justify-content: flex-end; padding-right: max(4vw, 16px); } }
@media (max-aspect-ratio: 1/1) {
  #title { align-items: flex-end; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
  .screen.side { align-items: flex-end; justify-content: center; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .panel { width: 100%; max-height: 58vh; }
  .shop-list { max-height: 30vh; }
  #wheel { width: 140px; height: 140px; }
}
@media (max-height: 460px) {
  .logo { font-size: 32px; }
  .tag { display: none; }
  .box { padding: 12px 16px 14px; }
  .btn { padding: 8px 14px; margin-top: 6px; }
  .btn.big { font-size: 20px; padding: 10px; }
  .title-box { width: min(520px, 100%); }
  .shop-list { max-height: 44vh; }
  #wheel { width: 120px; height: 120px; }
}
@media (max-width: 420px) { .tabs button { font-size: 12px; } .panel { padding: 12px; } #cnt { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }