/* ============================================================
   /assets/css/cribini.css
   CRIBINI MATCH v1.0
   ============================================================ */

:root{
  --cribini-bg:#05070F;
  --cribini-card:#0B1020;
  --cribini-ice:#9CF6FF;
  --cribini-glow:#35D7FF;
  --cribini-violet:#8C7CFF;
  --cribini-muted:#7C89A8;
  --cribini-line:rgba(156,246,255,0.14);
  --cribini-good:#8df7c2;
  --cribini-warn:#ffcb6b;
  --cribini-bad:#ff7b7b;
  --cribini-khaki:#C7B98A;
  --cribini-shadow:0 20px 70px rgba(0,0,0,0.46);
}

.cribiniBootError{
  padding:22px;
  color:var(--cribini-bad);
  font-weight:900;
}

.cribiniApp{
  position:relative;
  width:100%;
  height:100%;
  min-height:100vh;
  overflow:hidden;
  color:#EAF7FF;
  background:
    radial-gradient(1000px 620px at 50% 42%, rgba(53,215,255,0.10), transparent 55%),
    radial-gradient(720px 420px at 68% 22%, rgba(140,124,255,0.10), transparent 58%),
    linear-gradient(180deg, rgba(9,14,28,0.86), rgba(5,7,15,1)),
    var(--cribini-bg);
}


.cribiniAirdropTicker{
  position:relative;
  z-index:4;
  min-height:34px;
  padding:9px 14px 7px;
  border-bottom:1px solid rgba(156,246,255,0.10);
  background:
    linear-gradient(90deg, transparent, rgba(53,215,255,0.10), transparent),
    rgba(7,10,18,0.36);
  color:rgba(234,247,255,0.88);
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-align:center;
  overflow:hidden;
}

.cribiniAirdropTicker::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:120px;
  left:-140px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation:cribiniTickerGlimmer 4.8s ease-in-out infinite;
}

.cribiniTickerSep{
  color:rgba(156,246,255,0.42);
  margin:0 9px;
}

#cribiniTickerClaimed{
  color:var(--cribini-ice);
}

#cribiniTickerCountdown{
  color:rgba(141,247,194,0.92);
}

@keyframes cribiniTickerGlimmer{
  0%{left:-140px; opacity:0;}
  18%{opacity:1;}
  42%{left:100%; opacity:0;}
  100%{left:100%; opacity:0;}
}

.cribiniScene{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.cribiniStars{
  position:absolute;
  inset:-60px;
  opacity:.72;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.09) 1px, transparent 1px),
    radial-gradient(circle at 42% 82%, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:220px 220px, 280px 280px, 360px 360px;
  animation:cribiniStarDrift 90s linear infinite;
}

.cribiniCoreGlow{
  position:absolute;
  left:50%;
  top:48%;
  width:420px;
  height:420px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:
    radial-gradient(circle, rgba(53,215,255,.18), rgba(53,215,255,.06) 42%, transparent 72%);
  filter:blur(16px);
  animation:cribiniGlowPulse 6.8s ease-in-out infinite;
}

.cribiniScanline{
  position:absolute;
  inset:0;
  opacity:.08;
  background:repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.08) 0,
    rgba(255,255,255,.08) 1px,
    transparent 1px,
    transparent 5px
  );
}

@keyframes cribiniStarDrift{
  from{transform:translate3d(0,0,0);}
  50%{transform:translate3d(-12px,6px,0);}
  to{transform:translate3d(0,0,0);}
}

@keyframes cribiniGlowPulse{
  0%,100%{opacity:.78; transform:translate(-50%,-50%) scale(1);}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.04);}
}

.cribiniPanel{
  position:relative;
  z-index:2;
  width:min(640px, calc(100vw - 32px));
  min-height:min(760px, calc(100vh - 36px));
  margin:18px auto;
  display:grid;
  grid-template-rows:auto 1fr auto;
  border:1px solid var(--cribini-line);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(53,215,255,.08), transparent 38%),
    linear-gradient(180deg, rgba(140,124,255,.045), transparent 82%),
    rgba(11,16,32,.88);
  box-shadow:var(--cribini-shadow);
  overflow:hidden;
  backdrop-filter:blur(10px);
}

.cribiniTop{
  display:grid;
  grid-template-columns:1fr 112px 1fr;
  align-items:center;
  gap:10px;
  padding:16px;
  border-bottom:1px solid rgba(156,246,255,.10);
}

.cribiniStat{
  min-height:76px;
  border:1px solid rgba(156,246,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.025);
  padding:12px;
  text-align:center;
}

.cribiniStatK,
.cribiniLevelK,
.cribiniKicker{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(156,246,255,.82);
  font-weight:900;
}

.cribiniStatV{
  margin-top:8px;
  font-size:22px;
  line-height:1;
  font-weight:900;
  color:#fff;
}

.cribiniLevelOrb{
  width:100px;
  height:100px;
  justify-self:center;
  border-radius:999px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(156,246,255,.22);
  background:
    radial-gradient(circle, rgba(53,215,255,.18), rgba(53,215,255,.045) 62%, rgba(0,0,0,.12)),
    rgba(7,10,18,.74);
  box-shadow:
    inset 0 0 24px rgba(53,215,255,.06),
    0 0 28px rgba(53,215,255,.12);
}

