/* Fruit Chop: what only the stall has. The rest comes from /rooms/room.css. */

/* the score, top left */
.fc-score { position: absolute; z-index: 3; top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(78px + env(safe-area-inset-left, 0px)); pointer-events: none;
  display: grid; text-shadow: 0 2px 0 #0008, 0 0 18px #000a; }
.fc-score[hidden] { display: none; }
.fc-score strong { font: 800 46px/1 var(--font); color: #ffe7a0; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fc-score small { font-size: 12px; color: #f3e6c8; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }

/* the apples (Five Apples), the clock and the power fruit, top right */
.fc-right { position: absolute; z-index: 3; top: calc(84px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); pointer-events: none;
  display: grid; justify-items: end; gap: 6px; }
.fc-right[hidden] { display: none; }
.fc-apples { display: flex; gap: 7px; padding-top: 6px; }
.fc-apples[hidden] { display: none; }
.fc-apples i { position: relative; width: 24px; height: 22px; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 34% 32%, #ff9a86, #d81c24 52%, #8e0d12); box-shadow: 0 2px 5px #0008; transition: filter .3s, opacity .3s, transform .3s; }
.fc-apples i::before { content: ''; position: absolute; left: 50%; top: -5px; width: 2px; height: 7px; border-radius: 1px; background: #5a3412; transform: translateX(-50%) rotate(8deg); }
.fc-apples b { position: absolute; left: 54%; top: -6px; width: 9px; height: 5px; border-radius: 0 100% 0 100%; background: #5cbf2e; transform: rotate(-18deg); }
.fc-apples i.gone { filter: grayscale(1) brightness(.55); opacity: .4; transform: scale(.8); }
.fc-clock { font: 800 34px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #0008, 0 0 14px #000a; }
.fc-clock[hidden] { display: none; }
.fc-clock.low { color: #ff6a50; animation: fcpulse .5s ease-in-out infinite alternate; }
@keyframes fcpulse { to { transform: scale(1.12); } }
.fc-powers { display: grid; gap: 4px; justify-items: end; }
.fc-power { font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #10151c; box-shadow: 0 2px 8px #0006; }
.fc-power.freeze { background: #9fe3ff; }
.fc-power.basket { background: #ffb347; }
@media (max-width: 760px) {
  .fc-score { top: calc(64px + env(safe-area-inset-top, 0px)); left: calc(14px + env(safe-area-inset-left, 0px)); }
  .fc-score strong { font-size: 36px; }
  .fc-right { top: calc(118px + env(safe-area-inset-top, 0px)); }
  .fc-clock { font-size: 28px; }
}

/* words floating up: combos, clean cuts, harvests, apples lost and won back */
.fc-pops { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.fc-pop { position: absolute; transform: translate(-50%, -50%); font: 800 22px/1 var(--font); color: #fff; white-space: nowrap;
  text-shadow: 0 2px 0 #000a, 0 0 12px #000; animation: fcrise 1.3s cubic-bezier(.2, .8, .3, 1) forwards; }
.fc-pop.combo { font-size: 28px; color: #ffe04a; }
.fc-pop.miss { font-size: 20px; color: #ff6a50; animation-name: fcmiss; }
.fc-pop.bad { color: #ff6a50; font-size: 28px; }
.fc-pop.freeze { color: #9fe3ff; }
.fc-pop.basket, .fc-pop.life { color: #ffd34a; }
.fc-pop.harvest { font-size: 22px; color: #ffb347; }
.fc-pop.fair { font-size: 18px; color: #f4efe2; }
.fc-pop.clean { font-size: 22px; color: #bff0a8; }
.fc-pop.perfect { font-size: 34px; letter-spacing: .02em; color: #ffe27a; text-shadow: 0 2px 0 #0009, 0 0 14px #ffb300, 0 0 34px #ff9d00aa; animation-name: fcperfect; animation-duration: 1.5s; }
@keyframes fcperfect { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.4) rotate(-6deg); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(.92) rotate(2deg); } 30% { transform: translate(-50%, -55%) scale(1.08) rotate(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }
@keyframes fcrise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -130%) scale(1); } }
@keyframes fcmiss { 0% { opacity: 0; transform: translate(-50%, 0) scale(1.8); } 20% { opacity: 1; transform: translate(-50%, -100%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -120%); } }
@media (prefers-reduced-motion: reduce) { .fc-pop { animation-duration: .01s; animation-delay: 1s; } }

/* a bomb: a red flash; a perfect cut: a golden one */
.fc-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; }
.fc-flash.red { background: radial-gradient(circle, #ff5a2a55, #ff000088); }
.fc-flash.gold { background: radial-gradient(circle, #ffe9a033, #ffc84a00 70%); }
.fc-flash.gold.go { animation-duration: .7s; }
.fc-flash.go { animation: fcflash 1.1s ease-out forwards; }
@keyframes fcflash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* while a power fruit lasts: frost (a snow pear) or a warm glow (a harvest basket) round the edges */
.fc-tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: box-shadow .4s; }
.fc-tint.freeze { box-shadow: inset 0 0 120px 30px rgba(140, 220, 255, .55); }
.fc-tint.basket { box-shadow: inset 0 0 120px 30px rgba(255, 170, 60, .4); }

.fc-pause { position: absolute; z-index: 4; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #fff3; background: #0008; color: #fff; font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px #0006; }
.fc-pause:hover { background: #000b; }
@media (max-width: 760px) { .fc-pause { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: auto; right: 14px; transform: none; } }

/* paused: the board hidden */
.fc-paused { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 16px; background: rgba(14, 10, 8, .92); backdrop-filter: blur(14px); }
.fc-paused[hidden] { display: none; }
.fc-paused strong { font: 400 48px/1 var(--serif, var(--gu-serif)); color: #fff; }


/* the shop */
.swatch-blade { min-height: 90px; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #3a2a1c, #160f0a); }
.swatch-blade i { width: 150px; max-width: 80%; height: 7px; border-radius: 50% 4px 4px 50% / 50%; background: linear-gradient(90deg, transparent, var(--glow) 30%, var(--core) 85%, #fff);
  transform: rotate(-24deg); box-shadow: 0 0 14px 3px var(--glow); }
.swatch-blade.rainbow i { background: linear-gradient(90deg, transparent, #ff3a6a 20%, #ffd23a 40%, #4aff7a 60%, #4ac8ff 80%, #fff); box-shadow: 0 0 14px 3px #b06aff; }
.swatch-board { min-height: 90px; height: 100%; background:
  repeating-linear-gradient(90deg, var(--gap) 0 3px, transparent 3px 34px),
  repeating-linear-gradient(90deg, transparent 0 9px, var(--grain) 9px 10px, transparent 10px 21px, var(--grain) 21px 22px, transparent 22px 34px),
  var(--wood); }
.swatch-board.slate { background: linear-gradient(90deg, transparent 49%, var(--gap) 49% 51%, transparent 51%), linear-gradient(transparent 49%, var(--gap) 49% 51%, transparent 51%), radial-gradient(circle at 30% 30%, #ffffff14, transparent 40%), var(--wood); }
.swatch-board.canes { background: repeating-linear-gradient(90deg, var(--gap) 0 2px, var(--wood) 2px 9px, var(--grain) 9px 16px, var(--wood) 16px 17px), var(--wood); }
.swatch-splash { min-height: 90px; height: 100%; position: relative; background: #3b2716; }
.swatch-splash i { position: absolute; border-radius: 50% 46% 52% 44%; }
.swatch-splash i:nth-child(1) { width: 46px; height: 40px; left: 22%; top: 24%; }
.swatch-splash i:nth-child(2) { width: 14px; height: 13px; left: 62%; top: 22%; }
.swatch-splash i:nth-child(3) { width: 10px; height: 10px; left: 58%; top: 64%; }
.swatch-splash.juice i:nth-child(1) { background: #d81c2c; } .swatch-splash.juice i:nth-child(2) { background: #ff9a1f; } .swatch-splash.juice i:nth-child(3) { background: #8ad23a; }
.swatch-splash.paint i:nth-child(1) { background: #2f8cff; } .swatch-splash.paint i:nth-child(2) { background: #ff2f7a; } .swatch-splash.paint i:nth-child(3) { background: #ffd21f; }
.swatch-splash.glitter i { background: radial-gradient(circle, #fff 0 10%, #ffd86a 11% 30%, transparent 31%) 0 0 / 8px 8px; }