/* First contact with the game: one illustrated world, loading → welcome. */
:root { --desktop-game-width: 400px; }
@media(min-width:700px) { body.is-playing #game-container { width:min(480px,calc(100dvh * .58)); } }
body.is-playing #dev-fab { top:132px; bottom:auto; opacity:.72; }
html, body { background: var(--game-bg,#061b25); }
#game-container { width: 100%; height: 100vh; height: 100dvh; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); }
.entry-screen { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 1000; overflow: hidden; color: #fff5da; background: #03212a; font-family: 'Manrope', sans-serif; isolation: isolate; }
.entry-world { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 43%; z-index: -3; }
.entry-screen::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(1,24,33,.44), transparent 31%, transparent 46%, rgba(1,20,29,.68) 65%, #031923 96%); }
.entry-screen::after { content: ''; position: absolute; inset: 0; z-index: -1; box-shadow: inset 0 0 70px rgba(0,12,22,.35); pointer-events: none; }
.entry-brand { position: absolute; top: 4.5%; left: 16px; right: 16px; text-align: center; animation: entry-reveal .7s both; }
.entry-kicker { margin: 0 0 5px; font-size: 10px; font-weight: 700; letter-spacing: 4px; color: #d8e8d8; }
.entry-logo { margin: 0; font-size: clamp(54px, 16vw, 68px); line-height: 1.12; font-weight: 800; letter-spacing: -3px; color: #ffe7a1; text-shadow: 0 2px 0 #b97c37, 0 4px 0 #694728, 0 8px 18px #001a22; }
.entry-tagline { margin: 8px 0 0; color: #d1eae3; font-size: 13px; line-height: 1.65; font-weight: 500; text-shadow: 0 2px 6px #001820; }
.entry-fireflies { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.entry-fireflies i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffde84; box-shadow: 0 0 8px 3px #ffcf6460; animation: entry-spark 4s ease-in-out infinite; }
.entry-fireflies i:nth-child(1) { left: 12%; top: 48%; }
.entry-fireflies i:nth-child(2) { left: 84%; top: 32%; animation-delay: -1s; }
.entry-fireflies i:nth-child(3) { left: 73%; top: 58%; animation-delay: -2.8s; }
.entry-fireflies i:nth-child(4) { left: 30%; top: 28%; animation-delay: -1.7s; width: 2px; height: 2px; }
.entry-loading { position: absolute; left: 30px; right: 30px; bottom: max(9%, 32px); text-align: center; transition: opacity .3s, transform .3s; }
.entry-loading-title { margin: 22px 0 15px; font-size: 19px; font-weight: 700; }
.entry-fusion { display: flex; justify-content: center; align-items: center; gap: 9px; height: 44px; }
.entry-fusion b { display: grid; place-items: center; width: 33px; height: 38px; background: linear-gradient(145deg,#a0ffee,#14a38f); clip-path: polygon(50% 0,94% 24%,94% 76%,50% 100%,6% 76%,6% 24%); color: #035747; font-size: 15px; animation: entry-merge 1.7s ease-in-out infinite; }
.entry-fusion b:nth-child(2) { width: 42px; height: 47px; background: linear-gradient(145deg,#fff3a9,#eaa32a); color: #684310; animation-delay: .16s; font-size: 20px; }
.entry-fusion b:nth-child(3) { animation-delay: .32s; }
.entry-track { height: 15px; padding: 3px; border-radius: 12px; border: 1px solid #5b9e9970; background: #00131daa; box-shadow: 0 2px 0 #7bc9bd18, inset 0 2px 4px #0008; }
.entry-fill { width: 5%; height: 100%; position: relative; border-radius: 8px; background: linear-gradient(180deg,#fff4b4,#edb443); box-shadow: 0 0 12px #ffc95550; transition: width .35s ease; }
.entry-fill::after { content: ''; position: absolute; inset: 1px 3px auto; height: 2px; background: #fff9d6a6; border-radius: 5px; }
.entry-load-meta { display: flex; justify-content: space-between; margin: 10px 1px 0; font-size: 11px; color: #a8c7c5; }
.entry-tip { margin: 27px 0 0; color: #c6ded5; font-size: 12px; line-height: 1.6; }
.entry-actions { position: absolute; left: 24px; right: 24px; bottom: max(25px, env(safe-area-inset-bottom)); text-align: center; }
.entry-actions[hidden], .entry-loading[hidden], .entry-screen[hidden] { display: none; }
.entry-actions h2 { margin: 0 0 7px; font-size: 25px; line-height: 1.2; font-weight: 800; letter-spacing: -.5px; }
.entry-actions > p { color: #a8c7c5; font-size: 12px; margin: 0 0 20px; }
.entry-providers { display: grid; gap: 10px; }
.entry-provider { display: flex; justify-content: center; align-items: center; width: 100%; height: 56px; padding: 0; border-radius: 12px; cursor: pointer; }
.entry-yandex { border: 0; background: #000; }
.entry-yandex img { display: block; width: auto; max-width: 100%; height: auto; max-height: 56px; }
.entry-vk { border: 1px solid #e1e3e6; background: #fff; color: #000; gap: 8px; padding: 12px; font: 500 17px/24px -apple-system, system-ui, 'Helvetica Neue', Roboto, sans-serif; }
.entry-vk img { flex: none; }
.entry-or { display: flex; align-items: center; gap: 12px; margin: 14px 8px; font-size: 11px; color: #87aaa9; }
.entry-or::before, .entry-or::after { content: ''; height: 1px; flex: 1; background: #7fa9a329; }
/* A solid, cut-corner game token with a physical lower edge. */
.entry-guest { --button-cut: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%); position: relative; display: grid; place-items: center; width: 100%; height: 66px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #513014; font-family: 'Manrope', sans-serif; cursor: pointer; filter: drop-shadow(0 5px 0 #041419) drop-shadow(0 8px 8px #0006); transition: transform .12s ease, filter .12s ease; }
.entry-guest::before { content: ''; position: absolute; inset: 0; clip-path: var(--button-cut); background: #8a521d;  }
.entry-guest::after { content: none; }
.entry-guest-face { position: absolute; inset: 2px 3px 7px; clip-path: var(--button-cut); background: #ffc94e;  }
.entry-guest-label { position: relative; display: grid; gap: 0; padding-bottom: 5px; line-height: 1.05; }
.entry-guest-label strong { font-size: 25px; font-weight: 800; letter-spacing: 1.2px; text-shadow: 0 1px #ffed9a; }
.entry-guest-label small { margin-top: 4px; font-size: 11px; font-weight: 700; color: #79501e; }
.entry-play-symbol { position: absolute; left: 28px; top: 14px; width: 31px; height: 34px; background: #a76b23; clip-path: polygon(50% 0,94% 24%,94% 76%,50% 100%,6% 76%,6% 24%); }
.entry-play-symbol::after { content: ''; position: absolute; left: 12px; top: 10px; border-left: 11px solid #fff0b2; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.entry-guest:active { transform: translateY(4px); filter: drop-shadow(0 1px 0 #041419); }
.entry-guest:active .entry-guest-face { background: #f5ba3e; }
@media (hover: hover) { .entry-guest:hover .entry-guest-face { background: #ffd468; } }
.entry-provider:active { transform: scale(.985); }
.entry-screen button:focus-visible { outline: 3px solid #8df9dc; outline-offset: 4px; }
.entry-note { display: block; margin-top: 15px; color: #7faaa7; font-size: 10px; }
.entry-message { position: absolute; left: 20px; right: 20px; bottom: 345px; padding: 14px 18px; border-radius: 16px; border: 1px solid #96c9b84d; background: #092d36f5; color: #e3f2e7; font-size: 13px; line-height: 1.5; box-shadow: 0 8px 32px #0008; text-align: center; }
.entry-message:empty { display: none; }
.entry-screen.is-ready .entry-actions { animation: entry-reveal .5s both; }
.entry-screen.is-leaving { animation: entry-exit .3s both; pointer-events: none; }
@keyframes entry-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes entry-exit { to { opacity: 0; transform: scale(1.035); } }
@keyframes entry-spark { 0%,100% { opacity: .15; transform: translateY(7px); } 50% { opacity: .9; transform: translateY(-13px); } }
@keyframes entry-merge { 0%,100% { transform: translateY(0) scale(.95); opacity: .65; } 50% { transform: translateY(-6px) scale(1.08); opacity: 1; } }
@media (min-width: 700px) {
  #game-container, .entry-screen { width: var(--desktop-game-width); height: 100vh; height: 100dvh; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%,-50%); }
  .entry-screen { box-shadow: 0 0 100px #0008; }
  .entry-logo { font-size: 60px; }
  .entry-screen.is-leaving { animation: none; opacity: 0; transition: opacity .3s; }
}
/* A tall frame fills the viewport without zooming past the crystal cluster. */
@media (min-height: 901px) {
  .entry-world { height: 900px; top: calc((100% - 900px) * .36); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent); }
  .entry-screen::after { z-index: -4; background: url('entry/crystal-world.png') center / cover; filter: blur(22px); opacity: .35; }
}
@media (max-height: 700px) {
  .entry-brand { top: 4%; }
  .entry-logo { font-size: 52px; }
  .entry-tagline { margin-top: 8px; font-size: 12px; line-height: 1.4; }
  .entry-actions { bottom: 17px; }
  .entry-actions h2 { font-size: 22px; }
  .entry-actions > p { margin-bottom: 13px; }
  .entry-note { margin-top: 12px; }
  .entry-world { top: 40px; height: 470px; object-fit: contain; object-position: center; mask-image: radial-gradient(ellipse 68% 64% at 50% 45%, #000 55%, transparent 100%); }
  .entry-loading { bottom: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  .entry-screen *, .entry-screen { animation: none !important; transition: none !important; }
}
@media (max-height: 600px) {
  .entry-world { top: 65px; height: 300px; }
}