.cribiniLevelV{
  margin-top:5px;
  font-size:36px;
  line-height:1;
  font-weight:900;
  color:#fff;
}

.cribiniMain{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 18px 20px;
}

.cribiniTitleBlock{
  text-align:center;
}

.cribiniTitle{
  margin:8px 0 0;
  font-size:34px;
  line-height:1;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 0 24px rgba(53,215,255,.18);
}

.cribiniSub{
  margin-top:10px;
  min-height:20px;
  font-size:13px;
  color:rgba(220,233,245,.76);
}

.cribiniBoardWrap{
  display:flex;
  justify-content:center;
  padding:22px 0 18px;
}

.cribiniBoard{
  display:grid;
  grid-template-columns:repeat(4, 74px);
  gap:12px;
  justify-content:center;
}

.cribiniTile{
  width:74px;
  height:74px;
  padding:0;
  border:0;
  background:transparent;
  perspective:800px;
  cursor:pointer;
}

.cribiniTile:disabled{
  cursor:not-allowed;
  opacity:.72;
}

.cribiniTileInner{
  position:relative;
  width:100%;
  height:100%;
  display:block;
  transform-style:preserve-3d;
  transition:transform .28s ease, filter .18s ease;
}

.cribiniTile:hover:not(:disabled) .cribiniTileInner{
  filter:brightness(1.16);
}

.cribiniTile.is-revealed .cribiniTileInner,
.cribiniTile.is-solved .cribiniTileInner{
  transform:rotateY(180deg);
}

.cribiniTileFront,
.cribiniTileBack{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  backface-visibility:hidden;
  border:1px solid rgba(156,246,255,.16);
  font-weight:900;
}

.cribiniTileFront{
  color:var(--cribini-ice);
  font-size:34px;
  background:
    radial-gradient(circle at 50% 38%, rgba(53,215,255,.14), transparent 58%),
    rgba(7,10,18,.84);
  box-shadow:
    inset 0 0 18px rgba(53,215,255,.05),
    0 8px 24px rgba(0,0,0,.28);
}

.cribiniTileBack{
  transform:rotateY(180deg);
  background:rgba(53,215,255,.12);
  box-shadow:
    inset 0 0 26px rgba(255,255,255,.05),
    0 0 22px rgba(53,215,255,.12);
}

.cribiniTile.is-solved .cribiniTileBack{
  border-color:rgba(141,247,194,.36);
  box-shadow:
    inset 0 0 26px rgba(141,247,194,.08),
    0 0 22px rgba(141,247,194,.18);
}

