@import url('/styles-base.css');

/* UI polish: intentional status treatments + Unlimited identity */
[hidden]{display:none!important}

/* "Coming later" elements are status chips, not fake disabled buttons. */
.pack-preview>.secondary-button.inverted:disabled{
  min-height:0;
  width:max-content;
  max-width:100%;
  margin-top:10px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.09);
  color:rgba(255,255,255,.76);
  box-shadow:none;
  opacity:1;
  cursor:default;
  font-size:.86rem;
  letter-spacing:.01em;
}
.pack-preview>.secondary-button.inverted:disabled .icon{opacity:.72}

/* Unlimited gets its own visual language instead of the generic package icon. */
#unlimitedTab>.icon{display:none}
#unlimitedTab::before{
  content:"∞";
  display:inline-block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.5em;
  font-weight:700;
  line-height:.7;
  transform:translateY(-.02em);
}

/* Restore Letter Grid's actual visual identity in the Unlimited library. */
[data-unlimited-game="letter"] .letter-icon{
  position:relative;
  width:66px;
  height:66px;
  flex:0 0 66px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--line) 86%,white);
  border-radius:20px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper2) 74%,white),var(--paper2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
[data-unlimited-game="letter"] .letter-icon>.icon{display:none}
[data-unlimited-game="letter"] .letter-icon::before{
  content:"";
  position:absolute;
  left:12px;
  top:12px;
  width:18px;
  height:18px;
  border-radius:6px;
  background:var(--sun);
  box-shadow:24px 0 0 var(--green),0 24px 0 var(--dark),24px 24px 0 var(--card);
}
[data-unlimited-game="letter"] .letter-icon::after{
  content:"C   L\A U   E";
  white-space:pre;
  position:absolute;
  left:16px;
  top:10px;
  z-index:2;
  font:700 12px/24px Georgia,"Times New Roman",serif;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 1px 2px rgba(41,36,28,.9),0 0 1px rgba(41,36,28,.9);
  pointer-events:none;
}

/* Make activation feel like a finished account control, not a placeholder form. */
.unlimited-access-card{
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--sun) 28%,transparent);
}
.unlimited-access-card::after{
  content:"∞";
  position:absolute;
  right:-18px;
  top:-48px;
  z-index:0;
  font:700 11rem/1 Georgia,"Times New Roman",serif;
  color:rgba(255,255,255,.035);
  pointer-events:none;
}
.unlimited-access-card>*{position:relative;z-index:1}
.unlimited-access-card .archive-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin:14px 0 2px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(223,233,220,.96);
  color:#536950;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
#unlimitedForm{
  margin-top:16px;
  align-items:stretch;
}
#unlimitedForm .text-input{
  min-height:52px;
  border-color:rgba(255,255,255,.38);
  box-shadow:0 6px 16px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.7);
}
#unlimitedForm .secondary-button.inverted{
  min-height:52px;
  padding-inline:20px;
  border-color:#f2dfc5;
  background:linear-gradient(180deg,#fffaf0,#f1dfc8);
  color:var(--dark);
  box-shadow:0 8px 18px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.8);
}
#unlimitedForm .secondary-button.inverted:hover:not(:disabled){
  background:linear-gradient(180deg,#fffdf7,#ead5b9);
  border-color:#fff2df;
}
#openUnlimitedButton{
  min-height:54px;
  margin-top:16px;
  padding:12px 18px;
  border-color:#f2dfc5;
  background:linear-gradient(180deg,#fffaf0,#f1dfc8);
  color:var(--dark);
  box-shadow:0 9px 20px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.82);
}
#openUnlimitedButton:hover:not(:disabled){
  background:linear-gradient(180deg,#fffdf7,#ead5b9);
  border-color:#fff2df;
}
.unlimited-access-card #unlimitedStatus{
  margin-top:14px;
  padding:11px 13px;
  border-radius:12px;
  color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.unlimited-access-card #unlimitedStatus.good{
  color:#f1f5ea;
  background:rgba(101,123,99,.28);
  border-color:rgba(223,233,220,.24);
}
.unlimited-access-card #unlimitedStatus.bad{
  color:#ffe4df;
  background:rgba(156,75,66,.3);
  border-color:rgba(255,228,223,.2);
}

@media (max-width:680px){
  .pack-preview>.secondary-button.inverted:disabled{font-size:.82rem}
  #unlimitedForm{grid-template-columns:1fr}
  #unlimitedForm .secondary-button.inverted,#openUnlimitedButton{width:100%}
}