/* Grand Line Legends: pirate-manga skin. Ink outlines, halftone, slanted comic plates, wanted-poster paper and red stamps.
   Loads after gacha.css and restyles it; layout for the dock, the home port and the Battle hub lives here too. */
:root {
  --ink: #0b0e1c; --ink2: #171c36; --paper: #f7edd4; --paper2: #e6d2a3; --paper-ink: #2a1c0c;
  --red: #d7262e; --red-d: #7d0f16; --gold: #ffc43d; --sea: #29c3d6;
  --text: #fbf5e6; --muted: #b8bfd9; --line: rgba(247,237,212,.2);
  --panel: rgba(14,17,34,.94);
  --dots: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.5px) 0 0 / 7px 7px;
  --paper-dots: radial-gradient(rgba(90,60,20,.12) 1px, transparent 1.5px) 0 0 / 6px 6px;
  --frame: 0 0 0 2px var(--paper), 6px 6px 0 2px #000;
  --dock: 0px;
}
body.docked { --dock: 84px; }
#screen { position: absolute; inset: 0 0 var(--dock) 0; }

/* ---------- panels and modals: manga panels with a paper rule and a hard ink shadow */
.panel, .modal, .v-panel, .raid-page, .sum-page .pity, .sel-pick, .sr-grid {
  background: var(--dots), linear-gradient(165deg, #1b2142, #0d1020 70%);
  border: 3px solid #000; border-radius: 6px; box-shadow: var(--frame);
}
.panel { top: 70px; max-height: calc(100% - 84px); backdrop-filter: none; }
.modal { border-color: #000 !important; box-shadow: 0 0 0 3px var(--paper), 10px 10px 0 3px #000; animation: slam .22s cubic-bezier(.2,1.4,.4,1); }
@keyframes slam { from { transform: scale(1.12) rotate(-1deg); opacity: 0 } }
.modal-bg { background: var(--dots), rgba(4,6,16,.72); }
.modal h2, .p-head h2, .m-head h2, .v-panel h2, .bt-head h2 {
  font: 34px/1 Bangers, sans-serif; letter-spacing: 1.5px; color: var(--paper); font-weight: 400;
  text-shadow: 3px 3px 0 var(--red), 5px 5px 0 #000;
}
.p-head h2 small { font: 16px 'Lilita One'; color: var(--muted); text-shadow: none; }
.m-sub, .hint { color: var(--muted); }
.modal .x { width: 34px; height: 34px; top: 8px; right: 8px; background: var(--red); border: 2px solid #000; border-radius: 4px; box-shadow: 2px 2px 0 #000; font-size: 16px; }

/* ---------- buttons: slanted comic plates */
.btn {
  transform: skewX(-7deg); border: 3px solid #000; border-radius: 5px;
  background: linear-gradient(#ffe07a, #f4a21d); color: #261400;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 4px 4px 0 #000; text-shadow: none;
}
.btn:active { transform: skewX(-7deg) translate(3px, 3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 1px 1px 0 #000; }
.btn.small { box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 3px 3px 0 #000; border-width: 2px; }
.btn.big { background: linear-gradient(#ff6a5c, var(--red) 55%, #a8121b); color: #fff; text-shadow: 2px 2px 0 #000; }
.btn.ghost { background: rgba(255,255,255,.08); color: var(--text); border-color: #000; box-shadow: 0 0 0 1px var(--line), 3px 3px 0 #000; }
.btn.on { background: linear-gradient(#a6ffb0, #2cbf5a); box-shadow: 4px 4px 0 #000; }
.badge { background: var(--red); border: 2px solid #000; border-radius: 4px; transform: rotate(6deg); box-shadow: 2px 2px 0 #000; font: 14px/20px 'Lilita One'; height: 22px; min-width: 22px; }

/* ---------- toasts: torn paper notes */
.toast { background: var(--paper-dots), var(--paper); color: var(--paper-ink); border: 3px solid #000; border-radius: 3px; box-shadow: 5px 5px 0 #000; transform: rotate(-1deg); font-weight: 700; }
.toast b { color: var(--red-d); }

/* ---------- top bar: captain plate, purse, settings */
#topbar { padding: 8px 12px; gap: 10px; background: linear-gradient(rgba(6,8,18,.85), rgba(6,8,18,0)); }
#topbar button { border-radius: 5px; border: 2px solid #000; box-shadow: 0 0 0 1px var(--line), 3px 3px 0 #000; background: var(--ink2); }
#topbar .tb-back { width: 44px; height: 44px; font: 24px 'Lilita One'; background: var(--red); transform: skewX(-7deg); }
#topbar .tb-cap { width: auto; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 4px; transform: skewX(-7deg);
  background: var(--paper-dots), var(--paper); color: var(--paper-ink); border: 3px solid #000; box-shadow: 3px 3px 0 #000; }
.tb-cap > * { transform: skewX(7deg); }
.cap-face { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--red); background: #26305c center 10% / 150% auto no-repeat; box-shadow: 0 0 0 2px #000; }
.cap-t { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; text-align: left; }
.cap-t small { font: 800 10px Nunito; text-transform: uppercase; letter-spacing: 1px; opacity: .75; }
.cap-t b { font: 24px/1 Bangers; color: var(--red); }
.cap-t .bar { grid-column: 1 / 3; width: 104px; height: 6px; background: rgba(42,28,12,.25); }
.cap-t .bar i { background: linear-gradient(90deg, var(--red), #ff8a4a); }
.tb-cur { display: flex; gap: 0; background: rgba(8,10,22,.9); border: 2px solid #000; box-shadow: 0 0 0 1px var(--line), 3px 3px 0 #000; border-radius: 5px; transform: skewX(-7deg); }
.tb-cur .cur { background: none; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 6px 12px; display: flex; align-items: center; gap: 5px; font: 17px 'Lilita One'; transform: skewX(7deg); }
.tb-cur .cur:last-child { border-right: 0; }
.tb-cur .cur i { font-style: normal; font-size: 15px; }
.tb-cur .cur.berries i { font: 18px Bangers; color: var(--gold); }
#topbar .tb-cur .cur.pose { width: auto; height: auto; box-shadow: none; border: 0; background: none; }
.tb-cur .cur small { font: 12px 'Lilita One'; opacity: .6; }
#topbar .tb-mute { margin-left: auto; width: 40px; height: 40px; }
#topbar .tb-set { width: 40px; height: 40px; font-size: 20px; }

/* ---------- the dock */
#dock { position: absolute; left: 0; right: 0; bottom: 0; height: var(--dock); display: none; align-items: flex-end; justify-content: center; gap: 6px; padding: 0 8px 8px; z-index: 6;
  background: linear-gradient(rgba(6,8,18,0), rgba(6,8,18,.9) 45%); pointer-events: none; }
#dock.on { display: flex; }
.dk { pointer-events: auto; position: relative; width: 96px; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer;
  background: var(--dots), linear-gradient(#1f2650, #0d1020); color: var(--text); border: 3px solid #000; border-radius: 5px; box-shadow: 0 0 0 1px var(--line), 4px 4px 0 #000;
  transform: skewX(-8deg); font: 14px 'Lilita One'; transition: transform .12s; }
.dk > i, .dk > span { transform: skewX(8deg); }
.dk > i { font-style: normal; font-size: 24px; line-height: 1; filter: drop-shadow(1px 2px 0 #000); }
.dk:hover { transform: skewX(-8deg) translateY(-3px); }
.dk.on { background: var(--paper-dots), var(--paper); color: var(--paper-ink); box-shadow: 0 0 0 2px var(--red), 4px 4px 0 #000; transform: skewX(-8deg) translateY(-4px); }
.dk.on::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: 5px; height: 3px; background: var(--red); }
/* the summon tab: a ship's wheel with a jewel in the hub */
.dk-summon { width: 104px; height: 104px; margin: 0 6px; border-radius: 50%; transform: none; border: 0; background: none; box-shadow: none; }
.dk-summon::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 4px solid #000; background: radial-gradient(circle, #ff5ad8 0 30%, #7a1d9a 31% 45%, transparent 46%),
  repeating-conic-gradient(#c88a2c 0 9deg, #5a3510 9deg 36deg); box-shadow: 0 0 0 3px var(--gold), 0 0 24px rgba(255,90,216,.55), 4px 6px 0 #000; animation: wheel 18s linear infinite; }
.dk-summon > i, .dk-summon > span { position: relative; transform: none; }
.dk-summon > i { font-size: 34px; margin-top: -6px; }
.dk-summon > span { position: absolute; bottom: -6px; background: var(--red); color: #fff; border: 2px solid #000; padding: 0 8px; border-radius: 3px; font-size: 13px; box-shadow: 2px 2px 0 #000; }
.dk-summon:hover, .dk-summon.on { transform: scale(1.06); }
.dk-summon.on::before { box-shadow: 0 0 0 3px #fff, 0 0 30px rgba(255,90,216,.85), 4px 6px 0 #000; }
.dk-summon.on { background: none; box-shadow: none; }
.dk-summon.on::after { display: none; }
@keyframes wheel { to { rotate: 360deg } }
.dk .badge { top: -10px; right: -8px; transform: skewX(8deg) rotate(6deg); }
.dk-summon .badge { top: 2px; right: -8px; transform: rotate(8deg); }

/* ---------- home port */
.rail { position: absolute; left: 10px; top: 74px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.rl { position: relative; width: 66px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
  background: var(--dots), linear-gradient(#1f2650, #0d1020); color: var(--text); border: 2px solid #000; border-radius: 5px; box-shadow: 0 0 0 1px var(--line), 3px 3px 0 #000; font: 11px 'Lilita One'; transition: transform .1s; }
.rl > i { font-style: normal; font-size: 22px; line-height: 1; }
.rl:hover { transform: translateX(3px); border-color: var(--gold); }
.rl .badge { top: -8px; right: -8px; }
.rail-pop { display: none; position: absolute; left: 76px; bottom: 0; width: 220px; padding: 10px; background: var(--dots), linear-gradient(165deg, #1b2142, #0d1020); border: 3px solid #000; border-radius: 6px; box-shadow: var(--frame); }
.rail.pop .rail-pop { display: block; animation: slam .18s; }
.rail-pop .h-social { margin: 0; }
.h-log { position: absolute; left: 90px; top: 74px; width: 290px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.h-log > * { pointer-events: auto; }
.hl-card { position: relative; padding: 12px 14px 10px; background: var(--paper-dots), linear-gradient(var(--paper), var(--paper2)); color: var(--paper-ink); border: 3px solid #000; border-radius: 3px; box-shadow: 6px 6px 0 #000; transform: rotate(-.8deg); }
.hl-head b { display: block; font: 26px/1 Bangers; letter-spacing: 1px; color: var(--red); }
.hl-head small { font: 800 11px Nunito; opacity: .7; }
.hl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 6px; }
.hl-stats div { border-top: 2px solid var(--paper-ink); padding-top: 3px; }
.hl-stats small { display: block; font: 800 10px Nunito; text-transform: uppercase; letter-spacing: 1px; opacity: .65; }
.hl-stats b { font: 22px 'Lilita One'; font-weight: 400; } .hl-stats b i { font-style: normal; font-size: 14px; opacity: .55; }
.hl-card .h-goal { color: var(--paper-ink); font-size: 12.5px; border-top: 2px dashed rgba(42,28,12,.4); padding-top: 6px; }
.hl-card .h-goal small { display: block; font: 800 10px Nunito; text-transform: uppercase; letter-spacing: 1px; color: var(--red-d); }
.hl-card .h-goal i { font-style: normal; opacity: .6; }
.hl-today { background: var(--dots), linear-gradient(165deg, #1b2142, #0d1020); border: 3px solid #000; border-radius: 5px; box-shadow: 0 0 0 1px var(--line), 5px 5px 0 #000; }
.ht-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: none; border: 0; color: var(--text); cursor: pointer; }
.ht-head b { font: 22px/1 Bangers; letter-spacing: 1px; }
.ht-n { font: 14px 'Lilita One'; background: var(--red); border: 2px solid #000; padding: 0 7px; border-radius: 3px; } .ht-n.all { background: #2cbf5a; }
.ht-head i { margin-left: auto; font-style: normal; transition: transform .2s; }
.hl-today.open .ht-head i { transform: rotate(180deg); }
.hl-today:not(.open) .h-daily { display: none; }
.hl-today .h-daily { margin: 0; padding: 0 10px 10px; }
.hd { border-radius: 3px; border-color: rgba(255,255,255,.12); }
.h-camp { color: #9fe6ff; background: rgba(8,10,22,.85); border-left: 4px solid var(--sea); padding: 5px 8px; margin: 0; }
.h-right { position: absolute; right: 12px; top: 74px; width: 330px; display: flex; flex-direction: column; gap: 12px; }
.feat, .cont { position: relative; display: block; width: 100%; text-align: left; cursor: pointer; overflow: hidden; color: #fff; border: 3px solid #000; border-radius: 5px; box-shadow: var(--frame); transition: transform .12s; }
.feat:hover, .cont:hover { transform: translateY(-3px); }
.feat { height: 178px; padding: 12px 14px; background: linear-gradient(100deg, rgba(8,8,20,.9) 18%, rgba(8,8,20,.2) 60%, transparent), var(--art) 78% 12% / 62% auto no-repeat, var(--dots), radial-gradient(circle at 75% 40%, var(--bc), #120a2a 75%); }
.feat.swap { animation: featIn .45s ease-out; }
@keyframes featIn { from { background-position: 0 0, 120% 12%, 0 0, 0 0; opacity: .4 } }
.feat::before { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 75% 45%, rgba(255,255,255,.08) 0 5deg, transparent 5deg 15deg); pointer-events: none; }
.ft-kind { position: relative; display: inline-block; font: 800 11px Nunito; letter-spacing: 1px; text-transform: uppercase; background: var(--red); border: 2px solid #000; padding: 1px 8px; transform: skewX(-8deg); }
.feat b { position: relative; display: block; max-width: 62%; margin-top: 6px; font: 30px/0.95 Bangers; letter-spacing: 1px; text-shadow: 3px 3px 0 #000; }
.feat small { position: relative; display: block; margin-top: 4px; font: 800 12px Nunito; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.ft-go { position: absolute; left: 14px; bottom: 12px; font: 17px 'Lilita One'; background: linear-gradient(#ffe07a, #f4a21d); color: #261400; border: 2px solid #000; padding: 3px 12px; transform: skewX(-8deg); box-shadow: 3px 3px 0 #000; }
.ft-dots { position: absolute; right: 12px; bottom: 10px; display: flex; gap: 4px; }
.ft-dots i { width: 8px; height: 8px; border: 2px solid #000; background: rgba(255,255,255,.35); transform: rotate(45deg); }
.ft-dots i.on { background: var(--gold); }
.cont { height: 112px; padding: 10px 14px; background: linear-gradient(100deg, rgba(8,10,22,.92) 30%, rgba(8,10,22,.25) 75%), var(--art) center 40% / cover; }
.cont .stamp { display: inline-block; font: 13px Bangers; letter-spacing: 2px; color: var(--red); background: var(--paper); border: 2px solid #000; padding: 0 8px; transform: rotate(-3deg); }
.cont b { display: block; margin-top: 4px; font: 26px/1 Bangers; letter-spacing: 1px; text-shadow: 3px 3px 0 #000; }
.cont > span { font: 700 13px Nunito; color: #dfe6ff; } .cont .pow { font-style: normal; }
.cont em { position: absolute; right: 12px; bottom: 10px; font: 18px 'Lilita One'; font-style: normal; background: linear-gradient(#ff6a5c, var(--red)); border: 2px solid #000; padding: 3px 12px; transform: skewX(-8deg); box-shadow: 3px 3px 0 #000; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { translate: 4px 0 } }
.h-right .hold { position: relative; top: auto; right: auto; bottom: auto; width: 100%; border: 3px solid #000; border-radius: 5px; box-shadow: var(--frame); background: var(--paper-dots), linear-gradient(var(--paper), var(--paper2)); color: var(--paper-ink); }
.h-right .hold .hold-t b { color: var(--red-d); } .h-right .hold small { color: var(--paper-ink); }
.h-right .hold .bar { background: rgba(42,28,12,.25); }
.h-right .hold.full { box-shadow: 0 0 0 2px var(--gold), 0 0 20px rgba(255,196,61,.8), 6px 6px 0 2px #000; }

/* ---------- Battle hub */
.bt-page { position: absolute; inset: 70px 14px 6px; overflow-y: auto; padding: 4px 10px 12px 4px; pointer-events: auto; }
.bt-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.bt-head h2 { margin: 0; font-size: 42px; }
.bt-head span { font: 15px 'Lilita One'; color: var(--muted); }
.bt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 14px; }
.bt { position: relative; height: 128px; overflow: hidden; cursor: pointer; text-align: left; color: #fff; padding: 10px 14px; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(5,6,14,.92)), var(--art) center 30% / cover; border: 3px solid #000; border-radius: 4px; box-shadow: var(--frame); transform: skewX(-3deg); transition: transform .12s; }
.bt:hover { transform: skewX(-3deg) translateY(-4px); }
.bt > * { transform: skewX(3deg); }
.bt i { position: absolute; top: 8px; left: 10px; font-style: normal; font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--red); border: 2px solid #000; border-radius: 50%; box-shadow: 2px 2px 0 #000; }
.bt b { font: 26px/1 Bangers; letter-spacing: 1px; text-shadow: 2px 2px 0 #000, 0 0 10px #000; }
.bt small { font: 800 12px Nunito; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.bt-raid { grid-column: span 2; height: 180px; }
.bt-raid b { font-size: 40px; }
.bt.lock { filter: grayscale(1) brightness(.55); }
.bt.lock small { color: #ddd; }
.bt.alert { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(255,196,61,.75), 6px 6px 0 2px #000; }
.bt.alert::after { content: '!'; position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; display: grid; place-items: center; font: 18px 'Lilita One'; background: var(--gold); color: #000; border: 2px solid #000; transform: rotate(8deg) skewX(3deg); }

/* ---------- crew / team tabs */
.seg { display: flex; gap: 6px; margin-right: 6px; }
.seg button { font: 16px 'Lilita One'; padding: 6px 14px; cursor: pointer; color: var(--text); background: rgba(255,255,255,.06); border: 2px solid #000; border-radius: 4px; box-shadow: 0 0 0 1px var(--line), 3px 3px 0 #000; transform: skewX(-8deg); }
.seg button.on { background: var(--paper); color: var(--paper-ink); box-shadow: 0 0 0 2px var(--red), 3px 3px 0 #000; }
.sorts button { border-radius: 3px; border-color: #000; }

/* ---------- team tools: auto-assemble and saved crews */
.tm-tools { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 10px; }
.tm-auto, .tm-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tm-auto > b, .tm-saved > b { font: 18px/1 Bangers; letter-spacing: 1px; color: var(--paper); min-width: 118px; }
.tm-auto .btn { font-size: 14px; padding: 5px 12px; }
.tp { display: flex; align-items: center; gap: 6px; height: 44px; min-width: 120px; padding: 0 10px 0 4px; cursor: pointer; color: var(--paper-ink); text-align: left;
  background: var(--paper-dots), var(--paper); border: 2px solid #000; border-radius: 4px; box-shadow: 3px 3px 0 #000; transform: skewX(-6deg); transition: transform .1s; }
.tp > * { transform: skewX(6deg); }
.tp:hover { transform: skewX(-6deg) translateY(-2px); }
.tp-face { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px solid var(--red); box-shadow: 0 0 0 2px #000; background: #26305c center 10% / 150% auto no-repeat; }
.tp-t { display: flex; flex-direction: column; line-height: 1.05; }
.tp-t em { font: 15px 'Lilita One'; font-style: normal; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-t small { font: 800 11px Nunito; color: var(--red-d); }
.tp.empty { justify-content: center; color: var(--muted); font: 13px 'Lilita One'; background: rgba(255,255,255,.05); border-style: dashed; border-color: var(--line); box-shadow: none; }
.tp.saving { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(255,196,61,.6), 3px 3px 0 #000; animation: bob .7s ease-in-out infinite alternate; }
.tp.empty.saving { color: var(--gold); border-color: var(--gold); }
.tp-prev { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }
.tp-prev .thumb { width: 72px; height: 88px; pointer-events: none; }
.tp-name { display: flex; align-items: center; gap: 10px; font: 16px 'Lilita One'; margin: 8px 0; }
.tp-name input { flex: 1; font: 700 16px Nunito; padding: 8px 10px; color: var(--paper-ink); background: var(--paper); border: 2px solid #000; border-radius: 3px; box-shadow: inset 2px 2px 0 rgba(0,0,0,.15); user-select: text; }
@media (max-width: 760px) {
  .tm-auto > b, .tm-saved > b { width: 100%; min-width: 0; font-size: 16px; }
  .tm-auto .btn { font-size: 12px; padding: 4px 8px; }
  /* the team panel scrolls as one page, with all five slots on a single row */
  .team-panel { overflow-y: auto; }
  .team-panel .grid { overflow: visible; flex: none; }
  .team-panel .slots { flex-wrap: nowrap; gap: 6px; }
  .team-panel .slot { width: 62px; height: 78px; }
  .team-panel .slot .thumb { width: 56px; height: 70px; }
  .team-panel .slot .cap { font-size: 9px; padding: 0 5px; top: -10px; }
  .tp { min-width: 0; flex: 1 1 30%; height: 40px; } .tp-face { width: 28px; height: 28px; } .tp-t em { font-size: 13px; max-width: 70px; }
}

/* ---------- unit cards */
.thumb { border-radius: 5px; border: 2px solid #000; box-shadow: 0 0 0 2px var(--r3), 3px 3px 0 2px #000; }
.thumb.r4 { border-color: #000; box-shadow: 0 0 0 2px var(--r4), 3px 3px 0 2px #000; }
.thumb.r5 { border-color: #000; box-shadow: 0 0 0 2px var(--r5), 0 0 12px rgba(255,107,213,.7), 3px 3px 0 2px #000; }
.th-lv { background: linear-gradient(transparent, rgba(0,0,0,.85) 35%); }
.th-label { background: var(--red); border-top: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(-6deg); left: -6px; right: -6px; }
.grid { gap: 12px; padding: 6px; }

/* ---------- summon page */
.sum-page { top: 66px; bottom: 0; overflow-y: auto; overflow-x: hidden; padding: 0 10px 0 4px; scrollbar-width: thin; }
.sum-page .banner { height: min(40vh, 330px); flex: none; }
/* the pull buttons stay pinned at the bottom while the page scrolls */
.sum-btns { position: sticky; bottom: 0; z-index: 3; width: 100%; padding: 14px 0 10px; background: linear-gradient(rgba(6,8,18,0), rgba(6,8,18,.92) 45%); }
.sum-tabs button { border: 2px solid #000; border-radius: 4px; transform: skewX(-8deg); box-shadow: 3px 3px 0 #000; margin-bottom: 4px; background: var(--ink2); }
.sum-tabs button.on { background: var(--paper); color: var(--paper-ink); box-shadow: 0 0 0 2px var(--red), 3px 3px 0 #000; }
.banner { border: 3px solid #000; border-radius: 5px; box-shadow: var(--frame); }
.sum-page .pity { border-radius: 4px; }
.pity.hot { box-shadow: 0 0 0 2px #ff6a3a, 0 0 18px rgba(255,90,40,.7), 6px 6px 0 2px #000; }
.pity.hot span b { color: #ffb36a; }
.pity.hot .pity-bar i { background: linear-gradient(90deg, #ff3a2a, #ffd34a); animation: heat .8s ease-in-out infinite alternate; }
@keyframes heat { to { filter: brightness(1.5) } }
.sum-btns .pull10 { background: linear-gradient(#ff7ae0, #d02a9e 55%, #7a0f62); color: #fff; text-shadow: 2px 2px 0 #000; position: relative; overflow: hidden; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 0 0 2px var(--gold), 5px 5px 0 2px #000; }
.sum-btns .pull10::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: shine 2.6s ease-in-out infinite; }
@keyframes shine { 60%, 100% { left: 130% } }
.sum-btns .free { box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 4px 4px 0 #000; }

/* ---------- summon results */
.sr-grid { border-radius: 5px; }
.sr-head { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; justify-content: center; }
.sr-head span { font: 20px Bangers; letter-spacing: 1px; padding: 2px 12px; border: 2px solid #000; box-shadow: 3px 3px 0 #000; transform: skewX(-8deg); }
.sr-head .s5 { background: linear-gradient(90deg, #ff5ad8, #ffd84a, #5affd0); color: #2a0030; animation: bump .5s ease-out 3; }
.sr-head .s4 { background: var(--gold); color: #2a1600; } .sr-head .s3 { background: #6f9fd8; color: #08162e; } .sr-head .sn { background: var(--red); color: #fff; }

/* ---------- summon sequence overlays */
.sum-edge { position: absolute; inset: 0; pointer-events: none; transition: box-shadow .4s; }
.sum-edge.t3 { box-shadow: inset 0 0 90px rgba(111,182,255,.45); }
.sum-edge.t4 { box-shadow: inset 0 0 130px rgba(255,201,74,.7); }
.sum-edge.t5 { box-shadow: inset 0 0 160px rgba(255,90,216,.8); animation: edgeHue 1.2s linear infinite; }
@keyframes edgeHue { to { filter: hue-rotate(360deg) } }
.sum-seal { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.sum-seal.show { display: flex; }
.sum-seal b { font: 22px 'Lilita One'; font-weight: 400; color: var(--paper-ink); background: var(--paper-dots), var(--paper); border: 3px solid #000; padding: 4px 16px; box-shadow: 4px 4px 0 #000; transform: rotate(-2deg); animation: bob .8s ease-in-out infinite alternate; }
.sum-seal .pips { display: flex; gap: 14px; }
.sum-seal .pips i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #000; background: rgba(255,255,255,.2); box-shadow: 0 0 0 2px var(--paper); }
.sum-seal .pips i.on { background: var(--red); animation: stampIn .25s cubic-bezier(.2,1.6,.4,1); }
.sum-sfx { position: absolute; left: 50%; top: 38%; z-index: 4; pointer-events: none; font: clamp(80px, 16vw, 170px)/1 Bangers, sans-serif; letter-spacing: 4px; color: #fff;
  -webkit-text-stroke: 5px #000; paint-order: stroke fill; text-shadow: 8px 8px 0 #000; transform: translate(-50%, -50%) rotate(var(--rot)); animation: sfxSlam 1.3s ease-out forwards; }
.sum-sfx.red { color: #ff3b46; } .sum-sfx.t4 { color: var(--gold); } .sum-sfx.t5 { color: #ff7ae0; animation: sfxSlam 1.3s ease-out forwards, edgeHue .6s linear infinite; }
@keyframes sfxSlam { 0% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(2.6); opacity: 0 } 12% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(.92); opacity: 1 } 20% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.05) } 75% { opacity: 1 } 100% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.12); opacity: 0 } }
@keyframes stampIn { from { transform: scale(2.2) rotate(-20deg); opacity: 0 } }
.sum-omen { position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; font: italic 900 clamp(22px, 4vw, 38px) Nunito; letter-spacing: 6px; color: #ffd6da; text-shadow: 0 0 18px #ff2a4a, 2px 2px 0 #000; animation: omen 2.2s ease-out forwards; }
@keyframes omen { from { opacity: 0; letter-spacing: 18px } 30% { opacity: 1 } }

/* the Legend reveal: silhouette, DON!!, then a wanted poster */
.legend-rev { position: fixed; inset: 0; z-index: 15; overflow: hidden; pointer-events: auto; cursor: pointer; background: #000; animation: splashIn .3s ease-out; }
.legend-rev.out { animation: splashOut .3s ease-in forwards; }
.lr-lines { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.9) 0 1.2deg, transparent 1.2deg 7deg); animation: spin 14s linear infinite; opacity: .5;
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 45%); mask: radial-gradient(circle, transparent 18%, #000 45%); }
.legend-rev.lit { background: radial-gradient(circle at 64% 45%, #fff 0%, #ff8ae6 18%, #6a1aa0 48%, #0c0420 80%); transition: background .5s; }
.legend-rev.lit.t-BRAWL { background: radial-gradient(circle at 64% 45%, #fff 0%, #ffb36a 18%, #a01a1a 48%, #1a0406 80%); }
.legend-rev.lit.t-BLADE { background: radial-gradient(circle at 64% 45%, #fff 0%, #a6ffb8 18%, #157a3a 48%, #031a0c 80%); }
.legend-rev.lit.t-SHOT { background: radial-gradient(circle at 64% 45%, #fff 0%, #a8d8ff 18%, #1a4aa0 48%, #030a1e 80%); }
.legend-rev.lit .lr-lines { opacity: .28; }
.lr-art { position: absolute; right: 2%; top: 2%; width: 62%; height: 96%; background: center bottom / contain no-repeat; filter: brightness(0) drop-shadow(0 0 3px #fff) drop-shadow(0 0 18px #fff);
  transform: scale(.94); animation: lrArt 1.1s ease-out forwards; transition: filter .45s; }
@keyframes lrArt { to { transform: scale(1) } }
.legend-rev.lit .lr-art { filter: drop-shadow(0 0 22px rgba(255,255,255,.65)); }
.lr-don { position: absolute; left: 8%; top: 22%; font: clamp(90px, 18vw, 200px)/1 Bangers; letter-spacing: 6px; color: #fff; -webkit-text-stroke: 6px #000; paint-order: stroke fill; text-shadow: 10px 10px 0 var(--red);
  transform: rotate(-10deg); animation: donIn .5s cubic-bezier(.2,1.5,.4,1) .15s both; transition: opacity .3s, transform .3s; }
@keyframes donIn { from { transform: rotate(-10deg) scale(3); opacity: 0 } }
.legend-rev.lit .lr-don { opacity: 0; transform: rotate(-10deg) scale(1.3); }
.lr-poster { position: absolute; left: 5%; top: 50%; width: min(36%, 380px); padding: 14px 18px 18px; text-align: center; color: var(--paper-ink);
  background: var(--paper-dots), linear-gradient(var(--paper), var(--paper2)); border: 3px solid #000; box-shadow: 0 0 0 6px var(--paper2), 0 0 0 9px #000, 14px 14px 0 9px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(-50%) translateX(-60px) rotate(-6deg); transition: opacity .35s, transform .45s cubic-bezier(.2,1.4,.4,1); }
.legend-rev.lit .lr-poster { opacity: 1; transform: translateY(-50%) rotate(-2.5deg); }
.lp-wanted { font: clamp(40px, 6vw, 68px)/1 Bangers; letter-spacing: 6px; color: var(--paper-ink); }
.lp-doa { font: 900 11px Nunito; letter-spacing: 4px; border-top: 2px solid var(--paper-ink); border-bottom: 2px solid var(--paper-ink); margin: 2px 0 6px; }
.lp-stars { font-size: 26px; color: #c0168a; letter-spacing: 2px; }
.lp-stars i { font-style: normal; display: inline-block; opacity: 0; }
.legend-rev.lit .lp-stars i { animation: starStamp .3s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes starStamp { from { transform: scale(2.4) rotate(-20deg); opacity: 0 } to { transform: none; opacity: 1 } }
.legend-rev.lit .lp-stars i:nth-child(1) { animation-delay: .35s } .legend-rev.lit .lp-stars i:nth-child(2) { animation-delay: .47s } .legend-rev.lit .lp-stars i:nth-child(3) { animation-delay: .59s }
.legend-rev.lit .lp-stars i:nth-child(4) { animation-delay: .71s } .legend-rev.lit .lp-stars i:nth-child(5) { animation-delay: .83s }
.lr-poster h1 { margin: 2px 0 0; font: clamp(30px, 4.4vw, 52px)/1 Bangers; letter-spacing: 1.5px; color: var(--paper-ink); }
.lp-title { font: 800 13px Nunito; opacity: .75; }
.lp-bounty { margin: 8px 0; font: clamp(24px, 3vw, 34px)/1 Bangers; letter-spacing: 1px; color: var(--paper-ink); }
.lp-tags { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.lp-tags .tag { color: #fff; border: 2px solid #000; border-radius: 3px; } .lp-tags .tag:not([class*="t-"]) { background: var(--paper-ink); }
.lp-stamp { position: absolute; right: -24px; top: 36%; font: 32px/1 Bangers; letter-spacing: 2px; color: var(--red); border: 4px solid var(--red); padding: 4px 10px; background: rgba(247,237,212,.7);
  transform: rotate(-14deg) scale(3); opacity: 0; mix-blend-mode: multiply; }
.legend-rev.stamped .lp-stamp { opacity: .92; transform: rotate(-14deg) scale(1); transition: transform .18s cubic-bezier(.3,1.6,.5,1), opacity .1s; }
.legend-rev .sp-tap { z-index: 2; }
@media (max-width: 700px) {
  .lr-art { left: 0; right: 0; width: 100%; top: 0; height: 58%; }
  .lr-don { left: 4%; top: 18%; }
  .lr-poster { left: 50%; top: auto; bottom: 64px; width: min(86%, 360px); transform: translateX(-50%) translateY(60px) rotate(-4deg); }
  .legend-rev.lit .lr-poster { transform: translateX(-50%) rotate(-2deg); }
  .lp-stamp { right: -6px; top: -10px; font-size: 26px; }
}

/* ---------- narrow screens */
@media (max-width: 900px) {
  .h-log { width: 250px; }
  .h-right { width: 280px; }
  .feat { height: 150px; } .feat b { font-size: 26px; }
}
@media (max-width: 760px) {
  body.docked { --dock: 76px; }
  #screen.scr-home { position: absolute; inset: 0 0 var(--dock) 0; overflow: visible; padding: 0; }
  #topbar { gap: 6px; padding: 6px 8px; }
  #topbar .tb-cap { height: 42px; padding-right: 8px; }
  .cap-face { width: 32px; height: 32px; } .cap-t small { display: none; } .cap-t .bar { width: 46px; } .cap-t b { font-size: 20px; }
  .tb-cur .cur { padding: 5px 7px; font-size: 14px; } .tb-cur .cur i { font-size: 12px; }
  .tb-cur .cur.pose small { display: none; }
  #topbar .tb-mute { display: none; }
  #topbar .tb-set { margin-left: auto; width: 36px; height: 36px; font-size: 18px; }
  #topbar .tb-back { width: 38px; height: 38px; }
  .dk { width: 64px; height: 54px; font-size: 11px; } .dk > i { font-size: 20px; }
  .dk-summon { width: 84px; height: 84px; margin: 0 2px; } .dk-summon > i { font-size: 28px; } .dk-summon > span { font-size: 11px; }
  .rail { top: 62px; left: 6px; gap: 6px; }
  .rl { width: 52px; height: 48px; font-size: 9.5px; } .rl > i { font-size: 18px; }
  .rail-pop { left: 60px; bottom: auto; top: 0; }
  .h-log { left: 66px; top: 62px; right: 8px; width: auto; gap: 8px; }
  .hl-card { padding: 8px 10px; } .hl-head b { font-size: 21px; } .hl-head small { font-size: 10px; } .hl-stats { margin: 4px 0 2px; } .hl-stats b { font-size: 18px; }
  .hl-card .h-goal { display: none; }
  .h-camp { display: none; }
  .h-right { left: 66px; right: 8px; top: auto; bottom: 6px; width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .feat { grid-column: 1 / 3; height: 128px; } .feat b { font-size: 24px; max-width: 60%; }
  .cont { height: 92px; padding: 6px 8px; } .cont b { font-size: 18px; } .cont > span { font-size: 11px; } .cont em { font-size: 13px; padding: 2px 8px; right: 6px; bottom: 6px; }
  .h-right .hold { padding: 6px 8px; gap: 6px; } .h-right .hold .hold-ic { font-size: 24px; } .h-right .hold small { font-size: 10.5px; }
  .bt-page { inset: 58px 8px 4px; }
  .bt-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bt { height: 104px; padding: 8px 10px; } .bt b { font-size: 20px; } .bt small { font-size: 10.5px; } .bt i { width: 32px; height: 32px; font-size: 17px; }
  .bt-raid { height: 140px; } .bt-raid b { font-size: 30px; }
  .panel { top: 58px; max-height: calc(100% - 64px); }
  .seg button { font-size: 14px; padding: 5px 10px; }
  /* banners: keep the character art in view */
  .sum-page .banner { height: min(46vh, 300px); }
  .bn-text { left: 12px; top: 10px; max-width: 58%; }
  .bn-text h2 { font-size: 30px; } .bn-text p { font-size: 13px; line-height: 1.2; }
  .bn-feat span { font-size: 10.5px; padding: 2px 6px; margin: 3px 0; }
  .bn-ch.c0 { right: -14%; width: 72%; } .bn-ch.c1, .bn-ch.c2 { display: none; }
  .sum-tabs button { font-size: 13px; padding: 6px 10px; }
}

/* ---------- captain frames: the ring around the showcase face (topbar plate, profile card, frame list) */
.fr-rope { --fr: #b9894a; --fr2: #5a3c1a; }
.fr-straw { --fr: #ffd84a; --fr2: #d7262e; }
.fr-marine { --fr: #e9f3ff; --fr2: #2a7dff; }
.fr-gold { --fr: #ffc43d; --fr2: #8a5a00; }
.fr-sakura { --fr: #ffb3d6; --fr2: #c2316e; }
.fr-storm { --fr: #b39bff; --fr2: #3b1e9e; }
.fr-emperor { --fr: #ff3b48; --fr2: #4a0008; }
.fr-rainbow { --fr: #fff; --fr2: #ff4fd8; }
.cap-face[class*="fr-"], .pf-show, .pf-sw { border-color: var(--fr); box-shadow: 0 0 0 2px var(--fr2), 0 0 0 4px #000; }
.fr-gold.cap-face, .pf-card.fr-gold .pf-show, .fr-gold .pf-sw { box-shadow: 0 0 0 2px var(--fr2), 0 0 0 4px #000, 0 0 14px 2px rgba(255,196,61,.6); }
.fr-storm.cap-face, .pf-card.fr-storm .pf-show, .fr-storm .pf-sw { animation: frStorm 2.4s infinite; }
.fr-emperor.cap-face, .pf-card.fr-emperor .pf-show, .fr-emperor .pf-sw { box-shadow: 0 0 0 2px var(--fr2), 0 0 0 4px #000, 0 0 16px 3px rgba(255,40,60,.55); }
.fr-rainbow.cap-face, .pf-card.fr-rainbow .pf-show, .fr-rainbow .pf-sw { animation: frRainbow 3s linear infinite; }
@keyframes frStorm { 0%, 100% { box-shadow: 0 0 0 2px var(--fr2), 0 0 0 4px #000 } 8% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 22px 6px rgba(180,150,255,.9) } 14% { box-shadow: 0 0 0 2px var(--fr2), 0 0 0 4px #000 } }
@keyframes frRainbow { 0% { border-color: #ff4f4f } 20% { border-color: #ffc43d } 40% { border-color: #5fff8a } 60% { border-color: #3fd0ff } 80% { border-color: #c06bff } 100% { border-color: #ff4f4f } }
#topbar .tb-cap { position: relative; }
.tb-cap > .badge { position: absolute; top: -8px; right: -10px; z-index: 2; }
.cap-t small { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gold); }

/* ---------- gift inbox */
.modal.inbox, .modal.history, .modal.profile { width: min(620px, 94vw); max-height: 88vh; overflow-y: auto; }
.mail-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.mail { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--paper-dots), var(--paper); color: var(--paper-ink); border: 3px solid #000; border-radius: 4px; box-shadow: 4px 4px 0 #000; transform: rotate(-.3deg); }
.mail:nth-child(even) { transform: rotate(.3deg); }
.ml-ic { font-size: 30px; width: 46px; height: 46px; display: grid; place-items: center; background: #fff8e6; border: 2px solid #000; border-radius: 50%; flex: none; }
.ml-t { flex: 1; min-width: 0; }
.ml-t small { color: #7a5a30; font-size: 12px; }
.ml-t b { display: block; font: 19px/1.1 'Lilita One'; margin: 2px 0; }
.ml-t p { margin: 2px 0 6px; font-size: 13px; line-height: 1.35; }
.ml-r { display: inline-block; background: var(--ink); color: var(--gold); font: 14px 'Lilita One'; padding: 2px 8px; border-radius: 3px; }
.ml-go { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.ml-go small { font-size: 11px; color: #7a5a30; } .ml-go small.soon { color: var(--red); font-weight: 700; }
.mail-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 10px; color: var(--muted); text-align: center; }
.mail-empty span { font-size: 44px; } .mail-empty b { color: var(--paper); font: 20px 'Lilita One'; }

/* ---------- summon history */
.hs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.hs-stats > div { background: var(--ink); border: 2px solid #000; box-shadow: 3px 3px 0 #000; border-radius: 4px; padding: 6px 8px; text-align: center; }
.hs-stats small { display: block; color: var(--muted); font-size: 11px; } .hs-stats b { font: 24px/1.1 'Lilita One'; } .hs-stats i { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.hs-stats .r5 b { color: var(--gold); } .hs-stats .r4 b { color: #c58bff; }
.hs-f { margin: 4px 0 8px; }
.hs-list { display: flex; flex-direction: column; gap: 4px; }
.hs { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 4px; background: rgba(255,255,255,.04); border-left: 4px solid #6c7aa8; }
.hs.r4 { border-left-color: #b46bff; background: rgba(180,107,255,.08); }
.hs.r5 { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(255,196,61,.22), rgba(255,196,61,.03)); }
.hs-face { width: 36px; height: 36px; border-radius: 4px; border: 2px solid #000; background: #26305c center 12% / 150% auto no-repeat; flex: none; }
.hs-u { flex: 1; min-width: 0; } .hs-u b { display: block; font: 15px 'Lilita One'; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs.r5 .hs-u b { color: var(--gold); } .hs.r4 .hs-u b { color: #d7b0ff; }
.hs-u small, .hs-b small { color: var(--muted); font-size: 11px; display: block; }
.hs-b { text-align: right; font-size: 12px; flex: none; max-width: 42%; }
.hs-pg { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 10px; }
.sum-links .link.hist { margin-left: 8px; }

/* ---------- captain profile */
.pf-card { display: flex; gap: 16px; align-items: center; padding: 14px; margin: 6px 0 12px; background: var(--paper-dots), var(--paper); color: var(--paper-ink); border: 3px solid #000; box-shadow: 6px 6px 0 #000; border-radius: 4px; position: relative; overflow: hidden; }
.pf-card::after { content: 'WANTED'; position: absolute; right: -6px; bottom: -10px; font: 64px/1 Bangers; color: rgba(90,60,20,.09); letter-spacing: 3px; pointer-events: none; }
.pf-show { width: 112px; height: 112px; border-radius: 50%; border: 5px solid var(--fr, #b9894a); background: #26305c center 10% / 150% auto no-repeat; flex: none; position: relative; cursor: pointer; }
.pf-show em { position: absolute; right: 2px; bottom: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; border: 2px solid #000; font: 15px/24px sans-serif; font-style: normal; }
.pf-t { min-width: 0; } .pf-t > small { color: #7a5a30; }
.pf-t > b { display: block; font: 30px/1 Bangers; letter-spacing: 1px; }
.pf-title { display: inline-block; margin: 4px 0 8px; background: var(--red); color: #fff; font: 16px 'Lilita One'; padding: 2px 10px; transform: skewX(-8deg); box-shadow: 2px 2px 0 #000; }
.pf-n { display: flex; gap: 12px; flex-wrap: wrap; font-size: 14px; } .pf-n b { font-family: 'Lilita One'; }
.pf-u { display: block; margin-top: 6px; color: #7a5a30; }
.pf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 8px; }
.pf-it { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; text-align: left; background: var(--ink); color: var(--text); border: 2px solid #000; border-radius: 4px; box-shadow: 3px 3px 0 #000; cursor: pointer; }
.pf-it b { font: 15px 'Lilita One'; } .pf-it small { font-size: 11px; color: var(--muted); }
.pf-it.on { background: linear-gradient(160deg, #3a1016, #170a10); outline: 2px solid var(--gold); } .pf-it.on small { color: var(--gold); }
.pf-it.lock { opacity: .45; cursor: default; }
.pf-it.fr { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; } .pf-it.fr small { width: 100%; }
.pf-sw { width: 30px; height: 30px; border-radius: 50%; border: 4px solid var(--fr); background: #26305c; flex: none; }
.pf-it .new { position: absolute; top: -8px; right: -6px; background: var(--red); color: #fff; font: 11px/16px 'Lilita One'; font-style: normal; padding: 0 5px; border: 2px solid #000; transform: rotate(6deg); }
.pf-pick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 50vh; overflow-y: auto; }
@media (max-width: 760px) {
  .hs-stats { grid-template-columns: repeat(2, 1fr); }
  .pf-show { width: 84px; height: 84px; } .pf-t > b { font-size: 24px; }
  .mail { flex-wrap: wrap; } .ml-go { flex-direction: row; width: 100%; justify-content: space-between; }
}

/* ---------- living art, Extreme Awakening, app settings */
canvas.living { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.is-living { background-image: none !important; }
.um-eza { margin: 10px 0; padding: 10px 12px; border: 2px solid #000; border-radius: 4px; box-shadow: 3px 3px 0 #000; background: linear-gradient(120deg, #3b1e9e, #12082e 70%); display: flex; flex-direction: column; gap: 4px; }
.um-eza b { font: 17px 'Lilita One'; color: #ffe27a; } .um-eza small { color: var(--muted); }
.um-eza .btn { align-self: flex-start; margin-top: 4px; } .um-eza .eza-need { color: #ff9a9a; }
.um-eza.done { background: linear-gradient(120deg, #6a4a00, #1a1205 70%); }
.th-eza { position: absolute; left: 3px; top: 22px; font: 11px/14px 'Lilita One'; padding: 0 4px; color: #1a1205; background: linear-gradient(90deg, #ffe27a, #ffb22e); border: 1.5px solid #000; border-radius: 3px; transform: skewX(-8deg); }
.app-set .btn.small { margin-left: 8px; }
.set-ok { color: #7dff9a; margin-left: 8px; } .set-note { color: var(--muted); font-size: 13px; margin-left: 8px; }
.set-hint { font-size: 12px; margin: 2px 0 10px; }
.eza-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; padding: 6px 10px; border: 2px solid #000; border-radius: 4px; background: linear-gradient(100deg, #3b1e9e, #160b3a 75%); box-shadow: 3px 3px 0 #000; }
.eza-strip b { font: 16px 'Lilita One'; color: #ffe27a; } .eza-strip small { color: var(--muted); margin-right: 6px; }
.ez-u { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #ffe27a; background: #26305c center 10% / 150% auto no-repeat; cursor: pointer; padding: 0; }
.ez-u.miss { filter: grayscale(1) brightness(.6); } .ez-u.done { border-color: #ffb22e; box-shadow: 0 0 10px #ffb22e; }
.ez-u i { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font: 10px/12px 'Lilita One'; font-style: normal; color: #1a1205; background: #ffe27a; padding: 0 3px; border: 1px solid #000; border-radius: 2px; }