/* Pitacor WebGL template - "Papel e tinta": cream paper, thick ink outlines, flat fills, stamped shadows.
   Unity preprocesses this file: never write three curly braces in a row, never start a line with "#if". */

:root {
  --pc-paper: #FFF6E5;
  --pc-ink: #1D1D1D;
  --pc-orange: #FF5A36;
  --pc-amber: #FFB000;
  --pc-sky: #3FA7FF;
  --pc-mint: #4DD4AC;
  --pc-pink: #FF6B9D;
  --pc-violet: #8B6CFF;
  --pc-board: #8A8A8A;
  --pc-font: "Baloo 2", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Varela Round",
    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pc-ad-width: 160px;
  --pc-ad-gap: 150px;
  --pc-pop: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--pc-paper);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--pc-font);
  color: var(--pc-ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.pc-hidden { display: none !important; }

/* ------------------------------------------------------------------ page layout */

#pc-page {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

#pc-row { flex: 1 1 auto; min-height: 0; display: flex; }

#pc-stage { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; }

#unity-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--pc-paper);
  outline: none;
  touch-action: none;
  -ms-touch-action: none;
}

/* Desktop banner slots: only on wide screens, always outside the canvas and away from it (GDD 11). */
.pc-ad {
  flex: 0 0 var(--pc-ad-width);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#pc-ad-left { margin-right: var(--pc-ad-gap); }
#pc-ad-right { margin-left: var(--pc-ad-gap); }
@media (max-width: 1279px), (pointer: coarse) {
  .pc-ad { display: none !important; }
}

#pc-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 3px 12px 5px;
}
/* Phones, tablets, short windows and the TV: every pixel goes to the game (the loading screen shows the links). */
@media (pointer: coarse), (max-height: 699px) {
  #pc-footer { display: none; }
}
.pc-tv #pc-footer { display: none; }

/* Links to the site pages (About, Rules, Privacy...): in the footer and, as a copy, on the loading screen. */
.pc-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 16px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
}
.pc-links a { color: rgba(29, 29, 29, .6); text-decoration: none; }
.pc-links a:hover, .pc-links a:focus-visible {
  color: var(--pc-ink);
  text-decoration: underline;
  text-decoration-color: var(--pc-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
#pc-loader > .pc-links {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 1;
  padding: 0 16px;
  font-size: 14px;
  animation: pc-rise .6s .8s var(--pc-pop) both;
}

.pc-donate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 15px;
  color: var(--pc-ink);
  text-decoration: none;
  background: var(--pc-pink);
  border: 3px solid var(--pc-ink);
  border-radius: 999px;
  padding: 4px 14px;
  box-shadow: 3px 3px 0 var(--pc-ink);
  transition: transform .08s ease, box-shadow .08s ease;
}
.pc-donate:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--pc-ink); }
.pc-donate:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--pc-ink); }

/* ------------------------------------------------------------------ loading screen */

#pc-loader {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--pc-paper);
  background-image: radial-gradient(rgba(29, 29, 29, .07) 1.3px, transparent 1.8px);
  background-size: 22px 22px;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.4, 0, .2, 1);
}
#pc-loader.pc-hide { opacity: 0; transform: scale(1.06); pointer-events: none; }

.pc-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 4.2vh, 36px);
  width: 100%;
  max-width: 600px;
  padding: 24px 20px;
  text-align: center;
}

/* Logo: each letter a paint colour with a thick ink outline and a stamped shadow. */
.pc-logo {
  margin: 0;
  display: flex;
  justify-content: center;
  font-family: var(--pc-font);
  font-weight: 800;
  font-size: clamp(52px, 17vw, 124px);
  line-height: 1.05;
  letter-spacing: .01em;
  white-space: nowrap;
}
.pc-l {
  display: inline-block;
  animation: pc-bob 2.6s ease-in-out infinite;
  animation-delay: calc(1.1s + var(--i) * .12s);
}
.pc-l b {
  display: inline-block;
  font-weight: inherit;
  color: var(--c);
  padding: 0 .02em;
  -webkit-text-stroke: .11em var(--pc-ink);
  paint-order: stroke fill;
  text-shadow: .075em .075em 0 var(--pc-ink);
  transform: rotate(var(--r));
  transform-origin: 50% 90%;
  animation: pc-drop .8s var(--pc-pop) both;
  animation-delay: calc(var(--i) * .07s);
}
.pc-done .pc-l b {
  animation: pc-cheer .55s var(--pc-pop) both;
  animation-delay: calc(var(--i) * .045s);
}
.pc-failed .pc-l { animation: none; }
.pc-failed .pc-l b {
  animation: pc-sad .7s ease forwards;
  animation-delay: calc(var(--i) * .05s);
}