.cribiniTileBack[data-color="cyan"]{background:#35D7FF;}
.cribiniTileBack[data-color="violet"]{background:#8C7CFF;}
.cribiniTileBack[data-color="khaki"]{background:#C7B98A;}
.cribiniTileBack[data-color="green"]{background:#8df7c2;}
.cribiniTileBack[data-color="pink"]{background:#ff7bd5;}
.cribiniTileBack[data-color="blue"]{background:#5378FF;}
.cribiniTileBack[data-color="white"]{background:#EAF7FF;}
.cribiniTileBack[data-color="orange"]{background:#ff9a6a;}

.cribiniPlayDock{
  text-align:center;
}

.cribiniPlayBtn{
  min-width:190px;
  min-height:52px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid rgba(156,246,255,.28);
  background:
    linear-gradient(180deg, rgba(53,215,255,.18), rgba(53,215,255,.08)),
    rgba(7,10,18,.88);
  color:#EAF7FF;
  font-size:14px;
  font-weight:900;
  letter-spacing:.14em;
  cursor:pointer;
  text-transform:uppercase;
  box-shadow:0 0 24px rgba(53,215,255,.10);
}

.cribiniPlayBtn:hover:not(:disabled){
  background:
    linear-gradient(180deg, rgba(53,215,255,.24), rgba(53,215,255,.10)),
    rgba(7,10,18,.92);
}

.cribiniPlayBtn:disabled{
  opacity:.52;
  cursor:not-allowed;
}

.cribiniPlayBtn.is-clock{
  border-color:rgba(255,203,107,.38);
  color:var(--cribini-warn);
  box-shadow:0 0 24px rgba(255,203,107,.12);
}

.cribiniChargeLine{
  margin-top:10px;
  min-height:18px;
  font-size:12px;
  color:rgba(220,233,245,.68);
}

.cribiniBottom{
  display:grid;
  grid-template-columns:1.25fr 1.25fr 1fr;
  gap:10px;
  padding:14px 16px 16px;
  border-top:1px solid rgba(156,246,255,.10);
}

.cribiniBottomLink{
  min-height:42px;
  border-radius:999px;
  border:1px solid rgba(156,246,255,.14);
  background:rgba(53,215,255,.07);
  color:#EAF7FF;
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  cursor:pointer;
}

.cribiniBottomLink:hover{
  background:rgba(53,215,255,.12);
  border-color:rgba(156,246,255,.26);
}

.cribiniModal.hidden{
  display:none !important;
}

.cribiniModal{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:20px;
}

.cribiniModalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.64);
  backdrop-filter:blur(5px);
}

.cribiniModalCard{
  position:relative;
  z-index:2;
  width:min(760px, calc(100vw - 30px));
  max-height:calc(100vh - 40px);
  overflow:auto;
  border:1px solid rgba(156,246,255,.16);
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(53,215,255,.08), transparent 45%),
    rgba(11,16,32,.96);
  box-shadow:0 30px 90px rgba(0,0,0,.58);
}

.cribiniModalHead{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid rgba(156,246,255,.10);
  background:rgba(11,16,32,.92);
  backdrop-filter:blur(10px);
}

.cribiniModalTitle{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.cribiniModalClose{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(156,246,255,.16);
  background:rgba(53,215,255,.08);
  color:#EAF7FF;
  cursor:pointer;
  font-weight:900;
}

.cribiniModalBody{
  padding:16px;
  color:#EAF7FF;
}

.cribiniCard{
  padding:13px;
  border:1px solid rgba(156,246,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  margin-bottom:10px;
}

.cribiniCardTitle{
  font-weight:900;
}

.cribiniCardSub{
  margin-top:6px;
  color:var(--cribini-muted);
  font-size:13px;
  line-height:1.45;
}

.cribiniReceiptRow{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(156,246,255,.08);
  font-size:13px;
}

.cribiniReceiptRow:last-child{
  border-bottom:none;
}

@media (max-width:720px){
  .cribiniPanel{
    min-height:calc(100vh - 24px);
    margin:12px auto;
    width:calc(100vw - 20px);
  }

  .cribiniTop{
    grid-template-columns:1fr 88px 1fr;
    padding:12px;
  }

  .cribiniLevelOrb{
    width:82px;
    height:82px;
  }

  .cribiniLevelV{
    font-size:30px;
  }

  .cribiniStat{
    min-height:66px;
    padding:10px 6px;
  }

  .cribiniStatV{
    font-size:17px;
  }

  .cribiniBoard{
    grid-template-columns:repeat(4, 62px);
    gap:9px;
  }

  .cribiniTile{
    width:62px;
    height:62px;
  }

  .cribiniTitle{
    font-size:29px;
  }
}

@media (max-width:420px){
  .cribiniBoard{
    grid-template-columns:repeat(4, 54px);
    gap:8px;
  }

  .cribiniTile{
    width:54px;
    height:54px;
  }

  .cribiniTileFront{
    font-size:28px;
  }

  .cribiniBottom{
    gap:7px;
    padding:12px;
  }

  .cribiniBottomLink{
    font-size:10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .cribiniStars,
  .cribiniCoreGlow{
    animation:none;
  }

  .cribiniTileInner,
  .cribiniPlayBtn,
  .cribiniBottomLink{
    transition:none;
  }
}


/* ============================================================
   CRIBINI Four-Corner HUD Lock
   REF / STATUS / PACKS / INFO
   ============================================================ */

.cribiniBottom{
  display:none !important;
}

.cribiniCornerHud{
  position:absolute;
  inset:0;
  z-index:80;
  pointer-events:none;
}

.cribiniCornerBtn{
  position:absolute;
  width:54px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(10,16,24,.68);
  color:#EAF7FF;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.cribiniCornerBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(156,246,255,.34);
  background:rgba(18,28,38,.78);
  box-shadow:
    0 10px 30px rgba(0,0,0,.32),
    0 0 18px rgba(53,215,255,.12);
}

.cribiniCornerBtn--tl{
  top:14px;
  left:14px;
}

.cribiniCornerBtn--tr{
  top:14px;
  right:14px;
}

.cribiniCornerBtn--bl{
  left:14px;
  bottom:14px;
}

.cribiniCornerBtn--br{
  right:14px;
  bottom:14px;
}

.cribiniCornerBtn--status{
  color:#1B1720;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.32), transparent 28%),
    linear-gradient(180deg, #D6C896, #AFA06F);
  border-color:rgba(199,185,138,.52);
  box-shadow:
    0 10px 30px rgba(0,0,0,.30),
    0 0 18px rgba(199,185,138,.16);
}

.cribiniCornerBtn--status:hover{
  border-color:rgba(255,215,106,.66);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.38), transparent 28%),
    linear-gradient(180deg, #E6D7A2, #BAAA78);
}

@media (max-width:720px){
  .cribiniCornerBtn{
    width:50px;
    height:50px;
    font-size:22px;
  }

  .cribiniCornerBtn--tl,
  .cribiniCornerBtn--tr{
    top:10px;
  }

  .cribiniCornerBtn--bl,
  .cribiniCornerBtn--br{
    bottom:10px;
  }

  .cribiniCornerBtn--tl,
  .cribiniCornerBtn--bl{
    left:10px;
  }

  .cribiniCornerBtn--tr,
  .cribiniCornerBtn--br{
    right:10px;
  }
}