/* =========================================================================
   Steal a Dragon Egg — base styles: fonts, tokens, reset, buttons, chips,
   badges, icons, overlays (#pause, #rwWait) and the loading screen.
   Style: "Dragon Keeper's Guild" (SPEC §10) — chunky Nunito 900 with thick
   dark outlines, carved wood + parchment, gold rivets, 3D-pressed buttons.
   ========================================================================= */

@font-face {
  font-family: 'SE Nunito';
  src: url('../assets/fonts/nunito-900.woff2') format('woff2');
  font-weight: 800 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SE Nunito';
  src: url('../assets/fonts/nunito-700.woff2') format('woff2');
  font-weight: 100 799;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: 'SE Nunito', 'Nunito', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --ink: #2a1407;
  --ink-soft: rgba(42, 20, 7, .55);
  --wood-1: #b56c2f;
  --wood-2: #8a4b1f;
  --wood-3: #5f3112;
  --parch-1: #fff3d6;
  --parch-2: #f4dfae;
  --parch-3: #e3c486;
  --parch-ink: #4a2a10;
  --gold-1: #ffe27a;
  --gold-2: #f5b81c;
  --gold-3: #a86d00;
  --cash: #7dff3a;
  --gem: #b48bff;
  --good: #3fc71f;
  --bad: #ff4b3a;
  --info: #39a6ff;
  --r-common: #4f9a2a;
  --r-uncommon: #2f8a4a;
  --r-rare: #d0781a;
  --r-epic: #7b3fd0;
  --r-legendary: #e0a400;
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  /* text outlines (8 directions + drop) */
  --ts: 0 -2px 0 var(--ink), 2px 0 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink),
        1.6px 1.6px 0 var(--ink), -1.6px 1.6px 0 var(--ink), 1.6px -1.6px 0 var(--ink), -1.6px -1.6px 0 var(--ink),
        0 4px 0 var(--ink);
  --ts-lg: 0 -3px 0 var(--ink), 3px 0 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink),
        2.3px 2.3px 0 var(--ink), -2.3px 2.3px 0 var(--ink), 2.3px -2.3px 0 var(--ink), -2.3px -2.3px 0 var(--ink),
        0 6px 0 var(--ink), 0 8px 12px rgba(0, 0, 0, .35);
  --ts-sm: 0 -1.5px 0 var(--ink), 1.5px 0 0 var(--ink), 0 1.5px 0 var(--ink), -1.5px 0 0 var(--ink),
        1.1px 1.1px 0 var(--ink), -1.1px 1.1px 0 var(--ink), 1.1px -1.1px 0 var(--ink), -1.1px -1.1px 0 var(--ink),
        0 2.5px 0 var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; overscroll-behavior: none;
  background: #6ec1ff;
  color: #fff;
  font-family: var(--font);
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus { outline: none; }
button:focus-visible { outline: 3px solid var(--gold-1); outline-offset: 3px; }
img { -webkit-user-drag: none; user-select: none; }
[hidden] { display: none !important; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }

.stroke { text-shadow: var(--ts); }
.stroke-sm { text-shadow: var(--ts-sm); }
.stroke-lg { text-shadow: var(--ts-lg); }

