/* Jelly Kaiju (feel prototype). Night candy city, a 7x7 jelly board and the Kaiju that eats it. */
:root {
  --bar: 96px;
  --g: min(calc(100vh - var(--bar) - 130px), 46vw); /* board size; also sizes the floating amounts outside the board */
  --ink: #1d1146;
  --gold: #ffcf4a;
  --trim: #e9c66a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #1a1240; overflow: hidden; }
body { font-family: 'Baloo 2', system-ui, sans-serif; color: #fff; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

.stage { position: fixed; inset: 0; background: #1a1240 url(assets/kaiju/bg.webp) center 38% / cover no-repeat; overflow: hidden; }
.stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 70% 60% at 50% 46%, transparent 40%, rgba(12, 6, 36, .55)); }

.logo { position: absolute; right: 26px; top: 74px; width: clamp(150px, 13.5vw, 250px); z-index: 2; pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(10, 4, 40, .45)); animation: logo 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes logo { 50% { transform: scale(1.025, .975) translateY(2px); } }

.tops { position: absolute; right: 18px; top: 16px; z-index: 6; display: flex; gap: 10px; align-items: center; }
.tchip { height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; font-weight: 800; font-size: 15px;
  color: #fff; text-decoration: none; background: rgba(20, 10, 60, .55); border: 2px solid rgba(255, 255, 255, .45); backdrop-filter: blur(4px); white-space: nowrap; }
.tchip--home { position: absolute; left: 18px; top: 16px; z-index: 6; }
.tchip--mode[aria-pressed="true"] { color: #10302e; background: linear-gradient(#ffe9a0, #e9b94a); border-color: #fff4c8; }
.tchip--login { color: #10302e; background: linear-gradient(#a6ffe0, #35d69d); border-color: #e7fff6; }
.toast { position: absolute; left: 50%; top: 70px; z-index: 10; transform: translate(-50%, -10px); opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; padding: 8px 18px; border-radius: 16px; background: rgba(20, 10, 60, .88);
  border: 2px solid rgba(255, 255, 255, .4); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.4, .5, 1); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 18px; color: #ffd86a; }
.toast span { font-size: 14px; font-weight: 700; }
.snd { position: relative; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(20, 10, 60, .55); border: 2px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(4px); }
.snd svg { width: 24px; }
.snd .off { display: none; }
.snd[aria-pressed="false"] .on { display: none; }
.snd[aria-pressed="false"] .off { display: inline; }

/* the play area: board on the left, the Kaiju standing on the street to its right */
.play { position: absolute; z-index: 3; left: 50%;
  top: calc((100% - var(--bar)) / 2 + 26px); transform: translate(-60%, -50%); }
.shake { display: flex; align-items: flex-end; }

.board { position: relative; width: var(--g); height: var(--g); padding: calc(var(--g) * .028); border-radius: calc(var(--g) * .065);
  background: linear-gradient(160deg, rgba(64, 34, 122, .80), rgba(26, 14, 66, .88));
  border: 3px solid #fff3fb;
  box-shadow: 0 0 0 1px rgba(255, 120, 214, .7), 0 0 20px rgba(255, 112, 214, .8), 0 0 60px rgba(255, 112, 214, .35),
    inset 0 0 34px rgba(150, 96, 255, .38), 0 26px 50px rgba(6, 2, 24, .55);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.grid { position: relative; width: 100%; height: 100%; }
.slot { position: absolute; width: calc(100% / 7); height: calc(100% / 7); }
.slot::before { content: ''; position: absolute; inset: 4.5%; border-radius: 24%;
  background: linear-gradient(rgba(255, 255, 255, .085), rgba(255, 255, 255, .035));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .07), inset 0 -4px 8px rgba(0, 0, 0, .22); }

.t { position: absolute; width: calc(100% / 7); height: calc(100% / 7); pointer-events: none; }
.t img { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; object-fit: contain; transform-origin: 50% 88%;
  filter: drop-shadow(0 4px 3px rgba(8, 2, 30, .35)); transition: filter .22s ease-out, opacity .22s ease-out; }
.t[data-s="cube"] { --c: #4ff0b5; } .t[data-s="heart"] { --c: #ff6fb0; } .t[data-s="drop"] { --c: #ffa42b; }
.t[data-s="star"] { --c: #b468ff; } .t[data-s="moon"] { --c: #4aa8ff; } .t[data-s="cherry"] { --c: #ff3b55; }
.t[data-s="crown"] { --c: #ffc93a; } .t[data-s="egg"] { --c: #a8ffd9; }
.t.dim img { filter: brightness(.42) saturate(.55) drop-shadow(0 4px 3px rgba(8, 2, 30, .35)); }
.t.hit::before { content: ''; position: absolute; inset: 2%; border-radius: 28%;
  background: radial-gradient(circle, var(--c) 0%, transparent 72%); opacity: .7; animation: halo .5s ease-in-out infinite alternate; }
.t.hit img { filter: brightness(1.18) drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px var(--c)); animation: jig .42s ease-in-out infinite; }
@keyframes jig { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.12, .9); } 60% { transform: scale(.93, 1.08); } }
@keyframes halo { to { opacity: .35; transform: scale(1.08); } }
.t.egg-on img { filter: brightness(1.2) drop-shadow(0 0 10px #fff3a0) drop-shadow(0 0 18px #ffd86a); }

.win { position: absolute; left: 50%; top: 0; z-index: 4; transform: translate(-50%, -62%); display: flex; gap: .45em; align-items: baseline;
  padding: .18em 1.05em .1em; border-radius: 999px; white-space: nowrap; font-family: 'Lilita One', sans-serif;
  font-size: calc(var(--g) * .056); color: #5c2600; background: linear-gradient(#fff0a8, #ffc93f 55%, #f6a823);
  border: 3px solid #fff8dc; box-shadow: 0 5px 0 #b5690e, 0 10px 22px rgba(10, 4, 30, .45); }
.win__lbl { font-size: .58em; opacity: .75; letter-spacing: .04em; }
.win.pop { animation: pop .34s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 40% { transform: translate(-50%, -62%) scale(1.16); } }

.banner { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; text-align: center; pointer-events: none; opacity: 0; }
.banner b { font-family: 'Lilita One', sans-serif; font-size: calc(var(--g) * .15); line-height: 1; color: #ff5fb4;
  -webkit-text-stroke: calc(var(--g) * .006) #fff; text-shadow: 0 6px 0 #6b1a6e, 0 0 30px rgba(255, 95, 180, .8); }
.banner span { font-weight: 800; font-size: calc(var(--g) * .05); text-shadow: 0 3px 0 #2a1060; }

/* the Kaiju */
.kaiju { position: relative; width: calc(var(--g) * .64); height: calc(var(--g) * .80); margin: 0 0 calc(var(--g) * -.035) calc(var(--g) * -.01); }
.kaiju__shadow { position: absolute; left: 14%; right: 10%; bottom: -1%; height: 9%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(10, 4, 30, .55), transparent 70%); }
.kaiju__grow, .kaiju__lean, .kaiju__jolt, .kaiju__breathe { position: absolute; inset: 0; transform-origin: 50% 100%; }
.kaiju__grow { transform-origin: 12% 100%; }
.kaiju__breathe { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.025, .975); } }
.pose { position: absolute; bottom: 0; left: 50%; height: 100%; transform: translateX(-50%); opacity: 0;
  filter: drop-shadow(0 0 18px rgba(80, 255, 190, .35)); pointer-events: none; }
.pose.on { opacity: 1; }

.size { position: absolute; z-index: 3; left: 2%; top: -6%; width: calc(var(--g) * .18); aspect-ratio: 1; display: grid; place-items: center; }
.size svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.size__track { fill: none; stroke: rgba(30, 12, 70, .6); stroke-width: 9; }
.size__fill { fill: none; stroke: var(--gold); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 276.5;
  transition: stroke-dashoffset .45s cubic-bezier(.3, 1.3, .5, 1); filter: drop-shadow(0 0 4px #ffd86a); }
.size::before { content: ''; position: absolute; inset: 13%; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffc1e4, #ff5fb4 50%, #c02a83 92%);
  box-shadow: inset 0 -5px 8px rgba(110, 10, 70, .45), 0 4px 10px rgba(10, 4, 30, .4); }
.size b { position: relative; font-family: 'Lilita One', sans-serif; font-size: calc(var(--g) * .062); color: #fff;
  text-shadow: 0 3px 0 #8a1660, 0 0 8px rgba(255, 255, 255, .5); }

/* flying jellies, floating amounts, particles */
.fly { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
.fl { position: fixed; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 4px 3px rgba(8, 2, 30, .3)); }
.float { position: fixed; left: 0; top: 0; white-space: nowrap; font-family: 'Lilita One', sans-serif; color: #fff; transform: translate(-50%, -50%);
  font-size: calc(var(--g) * .07); text-shadow: 0 3px 0 #6d1d72, 0 0 12px var(--c, #ff8ad0); }
.float i { font-style: normal; font-size: .62em; margin-left: .25em; color: var(--gold); text-shadow: 0 2px 0 #7a3a00; }
.fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }

/* big win */
.big { position: fixed; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 1vh; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(60, 16, 110, .35), rgba(10, 4, 30, .84)); }
.big.on { pointer-events: auto; cursor: pointer; }
.big__title, .big__amt { position: relative; display: grid; font-family: 'Lilita One', sans-serif; line-height: .95; white-space: nowrap; }
.big__title { font-size: clamp(58px, 11vw, 160px); }
.big__amt { font-size: clamp(44px, 7.5vw, 110px); }
.big .o, .big .f { grid-area: 1 / 1; }
.big .o { color: transparent; -webkit-text-stroke: .17em #4b1385; text-shadow: 0 .1em 0 #2a0a55, 0 0 .55em rgba(255, 120, 220, .65); }
.big .f { color: transparent; -webkit-background-clip: text; background-clip: text; }
.big__title .f { background-image: linear-gradient(#fffbd0, #ffd447 40%, #ff9d1c 82%); }
.big__amt .f { background-image: linear-gradient(#ffffff, #ffe0f3 45%, #ff7cc6); }

/* Rampage: the night turns hot pink and the board glows red */
.stage::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(ellipse 80% 70% at 50% 35%, rgba(255, 60, 140, .28), rgba(120, 0, 60, .45)); mix-blend-mode: screen; }
.stage.rampage::after { opacity: 1; }
.stage.rampage .board { border-color: #ffe0ef; box-shadow: 0 0 0 1px rgba(255, 70, 120, .9), 0 0 26px rgba(255, 60, 110, .95), 0 0 80px rgba(255, 60, 110, .5),
  inset 0 0 34px rgba(255, 80, 150, .4), 0 26px 50px rgba(6, 2, 24, .55); }
.big__pot { font-weight: 800; font-size: clamp(14px, 1.6vw, 20px); color: #ffe3f3; text-shadow: 0 2px 0 #2a0a55; min-height: 1em; }

/* control bar */
.bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; height: calc(var(--bar) + env(safe-area-inset-bottom));
  padding: 0 20px env(safe-area-inset-bottom); display: flex; align-items: center; justify-content: center; gap: 16px;
  background: linear-gradient(#1b5550, #0e3433 70%); border-top: 3px solid var(--trim);
  box-shadow: 0 -10px 30px rgba(6, 2, 24, .45), inset 0 2px 0 rgba(255, 255, 255, .12); }
.pill { height: 54px; display: flex; align-items: center; border-radius: 16px; background: rgba(4, 24, 24, .55);
  border: 2px solid rgba(233, 198, 106, .75); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
.pill span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #a8e6d6; line-height: 1; }
.pill b { display: block; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 21px; line-height: 1.15; color: #fff; }
.bal { padding: 0 18px; min-width: 140px; flex-direction: column; align-items: flex-start; justify-content: center; }
.buy { padding: 0 16px; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(#ff7cc6, #d8338f); border-color: #ffd1ea; box-shadow: 0 4px 0 #8d1659, inset 0 2px 0 rgba(255, 255, 255, .35); }
.buy span { color: #ffe9f5; }
.buy i { font-style: normal; }
.buy .short { display: none; }
.buy:active { transform: translateY(2px); box-shadow: 0 2px 0 #8d1659; }
.buy:disabled { opacity: .55; }
.bet { padding: 0 6px; gap: 4px; }
.bet > div { min-width: 70px; text-align: center; }
.bet button { width: 38px; height: 38px; border-radius: 12px; font-size: 24px; font-weight: 800; line-height: 1; color: #10302e;
  background: linear-gradient(#ffe9a0, #e9b94a); box-shadow: 0 3px 0 #9c6b14; }
.bet button:active { transform: translateY(2px); box-shadow: 0 1px 0 #9c6b14; }
.spin { position: relative; width: 92px; height: 92px; margin-top: -40px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 36% 28%, #a6ffe0, #35d69d 42%, #119066 78%, #0b6a4b);
  border: 4px solid #fff4c8; box-shadow: 0 0 0 5px var(--trim), 0 6px 0 5px #8b6417, 0 14px 28px rgba(6, 2, 24, .55), inset 0 -8px 14px rgba(0, 70, 45, .4);
  transition: transform .12s cubic-bezier(.3, 1.5, .5, 1); }
.spin svg { width: 54%; filter: drop-shadow(0 2px 0 rgba(0, 80, 50, .7)); }
.spin.press { transform: translateY(3px) scale(.94); }
.spin.busy svg { animation: rot .9s cubic-bezier(.5, .1, .5, .9) infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.ctl { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #bfeee0;
  background: rgba(4, 24, 24, .55); border: 2px solid rgba(233, 198, 106, .6); }
.ctl svg { width: 24px; }
.ctl[aria-pressed="true"] { color: #10302e; background: linear-gradient(#ffe9a0, #e9b94a); border-color: #fff4c8; box-shadow: 0 0 14px rgba(255, 207, 74, .6); }

/* phone (portrait): logo on top, the Kaiju above the board on the right, the board full width */
@media (max-aspect-ratio: 4/5) {
  :root { --bar: 86px; }
  .stage { background-image: url(assets/kaiju/bg-phone.webp); background-position: center top; }
  :root { --g: min(94vw, calc(100vh - var(--bar) - 320px), 480px); }
  .logo { left: 12px; right: auto; top: calc(max(10px, env(safe-area-inset-top)) + 44px); width: min(38vw, 170px); }
  .tchip { height: 34px; padding: 0 12px; font-size: 13px; }
  .tchip--home { left: 10px; top: max(10px, env(safe-area-inset-top)); }
  .tops { right: 10px; top: max(10px, env(safe-area-inset-top)); gap: 6px; }
  .snd { width: 34px; height: 34px; }
  .snd svg { width: 18px; }
  .toast { top: 54px; }
  .buy { position: absolute; right: 10px; top: -38px; height: 28px; padding: 0 12px; flex-direction: row; gap: 6px; border-radius: 999px; border-width: 1.5px; box-shadow: none; }
  .buy b { font-size: 15px; }
  .buy .long { display: none; }
  .buy .short { display: inline; }
  .play { top: auto; bottom: calc(var(--bar) + env(safe-area-inset-bottom) + 46px); transform: translateX(-50%); }
  .shake { flex-direction: column-reverse; align-items: flex-end; }
  .kaiju { width: calc(var(--g) * .46); height: calc(var(--g) * .56); margin: 0 3% calc(var(--g) * -.05) 0; }
  .kaiju__grow { transform-origin: 88% 100%; }
  .size { left: -46%; top: 26%; width: calc(var(--g) * .2); }
  .size b { font-size: calc(var(--g) * .07); }
  .win { left: 28%; font-size: calc(var(--g) * .064); }
  .float { font-size: calc(var(--g) * .085); }
  .bar { gap: 10px; padding: 0 10px env(safe-area-inset-bottom); }
  .bal { position: absolute; left: 10px; top: -38px; height: 28px; min-width: 0; padding: 0 14px; flex-direction: row; align-items: center; gap: 8px;
    border-radius: 999px; border-width: 1.5px; background: rgba(14, 52, 51, .88); }
  .bal b { font-size: 16px; }
  .pill { height: 50px; }
  .pill b { font-size: 18px; }
  .pill span { font-size: 10px; }
  .bet > div { min-width: 52px; }
  .bet button { width: 32px; height: 32px; font-size: 20px; }
  .spin { width: 78px; height: 78px; margin-top: -34px; flex: none; }
  .ctl { width: 44px; height: 44px; flex: none; }
  .ctl svg { width: 20px; }
}
@media (max-aspect-ratio: 4/5) and (max-width: 370px) { .bar { gap: 7px; } }
@media (prefers-reduced-motion: reduce) { .kaiju__breathe, .logo { animation: none; } }