/* One default for every popup, including menus created after startup.
   The frame is a nine-slice of the existing generated ivory PNG, not a
   code-drawn scroll. See docs/popup-design-system.md. */
.scr.dim{
  --popup-ink:#34332b;--popup-muted:#64624f;--popup-line:#b4aa89;
  background:#0c1712e8;backdrop-filter:brightness(.45);
  padding:24px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left));
}
.scr.dim .box{
  width:min(760px,100%);max-height:calc(var(--game-height,100dvh) - 48px);
  border:solid transparent;border-width:60px 34px 56px;
  border-image:url('../assets/pixel-v2/scroll-ui/ivory.png') 284 144 242 144 fill / 60px 34px 56px / 0 stretch;
  padding:16px 26px 20px;background:transparent;box-shadow:none;
  color:var(--popup-ink);font-size:20px;line-height:1.4;
  scrollbar-width:thin;scrollbar-color:#797963 #ece3c8;
  filter:drop-shadow(4px 6px 0 #050b0880);
}
.scr.dim .box.wide{width:min(1040px,100%)}
.scr.dim .box h2{font-size:36px;line-height:1.1;margin:0 0 18px;text-wrap:balance}
.scr.dim .box h2[tabindex="-1"]:focus{outline:none}
.scr.dim .box h3{font-size:25px;color:#484b38;margin:22px 0 10px}
.scr.dim .box p{font-size:20px;line-height:1.4;overflow-wrap:anywhere}
.scr.dim .box .eyebrow{color:#61634e;font-size:13px;line-height:1.3;letter-spacing:2px;margin:0 0 10px}
.scr.dim .box .sub{color:var(--popup-muted);font-size:18px}
.scr.dim .box a{color:#754728;text-decoration-thickness:1px;text-underline-offset:3px}
.scr.dim .btn{
  font-size:19px;line-height:1.15;min-height:44px;padding:10px 20px;
  background:#303b30;border:2px solid #6b735a;color:#f8efd7;
  box-shadow:inset 0 -3px #1d291f,2px 3px 0 #34332b33;
}
.scr.dim .btn:hover{background:#47533c;border-color:#81896a}
.scr.dim .btn.gold{background:#bd582c;border-color:#8e462b;color:#fff0d2;box-shadow:inset 0 -3px #934325,2px 3px 0 #34332b33}
.scr.dim .btn.gold:hover{background:#cf6a34}
.scr.dim .btn:active{transform:translateY(2px);box-shadow:inset 0 -1px #1d291f}
.scr.dim :is(button,input,select,[role=button]):focus-visible{outline:3px solid #a34e28;outline-offset:3px}
.scr.dim .box>.btn{margin-top:18px}
.scr.dim .box .actions{position:sticky;bottom:-20px;margin-bottom:-20px;padding:14px 0 20px;background:#f6ecd1;border-top:1px solid var(--popup-line);z-index:1}
.scr.dim .summary,.scr.dim .sum-stats{gap:10px;margin:18px 0}
.scr.dim .summary>div,.scr.dim .sum-stats>div{background:#dfd6b866;border:1px solid var(--popup-line);padding:12px 16px}
.scr.dim .summary span,.scr.dim .sum-stats span{font-size:17px;color:var(--popup-muted);margin-bottom:4px}
.scr.dim .summary b{font-size:28px}
.scr.dim .move-summary>span{display:inline-flex;align-items:center;gap:6px;background:#e5ddc0;border:1px solid var(--popup-line);font-size:18px;padding:8px}
.scr.dim .snd-row{font-size:20px;gap:18px;margin:18px 0}
.scr.dim .snd-row input{min-height:32px;min-width:0;accent-color:#576443}
.scr.dim .box #hero-kit{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.scr.dim .box #hero-kit span{display:flex;align-items:center;gap:8px;background:#e5ddc0;border:1px solid var(--popup-line);color:var(--popup-ink);font-size:19px;line-height:1.25;padding:10px}
.scr.dim .training-card{background:#e5ddc066;border:1px solid var(--popup-line);font-size:20px;padding:16px;gap:10px}
.scr.dim .training-card small{color:var(--popup-muted);font-size:17px;line-height:1.3}
.scr.dim .training-card .btn{font-size:18px}
.scr.dim select{font:18px Pixelify,monospace;max-width:100%;min-height:44px;padding:7px;color:#f8efd7;background:#303b30;border:2px solid #6b735a;color-scheme:dark}
#scr-missions #mission-select h2{font-size:25px;margin-bottom:14px}
#scr-missions .mission-grid{gap:10px}
#scr-missions :is(.mission-grid,.mission-variants) button{font:20px Pixelify,monospace;min-height:48px;background:#e5ddc0;color:#34332b;border:2px solid #aaa382;padding:10px}
#scr-missions :is(.mission-grid,.mission-variants) button[aria-pressed=true]{background:#354532;color:#fff0d2;border-color:#5d704a;box-shadow:inset 0 -3px #21321f}
#scr-missions :is(.mission-grid,.mission-variants) button:disabled{opacity:.6}
#scr-missions #mission-goal{font-size:20px;margin:18px 0}
#scr-missions .mission-variants{margin-top:14px}

/* Selection decks share the generated scrolls with level-up choices. */
.scr.dim:is(#scr-levelup,#scr-bond,#scr-item) .box.choices{
  width:min(1320px,100%);max-height:none;border:0;border-image:none;
  padding:0;background:none;box-shadow:none;filter:none;overflow:visible;
  color:#f1ead2;text-align:center;margin:auto;
}
.scr.dim:is(#scr-levelup,#scr-bond,#scr-item) .box h2{color:#f1ead2;text-shadow:3px 3px 0 #050c08;margin-bottom:8px}
.scr.dim:is(#scr-levelup,#scr-bond,#scr-item) .box .eyebrow{color:#c5b78f}
.scr.dim:is(#scr-levelup,#scr-bond,#scr-item) .box .sub{color:#c5ceb9;font-size:20px;margin-bottom:8px}
.scr.dim:is(#scr-bond,#scr-item) .box>.btn{margin:8px 0 0}
.scr.dim:is(#scr-bond,#scr-item) .box .choice-hint{font-size:16px;line-height:1.2;color:#c5ceb9;margin:6px 0 0}
.choice-hint[hidden]{display:none}
:is(#bond-cards,#item-cards){
  display:grid;grid-template-columns:repeat(var(--choice-count),minmax(0,1fr));
  justify-content:center;gap:8px;margin:8px auto 0;width:min(100%,calc(var(--choice-count)*330px));
}
:is(#bond-cards,#item-cards) .choice-scroll{
  --scroll-height:min(620px,calc(var(--game-height,100dvh) - 190px));
  position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;
  min-height:0;min-width:0;height:var(--scroll-height);padding:calc(var(--scroll-height)*.20) 16% calc(var(--scroll-height)*.18);
  gap:0;background:none;border:0;outline:0;color:#34332b;text-align:center;
  transform:none;filter:drop-shadow(3px 6px 0 #030907);transition:transform .12s steps(2,end),filter .12s steps(2,end);
}
:is(#bond-cards,#item-cards) .choice-scroll>.ico,:is(#bond-cards,#item-cards) .choice-scroll>.txt{animation:scroll-content-in .14s ease-out calc(.20s + var(--deal-order)*.045s) backwards}
:is(#bond-cards,#item-cards) .choice-scroll .ico{display:grid;place-items:center;flex:none;width:64px;height:64px;margin:0 0 8px;background:transparent!important;border:0}
:is(#bond-cards,#item-cards) .choice-scroll .ico img{width:56px;height:56px;filter:drop-shadow(2px 2px 0 #b2ac94)}
:is(#bond-cards,#item-cards) .choice-scroll .txt{display:flex;flex-direction:column;align-items:center;flex:1;min-height:0;width:100%}
:is(#bond-cards,#item-cards) .choice-scroll .nm{font-size:30px;font-weight:700;line-height:1.08;text-wrap:balance;flex:none}
:is(#bond-cards,#item-cards) .scroll-details{display:flex;justify-content:center;gap:6px;margin:8px 0 12px;flex:none}
:is(#bond-cards,#item-cards) .tag-chip{font-size:16px;font-weight:400;background:transparent!important;color:#61634f;border:1px solid #aaa48a;margin:0;padding:1px 7px}
:is(#bond-cards,#item-cards) .choice-scroll .ds{color:#3f4135;font-size:23px;line-height:1.3;flex:1;min-height:0;width:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;align-content:center;text-wrap:pretty}
#item-cards .choice-scroll .ds{margin-top:16px;padding-top:14px;border-top:2px solid #d1c9ad}
:is(#bond-cards,#item-cards).guard .card{opacity:1;cursor:wait}
@media(hover:hover){:is(#bond-cards,#item-cards):not(.guard) .choice-scroll:hover{transform:translateY(-6px);filter:brightness(1.05) drop-shadow(3px 10px 0 #030907)}}
:is(#bond-cards,#item-cards):not(.guard) .choice-scroll:focus-visible{outline:2px dashed #eee2bc;outline-offset:2px;transform:translateY(-4px)}
:is(#bond-cards,#item-cards):not(.guard) .choice-scroll:active{transform:translateY(-2px) scale(.975);filter:brightness(1.07) drop-shadow(2px 3px 0 #030907)}

/* Small functional overlays use the same ink/paper and forest palette. */
.toast,#ach-pop:not(:empty){background:#eee3c5;color:#34332b;border:2px solid #6c7058;box-shadow:3px 4px 0 #07110c;font-size:19px;padding:12px 18px;max-width:min(440px,calc(100vw - 24px))}
#ach-pop>:not(div){display:none}
#ach-pop small{display:block;margin-top:5px;font-size:17px;color:#64624f}
#rotate{background:#14271c;color:#eee6cc;padding:28px}
#rotate h2{font-size:32px}
#rotate p{font-size:20px;color:#c4cbb5}
#rotate .btn{background:#303b30;border-color:#899078;font-size:20px;color:#f8efd7}

@media(max-width:1100px){
  :is(#bond-cards,#item-cards) .choice-scroll .nm{font-size:27px}
  :is(#bond-cards,#item-cards) .choice-scroll .ds{font-size:21px}
}
@media(max-width:750px){
  .scr.dim{padding:12px}
  .scr.dim .box{max-height:calc(var(--game-height,100dvh) - 24px);border-width:46px 22px 42px;border-image-width:46px 22px 42px;padding:12px 15px 16px}
  .scr.dim .box h2{font-size:30px}
  .scr.dim .box #hero-kit{grid-template-columns:1fr}
  #training-list{grid-template-columns:1fr}
  :is(#bond-cards,#item-cards){gap:0}
}
@media(max-height:650px){
  .scr.dim{padding-block:12px}
  .scr.dim .box{max-height:calc(var(--game-height,100dvh) - 24px);border-top-width:42px;border-bottom-width:40px;border-image-width:42px 34px 40px;padding-top:10px}
  .scr.dim .box h2{font-size:30px;margin-bottom:10px}
  .scr.dim:is(#scr-bond,#scr-item) .box .eyebrow{display:none}
  :is(#bond-cards,#item-cards) .choice-scroll{--scroll-height:calc(var(--game-height,100dvh) - 136px)}
  :is(#bond-cards,#item-cards) .choice-scroll .ico{width:40px;height:40px;margin-bottom:5px}
  :is(#bond-cards,#item-cards) .choice-scroll .ico img{width:40px;height:40px}
  :is(#bond-cards,#item-cards) .choice-scroll .nm{font-size:25px}
  :is(#bond-cards,#item-cards) .choice-scroll .ds{font-size:20px}
  :is(#bond-cards,#item-cards) .scroll-details{margin:5px 0 7px}
}
@media(max-width:800px) and (orientation:portrait){
  /* Portrait choices retain full-width generated paper and readable text. */
  :is(#bond-cards,#item-cards){grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  :is(#bond-cards,#item-cards) .choice-scroll{--scroll-height:460px}
  .scr.dim:is(#scr-bond,#scr-item){align-items:flex-start}
}
@media(max-height:450px) and (orientation:landscape){
  .scr.dim{padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
  .scr.dim .box{max-height:calc(var(--game-height,100dvh) - 16px)}
  .scr.dim:is(#scr-bond,#scr-item) .box h2{font-size:26px;margin:0 0 3px}
  .scr.dim:is(#scr-bond,#scr-item) .box .sub{font-size:18px;margin-bottom:2px}
  :is(#bond-cards,#item-cards){display:flex;flex-direction:row;width:100%;margin-top:0;gap:0;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#8b9177 #18291c}
  :is(#bond-cards,#item-cards) .choice-scroll{--scroll-height:calc(var(--game-height,100dvh) - 112px);padding-top:calc(var(--scroll-height)*.19);padding-bottom:calc(var(--scroll-height)*.17)}
  :is(#bond-cards,#item-cards) .choice-scroll{flex:1 0 max(240px,calc(100% / var(--choice-count)));padding-left:38px;padding-right:38px;scroll-snap-align:start}
  :is(#bond-cards,#item-cards) .choice-scroll .ico{display:none}
  :is(#bond-cards,#item-cards) .choice-scroll .nm{font-size:22px}
  :is(#bond-cards,#item-cards) .choice-scroll .ds{font-size:18px;line-height:1.2}
  :is(#bond-cards,#item-cards) .scroll-details{margin:3px 0 5px}
  :is(#bond-cards,#item-cards) .tag-chip{font-size:14px}
  #item-cards .choice-scroll .ds{margin-top:6px;padding-top:6px}
  .scr.dim:is(#scr-bond,#scr-item) .box>.btn{margin-top:0;min-height:36px;font-size:17px;padding:6px 16px}
}
@media(prefers-reduced-motion:reduce){
  :is(#bond-cards,#item-cards) .choice-scroll{transition:none}
  :is(#bond-cards,#item-cards) .choice-scroll:active{transform:none}
  :is(#bond-cards,#item-cards) .choice-scroll>img,:is(#bond-cards,#item-cards) .choice-scroll>.ico,:is(#bond-cards,#item-cards) .choice-scroll>.txt{animation:none}
}
/* Selection stays on the same generated paper until a second jutsu is chosen. */
#scr-bond .card.bond-selected{filter:drop-shadow(0 0 7px #f4bf60);outline:3px solid #f4bf60;outline-offset:-6px}

#bond-cards .bond-unavailable{opacity:.35;cursor:default;filter:grayscale(.7)}