/* Paint splats around the edges. */
.pc-splats { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.pc-splat, .pc-drop {
  position: absolute;
  display: block;
  background: var(--c);
  border: 4px solid var(--pc-ink);
  box-shadow: 6px 6px 0 var(--pc-ink);
  animation: pc-pop .7s var(--pc-pop) both, pc-float var(--t, 7s) ease-in-out infinite;
}
.pc-splat {
  width: var(--s);
  height: var(--s);
  border-radius: 58% 42% 55% 45% / 47% 58% 42% 53%;
}
.pc-drop {
  width: var(--s);
  height: var(--s);
  border-width: 3px;
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--pc-ink);
}
.pc-s1 { --s: clamp(96px, 24vmin, 200px); --c: var(--pc-amber);  top: -6%;  left: -5%;  animation-delay: .10s, 1s;  --t: 8s; }
.pc-s2 { --s: clamp(80px, 19vmin, 160px); --c: var(--pc-sky);    top: -4%;  right: -4%; animation-delay: .22s, 1.4s; --t: 7s; border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%; }
.pc-s3 { --s: clamp(90px, 22vmin, 190px); --c: var(--pc-pink);   bottom: -6%; left: -4%; animation-delay: .34s, .8s; --t: 9s; border-radius: 62% 38% 46% 54% / 40% 52% 48% 60%; }
.pc-s4 { --s: clamp(104px, 26vmin, 220px); --c: var(--pc-mint);  bottom: -8%; right: -6%; animation-delay: .46s, 1.2s; --t: 8.5s; }
.pc-s5 { --s: clamp(44px, 10vmin, 86px);  --c: var(--pc-violet); top: 46%;  left: 4%;   animation-delay: .58s, 1.6s; --t: 6s; border-radius: 50% 50% 46% 54% / 60% 44% 56% 40%; }
.pc-s6 { --s: clamp(40px, 9vmin, 78px);   --c: var(--pc-orange); top: 30%;  right: 5%;  animation-delay: .70s, 2s;   --t: 6.5s; }
.pc-d1 { --s: 16px; --c: var(--pc-orange); top: 20%; left: 16%; animation-delay: .8s, 1s;   --t: 5s; }
.pc-d2 { --s: 12px; --c: var(--pc-sky);    top: 70%; left: 12%; animation-delay: .9s, 1.3s; --t: 5.5s; }
.pc-d3 { --s: 14px; --c: var(--pc-amber);  top: 76%; right: 18%; animation-delay: 1s, .7s;  --t: 6s; }
.pc-d4 { --s: 10px; --c: var(--pc-pink);   top: 15%; right: 22%; animation-delay: 1.1s, 1.5s; --t: 4.5s; }

.pc-tagline {
  margin: calc(clamp(18px, 4.2vh, 36px) * -.6) 0 0;
  max-width: 32ch;
  font-weight: 800;
  font-size: clamp(16px, 4.2vw, 21px);
  line-height: 1.3;
  color: #4A4036;
  animation: pc-rise .6s .35s var(--pc-pop) both;
}

/* Progress bar: ink capsule with a stamped shadow, filled by flowing paint. */
.pc-progress {
  width: min(440px, 82vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: pc-rise .6s .45s var(--pc-pop) both;
}
.pc-bar {
  position: relative;
  width: 100%;
  height: 38px;
  padding: 4px;
  background: #fff;
  border: 4px solid var(--pc-ink);
  border-radius: 999px;
  box-shadow: 6px 6px 0 var(--pc-ink);
  overflow: hidden;
}
.pc-bar-fill {
  position: relative;
  width: 0;
  min-width: 22px;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--pc-orange), var(--pc-amber), var(--pc-mint), var(--pc-sky),
    var(--pc-violet), var(--pc-pink), var(--pc-orange));
  background-size: 200% 100%;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .13);
  animation: pc-flow 2.4s linear infinite;
}
.pc-bar-fill::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 9px;
  right: 9px;
  height: 28%;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  z-index: 1;
}
.pc-bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40px;
  right: 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .26) 0 10px, transparent 10px 20px);
  animation: pc-stripes .9s linear infinite;
}
.pc-finishing .pc-bar-fill::after { animation-duration: .45s; }
.pc-done .pc-bar { animation: pc-squash .45s var(--pc-pop); }

.pc-status {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  font-size: 19px;
}
.pc-percent { min-width: 3.4ch; text-align: left; font-variant-numeric: tabular-nums; }
.pc-finishing .pc-status-text { animation: pc-pulse 1s ease-in-out infinite; }

