/* The rebuilt game screens: Students (list, Sort/Filter, Student, Intro,
   Weapon). Positions are in the game's 1920x1080 space, measured from the
   owner's PC screenshots; colors are sampled from them. */

/* ---------------------------------------------------------------- shell */
.sub__bg{ position:absolute; inset:0; background:center / cover no-repeat; }
.sub__bg--blur{ inset:-40px; filter:blur(9px) brightness(.97) saturate(1.05); }
.screen{ position:absolute; left:50%; top:50%; width:1920px; height:1080px; transform:translate(-50%,-50%) scale(var(--s)); }
.scr__loading{ position:absolute; left:0; right:0; top:500px; text-align:center; font:700 34px/1 var(--font-ui); color:#5a6f86; }

/* the "?" beside a screen's title */
.title{ display:flex; align-items:center; gap:22px; }
.help{ width:38px; height:38px; border-radius:7px; background:#2b3a50; color:#fff; font:700 30px/38px var(--font-ui);
  text-align:center; pointer-events:auto; margin-top:1px; }

/* icons */
.svg{ display:inline-block; width:1em; height:1em; line-height:0; flex:none; }
.svg svg{ width:100%; height:100%; display:block; overflow:visible; }
.mask{ display:inline-block; background:currentColor; -webkit-mask:var(--m) center / contain no-repeat; mask:var(--m) center / contain no-repeat; }
.star{ display:inline-block; width:22px; height:22px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.4 5.6 21l1.5-7.1L1.7 9l7.2-.8z' fill='%23ffd23a' stroke='%23e08a00' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M12 4.5l2 4.4 4.6.5' fill='none' stroke='%23fff6c0' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------------------------------------------------------------- game buttons */
.gbtn{ display:inline-flex; align-items:center; justify-content:center; min-width:250px; height:84px; padding:0 40px; border-radius:10px;
  transform:skewX(-10deg); font:700 36px/1 var(--font-ui); box-shadow:0 3px 6px rgba(20,50,90,.22); transition:transform .08s; }
.gbtn > span{ display:inline-flex; align-items:center; gap:14px; transform:skewX(10deg); }
.gbtn:active{ transform:skewX(-10deg) scale(.96); }
.gbtn--blue{ background:linear-gradient(100deg,#8ee0fb,#5ccbf6 55%,#7fd6f7); color:#283c55; }
.gbtn--white{ background:#fff; color:#3e4c5c; box-shadow:0 2px 6px rgba(20,50,90,.2), inset 0 0 0 2px #e0e6eb; }
.gbtn--big{ min-width:330px; height:104px; font-size:48px; }
.gbtn--reset{ min-width:0; height:58px; padding:0 30px; font-size:30px; }
.gbtn--reset .svg{ width:32px; height:32px; color:#2b3a50; }

/* ---------------------------------------------------------------- popup window */
.pop-layer{ position:fixed; inset:0; z-index:15; pointer-events:none; }
.pop-layer.on{ background:rgba(10,18,32,.55); pointer-events:auto; }
.pop-stage{ position:absolute; left:50%; top:50%; width:1920px; height:1080px; transform:translate(-50%,-50%) scale(var(--s)); pointer-events:none; }
.win-wrap{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:auto; }
.win{ position:relative; max-height:1000px; display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
  background:#f6f7f8; box-shadow:0 14px 40px rgba(0,0,0,.35); animation:winIn .14s ease-out; }
@keyframes winIn{ from{ transform:scale(.92); opacity:0; } to{ transform:none; opacity:1; } }
.win__head{ position:relative; flex:none; height:88px; display:flex; justify-content:center; align-items:flex-end;
  background:linear-gradient(to right, rgba(206,231,246,.9), rgba(246,247,248,0) 30%), #f6f7f8; border-bottom:2px solid #e4e8ec; }
.win__title{ margin:0 0 6px; padding:0 8px 4px; font:700 50px/1.1 var(--font-ui); color:#2b3c52; border-bottom:6px solid #fde84f; transform:scaleX(.95); }
.win__x{ position:absolute; right:30px; top:20px; width:46px; height:46px; }
.win__x::before, .win__x::after{ content:''; position:absolute; left:50%; top:50%; width:52px; height:4px; margin:-2px 0 0 -26px; background:#2b3c52; border-radius:2px; transform:rotate(45deg); }
.win__x::after{ transform:rotate(-45deg); }
.win__body{ flex:1; min-height:0; display:flex; flex-direction:column; padding:26px 40px 36px; }
.win__btns{ flex:none; display:flex; justify-content:center; gap:40px; margin-top:28px; }
.win__text{ margin:0 0 20px; font:500 32px/1.4 var(--font-ui); color:#4a5462; }
.field{ width:100%; height:80px; padding:0 26px; border:2px solid #cfd8df; border-radius:10px; background:#fff;
  font:500 34px/1 var(--font-ui); color:#2b3c52; outline:none; }
.field:focus{ border-color:#5ccbf6; }
.bar-head{ height:46px; display:flex; align-items:center; justify-content:center; color:#fff; font:500 32px/1 var(--font-ui);
  background:linear-gradient(110deg, #3f7bb4 0 2%, #2c4a72 2% 97%, #3f7bb4 97%); clip-path:polygon(1.4% 0,100% 0,98.6% 100%,0 100%); }

/* ---------------------------------------------------------------- Student List */
.sl{ position:absolute; left:25px; top:127px; width:1870px; height:990px; }
.sl__head{ position:absolute; left:0; top:0; width:100%; height:92px; border-radius:7px 7px 0 0;
  background:linear-gradient(#93bfd6,#87bbd2); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.sl__icon{ position:absolute; left:34px; top:5px; width:66px; height:85px; }
.sl__title{ position:absolute; left:112px; top:21px; margin:0; font:700 44px/50px var(--font-ui); color:#2b3a50; white-space:nowrap;
  -webkit-text-stroke:7px #fff; paint-order:stroke fill; transform:scaleX(.95); transform-origin:0 50%; }
.sl__tabs{ position:absolute; left:541px; top:14px; width:641px; height:64px; display:flex; border-radius:8px; overflow:hidden;
  transform:skewX(-10deg); background:#e8f3f6; box-shadow:0 2px 3px rgba(30,70,100,.28); }
.sl__tab{ position:relative; flex:1; display:grid; place-items:center; font:700 41px/1 var(--font-ui); }
.sl__tab > span{ display:inline-block; transform:skewX(10deg) scaleX(.86); }
.sl__tab + .sl__tab::before{ content:''; position:absolute; left:0; top:13px; bottom:13px; width:2px; background:#a9c7d6; }
.sl__tab--all{ color:#173851; }
.sl__tab--striker{ color:#c56161; }
.sl__tab--special{ color:#5c84ea; }
.sl__tab.on{ background:#163757; color:#fff; }
.sl__tab.on::before, .sl__tab.on + .sl__tab::before{ display:none; }
.sl__tab--striker.on{ color:#ff8b8b; }
.sl__tab--special.on{ color:#9db8ff; }
.sl__btn{ position:absolute; top:14px; height:64px; border-radius:8px; background:#f3f5f7; transform:skewX(-10deg);
  box-shadow:0 2px 3px rgba(30,70,100,.28); display:grid; place-items:center; }
.sl__btn > *{ transform:skewX(10deg); }
.sl__search{ left:1187px; width:93px; }
.sl__search .svg{ width:44px; height:44px; color:#3e5a8c; }
.sl__search.on{ background:#fff7c4; }
.sl__sort{ left:1287px; width:400px; }
.sl__sort b{ font:700 41px/1 var(--font-ui); color:#494c52; transform:skewX(10deg) scaleX(.9); white-space:nowrap; }
.sl__funnel{ position:absolute; left:4px; top:0; width:50px; height:39px; border-radius:7px 0 9px 0; background:#bcbec2;
  display:grid; place-items:center; transform:none; color:#fff; }
.sl__funnel .svg{ width:28px; height:28px; transform:skewX(10deg); }
.sl__funnel.on{ background:#ffcb2e; }
.sl__corner{ position:absolute; right:5px; top:4px; width:0; height:0; border-top:20px solid #bcbec0; border-left:22px solid transparent; transform:none; }
.sl__order{ left:1695px; width:157px; }
.sl__order .svg{ width:86px; height:54px; }
.sl__body{ position:absolute; left:0; top:91px; width:100%; bottom:0; background:#67a3bf; border-radius:0 0 7px 7px; }
.sl__inner{ position:absolute; left:18px; right:18px; top:20px; bottom:0; border:10px solid #fff; border-bottom:0; border-radius:10px 10px 0 0;
  background:#f3fcfd; box-shadow:inset 0 0 0 2px #b9c8c9; }
.sl__list{ position:absolute; left:0; right:14px; top:2px; bottom:0; overflow-y:auto; padding:40px 0 60px 17px; overscroll-behavior:contain; }
.sl__list::-webkit-scrollbar{ width:12px; }
.sl__list::-webkit-scrollbar-track{ background:#e3ecef; border-radius:6px; margin:18px 0 30px; }
.sl__list::-webkit-scrollbar-thumb{ background:#92a6b4; border-radius:6px; }
.sl__grid{ display:grid; grid-template-columns:repeat(6, 280px); column-gap:15px; }
.sl__bar{ position:relative; width:1741px; height:50px; margin:-4px 0 26px 6px; display:grid; place-items:center; color:#fff;
  font:700 30px/1 var(--font-ui); background:linear-gradient(110deg, #2b5c89 0 22px, #2e4c71 32px calc(100% - 32px), #2b5c89 calc(100% - 22px)); }
.sl__bar span{ transform:scaleX(.95); }
.sl__empty{ margin:120px 0; text-align:center; font:500 34px/1 var(--font-ui); color:#7b8a99; }

/* a student card: art in a white frame, the count bar, the pin, the name */
.sc{ position:relative; height:404px; }
.sc::before, .sc::after{ content:''; position:absolute; left:-8px; right:-8px; border-top:2px dashed #e1eaec; }
.sc::before{ top:0; }
.sc::after{ top:382px; }
.sc__card{ position:absolute; left:0; top:0; width:280px; height:315px; padding:7px; border:2px solid #d7dadc; border-radius:8px; background:#fff;
  box-shadow:0 2px 3px rgba(40,60,80,.12); transition:transform .08s; z-index:1; }
.sc__card:active{ transform:scale(.97); }
.sc__art{ display:block; width:262px; height:297px; object-fit:cover; border-radius:5px; background:#c9d6df; }
.sc__bar{ position:absolute; left:7px; right:7px; bottom:7px; height:56px; border-radius:0 0 5px 5px; background:rgba(40,46,66,.8);
  color:#fff; font:700 40px/56px var(--font-ui); text-align:center; letter-spacing:.5px; }
.sc__pin{ position:absolute; left:-7px; top:-5px; z-index:2; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:radial-gradient(circle at 50% 45%, #cfd3d5 58%, #b2b8bb 100%); box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 2px 3px rgba(0,0,0,.18); }
.sc__pin .svg{ width:40px; height:40px; }
.sc__pin.on{ background:radial-gradient(circle at 50% 45%, #ffe769 58%, #f5cf3b 100%); color:#f1871d; }
.sc__name{ position:absolute; left:-12px; right:-12px; top:317px; text-align:center; white-space:nowrap; font:500 36px/46px var(--font-ui); color:#4a5161; }
.sc__name span{ display:inline-block; padding:0 3px; transform:scaleX(.88); transform-origin:50% 50%;
  background:linear-gradient(transparent 64%, #f8f3a6 64%, #f8f3a6 86%, transparent 86%); }
.sc--not .sc__card{ background:#7e7e7e; border-color:#6a6a6c; }
.sc--not .sc__art{ filter:grayscale(.35) brightness(.78) contrast(.85); }
.sc--not .sc__card::after{ content:''; position:absolute; inset:7px; border-radius:5px; background:rgba(160,160,165,.22); pointer-events:none; }
.sc--not .sc__bar{ color:#9a9ea6; }
.sc--not .sc__pin{ display:none; }

/* ---------------------------------------------------------------- Sort / Filter */
.win--sf .win__body{ padding:24px 34px 34px; }
.sf{ display:flex; height:700px; border-radius:6px; overflow:hidden; border:2px solid #dde3e8; }
.sf__side{ position:relative; flex:none; width:270px; background:#c7e8fa; }
.sf__tab{ display:block; width:100%; height:92px; font:700 40px/92px var(--font-ui); text-align:center; color:#1b5a86; }
.sf__tab.on{ background:#fff; color:#2b2f36; }
.sf__deco{ position:absolute; left:16px; bottom:8px; color:#8dc3e6; font:700 20px/1 var(--font-ui); letter-spacing:3px; }
.sf__main{ flex:1; min-width:0; background:#e9ecee; padding:12px; }
.sf__pane{ height:100%; display:flex; flex-direction:column; background:#fff; border:2px solid #d9dfe4; }
.sf__list-head{ flex:none; height:84px; display:flex; align-items:center; justify-content:space-between; padding:0 18px 0 24px;
  background:#cfe9fb; font:500 36px/1 var(--font-ui); color:#3c4b5a; }
.sf__scroll{ flex:1; overflow-y:auto; padding:0 24px 20px; }
.sf__sec{ padding:22px 0 10px; border-bottom:2px solid #d4d8dc; }
.sf__sec h3{ margin:0 0 16px; padding:0 0 18px 12px; border-bottom:2px dashed #d2d9de; font:500 34px/1 var(--font-ui); color:#4f6a85;
  background:linear-gradient(#59c5f3,#59c5f3) 0 3px / 4px 30px no-repeat; }
.sf__opts{ display:grid; grid-template-columns:repeat(4, 1fr); row-gap:14px; padding:8px 4px; }
.sf__opt{ display:flex; align-items:center; gap:18px; min-height:66px; font:500 30px/1 var(--font-ui); color:#3c4652; }
.check{ position:relative; flex:none; width:64px; height:64px; border:2px solid #b5b8bb; border-radius:6px; background:#fff; }
.check.on::after{ content:''; position:absolute; left:18px; top:6px; width:18px; height:34px; border:solid #cddcea; border-width:0 9px 9px 0;
  border-radius:3px; transform:rotate(40deg); }
.tico{ display:inline-block; flex:none; width:42px; height:42px; border-radius:6px; background:var(--c,#5d6b7a); position:relative; }
.tico::after{ content:''; position:absolute; inset:7px; background:#fff; -webkit-mask:var(--g) center / contain no-repeat; mask:var(--g) center / contain no-repeat; }
.tico--atk{ --g:url('https://schaledb.com/images/ui/Type_Attack_s.png'); }
.tico--def{ --g:url('https://schaledb.com/images/ui/Type_Defense_s.png'); }
.tico--role{ --c:#2b3f5f; }
.tico--role::after{ --g:var(--m); inset:5px; }
.tpos{ display:inline-block; padding:8px 22px; border-radius:6px; background:#2b3f5f; color:#fff; font:700 italic 30px/1 var(--font-ui); transform:skewX(-6deg); }
.tstars{ display:inline-flex; gap:1px; }
.tstars .star{ width:32px; height:32px; }
.tpin{ width:40px; height:40px; color:#8d939a; }
.tpin.on{ color:#f5c93a; }
.tcover{ display:inline-flex; align-items:center; gap:8px; }
.tcover .svg{ width:30px; height:30px; }
.tschool{ display:inline-flex; align-items:center; gap:12px; }
.tschool i{ width:40px; height:40px; background:#2b3f5f; -webkit-mask:var(--m) center / contain no-repeat; mask:var(--m) center / contain no-repeat; }
.sf__pane--sort{ padding:16px 26px; overflow:auto; }
.sf__radios{ display:grid; grid-template-columns:repeat(4, 1fr); column-gap:30px; }
.sf__radio{ display:flex; align-items:center; gap:22px; height:112px; border-bottom:2px solid #d6dade; font:500 36px/1 var(--font-ui); color:#b4b9be; }
.sf__radio.on{ color:#3a3f46; }
.radio{ flex:none; width:40px; height:40px; border-radius:50%; border:2px solid #9aa1a7; background:#fff; }
.sf__radio.on .radio{ border-color:#8bb7d6; background:radial-gradient(circle, #64bdf5 0 46%, #fff 50% 66%, #b7dcf3 70%); }

/* ---------------------------------------------------------------- Student */
.st__full{ position:absolute; left:-70px; top:58px; width:1060px; height:auto; pointer-events:none; user-select:none;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.15)); }
.st__nav{ position:absolute; top:540px; width:56px; height:76px; }
.st__nav::before{ content:''; position:absolute; left:14px; top:14px; width:42px; height:42px; border:solid #fff; border-width:0 0 9px 9px;
  border-radius:3px; transform:rotate(45deg); filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.st__nav--prev{ left:30px; }
.st__nav--next{ left:1834px; transform:scaleX(-1); }
.st__pinned{ position:absolute; left:54px; top:781px; height:42px; padding:0 18px 0 12px; border-radius:21px; display:flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.62); color:#9aa0a8; font:600 27px/1 var(--font-ui); }
.st__pinned .svg{ width:30px; height:30px; }
.st__pinned.on{ background:#fff1a8; color:#c88400; }
.st__plate{ position:absolute; left:42px; top:822px; width:598px; height:110px; border-radius:6px;
  background:linear-gradient(100deg, rgba(20,38,72,.9), rgba(28,50,92,.86)); clip-path:polygon(0 0,100% 0,96.5% 100%,0 100%); }
.heart{ position:absolute; left:20px; top:18px; width:46px; height:42px; display:grid; place-items:center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 42'%3E%3Cpath d='M23 40C9 30 2 23 2 13.5 2 7 7 2 13 2c4.2 0 7.6 2.3 10 5.6C25.4 4.3 28.8 2 33 2c6 0 11 5 11 11.5C44 23 37 30 23 40z' fill='%23ff9fc0' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.heart b{ font:700 22px/1 var(--font-ui); color:#3b2a36; margin-top:-3px; }
.st__name{ position:absolute; left:72px; top:14px; color:#fff; font:700 46px/52px var(--font-ui); white-space:nowrap; max-width:290px; overflow:hidden; text-overflow:ellipsis; }
.st__name--s{ font-size:38px; top:18px; }
.st__name--xs{ font-size:30px; top:22px; letter-spacing:-.5px; }
.st__stars{ position:absolute; right:136px; top:30px; display:flex; gap:1px; }
.st__stars .star{ width:26px; height:26px; }
.squad{ position:absolute; left:470px; top:26px; width:108px; height:38px; border-radius:4px; background:#fff; transform:skewX(-10deg);
  display:grid; place-items:center; font:700 italic 27px/1 var(--font-ui); }
.squad > span{ transform:skewX(10deg) scaleX(.82); }
.squad--Main{ color:#e8452c; }
.squad--Support{ color:#2e72d9; }
.st__lv{ position:absolute; left:14px; top:73px; color:#fff; font:700 italic 28px/1 var(--font-ui); transform:scaleX(.88); transform-origin:0 50%; }
.st__exp{ position:absolute; left:92px; top:74px; width:480px; height:22px; border:2px solid #10203c; background:#ffe600; transform:skewX(-10deg); }
.st__exp em{ position:absolute; right:22px; top:-22px; font:700 italic 26px/1 var(--font-ui); color:#fff; transform:skewX(10deg);
  -webkit-text-stroke:5px #223; paint-order:stroke fill; }
.st__chips{ position:absolute; left:42px; top:936px; width:582px; height:128px; border-radius:6px; background:rgba(255,255,255,.5);
  display:grid; grid-template-columns:200px 180px 1fr; grid-template-rows:58px 58px; gap:6px 8px; padding:6px 8px; }
.st__chips > span{ display:flex; align-items:center; border-radius:5px; }
.chip-role{ gap:10px; justify-content:center; background:#fff; color:#2b3f5f; font:700 34px/1 var(--font-ui); }
.chip-role i{ width:40px; height:40px; background:#2b3f5f; -webkit-mask:var(--m) center / contain no-repeat; mask:var(--m) center / contain no-repeat; }
.chip-type{ gap:0; overflow:hidden; background:#f2f4f6; }
.chip-type .tico{ width:48px; height:58px; border-radius:0; background:#dfe3e7; }
.chip-type .tico::after{ background:#8a95a1; inset:10px; }
.chip-type b{ flex:1; align-self:stretch; display:grid; place-items:center; color:#fff; font:700 32px/1 var(--font-ui); white-space:nowrap; }
.chip-type b.long{ font-size:25px; letter-spacing:-.5px; }
.chip-terrain, .chip-moods{ gap:6px; }
.chip-terrain i, .chip-moods .mood{ width:55px; height:58px; border-radius:5px; flex:none; }
.chip-terrain i{ background:#8c9aa7; position:relative; }
.chip-terrain i::after{ content:''; position:absolute; inset:9px; background:#fff; -webkit-mask:var(--m) center / contain no-repeat; mask:var(--m) center / contain no-repeat; }
.chip-moods .mood{ background:#fff; display:grid; place-items:center; }
.mood svg{ width:46px; height:46px; }
.chip-pos{ justify-content:center; background:#2b3f5f; color:#fff; font:700 italic 36px/1 var(--font-ui); letter-spacing:1px; }
.st__btns{ position:absolute; left:638px; top:968px; display:flex; gap:6px; }
.st__sq{ width:94px; height:82px; border-radius:8px; background:#f4f6f8; color:#2b3f5f; display:grid; place-items:center;
  box-shadow:0 2px 4px rgba(0,0,0,.22); transition:transform .08s; }
.st__sq:active{ transform:scale(.94); }
.st__sq .svg{ width:56px; height:56px; }
.st__sq.on{ background:#fff1a8; }

.st__panel{ position:absolute; left:990px; top:172px; width:833px; height:806px; display:flex; flex-direction:column; }
.st__tabs{ flex:none; display:flex; height:85px; background:rgba(24,40,70,.72); border-radius:6px 6px 0 0; overflow:hidden; }
.st__tab{ position:relative; flex:1; color:#fff; font:700 40px/85px var(--font-ui); text-align:center; white-space:nowrap; }
.st__tab > *{ pointer-events:none; }
.st__tab + .st__tab::before{ content:''; position:absolute; left:0; top:24px; bottom:24px; width:2px; background:rgba(255,255,255,.35); }
.st__tab.on{ background:#dcebf2; color:#3b4a5c; }
.st__tab.on::before, .st__tab.on + .st__tab::before{ display:none; }
.st__body{ flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; padding:11px 10px 12px; background:#dfeaf0; }
.st__sec{ flex:none; padding:10px 12px; background:#f6f9fb; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.st__sec--fill{ flex:1; min-height:0; display:flex; flex-direction:column; }
.st__row{ display:flex; align-items:center; gap:10px; }
.st__head{ position:relative; height:46px; margin:2px 0 10px; display:flex; align-items:center; justify-content:space-between; padding:0 6px 0 32px;
  color:#fff; font:500 34px/1 var(--font-ui); background:linear-gradient(110deg, #3f7bb4 0 14px, #2c4a72 14px); clip-path:polygon(1.2% 0,100% 0,98.8% 100%,0 100%); }
.st__head--center{ justify-content:center; padding:0; }
.st__details{ display:flex; align-items:center; gap:28px; height:40px; padding:0 34px 0 18px; background:#fff; color:#4c5d70; font:500 30px/1 var(--font-ui);
  transform:skewX(-10deg); border-radius:3px; }
.st__details > *{ transform:skewX(10deg); }
.st__details .svg{ width:30px; height:30px; color:#2b3c52; }
.st__stats{ flex:1; display:grid; grid-template-columns:1fr 1fr; height:108px; padding:0 18px; border:2px solid #cfdbe3; border-radius:4px; background:#edf3f7;
  align-items:center; }
.st__stats .kv:nth-child(-n+2){ border-bottom:2px solid #d3dde4; }
.kv{ display:flex; align-items:baseline; gap:18px; height:100%; align-items:center; font:700 34px/1 var(--font-ui); color:#222a33; }
.kv em{ font-style:normal; color:#3b4b5d; font-weight:500; }
.st__blue{ flex:none; width:138px; height:108px; border-radius:8px; transform:skewX(-6deg); display:grid; place-items:center; text-align:center;
  background:linear-gradient(135deg, #8de0fb, #4fc4f2); color:#2b3c55; font:700 30px/1.05 var(--font-ui); box-shadow:0 3px 5px rgba(20,60,110,.25); }
.st__blue > span{ transform:skewX(6deg); padding:0 8px; }
.st__blue--tall{ height:150px; }
.st__blue:disabled{ background:#cfd8de; color:#8794a1; }
.st__skills{ flex:1; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.skill{ height:158px; border-radius:6px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transform:skewX(-5deg);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:8px 0 6px; }
.skill > *{ transform:skewX(5deg); }
.skill em{ font:700 italic 24px/1 var(--font-ui); color:#2b4565; white-space:nowrap; }
.skill b{ font:900 italic 28px/1 var(--font-ui); color:#ffe14a; -webkit-text-stroke:5px #2b3f5f; paint-order:stroke fill; letter-spacing:1px; }
.hex{ position:relative; display:block; width:74px; height:82px; flex:none;
  background:var(--c,#2a5e8c); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.hex::before{ content:''; position:absolute; inset:4px; background:inherit; clip-path:inherit; box-shadow:inset 0 0 0 3px #fff; outline:3px solid rgba(255,255,255,.7); }
.hex::after{ content:''; position:absolute; inset:16px 14px; background:#fff; -webkit-mask:var(--m) center / contain no-repeat; mask:var(--m) center / contain no-repeat; }
.wtype{ flex:none; width:128px; height:126px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:#e8eef2; border:2px solid #d3dce3; border-radius:4px; transform:skewX(-5deg); }
.wtype > *{ transform:skewX(5deg); }
.wtype .svg{ width:38px; height:38px; }
.wtype b{ font:700 italic 40px/1 var(--font-ui); color:#2b3c55; }
.wcard{ flex:1; position:relative; height:126px; border-radius:4px; overflow:hidden; transform:skewX(-5deg);
  background:linear-gradient(120deg, #e9f0f5, #f8fbfd 60%, #e3ecf2); border:2px solid #d3dce3; }
.wcard em{ position:absolute; left:20px; top:10px; transform:skewX(5deg); font:700 italic 26px/1 var(--font-ui); color:#2b3c55; max-width:300px; text-align:left; }
.wcard img{ position:absolute; left:58%; top:56%; height:96px; width:auto; max-width:330px; object-fit:contain; transform:translate(-50%,-50%) skewX(5deg); }
.st__gear{ flex:1; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.gear{ position:relative; height:118px; border-radius:6px; background:linear-gradient(135deg, #f3f6f8, #e3ebf1); box-shadow:0 1px 3px rgba(0,0,0,.2);
  display:grid; place-items:center; transform:skewX(-5deg); }
.gear img{ height:86px; width:auto; transform:skewX(5deg); }
.gear b{ position:absolute; left:6px; bottom:4px; padding:2px 8px; border-radius:12px; background:#f6fbff; border:2px solid #3b6ea5;
  font:700 italic 20px/1 var(--font-ui); color:#2b4f7d; transform:skewX(5deg); }
.gear--unique{ background:linear-gradient(135deg, #fde3ee, #f8cfe0); }
.st__skilllist{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding:4px 6px 4px 2px; }
.skrow{ display:flex; gap:20px; align-items:flex-start; padding:14px 16px; background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.skrow .hex{ margin-top:4px; }
.skrow p{ margin:0; }
.skrow__top{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.skrow__top em{ font:700 italic 24px/1 var(--font-ui); color:#4d84c2; }
.skrow__top b{ font:700 30px/1.2 var(--font-ui); color:#2b3c52; }
.skrow__top span{ font:700 22px/1 var(--font-ui); color:#fff; background:#2b4565; padding:4px 10px; border-radius:12px; }
.skrow__desc{ margin-top:8px !important; font:500 26px/1.45 var(--font-ui); color:#4a5462; }
.st__log{ display:flex; flex-direction:column; margin:0 2px; border:2px solid #cfdbe3; border-radius:4px; background:#edf3f7; }
.logrow{ display:flex; justify-content:space-between; align-items:center; height:76px; padding:0 26px; font:700 34px/1 var(--font-ui); color:#222a33; }
.logrow + .logrow{ border-top:2px solid #d3dde4; }
.logrow em{ font-style:normal; font-weight:500; color:#3b4b5d; }
.st__none{ flex:1; display:grid; place-items:center; margin:10px 2px; background:#c9d5de; border-radius:4px; font:500 40px/1 var(--font-ui); color:#5d6d7c; }
.st__cta{ display:flex; justify-content:flex-end; margin-top:auto; padding-top:20px; }
.st__big{ width:370px; height:104px; border-radius:10px; transform:skewX(-8deg); background:linear-gradient(120deg, #8de0fb, #4fc4f2);
  color:#2b3c55; font:700 46px/1 var(--font-ui); box-shadow:0 3px 6px rgba(20,60,110,.25); }
.st__big > span{ display:inline-block; transform:skewX(8deg); }

/* ---------------------------------------------------------------- Student Intro */
.intro{ display:flex; gap:26px; min-height:0; }
.intro__left{ flex:1; min-width:0; display:flex; flex-direction:column; }
.intro__top{ display:flex; gap:14px; align-items:flex-start; }
.intro__pic{ width:170px; height:192px; object-fit:cover; border-radius:8px; border:4px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.intro__school{ flex:none; width:84px; height:84px; margin-top:14px; border-radius:10px; background:#fff; border:2px solid #d6dde3; display:grid; place-items:center; }
.intro__school i{ width:66px; height:60px; background:#1f2a38; -webkit-mask:var(--m) center / contain no-repeat; mask:var(--m) center / contain no-repeat; }
.intro__who{ font:700 33px/1.3 var(--font-ui); color:#30455e; }
.intro__who mark{ background:#fbf283; color:#30455e; padding:0 4px; }
.intro__who p{ margin:2px 0 0; font-size:30px; }
.intro__name{ white-space:nowrap; margin:4px 0 14px 190px; padding-top:10px; border-top:2px solid #d9dee3; font:700 64px/1.1 var(--font-ui); color:#2a2f36; }
.intro__name span{ color:#2c4a72; }
.intro__text{ margin:14px 6px 0; max-height:320px; overflow-y:auto; white-space:pre-line; font:500 31px/1.4 var(--font-ui); color:#555c64; }
.nb{ position:relative; flex:none; width:520px; padding:62px 18px 18px; background:#fff; border:2px solid #d9dee3; border-radius:6px; }
.nb__rings{ position:absolute; left:12px; right:12px; top:12px; height:26px;
  background:radial-gradient(circle, #fff 0 9px, #b9c0c6 10px 12px, transparent 13px) 0 0 / 41px 26px repeat-x; }
.nb__row{ display:flex; gap:22px; align-items:baseline; padding:12px 6px; border-bottom:2px solid #dfe3e7; font:500 31px/1.35 var(--font-ui); color:#4a5462; }
.nb__row b{ flex:none; width:122px; color:#30455e; font-weight:700; }

/* ---------------------------------------------------------------- Exclusive Weapon Info */
.win--weapon .win__body{ padding:24px 44px 36px; }
.wi{ display:flex; gap:44px; }
.wi__left{ flex:none; width:600px; display:flex; flex-direction:column; align-items:center; }
.wi__ring{ width:330px; height:330px; border-radius:50%; border:3px solid #cfe6f6; display:grid; place-items:center; }
.wi__ring img{ width:300px; height:auto; }
.wi__kind{ align-self:stretch; display:flex; align-items:baseline; justify-content:space-between; margin:20px 0 0; padding-bottom:8px;
  border-bottom:2px solid #cfd8df; font:700 italic 36px/1 var(--font-ui); color:#2b4f7d; }
.wi__kind b{ color:#2b3c55; }
.wi__name{ align-self:stretch; margin:18px 0 0; font:700 46px/1.1 var(--font-ui); color:#2a2f36; }
.wi__lv{ align-self:stretch; display:flex; align-items:center; justify-content:space-between; margin:16px 0 0; font:700 italic 32px/1 var(--font-ui); color:#2b3c55; }
.wi__stars{ display:flex; gap:2px; }
.star--blue{ width:34px; height:34px; filter:hue-rotate(165deg) saturate(1.6) brightness(1.15); }
.wi__right{ flex:1; min-width:0; min-height:420px; border:2px solid #d6e0e7; border-radius:4px; background:#fff; display:flex; flex-direction:column; }
.wi__tabs{ display:flex; background:#b6e2f6; padding:10px 10px 0; }
.wi__tab{ flex:1; height:74px; font:700 38px/74px var(--font-ui); color:#3a6a8f; text-align:center; border-radius:4px 4px 0 0; }
.wi__tab.on{ background:#fff; color:#2b3c52; }
.wi__body{ padding:20px 24px 26px; }
.wi__stats{ display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; margin-top:16px; padding:10px 16px; border:2px solid #d6e0e7; border-radius:4px; background:#f1f5f8; }
.wi__stats .kv{ height:56px; }
.wi__note{ margin:16px 4px 0; font:500 28px/1.4 var(--font-ui); color:#5a6672; }
.wi__desc{ margin:16px 6px 0; white-space:pre-line; font:500 32px/1.45 var(--font-ui); color:#4a5462; }

@media (prefers-reduced-motion: reduce){
  .win{ animation:none; }
  .gbtn, .sc__card, .st__sq{ transition:none; }
}

/* ---------------------------------------------------------------- Roll Call
   The Student screen for a student nobody has met: "?" until a clue lands. */
.roll__full{ transition:filter .4s ease-out; }
.roll__halo{ position:absolute; left:210px; top:150px; width:520px; height:auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.roll__unknown{ position:absolute; left:190px; top:120px; width:560px; text-align:center; font:700 620px/1 var(--font-ui); color:rgba(255,255,255,.5);
  text-shadow:0 8px 30px rgba(20,40,80,.25); }
.roll__q{ font:700 30px/26px var(--font-ui); color:rgba(255,255,255,.75); font-style:normal; }
.squad--unknown{ color:#9aa5b1; }
.roll__exp{ background:rgba(255,255,255,.18); }
.roll__exp i{ position:absolute; left:0; top:0; bottom:0; background:#ffe600; }
.roll__exp em{ right:10px; }
.chip-role.is-q{ color:#9aa5b1; font-size:38px; }
.roll__moods i{ width:55px; height:58px; border-radius:5px; background:#fff; display:grid; place-items:center; font:700 32px/1 var(--font-ui);
  font-style:normal; color:#9aa5b1; }
.st__sq:disabled{ opacity:.45; }
.svg--card-sq{ width:64px !important; height:64px !important; }
.st__tab:disabled{ opacity:.45; }
.roll__left{ font:500 28px/1 var(--font-ui); padding-right:18px; color:#d8e6f2; }
.roll__box{ position:relative; flex:none; margin:4px 2px 14px; }
.roll__glass{ position:absolute; left:22px; top:20px; width:40px; height:40px; color:#3e5a8c; }
.roll__glass .svg{ width:40px; height:40px; }
.roll__input{ padding-left:80px; }
.roll__suggest{ position:absolute; left:0; right:0; top:84px; z-index:5; margin:0; padding:6px; list-style:none; background:#fff;
  border:2px solid #cfd8df; border-radius:10px; box-shadow:0 10px 24px rgba(20,40,70,.25); }
.roll__suggest li{ display:flex; align-items:center; gap:16px; height:64px; padding:0 14px; border-radius:6px; font:500 32px/1 var(--font-ui); color:#2b3c52; }
.roll__suggest li.on{ background:#dff3fc; }
.roll__suggest img{ width:50px; height:50px; border-radius:50%; background:#d9e4ea; }
.roll__result{ flex:none; margin:6px 4px 16px; padding:18px 22px; border-radius:6px; background:#edf3f7; border:2px solid #cfdbe3;
  font:700 34px/1.35 var(--font-ui); color:#2b3c52; }
.roll__result.is-won{ background:#fff9cf; border-color:#f3dc63; }
.roll__result span{ display:block; font:500 28px/1.4 var(--font-ui); color:#5a6672; }
.roll__file{ flex:1; min-height:0; display:flex; gap:16px; }
.roll__nb{ width:430px; padding-top:56px; }
.roll__nb .nb__row b{ width:120px; }
.nb__row.is-q span{ color:#b5bcc4; letter-spacing:2px; }
.roll__tried{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.roll__tried-head{ margin:4px 0 4px; font:700 30px/1 var(--font-ui); color:#4f6a85; }
.roll__miss{ display:flex; align-items:center; gap:14px; height:66px; padding:0 14px; border-radius:6px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15);
  font:500 30px/1 var(--font-ui); color:#5a6672; }
.roll__miss img{ width:50px; height:50px; border-radius:50%; filter:grayscale(.6); }
.roll__miss b{ font-weight:500; text-decoration:line-through; text-decoration-color:rgba(190,60,60,.7); text-decoration-thickness:3px; }
.roll__grid{ flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; }
.roll__row{ display:grid; grid-template-columns:62px repeat(8, 1fr); gap:5px; align-items:center; }
.roll__row--head span{ text-align:center; font:700 22px/1 var(--font-ui); color:#4f6a85; }
.roll__face{ width:58px; height:58px; border-radius:50%; background:#d9e4ea; }
.roll__cell{ height:62px; display:grid; place-items:center; padding:0 3px; border-radius:5px; background:#e4e9ed; color:#7c8894; text-align:center;
  font:700 17px/1.05 var(--font-ui); letter-spacing:-.4px; overflow:hidden; hyphens:auto; -webkit-hyphens:auto; }
.roll__cell.is-match{ background:#fbf283; color:#3a3200; box-shadow:inset 0 0 0 2px #f0d84a; }
.roll__cell.is-up::after{ content:' ▲'; color:#2e72d9; }
.roll__cell.is-down::after{ content:' ▼'; color:#d9452e; }
.roll__row.is-hit .roll__face{ box-shadow:0 0 0 4px #f5cf3b; }
.roll__legend{ margin:auto 4px 0; font:500 24px/1.3 var(--font-ui); color:#7c8894; }

/* ---------------------------------------------------------------- Recruitment */
.rb__rail{ position:absolute; left:18px; top:115px; width:3px; height:765px; border-radius:2px; background:rgba(255,255,255,.45); }
.rb__list{ position:absolute; left:44px; top:148px; width:300px; height:800px; padding:6px; display:flex; flex-direction:column; gap:35px;
  overflow-y:auto; scrollbar-width:none; }
.rb__list::-webkit-scrollbar{ display:none; }
.rb__thumb{ position:relative; flex:none; width:280px; height:100px; border-radius:10px; overflow:hidden; text-align:left;
  box-shadow:0 3px 8px rgba(40,20,10,.3), inset 0 0 0 3px rgba(255,255,255,.75); transition:transform .08s; }
.rb__thumb:active{ transform:scale(.96); }
.rb__thumb--pickup{ background:linear-gradient(110deg, #f9fbd0, #c9f0d8 45%, #a8e3f7); }
.rb__thumb--standard{ background:linear-gradient(110deg, #e6f6ff, #a9dcfa 55%, #7cc6f2); }
.rb__thumb--archive{ background:linear-gradient(110deg, #d8fff0, #7fe0d1 50%, #3cb5c9); }
.rb__thumb--fest{ background:linear-gradient(110deg, #ffe6f6, #ffc0e2 45%, #c9a6ff); }
.rb__thumb img{ position:absolute; right:-6px; top:-14px; width:150px; height:auto;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 35%); mask-image:linear-gradient(to right, transparent, #000 35%); }
.rb__thumb b{ position:absolute; left:14px; top:16px; z-index:1; font:900 italic 24px/1.05 var(--font-ui); color:#fff; letter-spacing:-.3px;
  -webkit-text-stroke:6px #2a5f9e; paint-order:stroke fill; transform:rotate(-3deg); transform-origin:0 50%; }
.rb__thumb--fest b{ -webkit-text-stroke-color:#b23c86; }
.rb__thumb--archive b{ -webkit-text-stroke-color:#1c7b72; }
.rb__thumb.on{ box-shadow:0 0 0 4px #ffd36b, 0 0 18px 4px rgba(255,210,90,.75), inset 0 0 0 3px #fff7d0; }
.rb__deco{ position:absolute; left:34px; top:930px; color:#fff; font:700 20px/1 var(--font-ui); letter-spacing:4px; transform:rotate(90deg); transform-origin:0 0; }
.rb__small{ position:absolute; top:1000px; width:116px; height:44px; border-radius:6px; transform:skewX(-10deg); box-shadow:0 2px 4px rgba(0,0,0,.25);
  font:700 22px/44px var(--font-ui); text-align:center; white-space:nowrap; }
.rb__small > span{ display:inline-block; transform:skewX(10deg); }
.rb__rate{ left:28px; background:#eef1f3; color:#4a5562; }
.rb__notes{ left:263px; background:#c62f2f; color:#fff; }
.rb__panel{ position:absolute; left:398px; top:133px; width:1492px; height:877px; border-radius:42px; overflow:hidden; background:#f2e8e2;
  box-shadow:0 6px 24px rgba(40,20,10,.35); }
.rb__art{ position:absolute; inset:0; }
.rb__artbg{ position:absolute; inset:-30px; background:center / cover no-repeat; filter:blur(5px) brightness(1.04) saturate(1.1); }
.rb__girl{ position:absolute; top:-40px; height:1560px; width:auto; transform:translateX(-50%); filter:drop-shadow(0 10px 24px rgba(30,20,40,.35)); }
.rb__girl--1-0{ left:62%; }
.rb__girl--2-0{ left:40%; top:10px; height:1420px; }
.rb__girl--2-1{ left:75%; }
.rb__girl--3-0{ left:30%; top:60px; height:1300px; }
.rb__girl--3-1{ left:83%; top:60px; height:1300px; }
.rb__girl--3-2{ left:57%; }
.rb__tag{ position:absolute; right:30px; top:30px; height:50px; padding:0 30px; border-radius:25px; background:#fff7bb;
  box-shadow:0 0 0 2px #f6dc6b inset, 0 2px 6px rgba(90,70,0,.25); font:700 italic 27px/50px var(--font-ui); color:#604d18; white-space:nowrap; }
.rb__tag::after{ content:""; position:absolute; right:40px; bottom:-10px; border-top:11px solid #fff7bb; border-left:8px solid transparent; border-right:8px solid transparent; }
.rb__feat{ position:absolute; left:34px; top:607px; display:flex; align-items:center; }
.rb__featbox{ position:relative; z-index:1; width:128px; height:110px; border-radius:10px; background:#34475f; display:grid; place-items:center; color:#fff;
  transform:skewX(-10deg); box-shadow:0 3px 8px rgba(0,0,0,.3); }
.rb__featbox .svg{ width:56px; height:56px; transform:skewX(10deg); }
.rb__featlist{ display:flex; align-items:center; gap:10px; height:86px; margin-left:-10px; padding:0 34px 0 30px; max-width:1100px;
  background:linear-gradient(to right, rgba(235,246,255,.92), rgba(235,246,255,.55)); font:500 28px/1 var(--font-ui); color:#5a7da8; white-space:nowrap; overflow:hidden; }
.rb__featlist img{ width:62px; height:62px; border-radius:50%; border:3px solid #fff; background:#d9e4ea; }
.rb__foot{ position:absolute; left:0; right:0; bottom:0; height:170px; background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96) 32%, #fff); }
.rb__title{ position:absolute; left:29px; top:44px; margin:0; font:700 48px/1.1 var(--font-ui); color:#34598b; white-space:nowrap; transform:scaleX(.95); transform-origin:0 50%; }
.rb__date{ position:absolute; left:30px; top:108px; max-width:470px; margin:0; font:500 23px/1 var(--font-ui); letter-spacing:-.3px; color:#5f86b5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb__magn{ position:absolute; left:510px; top:72px; width:60px; height:56px; border-radius:10px; background:#fff; color:#2b3c55; display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(20,40,70,.25); }
.rb__magn .svg{ width:36px; height:36px; }
.rb__dots{ position:absolute; left:592px; top:66px; width:4px; height:60px; background:radial-gradient(circle, #9fb3c4 0 2px, transparent 2.5px) 0 0 / 4px 14px repeat-y; }
.rb__dots--2{ left:832px; }
.rb__point{ position:absolute; left:607px; top:22px; width:210px; height:130px; }
.rb__ticket{ position:absolute; left:0; top:2px; z-index:1; width:58px; height:44px; border-radius:5px; background:linear-gradient(#ffd1dc,#ff9bb4); transform:rotate(-14deg);
  box-shadow:0 0 0 2px #fff, 0 2px 3px rgba(0,0,0,.25); font:900 italic 18px/66px var(--font-ui); color:#fff; text-align:center; -webkit-text-stroke:4px #2b4f7d; paint-order:stroke fill; }
.rb__pointbar{ position:absolute; left:47px; top:21px; width:160px; height:30px; background:#255a7e; transform:skewX(-10deg); color:#fff; text-align:center;
  font:700 26px/30px var(--font-ui); }
.rb__select{ position:absolute; left:15px; top:65px; width:190px; height:53px; border-radius:8px; transform:skewX(-10deg); color:#274456;
  background:linear-gradient(#f2feff,#d3f6ff); box-shadow:0 0 0 2px #b9e5f3 inset, 0 2px 4px rgba(0,0,0,.15); font:700 30px/53px var(--font-ui); text-align:center; }
.rb__select > span{ display:inline-block; transform:skewX(10deg); }
.rb__go{ position:absolute; top:40px; height:97px; border-radius:10px; transform:skewX(-10deg); box-shadow:0 3px 8px rgba(0,0,0,.25); transition:transform .08s; }
.rb__go:active{ transform:skewX(-10deg) scale(.96); }
.rb__go > *{ position:absolute; transform:skewX(10deg); }
.rb__go--1{ left:854px; width:273px; background:linear-gradient(170deg, #8be6ff, #5fc8ec 55%, #43b6d6); }
.rb__go--10{ left:1132px; width:338px; background:linear-gradient(170deg, #fff38a, #ffe347 55%, #f2cb1e); }
.rb__env{ left:6px; top:14px; width:76px; height:62px; border-radius:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 76 62%22%3E%3Crect x=%223%22 y=%224%22 width=%2270%22 height=%2254%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%233a9fd8%22 stroke-width=%223%22/%3E%3Cpath d=%22M5 8l33 26L71 8%22 fill=%22none%22 stroke=%22%233a9fd8%22 stroke-width=%223%22/%3E%3C/svg%3E") center / contain no-repeat; }
.rb__go--10 .rb__env{ filter:drop-shadow(-6px -4px 0 rgba(58,159,216,.55)); }
.rb__env i{ position:absolute; right:-8px; top:-10px; min-width:28px; height:28px; padding:0 4px; border-radius:14px; background:#e8455b; color:#fff; font:700 italic 18px/28px var(--font-ui);
  text-align:center; box-shadow:0 0 0 2px #fff; }
.rb__cost{ left:98px; top:12px; display:flex; align-items:center; }
.rb__gem{ position:relative; z-index:1; width:40px; height:40px; margin-right:-10px; background:url("assets/campaign/icons/gem.webp") center / contain no-repeat; }
.rb__go--1 .rb__cost b, .rb__go--10 .rb__cost b{ display:block; width:132px; height:32px; padding-left:8px; color:#fff; text-align:center; font:700 26px/32px var(--font-ui); }
.rb__go--1 .rb__cost b{ background:#193c53; }
.rb__go--10 .rb__cost b{ background:#472419; width:190px; }
.rb__label{ left:96px; top:50px; font:700 38px/1 var(--font-ui); white-space:nowrap; }
.rb__go--1 .rb__label{ color:#00435e; }
.rb__go--10 .rb__label{ left:136px; color:#452700; }

/* ---------------------------------------------------------------- recruit results */
.rr__head{ position:absolute; left:0; right:0; top:110px; margin:0; text-align:center; font:700 44px/1 var(--font-ui); color:#2b3c52; }
.rr__head span{ font:500 30px/1 var(--font-ui); color:#c0457f; }
.rr__grid{ position:absolute; left:150px; top:176px; width:1620px; display:grid; grid-template-columns:repeat(5, 300px); gap:34px 30px; perspective:1600px; }
.rr__grid--one{ left:735px; width:450px; grid-template-columns:450px; top:190px; }
.rr__card{ position:relative; width:100%; aspect-ratio:300/320; transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.8,.3,1);
  animation:paperIn .35s ease-out both; animation-delay:calc(var(--i) * 70ms); }
@keyframes paperIn{ from{ opacity:0; transform:translateY(-40px) rotate(-4deg); } to{ opacity:1; transform:none; } }
.rr__card.is-open{ transform:rotateY(180deg); animation:none; }
.rr__paper, .rr__face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.rr__paper{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; border-radius:6px; box-shadow:0 6px 16px rgba(40,60,100,.25); }
.rr__card--3 .rr__paper{ box-shadow:0 0 0 3px #fff, 0 0 26px 6px rgba(255,140,220,.7); }
.rr__face{ transform:rotateY(180deg); border-radius:8px; overflow:hidden; background:#fff; border:6px solid var(--rc); box-shadow:0 6px 16px rgba(40,60,100,.3); }
.rr__card--1{ --rc:#78a8ff; }
.rr__card--2{ --rc:#ffd24a; }
.rr__card--3{ --rc:#ff8fd0; }
.rr__face img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
.rr__stars{ position:absolute; left:0; right:0; bottom:56px; display:flex; justify-content:center; gap:2px; }
.rr__stars .star{ width:34px; height:34px; }
.rr__name{ position:absolute; left:0; right:0; bottom:0; height:56px; background:rgba(40,46,66,.82); color:#fff; text-align:center; font:700 28px/56px var(--font-ui);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 8px; }
.rr__new{ position:absolute; left:8px; top:8px; padding:4px 12px; border-radius:6px; background:#e8455b; color:#fff; font:700 italic 22px/1 var(--font-ui); }
.rr__card.is-foil .rr__face::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.55) 35%, rgba(255,180,240,.35) 45%, transparent 60%);
  background-size:250% 100%; animation:foil 2.4s linear infinite; mix-blend-mode:screen; }
@keyframes foil{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
.rr__grid--one .rr__name{ font-size:36px; height:70px; line-height:70px; }
.rr__grid--one .rr__stars{ bottom:74px; }
.rr__btns{ position:absolute; left:0; right:0; top:900px; display:flex; justify-content:center; gap:60px; }
.rr__rates .logrow{ height:68px; }
.rr__featnames{ margin-top:20px; }

@media (prefers-reduced-motion: reduce){
  .rr__card{ animation:none; transition:none; }
  .rr__card.is-foil .rr__face::after{ animation:none; }
}

/* ---------------------------------------------------------------- Mail (MomoTalk window) */
.sub__bg--dim{ filter:brightness(.5) saturate(.9); }
.mt{ position:absolute; left:193px; top:135px; width:1534px; height:810px; border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 14px 40px rgba(0,0,0,.4); display:grid; grid-template-columns:131px 704px 1fr; grid-template-rows:86px minmax(0,1fr); }
.mt__bar{ grid-column:1 / -1; position:relative; display:flex; align-items:center; gap:16px; padding-left:20px;
  background:linear-gradient(to right, #fcb4be, #fc95a7 35%, #fc8fa2); }
.mt__logo{ display:flex; align-items:center; gap:10px; color:#fff; font:700 48px/1 var(--font-ui); letter-spacing:-.5px; }
.mt__peach{ width:46px; height:44px; background:url("https://schaledb.com/images/ui/Icon_MomoTalk2.png") center / contain no-repeat; }
.mt__help{ width:40px; height:40px; border-radius:7px; background:#fff; color:#fc8fa2; font:700 30px/40px var(--font-ui); text-align:center; }
.mt__x{ top:20px; right:24px; }
.mt__x::before, .mt__x::after{ background:#fff; }
.mt__side{ display:flex; flex-direction:column; background:#4c5b6f; }
.mt__tab{ position:relative; height:129px; display:grid; place-items:center; }
.mt__tab.on{ background:#66758a; }
.mt__person{ width:56px; height:60px; background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 56 60%22%3E%3Ccircle cx=%2228%22 cy=%2216%22 r=%2213%22 fill=%22%2379808d%22/%3E%3Cpath d=%22M2 60c0-17 11-27 26-27s26 10 26 27z%22 fill=%22%2379808d%22/%3E%3Cpath d=%22M14 6c4-5 24-5 28 0%22 stroke=%22%2379808d%22 stroke-width=%222%22 fill=%22none%22/%3E%3C/svg%3E") center / contain no-repeat; }
.mt__tab.on .mt__person{ filter:brightness(2.2); }
.mt__bubble{ width:62px; height:54px; background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 62 54%22%3E%3Cpath d=%22M8 2h46a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H24l-12 10v-10H8a6 6 0 0 1-6-6V8a6 6 0 0 1 6-6z%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2220%22 cy=%2222%22 r=%223.5%22 fill=%22%23e8455b%22/%3E%3Ccircle cx=%2231%22 cy=%2222%22 r=%223.5%22 fill=%22%23e8455b%22/%3E%3Ccircle cx=%2242%22 cy=%2222%22 r=%223.5%22 fill=%22%23e8455b%22/%3E%3C/svg%3E") center / contain no-repeat; }
.mt__tab:not(.on) .mt__bubble{ opacity:.6; }
.mt__count{ position:absolute; left:70px; top:22px; min-width:44px; height:34px; padding:0 6px; border-radius:6px; background:#f24a2b; color:#fff;
  font:700 26px/34px var(--font-ui); font-style:normal; text-align:center; }
.mt__list{ display:flex; flex-direction:column; min-height:0; background:#f3f7f8; border-right:2px solid #e2e8ea; }
.mt__listhead{ flex:none; height:84px; display:flex; align-items:center; gap:10px; padding:0 20px 0 26px; background:#eff2f2; }
.mt__listhead > b{ flex:1; font:700 26px/1 var(--font-ui); color:#3f444a; white-space:nowrap; }
.mt__listhead > b span{ font-size:30px; }
.mt__tool, .mt__drop{ height:58px; border-radius:6px; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.18); transform:skewX(-8deg); display:grid; place-items:center; }
.mt__tool{ width:76px; color:#3f444a; }
.mt__tool .svg{ width:40px; height:40px; transform:skewX(8deg); }
.mt__tool--sort .svg{ width:56px; height:38px; }
.mt__drop{ position:relative; width:186px; font:500 28px/1 var(--font-ui); color:#484e52; }
.mt__drop span{ transform:skewX(8deg); }
.mt__drop i{ position:absolute; right:6px; top:5px; border-top:18px solid #3f5f88; border-left:18px solid transparent; }
.mt__rows{ flex:1; min-height:0; overflow-y:auto; }
.mt__row{ width:100%; height:115px; display:flex; align-items:center; gap:18px; padding:0 24px 0 26px; border-bottom:2px solid #e5ebeb; text-align:left; }
.mt__row.on{ background:#dae5e9; }
.mt__ava{ position:relative; flex:none; width:92px; height:92px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.15);
  background:#d4dbe2 url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 56 60%22%3E%3Ccircle cx=%2228%22 cy=%2219%22 r=%2213%22 fill=%22%23f4f7f9%22/%3E%3Cpath d=%22M2 62c0-17 11-27 26-27s26 10 26 27z%22 fill=%22%23f4f7f9%22/%3E%3C/svg%3E") 50% 100% / 70% auto no-repeat; }
.mt__ava--sm{ width:90px; height:90px; }
.mt__mine{ position:absolute; left:-8px; top:-6px; width:34px; height:34px; border-radius:50%; background:#ffe769; color:#f1871d; display:grid; place-items:center; font-style:normal; }
.mt__mine .svg{ width:22px; height:22px; }
.mt__who{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.mt__who b{ font:700 34px/1.1 var(--font-ui); color:#3f444a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt__who span{ font:500 28px/1.2 var(--font-ui); color:#969ba0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt__meta{ flex:none; align-self:stretch; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:10px; }
.mt__meta small{ font:500 22px/1 var(--font-ui); color:#a6abb0; }
.mt__badge{ min-width:40px; height:40px; padding:0 6px; border-radius:4px; background:#f24a2b; color:#fff; font:700 26px/40px var(--font-ui); font-style:normal; text-align:center; }
.mt__replied{ padding:6px 10px; border-radius:4px; background:#4a8acb; color:#fff; font:700 20px/1 var(--font-ui); font-style:normal; }
.mt__empty{ margin:60px 30px; text-align:center; font:500 28px/1.4 var(--font-ui); color:#969ba0; }
.mt__chat{ min-width:0; min-height:0; display:flex; flex-direction:column; background:#fff; }
.mt__thread{ flex:1; min-height:0; display:flex; flex-direction:column; }
.mt__msgs{ flex:1; min-height:0; overflow-y:auto; padding:24px 28px 10px 20px; }
.mt__in{ display:flex; align-items:flex-start; gap:20px; margin-bottom:18px; }
.mt__in > div{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.mt__name{ margin:6px 0 2px; font:700 30px/1.2 var(--font-ui); color:#3f444a; }
.mt__bub{ position:relative; max-width:520px; margin:8px 0 0; padding:10px 18px 12px; border-radius:10px; background:#4c5b6f; color:#fff;
  font:500 30px/1.35 var(--font-ui); white-space:pre-wrap; overflow-wrap:anywhere; }
.mt__name + .mt__bub::before{ content:""; position:absolute; left:-10px; top:14px; border-right:12px solid #4c5b6f; border-top:9px solid transparent; border-bottom:9px solid transparent; }
.mt__bub--title{ font-weight:700; }
.mt__out{ display:flex; justify-content:flex-end; margin:6px 0 18px; }
.mt__bub--blue{ background:#4a8acb; }
.mt__bub--blue::after{ content:""; position:absolute; right:-10px; top:14px; border-left:12px solid #4a8acb; border-top:9px solid transparent; border-bottom:9px solid transparent; }
.mt__drawing{ display:block; width:400px; height:auto; margin:8px 0 0; border-radius:10px; border:3px solid #4c5b6f; background:#fff; }
.mt__like{ margin:10px 0 0; padding:6px 16px; border-radius:18px; background:#fff0f4; color:#e0577a; font:700 24px/1 var(--font-ui); box-shadow:inset 0 0 0 2px #f8c3d2; }
.mt__like.on{ background:#fbd7e2; }
.mt__reply{ flex:none; display:flex; align-items:center; gap:12px; padding:14px 20px; border-top:2px solid #e5ebeb; background:#f7f9fa; }
.mt__input{ height:64px; font-size:28px; }
.mt__input--name{ flex:none; width:170px; }
.mt__send{ min-width:150px; height:64px; font-size:30px; }
.mt__compose{ flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; padding:22px 26px; overflow-y:auto; }
.mt__compose-head{ margin:0; font:700 32px/1 var(--font-ui); color:#3f444a; }
.mt__row2{ display:flex; gap:12px; }
.mt__modes{ display:flex; gap:8px; }
.mt__mode{ padding:10px 26px; border-radius:6px; background:#e7ecef; color:#5c6670; font:700 26px/1 var(--font-ui); }
.mt__mode.on{ background:#4c5b6f; color:#fff; }
.mt__text{ height:260px; padding:16px 20px; resize:none; font:500 28px/1.4 var(--font-ui); }
.mt__pad{ display:flex; gap:18px; align-items:flex-start; }
.mt__canvas{ width:480px; height:360px; border:2px solid #cfd8df; border-radius:8px; background:#fff; touch-action:none; cursor:crosshair; }
.mt__pens{ display:grid; grid-template-columns:repeat(2, 56px); gap:12px; }
.mt__pen{ width:56px; height:56px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 2px rgba(0,0,0,.15); }
.mt__pen.on{ box-shadow:0 0 0 4px #fff, 0 0 0 7px #4a8acb; }
.mt__clear{ grid-column:1 / -1; min-width:0; height:56px; font-size:24px; padding:0 20px; }
.mt__compose-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.mt__compose-foot > span{ font:500 24px/1.3 var(--font-ui); color:#969ba0; }

/* ---------------------------------------------------------------- Pinned (the Notice window)
   The game opens this as a plain web page, so it uses web-page fonts and the
   browser's own scrollbar instead of the game's UI. */
.nt{ position:absolute; left:220px; top:170px; width:1481px; height:740px; background:#fff; box-shadow:0 0 0 2px #1a2229, 0 14px 40px rgba(0,0,0,.45); }
.nt__page{ height:100%; overflow-y:scroll; font-family:Arial, Helvetica, sans-serif; color:#323232; }
.nt__page::-webkit-scrollbar{ width:17px; }
.nt__page::-webkit-scrollbar-track{ background:#f1f1f1; }
.nt__page::-webkit-scrollbar-thumb{ background:#c1c1c1; border:2px solid #f1f1f1; border-top-width:0; border-bottom-width:0; }
.nt__page::-webkit-scrollbar-button:single-button{ display:block; height:17px; background:#f1f1f1 center / 7px 5px no-repeat; }
.nt__page::-webkit-scrollbar-button:single-button:vertical:decrement{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 7 5%22%3E%3Cpath d=%22M3.5 0 7 5H0z%22 fill=%22%23505050%22/%3E%3C/svg%3E"); }
.nt__page::-webkit-scrollbar-button:single-button:vertical:increment{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 7 5%22%3E%3Cpath d=%22M3.5 5 7 0H0z%22 fill=%22%23505050%22/%3E%3C/svg%3E"); }
.nt__page button{ font-family:inherit; }

.nt__banners{ position:relative; height:327px; overflow:hidden; background:#dfeaf7; }
.nt__track{ display:flex; height:100%; transition:transform .5s ease; }
.nt__banner{ position:relative; flex:none; width:732px; height:327px; overflow:hidden; text-align:left; }
.nt__banner--pin img{ width:100%; height:100%; object-fit:cover; display:block; }
.nt__banner--pickup{ background:radial-gradient(circle at 20% 30%, #fff 0 8%, transparent 30%), linear-gradient(120deg, #e8f3ff, #d4e6fb 50%, #ece6ff); }
.nt__banner--roll{ background:radial-gradient(circle at 75% 20%, rgba(255,255,255,.7) 0 6%, transparent 28%), linear-gradient(120deg, #f2ecff, #dfe0fb 55%, #cfe6fb); }
.nt__banner--mail{ background:radial-gradient(circle at 30% 80%, rgba(255,255,255,.5) 0 10%, transparent 35%), linear-gradient(120deg, #a9dcfb, #6fc0f2 55%, #4aa9e6); }
.nt__art{ position:absolute; inset:0; pointer-events:none; }
.nt__girl{ position:absolute; height:520px; width:auto; top:-24px; filter:drop-shadow(0 6px 14px rgba(20,30,60,.25)); }
.nt__banner--pickup .nt__girl--0{ left:-10px; }
.nt__banner--pickup .nt__girl--1{ left:120px; top:10px; height:470px; }
.nt__banner--mail .nt__girl--0{ right:-30px; top:-36px; height:560px; }
.nt__q{ position:absolute; left:70px; top:26px; font:900 260px/1 Arial, sans-serif; color:rgba(70,60,140,.18); }
.nt__copy{ position:absolute; top:0; bottom:0; right:0; width:430px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
.nt__banner--mail .nt__copy{ left:40px; right:auto; width:440px; }
.nt__copy small{ font:17px/1.25 Arial, sans-serif; color:#2b3a55; }
.nt__copy b{ font:900 40px/1.05 Arial, sans-serif; color:#1d2460; letter-spacing:-.8px; }
.nt__banner--mail .nt__copy b{ color:#fff; text-shadow:0 2px 0 #2c5f9e, 0 0 12px rgba(20,60,120,.35); }
.nt__banner--mail .nt__copy small{ color:#123a63; }
.nt__chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:400px; }
.nt__chips i{ font:bold 16px/1 Arial, sans-serif; font-style:normal; color:#fff; padding:5px 12px; border-radius:12px; background:#9b84f0; }
.nt__cta{ margin-top:6px; padding:12px 30px; border-radius:24px; background:#fff; color:#2e3a8f; font:bold 18px/1 Arial, sans-serif; font-style:normal;
  box-shadow:0 0 0 3px #b9b0f6, 0 3px 8px rgba(40,40,110,.25); }
.nt__dots{ position:absolute; left:50%; bottom:11px; transform:translateX(-50%); display:flex; gap:8px; }
.nt__dots i{ width:8px; height:8px; border-radius:50%; background:rgba(40,50,80,.45); cursor:inherit; }
.nt__dots i.on{ background:#fff; box-shadow:0 0 0 1px rgba(40,50,80,.2); }

.nt__tiles{ display:grid; grid-template-columns:repeat(4, 1fr); height:116px; }
.nt__tile{ position:relative; overflow:hidden; text-align:left;
  background:radial-gradient(circle at 18% 22%, #fff 0 1.5px, transparent 2.5px) 0 0 / 46px 38px,
             radial-gradient(circle at 70% 70%, rgba(255,255,255,.85) 0 1px, transparent 2px) 0 0 / 31px 27px,
             linear-gradient(100deg, #a3f3fc, #8eebf8 55%, #b8f4fa); }
.nt__tile + .nt__tile{ box-shadow:inset 1px 0 0 rgba(255,255,255,.6); }
.nt__tile > span{ position:absolute; left:23px; top:50%; z-index:1; transform:translateY(-50%); font:300 30px/1 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color:#3f454c; white-space:nowrap; }
.nt__tile em{ font-style:normal; color:#de5b7b; }
.nt__tile img{ position:absolute; right:18px; top:-6px; height:150px; width:auto;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 30%), linear-gradient(#000 70%, transparent);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent, #000 30%); }
.nt__tile.on{ box-shadow:inset 0 -4px 0 #3a7bd5; }
.nt__band{ height:10px; background:#f2f2f2; }
.nt__news h3{ display:flex; align-items:baseline; gap:14px; margin:0; padding:26px 15px 13px; border-bottom:1px solid #e5e5e5;
  font:bold 20px/1 'Times New Roman', Times, serif; color:#222; }
.nt__row{ display:block; width:100%; height:60px; padding:12px 15px 0; border-bottom:1px solid #f5f5f5; text-align:left; }
.nt__row p{ margin:0; font:16px/20px Arial, Helvetica, sans-serif; color:#323232; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nt__row:hover p{ text-decoration:underline; }
.nt__cat{ color:#3a7bd5; font-size:15px; }
.nt__row small, .nt__article small{ display:block; margin-top:5px; font:12.5px/1 'Times New Roman', Times, serif; color:#9a9a9a; }
.nt__none{ margin:0; padding:22px 15px; font:15px Arial, sans-serif; color:#9a9a9a; }
.nt__back{ font:15px/1 Arial, sans-serif; color:#3a7bd5; }
.nt__article{ padding:22px 26px 50px; }
.nt__article h2{ margin:18px 0 0; font:bold 22px/1.3 Arial, Helvetica, sans-serif; color:#222; }
.nt__article hr{ border:0; border-top:1px solid #e5e5e5; margin:16px 0; }
.nt__body{ margin:0 0 16px; font:16px/1.7 Arial, Helvetica, sans-serif; color:#333; white-space:pre-wrap; }
.nt__img{ display:block; max-width:100%; max-height:520px; margin:0 0 16px; }
.nt__open{ font:bold 16px Arial, sans-serif; color:#3a7bd5; }
.nt__tweet small{ margin-bottom:16px; }

/* ---------------------------------------------------------------- BA Radio
   A game window: what is on air with its progress, Listen or Stop and the
   volume, then the next tracks in the shared cycle in the Voice Recap's
   row style. The tile it opens from names the track on air. */
.tile__txt--now em{ max-width:182px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.win--radio .win__body{ padding:24px 40px 30px; gap:0; }
.rd__now{ padding:22px 10px 28px; }
.rd__title{ margin:0 0 18px; font:700 46px/1.15 var(--font-ui); color:#2b3c52; }
.rd__bar{ display:flex; align-items:center; gap:22px; }
.rd__track{ position:relative; flex:1; height:16px; border-radius:8px; background:#d6dde3; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.15); }
.rd__track i{ position:absolute; left:0; top:0; bottom:0; border-radius:8px; background:linear-gradient(90deg, #8de0fb, #4fc4f2); }
.rd__time{ flex:none; min-width:150px; text-align:right; font:500 30px/1 var(--font-ui); color:#5a6672; font-variant-numeric:tabular-nums; }
.rd__ctrl{ display:flex; align-items:center; gap:48px; margin-top:28px; }
.rd__play{ min-width:300px; }
.rd__volwrap{ flex:1; display:flex; align-items:center; gap:18px; }
.rd__speaker{ flex:none; width:44px; height:40px;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 40%22%3E%3Cpath d=%22M3 14h8l11-9v30l-11-9H3z%22 fill=%22%234fa3e0%22/%3E%3Cpath d=%22M28 13a10 10 0 0 1 0 14M33 8a17 17 0 0 1 0 24%22 stroke=%22%234fa3e0%22 stroke-width=%223.5%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") center / contain no-repeat; }
.rd__vol{ flex:1; height:40px; appearance:none; -webkit-appearance:none; background:transparent; cursor:inherit; }
.rd__vol::-webkit-slider-runnable-track{ height:14px; border-radius:7px; background:#d6dde3; box-shadow:inset 0 1px 2px rgba(0,0,0,.15); }
.rd__vol::-webkit-slider-thumb{ -webkit-appearance:none; width:40px; height:40px; margin-top:-13px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px #4fc4f2, 0 2px 5px rgba(0,0,0,.25); }
.rd__vol::-moz-range-track{ height:14px; border-radius:7px; background:#d6dde3; }
.rd__vol::-moz-range-thumb{ width:36px; height:36px; border:0; border-radius:50%; background:#fff; box-shadow:0 0 0 3px #4fc4f2, 0 2px 5px rgba(0,0,0,.25); }
.rd__next{ display:flex; flex-direction:column; gap:10px; padding:16px 6px 6px; }
.rd__row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; height:74px; padding:0 26px 0 30px; border-radius:4px;
  background:linear-gradient(100deg, #fff 55%, rgba(255,255,255,.6)), repeating-linear-gradient(120deg, #eef3f7 0 28px, #f8fafc 28px 56px);
  box-shadow:0 1px 3px rgba(0,0,0,.18); }
.rd__row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:7px; border-radius:4px 0 0 4px; background:#2ec7f2; }
.rd__row b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 32px/1 var(--font-ui); color:#2b3c52; }
.rd__row span{ flex:none; font:500 28px/1 var(--font-ui); color:#8a95a1; font-variant-numeric:tabular-nums; }
.rd__note{ margin:18px 6px 0; font:500 24px/1.4 var(--font-ui); color:#8a95a1; }

/* ---------------------------------------------------------------- owner text editing
   Only signed-in owners ever get these: a pencil on each editable text, the
   chip under the title, and the edit windows. */
.ed__pen{ display:inline-grid; place-items:center; width:34px; height:34px; margin-left:10px; vertical-align:middle; border-radius:50%;
  background:#ffcb2e; color:#2b3a50; font:700 22px/1 var(--font-ui); font-style:normal; box-shadow:0 1px 3px rgba(0,0,0,.3);
  pointer-events:auto; cursor:inherit; transform:none; }
.owner-chip{ position:absolute; left:162px; top:72px; height:40px; padding:0 18px; border-radius:20px; background:#2b3a50; color:#ffcb2e;
  font:700 22px/40px var(--font-ui); box-shadow:0 2px 6px rgba(0,0,0,.3); }
.win--edit .win__body{ gap:0; }
.ed__id{ margin:0 0 14px; font:700 26px/1 var(--font-ui); color:#5a6672; }
.ed__id span{ color:#d68400; }
.ed__area{ height:300px; padding:16px 20px; resize:vertical; font:500 30px/1.45 var(--font-ui); }
.ed__note{ margin:14px 0 0; font-size:24px; color:#8a95a1; }
.ed__err{ margin:10px 0 0; font:700 26px/1.3 var(--font-ui); color:#c62f2f; }
.ed__list{ max-height:640px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.ed__row{ display:flex; align-items:baseline; gap:20px; padding:14px 18px; border-radius:6px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); text-align:left; }
.ed__row b{ flex:none; width:320px; font:700 24px/1.2 var(--font-ui); color:#2b3c52; }
.ed__row span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 24px/1.2 var(--font-ui); color:#6a7480; }
.ed__row em{ flex:none; padding:4px 10px; border-radius:10px; background:#fff1a8; color:#a06a00; font:700 18px/1 var(--font-ui); font-style:normal; }
.panel__bio{ white-space:pre-line; }

/* ---------------------------------------------------------------- owner: pins and mail */
.nt__edit{ margin-left:auto; }
.pe{ display:flex; flex-direction:column; gap:12px; max-height:620px; overflow-y:auto; }
.pe__row{ display:flex; align-items:center; gap:16px; padding:10px 14px; border-radius:6px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15);
  font:500 28px/1.2 var(--font-ui); color:#2b3c52; }
.pe__row b{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe__row .nt__cat{ font-size:24px; }
.pe__btn{ min-width:150px; height:60px; font-size:26px; padding:0 20px; }
.pe__add{ align-self:flex-start; min-width:220px; height:68px; font-size:28px; }
.pe__field{ height:68px; font-size:28px; }
.pe__body{ height:150px; padding:14px 20px; resize:none; font:500 28px/1.4 var(--font-ui); }
.pe__imgrow{ display:flex; align-items:center; gap:20px; font:500 24px/1 var(--font-ui); }
.pe__img{ width:240px; height:135px; object-fit:cover; border-radius:6px; background:#e3e9ee; }
.mt__del{ display:inline-grid; place-items:center; width:30px; height:30px; margin-left:10px; vertical-align:middle; border-radius:50%;
  background:#c62f2f; color:#fff; font:700 18px/1 var(--font-ui); }
.mt__bub .mt__del{ margin:0 -6px 0 12px; }