/* Three augment cards share one row, including on landscape touch screens. */
#scr-levelup{
  padding:24px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left));
  background:#060d17e8;
  backdrop-filter:brightness(.4);
}
#scr-levelup .choices{
  width:min(1200px,100%);max-height:none;padding:0;overflow:visible;
  border:0;background:none;box-shadow:none;text-align:center;
}
.augment-heading .eyebrow{color:#cda96e;letter-spacing:4px;margin-bottom:9px}
#scr-levelup h2{font-size:clamp(30px,3.2vw,46px);margin-bottom:8px;text-shadow:4px 4px 0 #02050b;line-height:1.1}
.augment-subtitle{color:#b6c0c9;font-size:14px;margin-bottom:0}
#lvl-wait:empty{display:none}
#scr-levelup #cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px auto 14px;max-width:1200px}
#cards .augment-card{
  --scroll-height:min(650px,calc(var(--game-height,100dvh) - 230px));
  --tone:#44463f;--focus:#e8e4d1;
  position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;
  min-width:0;min-height:0;height:var(--scroll-height);
  padding:calc(var(--scroll-height)*.20) 16% calc(var(--scroll-height)*.18);
  gap:0;border:0;background:none;color:#352a25;text-align:center;outline:0;
  transition:transform .12s steps(2,end),filter .12s steps(2,end),opacity .12s ease-out;
  filter:drop-shadow(4px 8px 0 #02060c);
}
#cards [data-rarity=prismatic]{--tone:#43583d}
/* The entire scroll, including its paper, rolls and caps, is one generated PNG. */
.augment-frame,.augment-roll{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1;pointer-events:none;image-rendering:pixelated;animation-duration:.32s;animation-timing-function:cubic-bezier(.16,.8,.24,1);animation-delay:calc(var(--deal-order)*.045s);animation-fill-mode:backwards}
.augment-frame{clip-path:inset(18.4% 0 15.6%);animation-name:scroll-paper-open}
.augment-roll-top{clip-path:inset(0 0 81.5%);animation-name:scroll-top-open}
.augment-roll-bottom{clip-path:inset(84.3% 0 0);animation-name:scroll-bottom-open}
#cards .augment-card>.ico,#cards .augment-card>.txt,#cards .augment-card>.augment-action{animation:scroll-content-in .14s ease-out calc(.20s + var(--deal-order)*.045s) backwards}
#cards .augment-card .ico{
  position:relative;isolation:isolate;flex:none;display:grid;place-items:center;
  width:80px;height:80px;margin:0 0 10px;
  background:transparent!important;border:0;border-radius:0;box-shadow:none;
}
#cards .augment-card .ico img{width:72px;height:72px;filter:drop-shadow(2px 2px 0 #b2ac94)}
#cards .augment-card .txt{display:flex;flex-direction:column;align-items:center;flex:1;min-height:0;width:100%}
#cards .augment-card .nm{display:block;align-content:center;flex:none;font-size:34px;font-weight:700;line-height:1.08;min-height:2.16em;width:100%;text-wrap:balance;text-shadow:none}
/* Functional role labels use the same ink for all three categories. */
#cards .augment-category{
  display:inline-flex;align-items:center;justify-content:center;align-self:center;flex:none;
  max-width:100%;margin:4px 0 8px;padding:2px 8px;border:1px solid #8f8b72;
  color:#4a4d3f;background:transparent;font-size:18px;font-weight:700;line-height:1.1;white-space:nowrap;
}
#cards .augment-details{display:flex;align-items:center;justify-content:center;gap:6px;min-height:24px;margin:6px -6px 12px;flex:none;flex-wrap:wrap}
#cards .augment-details .tag-chip{
  background:transparent!important;color:var(--tone);font-size:15px;font-weight:400;
  margin:0;padding:2px 6px;border:1px solid #969885;border-radius:0;
}
#cards .augment-details .cat{color:#626456;border-color:#a7a995}
#cards .augment-card .ds{
  width:100%;padding-top:12px;border-top:2px solid #d1c9ad;flex:1;align-content:center;
  min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  color:#393b32;font-size:24px;line-height:1.3;text-wrap:pretty;
}
#cards .augment-card .fit-low{display:block;margin-top:10px;color:#62634f;font-size:18px;line-height:1.3}
#cards .augment-fit-full{display:none}
#cards .augment-fit-short{display:inline}
#cards .augment-action{
  display:flex;align-items:center;justify-content:center;gap:10px;flex:none;margin-top:8px;
  color:var(--tone);font-size:15px;letter-spacing:1px;text-transform:uppercase;
}
@media(hover:hover){
  #cards:not(.guard):not(.done) .augment-card:hover{transform:translateY(-8px);filter:brightness(1.05) drop-shadow(4px 12px 0 #02060c)}
}
#cards:not(.guard):not(.done) .augment-card:focus-visible{transform:translateY(-8px);outline:2px dashed var(--focus);outline-offset:4px;filter:brightness(1.05) drop-shadow(4px 12px 0 #02060c)}
#cards:not(.guard):not(.done) .augment-card:active{transform:translateY(-2px) scale(.975);filter:brightness(.98) drop-shadow(2px 4px 0 #02060c)}
#cards.guard .augment-card{opacity:1;cursor:wait}
#cards.done .augment-card{pointer-events:none;cursor:default}
#cards.done .augment-card:not(.picked){opacity:.2;transform:scale(.985);filter:grayscale(.6)}
#cards.done .augment-card.picked{animation:scroll-select-confirm .18s ease-out both;filter:brightness(1.08) drop-shadow(4px 8px 0 #02060c)}
.augment-footer{display:flex;flex-direction:column;align-items:center;gap:9px}
#scr-levelup #lvl-reroll{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;
  padding:8px 24px;border:2px solid #737965;color:#e7e4d1;background:#29312b;
  box-shadow:inset 2px 2px 0 #495344,inset -2px -2px 0 #171e19,4px 4px 0 #02060c;font-size:14px;
}
#lvl-reroll .reroll-symbol{position:relative;display:block;width:16px;height:16px;font-size:0}
#lvl-reroll .reroll-symbol:before{content:'';position:absolute;inset:0;background:currentColor;clip-path:polygon(25% 0,75% 0,75% 12.5%,87.5% 12.5%,87.5% 0,100% 0,100% 50%,62.5% 50%,62.5% 37.5%,75% 37.5%,75% 25%,25% 25%,25% 37.5%,12.5% 37.5%,12.5% 75%,25% 75%,25% 87.5%,62.5% 87.5%,62.5% 75%,75% 75%,75% 62.5%,87.5% 62.5%,87.5% 87.5%,75% 87.5%,75% 100%,12.5% 100%,12.5% 87.5%,0 87.5%,0 25%,12.5% 25%,12.5% 12.5%,25% 12.5%)}
#lvl-reroll kbd{font:inherit;font-size:11px;color:#a7b3c0;border:1px solid #5a6066;padding:1px 5px;margin-left:6px}
.augment-footnote{color:#8192a4;font-size:11px;letter-spacing:.5px;margin:0}
@keyframes scroll-paper-open{from{transform:scaleY(.02)}to{transform:scaleY(1)}}
@keyframes scroll-top-open{from{transform:translateY(31.5%)}to{transform:translateY(0)}}
@keyframes scroll-bottom-open{from{transform:translateY(-34.3%)}to{transform:translateY(0)}}
@keyframes scroll-content-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes scroll-select-confirm{
  0%{transform:scale(.975)}
  55%{transform:translateY(-5px) scale(1.035)}
  100%{transform:translateY(-3px) scale(1.015)}
}
@media(max-width:1000px){
  #scr-levelup #cards{gap:0}
  #cards .augment-card .nm{font-size:28px}
  #cards .augment-card .ds{font-size:21px}
}
@media(max-height:800px){
  #scr-levelup{padding-top:12px;padding-bottom:12px}
  .augment-heading .eyebrow{font-size:10px;margin-bottom:5px}
  #scr-levelup h2{font-size:32px;margin-bottom:4px}
  .augment-subtitle{font-size:12px}
  #scr-levelup #cards{margin-top:12px;margin-bottom:12px}
  #cards .augment-card{--scroll-height:min(580px,calc(var(--game-height,100dvh) - 190px))}
  #cards .augment-card .ico{width:64px;height:64px;margin:0 0 6px}
  #cards .augment-card .ico img{width:56px;height:56px}
  #cards .augment-card .nm{font-size:30px}
  #cards .augment-details{margin:4px -8px 8px;min-height:20px}
  #cards .augment-details .tag-chip{font-size:14px}
  #cards .augment-card .ds{font-size:22px;line-height:1.25;padding-top:9px}
  #cards .augment-action{margin-top:8px;font-size:14px}
}
@media(max-height:650px){
  #cards .augment-card .ico{width:48px;height:48px;margin-bottom:4px}
  #cards .augment-card .ico img{width:48px;height:48px}
  #cards .augment-card .nm{font-size:26px}
  #cards .augment-card .ds{font-size:20px}
  #cards .augment-card .fit-low{font-size:16px;margin-top:6px}
  #cards .augment-action{font-size:12px;margin-top:6px}
}
@media(max-height:450px) and (orientation:landscape){
  #scr-levelup{padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
  .augment-heading .eyebrow,.augment-subtitle,.augment-footnote{display:none}
  #scr-levelup h2{font-size:25px;margin:0}
  #scr-levelup #cards{gap:0;margin:2px auto}
  #cards .augment-card{--scroll-height:calc(var(--game-height,100dvh) - 83px)}
  #cards .augment-card .ico{width:36px;height:36px;margin:0 0 2px}
  #cards .augment-card .ico img{width:36px;height:36px}
  #cards .augment-card .nm{font-size:22px;min-height:1.08em}
  #cards .augment-category{font-size:16px;margin:2px 0 4px;padding:1px 6px}
  #cards .augment-details{margin:3px -6px 4px;min-height:16px;gap:3px}
  #cards .augment-details .tag-chip{font-size:12px;padding:0 4px}
  #cards .augment-details .cat{display:none}
  #cards .augment-card .ds{padding-top:5px;font-size:17px;line-height:1.2}
  #cards .augment-card .fit-low{font-size:14px;margin-top:4px}
  #cards .augment-action{display:none}
  #scr-levelup #lvl-reroll{min-height:36px;padding:5px 18px;font-size:12px}
  .augment-footer{gap:0}
}
@media(max-width:600px) and (orientation:portrait){
  #cards .augment-category{font-size:16px;padding:2px 5px}
}
@media(max-height:370px) and (orientation:landscape){
  #cards .augment-card .ico{width:28px;height:28px}
  #cards .augment-card .ico img{width:28px;height:28px}
  #cards .augment-card .nm{font-size:21px}
  #cards .augment-card .ds{font-size:16px}
}
@media(pointer:coarse){#lvl-reroll kbd{display:none}}
@media(prefers-reduced-motion:reduce){
  #cards .augment-card{transition:none}
  #cards.done .augment-card{transform:none}
  #cards.done .augment-card.picked{animation:none}
  #cards .augment-frame,#cards .augment-roll,#cards .augment-card>.ico,#cards .augment-card>.txt,#cards .augment-card>.augment-action{animation:none}
}