/* Tip card. */
.pc-tip {
  margin: 0;
  width: min(440px, 86vw);
  min-height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background: #fff;
  border: 3px solid var(--pc-ink);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--pc-ink);
  font-weight: 700;
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.3;
  rotate: -1.2deg;
  animation: pc-rise .6s .6s var(--pc-pop) both;
}
.pc-tip-text { display: block; transition: opacity .2s ease, transform .2s ease; }
.pc-tip-out { opacity: 0; transform: translateY(6px); }

/* Error card. */
.pc-failed .pc-progress, .pc-failed .pc-tip { display: none; }
.pc-error {
  position: relative;
  width: min(460px, 90vw);
  margin-top: 26px;
  padding: 38px 22px 20px;
  background: #fff;
  border: 4px solid var(--pc-ink);
  border-radius: 22px;
  box-shadow: 7px 7px 0 var(--pc-ink);
  animation: pc-pop .55s var(--pc-pop) both;
  -webkit-user-select: text;
  user-select: text;
}
.pc-error-badge {
  position: absolute;
  top: -32px;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  border-radius: 50%;
  background: var(--pc-orange);
  border: 4px solid var(--pc-ink);
  box-shadow: 4px 4px 0 var(--pc-ink);
  font-weight: 800;
  font-size: 36px;
  line-height: 50px;
  animation: pc-wobble 2.2s ease-in-out infinite;
}
.pc-error-title { margin: 4px 0 8px; font-size: 26px; font-weight: 800; line-height: 1.15; }
.pc-error-msg { margin: 0 0 20px; font-size: 17px; font-weight: 600; line-height: 1.4; }
.pc-btn {
  font: inherit;
  font-weight: 800;
  font-size: 19px;
  color: var(--pc-ink);
  background: var(--pc-orange);
  border: 4px solid var(--pc-ink);
  border-radius: 14px;
  padding: 10px 26px;
  box-shadow: 5px 5px 0 var(--pc-ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s ease, box-shadow .08s ease;
}
.pc-btn:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--pc-ink); }
.pc-btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--pc-ink); }
.pc-btn:focus-visible { outline: 4px solid var(--pc-amber); outline-offset: 3px; }
.pc-error-details { margin-top: 18px; text-align: left; font-size: 13px; }
.pc-error-details summary { cursor: pointer; font-weight: 700; opacity: .65; }
.pc-error-raw {
  margin: 8px 0 0;
  max-height: 28vh;
  overflow: auto;
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  background: var(--pc-paper);
  border: 2px solid var(--pc-ink);
  border-radius: 10px;
}

.pc-noscript {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 300;
  width: min(420px, 90vw);
  transform: translate(-50%, -50%);
  padding: 20px;
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  background: #fff;
  border: 4px solid var(--pc-ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--pc-ink);
}
.pc-noscript p { margin: 0; }
.pc-noscript .pc-noscript-about { margin-top: 12px; font-weight: 600; font-size: 16px; line-height: 1.4; }

#diagnostics-icon { position: fixed; right: 8px; bottom: 8px; z-index: 200; width: 36px; cursor: pointer; }

/* Short landscape phones: keep everything on screen. */
@media (max-height: 520px) {
  .pc-logo { font-size: clamp(40px, 14vh, 84px); }
  .pc-center { gap: 12px; padding: 12px 20px; }
  .pc-tip, .pc-tagline { display: none; }
}
@media (max-height: 420px) {
  #pc-loader > .pc-links { display: none; }
}

/* ------------------------------------------------------------------ keyframes */

@keyframes pc-drop {
  0%   { opacity: 0; transform: translateY(-130%) rotate(0deg) scale(.7); }
  55%  { opacity: 1; transform: translateY(6%) rotate(var(--r)) scale(1.14, .8); }
  75%  { transform: translateY(-5%) rotate(var(--r)) scale(.95, 1.07); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--r)) scale(1); }
}
@keyframes pc-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7%); }
}
@keyframes pc-cheer {
  0%   { transform: translateY(0) rotate(var(--r)) scale(1); }
  40%  { transform: translateY(-22%) rotate(calc(var(--r) * -1.5)) scale(1.18); }
  100% { transform: translateY(0) rotate(var(--r)) scale(1); }
}
@keyframes pc-sad {
  to { transform: translateY(10%) rotate(calc(var(--r) * 2.2)) scale(.97); }
}
@keyframes pc-pop {
  from { scale: 0; }
  to   { scale: 1; }
}
@keyframes pc-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: 0 -12px; rotate: 9deg; }
}
@keyframes pc-rise {
  from { opacity: 0; transform: translateY(26px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes pc-flow {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}
@keyframes pc-stripes {
  from { transform: translateX(0); }
  to   { transform: translateX(28.28px); }
}
@keyframes pc-squash {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.06, .86); }
  65%      { transform: scale(.98, 1.05); }
}
@keyframes pc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
@keyframes pc-wobble {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
}