/* ---------- icons (SE.Icons) ---------- */
.ic { display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; flex: 0 0 auto; position: relative; line-height: 1; }
.ic img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.ic svg { width: 100%; height: 100%; display: block; }
.ic.is-missing img { display: none; }
.ic.is-missing::after { content: attr(data-fb); font-size: .55em; font-weight: 900; color: #fff; text-shadow: var(--ts-sm); white-space: nowrap; }

/* ---------- 3D-pressed buttons (SE.UI.btn) ---------- */
.ui-btn {
  --c1: #78e64a; --c2: #3fae1f; --c3: #23720f;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; min-width: 48px;
  padding: 6px 18px 10px;
  font: 900 18px/1.1 var(--font);
  color: #fff; text-shadow: var(--ts-sm);
  letter-spacing: .01em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0 42%, rgba(255, 255, 255, 0) 43%),
    linear-gradient(180deg, var(--c1), var(--c2));
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -5px 0 var(--c3), 0 4px 0 var(--ink), 0 7px 12px rgba(0, 0, 0, .28);
  cursor: pointer;
  transition: transform .07s ease, box-shadow .07s ease, filter .15s ease;
  white-space: nowrap;
  touch-action: manipulation;
}
.ui-btn:hover { filter: brightness(1.07); }
.ui-btn:active, .ui-btn.pressed { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 var(--c3), 0 1px 0 var(--ink), 0 2px 5px rgba(0, 0, 0, .25); }
.ui-btn .btn-ic { width: 1.55em; height: 1.55em; margin: -4px 0 -4px -4px; filter: drop-shadow(0 2px 0 rgba(42, 20, 7, .6)); }
.ui-btn .btn-lbl { display: inline-block; }
.ui-btn.green  { --c1: #78e64a; --c2: #3fae1f; --c3: #23720f; }
.ui-btn.blue   { --c1: #5cc1ff; --c2: #1f7fe6; --c3: #124f9c; }
.ui-btn.gold   { --c1: #ffe36b; --c2: #f2ad14; --c3: #a26600; }
.ui-btn.red    { --c1: #ff7a63; --c2: #e0321f; --c3: #8c1a0f; }
.ui-btn.purple { --c1: #c08bff; --c2: #7b3fd0; --c3: #4a1f8c; }
.ui-btn.orange { --c1: #ffb44d; --c2: #f07812; --c3: #9a4705; }
.ui-btn.teal   { --c1: #57e3d0; --c2: #14a796; --c3: #0b6158; }
.ui-btn.grey   { --c1: #efe2c6; --c2: #bba886; --c3: #7b6a4c; color: #fff; }
.ui-btn.big    { min-height: 60px; padding: 8px 28px 12px; font-size: 23px; border-radius: 17px; }
.ui-btn.small  { min-height: 44px; padding: 4px 12px 8px; font-size: 15px; border-radius: 12px; }
.ui-btn.wide   { width: 100%; }
.ui-btn:disabled, .ui-btn.is-off, .ui-btn[aria-disabled="true"] {
  filter: saturate(.25) brightness(.92); cursor: default;
}
.ui-btn:disabled:active, .ui-btn.is-off:active { transform: none; }

/* rewarded ad button */
.rw-btn { padding-left: 12px; text-align: left; }
.rw-btn .rw-ic { position: relative; display: inline-flex; width: 1.6em; height: 1.6em; }
.rw-btn .rw-ic .btn-ic { margin: 0; width: 100%; height: 100%; }
.rw-btn .rw-ic .spinner { display: none; position: absolute; inset: 0; margin: auto; }
.rw-btn.is-busy .rw-ic .btn-ic { visibility: hidden; }
.rw-btn.is-busy .rw-ic .spinner { display: block; }
.rw-btn .rw-txt { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.rw-btn small { font-size: .68em; font-weight: 800; opacity: .95; }
.rw-btn small:empty { display: none; }
.rw-btn .rw-state { color: #ffe9a8; }

/* ---------- chips / numbers ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px 2px 4px; min-height: 30px;
  border-radius: 999px;
  background: rgba(42, 20, 7, .62);
  border: 2px solid rgba(255, 255, 255, .22);
  font: 900 16px/1 var(--font); color: #fff; text-shadow: var(--ts-sm);
  white-space: nowrap;
}
.chip .chip-ic { width: 24px; height: 24px; }
.chip-cash b, .chip-income b { color: var(--cash); }
.chip-gems b { color: #d9c6ff; }
.chip-speed b { color: #8fe0ff; }
.chip.light { background: #fff6dc; border-color: #7a4a1c; color: var(--parch-ink); text-shadow: none; }
.chip.light.chip-cash b { color: #2a8a0f; }
.chip.light.chip-gems b { color: #6b3fd0; }

.badge {
  position: absolute; top: -9px; right: -9px; z-index: 3;
  min-width: 25px; height: 25px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: linear-gradient(#ff6a55, #e5271a);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 0 var(--ink), 0 0 0 1.5px var(--ink);
  font: 900 13px/1 var(--font); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  pointer-events: none;
  animation: badge-pop .35s cubic-bezier(.2, 1.6, .4, 1) both, badge-bob 1.8s ease-in-out .4s infinite;
}
.badge.badge-good { background: linear-gradient(#7aea4a, #2fae14); }
.badge.badge-rw { background: linear-gradient(#c08bff, #7b3fd0); font-size: 10px; }
@keyframes badge-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes badge-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7em; height: 1.7em; padding: 0 .35em; margin: 0 .25em;
  border-radius: .35em;
  background: linear-gradient(#fff8e2, #f0d99c);
  border: 2px solid var(--ink); border-bottom-width: 4px;
  color: var(--parch-ink); font: 900 .85em/1 var(--font); text-shadow: none;
  vertical-align: middle;
}

.spinner {
  display: inline-block; width: 38px; height: 38px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, .25);
  border-top-color: var(--gold-1);
  border-right-color: var(--gold-1);
  animation: spin .8s linear infinite;
}
.spinner.sm { width: 1.3em; height: 1.3em; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- reusable wood card + ribbon (pause menu; panels in panels.css) ---------- */
.wood-card {
  position: relative;
  padding: 44px 22px 22px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 2px, rgba(0, 0, 0, 0) 2px 9px, rgba(0, 0, 0, .07) 9px 11px, rgba(0, 0, 0, 0) 11px 17px),
    linear-gradient(180deg, var(--wood-1), var(--wood-2) 55%, var(--wood-3));
  box-shadow: inset 0 3px 0 rgba(255, 220, 160, .35), inset 0 -4px 0 rgba(0, 0, 0, .3), 0 8px 0 var(--ink), 0 18px 40px rgba(0, 0, 0, .45);
}
.ribbon {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  min-width: 60%; max-width: calc(100% + 24px);
  padding: 7px 30px 9px;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 900 28px/1.1 var(--font); color: #fff; text-shadow: var(--ts);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .3) 0 40%, rgba(255, 255, 255, 0) 41%),
    linear-gradient(180deg, #ef5b3c, #c22a1d);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 -4px 0 #861a10, 0 4px 0 var(--ink);
}

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
}
.overlay.show { display: flex; animation: fade-in .18s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

#pause { z-index: 55; background: radial-gradient(ellipse at center, rgba(30, 14, 4, .62), rgba(16, 8, 2, .86)); }
.pause-card { width: min(380px, 100%); animation: pop-in .28s cubic-bezier(.2, 1.4, .4, 1) both; }
.pause-btns { display: flex; flex-direction: column; gap: 14px; }
.pause-btns .ui-btn { width: 100%; }
@keyframes pop-in { from { transform: scale(.86) translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

#rwWait { z-index: 90; background: rgba(10, 5, 2, .62); }
.adwait-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 26px;
  border-radius: 18px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, var(--wood-1), var(--wood-3));
  font: 900 21px/1.2 var(--font); text-shadow: var(--ts-sm);
  box-shadow: 0 6px 0 var(--ink), 0 14px 30px rgba(0, 0, 0, .45);
}

/* ---------- loading screen ---------- */
#loading {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
  background: #4fa3e0;
  overflow: hidden;
  transition: opacity .45s ease, transform .45s ease;
}
#loading.done { opacity: 0; transform: scale(1.04); pointer-events: none; }
.ld-bg {
  position: absolute; inset: -20px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 236, 170, .35), rgba(255, 236, 170, 0) 55%),
    linear-gradient(180deg, rgba(40, 90, 150, .25), rgba(30, 14, 4, .55)),
    url('../assets/ui/concept/base-hatching-bg-blur.jpg') center / cover no-repeat,
    linear-gradient(180deg, #7cc8ff, #bfe6ff 55%, #77c24a 56%, #4f9a2a);
  animation: ld-drift 18s ease-in-out infinite alternate;
}
@keyframes ld-drift { from { transform: scale(1.02) translateX(-8px); } to { transform: scale(1.08) translateX(8px); } }
.ld-main { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(820px, 100%); }
.ld-logo { position: relative; display: flex; flex-direction: column; align-items: center; }
.ld-dragon { width: 190px; height: 190px; object-fit: contain; margin-bottom: -34px; filter: drop-shadow(0 6px 0 rgba(42, 20, 7, .45)); animation: ld-bob 2.6s ease-in-out infinite; }
@keyframes ld-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.ld-title {
  position: relative;
  padding: 8px 34px 12px;
  font: 900 44px/1.02 var(--font); text-align: center; color: #ffe27a;
  text-shadow: var(--ts-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0 40%, rgba(255, 255, 255, 0) 41%),
    linear-gradient(180deg, #ef5b3c, #b8261a);
  border: 4px solid var(--ink); border-radius: 16px;
  box-shadow: inset 0 -6px 0 #7e170d, 0 6px 0 var(--ink), 0 16px 30px rgba(0, 0, 0, .35);
  transform: rotate(-2deg);
}
.ld-egg { position: relative; width: 104px; height: 132px; margin-top: 6px; }
.ld-egg-shell {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, #fff9e8, #f1dfb6);
  border: 4px solid var(--ink);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12), 0 6px 0 var(--ink), 0 12px 24px rgba(0, 0, 0, .35);
}
.ld-egg-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .45) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 55%, rgba(255, 255, 255, .35) 0 4px, transparent 5px),
    linear-gradient(180deg, #8bf04f, #3fae1f 60%, #2b8a12);
  border-top: 3px solid rgba(42, 20, 7, .55);
  transition: height .35s ease-out;
}
.ld-egg-shine { position: absolute; left: 18%; top: 12%; width: 22%; height: 34%; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: rotate(18deg); }
.ld-pct { position: absolute; left: 0; right: 0; top: 54%; text-align: center; font: 900 26px/1 var(--font); color: #fff; text-shadow: var(--ts); }
.ld-bar { width: min(300px, 80%); height: 10px; border-radius: 6px; background: rgba(42, 20, 7, .45); border: 2px solid var(--ink); overflow: hidden; }
.ld-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); transition: width .3s ease-out; }
.ld-stage { font: 900 20px/1.2 var(--font); text-shadow: var(--ts-sm); text-align: center; min-height: 1.2em; }
.ld-error { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 460px; padding: 14px 18px; border-radius: 16px; background: rgba(42, 20, 7, .78); border: 3px solid var(--bad); text-align: center; }
.ld-error p { margin: 0; font: 800 17px/1.35 var(--font); }
#loading.failed .ld-egg, #loading.failed .ld-bar, #loading.failed .ld-stage, #loading.failed .ld-tip { display: none; }
.ld-tip {
  /* in the column flow under the egg / stage line, so it can never cover them */
  position: relative; flex: 0 0 auto; margin-top: 14px;
  width: min(640px, calc(100% - 32px));
  padding: 10px 18px; border-radius: 14px;
  background: rgba(42, 20, 7, .6); border: 2px solid rgba(255, 226, 122, .45);
  font: 800 16px/1.3 var(--font); text-align: center; text-shadow: var(--ts-sm);
  opacity: 0; transition: opacity .25s ease;
}
.ld-tip.show { opacity: 1; }
.ld-tip:empty { display: none; }

@media (max-height: 520px) {
  .ld-main { gap: 8px; }
  .ld-dragon { width: 96px; height: 96px; margin-bottom: -24px; }
  .ld-title { font-size: 30px; padding: 6px 22px 8px; }
  .ld-egg { width: 74px; height: 94px; }
  .ld-pct { font-size: 19px; }
  .ld-stage { font-size: 16px; }
  .ld-tip { font-size: 13px; padding: 6px 12px; margin-top: 8px; }
}
@media (max-height: 400px) {
  .ld-dragon { display: none; }
}
@media (max-width: 480px) {
  .ld-title { font-size: 32px; padding: 6px 22px 10px; }
  .ld-tip { font-size: 14px; }
}
@media (max-width: 360px) {
  .ld-title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  /* 0 s (not .01 ms): a .01 ms transition on every property ('all' is the initial transition-property) leaves
     style changes one frame late, so the JS that measures layout right after a change (zone banner / title /
     shop tab fitting) would read stale sizes */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* Playgama checklist 27: on ultra-wide / very short windows keep the game at most 2:1 with side margins.
   The transform makes <body> the containing block of every position:fixed layer (canvas, HUD, panels). */
@media (min-aspect-ratio: 2/1) and (min-width: 1025px) and (pointer: fine) {   /* desktop only: phones stay full screen */
  html { background: #1b130c; }
  body { position: absolute; top: 0; bottom: 0; left: 50%; width: 200vh; transform: translateX(-50%); }
}