/* Samurai: a CSS skin with pictures of its own (img/ui/samurai/, the same for every colour). Black ink, bone white and
   the site's colour as blood. One of the user's four ink paintings of warriors under a red sun, picked at random as the
   page loads, stands on the page's black at its right and the site flows in the room beside it (the site's video can
   play inside it, Admin > Appearance). Each painting is kept as two layers: the ink (screened, so its black ground never shows and its edges fade to nothing) and its reds as a mask
   painted in the colour, so a blue site gets a blue sun. Titles are brush calligraphy (Ma Shan Zheng from Google Fonts,
   its Latin part, fetched only by a samurai page), reading text a plain sans. Panels are ink washes with dry-brushed
   edges, buttons and rules brush strokes, a red slash runs under what is pointed at, a white filigree cartouche is the
   skin's emblem, the welcome slide's ring an ensō, and sakura petals drift down the page (site.js, `sakura`). Structure
   comes from modern's rules in site.css (written for modern, gilded and samurai); every rule here is scoped under
   [data-skin='samurai']. */

/* Ma Shan Zheng's Latin; a page in Greek, Cyrillic, Thai, Japanese, Chinese or Korean also gets
   samurai_fonts/<script>.css (view.php), more faces of this family drawn by a brush hand for that script */
@font-face { font-family: 'Samurai Brush'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://fonts.gstatic.com/s/mashanzheng/v18/NaPecZTRCLxvwo41b4gvzkXadMPmDQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

[data-skin='samurai'] {
  --sm-art: url(../../img/ui/samurai/samurai.webp);
  /* the darks take a breath of the colour's hue (relative colour syntax; the color-mix() before stands in without it) */
  /* the ground is the paintings' own black */
  --sm-ink: #000;
  --sm-wash: color-mix(in srgb, var(--accent) 3%, #0a0909);
  --sm-wash: hsl(from var(--accent) h 10% 4%);
  --sm-wash-hi: color-mix(in srgb, var(--accent) 4%, #110f0f);
  --sm-wash-hi: hsl(from var(--accent) h 10% 6.5%);
  /* the paintings' red lifted from the colour: the masks were measured against a bright blood red */
  --sm-blood: color-mix(in srgb, var(--accent) 78%, #ff7a5c);
  --sm-blood: hsl(from var(--accent) h min(100, calc(s * 1.12)) min(70, calc(l * 1.2)));
  /* the paintings' reds: the colour as deep as blood, so a light colour never floods them flat */
  --sm-paint: color-mix(in srgb, var(--accent) 85%, #000);
  --sm-paint: hsl(from var(--accent) h calc(s * 0.88) min(47, calc(l * 1.06)));
  --sm-bone: #ece4d6;
  --sm-bone-dim: #b9b0a2;
  --line: rgba(236, 228, 214, 0.09);
  --text-0: #f4eee4;
  --text-1: #d4ccbf;
  --text-2: #8f877c;
  --steel: var(--sm-bone);
  --glow: none;
  --font-ui: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Samurai Brush', 'Yu Mincho', 'Hiragino Mincho ProN', Georgia, serif;
  --sm-stroke: url(../../img/ui/samurai/stroke.webp);
  --sm-splat: url(../../img/ui/samurai/splat.webp);
  --sm-edge: url(../../img/ui/samurai/edge.webp);
  --sm-filigree: url(../../img/ui/samurai/filigree.svg);
  --sm-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E");
}
[data-skin='samurai'] body { background: var(--sm-ink); color: var(--text-1); font-family: var(--font-ui); }
[data-skin='samurai'] ::selection { background: rgba(var(--accent-rgb), 0.45); color: #fff; }
[data-skin='samurai'] a { text-decoration-color: rgba(var(--accent-rgb), 0.5); }

/* ---------- The page: one painting, picked at random as the page loads, the site flowing round it ---------- */

/* kernel/store.php samurai_art() names it on <html data-art>. The painting stands whole and crisp at the right of the
   screen, as tall as the screen lets it while the content keeps 720 px beside it (--sm-h); the figure and its sun take
   about 0.58 of that height across (--sm-zone), and on wide screens the page keeps that room free, so the hero's words,
   the blocks and every page flow in the space on its left and never cover the figure. The ground is the paintings' own
   black, so nothing shows where they end */
[data-skin='samurai'] { --sm-pic: url(../../img/ui/samurai/winged.webp); --sm-red: url(../../img/ui/samurai/winged_red.webp);
  --sm-h: 100vh; --sm-zone: 0px;
  --sm-pos: right 0 top 0 / auto var(--sm-h) no-repeat; }
[data-skin='samurai'][data-art='ink'] { --sm-pic: url(../../img/ui/samurai/ink.webp); --sm-red: url(../../img/ui/samurai/ink_red.webp); }
[data-skin='samurai'][data-art='elf'] { --sm-pic: url(../../img/ui/samurai/elf.webp); --sm-red: url(../../img/ui/samurai/elf_red.webp); }
[data-skin='samurai'][data-art='samurai'] { --sm-pic: url(../../img/ui/samurai/samurai.webp); --sm-red: url(../../img/ui/samurai/samurai_red.webp); }
@media (min-width: 1100px) {
  [data-skin='samurai'] { --sm-h: min(100vh, 1240px, calc((100vw - 760px) / 0.58)); --sm-zone: calc(var(--sm-h) * 0.58); }
  [data-skin='samurai'] .main { padding-right: calc(var(--sm-zone) + 12px); }
}

/* the background on the page (Admin > Appearance, data-artvideo): the ground stays the paintings' pure black, or the
   video (at 3%) and the grain showed over the hero, lighter than the painting's black */
[data-skin='samurai'] .bg-dim { opacity: 1; background: #000; }
[data-skin='samurai']:not([data-artvideo='art']) .bg.has-grain::after { display: none; }
[data-skin='samurai'] .bg-vignette { display: none; }
/* the fade carries the painting: the ink screened onto the page (its black ground never shows, whatever lies under it),
   its reds painted in the colour over it; only its far left and the strip under the bar are sunk in black. The masks
   sit on the two layers themselves: a mask, opacity or z-index on the fade would isolate it and the screen would turn
   the painting's black into a black box */
[data-skin='samurai'] .bg-fade { background: none; --sm-o: 1;
  --sm-fade: linear-gradient(90deg, transparent calc(100% - var(--sm-h) * 1.02), #000 calc(100% - var(--sm-h) * 0.7)); }
[data-skin='samurai'] .bg-fade::before, [data-skin='samurai'] .bg-fade::after { content: ''; position: absolute; inset: 0; opacity: var(--sm-o); }
[data-skin='samurai'] .bg-fade::before { background: var(--sm-pic) var(--sm-pos); mix-blend-mode: screen; -webkit-mask: var(--sm-fade); mask: var(--sm-fade); }
[data-skin='samurai'] .bg-fade::after { background: var(--sm-paint);
  -webkit-mask: var(--sm-fade), var(--sm-red) var(--sm-pos); -webkit-mask-composite: source-in;
  mask: var(--sm-fade), var(--sm-red) var(--sm-pos); mask-composite: intersect; }
/* narrower screens: the painting stands behind the content, dimmed, so the blocks keep their full width */
@media (max-width: 1099px) {
  [data-skin='samurai'] .bg-fade { --sm-o: 0.45; }
}
/* the background inside the art (Admin > Appearance, data-artvideo): the site's video, picture or map tour shows only
   through the painting's reds (its sun, its splashes), above the black page, the colour faint over it */
[data-skin='samurai'][data-artvideo='art'] .bg { --sm-fade: linear-gradient(90deg, transparent calc(100% - var(--sm-h) * 1.02), #000 calc(100% - var(--sm-h) * 0.7)); }
[data-skin='samurai'][data-artvideo='art'] .bg :is(.bg-media, .bg-map-layer, .fx-backdrop) { inset: 0; z-index: 2; opacity: 1; scale: none; transform: none; animation: none;
  -webkit-mask: var(--sm-fade), var(--sm-red) var(--sm-pos); -webkit-mask-composite: source-in;
  mask: var(--sm-fade), var(--sm-red) var(--sm-pos); mask-composite: intersect; }
[data-skin='samurai'][data-artvideo='art'] .bg:is(.bg-video, .bg-image, .bg-map) .bg-dim { opacity: 1; }
[data-skin='samurai'][data-artvideo='art'] .bg:is(.bg-video, .bg-image, .bg-map) .bg-fade::after { opacity: calc(var(--sm-o) * 0.25); }
@media (max-width: 1099px) { [data-skin='samurai'][data-artvideo='art'] .bg :is(.bg-media, .bg-map-layer, .fx-backdrop) { opacity: 0.45; } }
/* the living ink (site.js `inkmap`, Admin > Appearance data-artink): a canvas laid exactly over the painting (the same
   height and right edge, its width the painting's), masked to the painting's bone whites (<art>_white.webp, made with
   the paintings by tools/website_art/samurai/art.py) and to the same fade, so the strokes it draws live only in the
   whites. It sits between the ink and the reds, so the reds and the video inside them stay over it */
[data-skin='samurai'] { --sm-white: url(../../img/ui/samurai/winged_white.webp); --sm-ar: 0.8333; }
[data-skin='samurai'][data-art='ink'] { --sm-white: url(../../img/ui/samurai/ink_white.webp); }
[data-skin='samurai'][data-art='elf'] { --sm-white: url(../../img/ui/samurai/elf_white.webp); }
[data-skin='samurai'][data-art='samurai'] { --sm-white: url(../../img/ui/samurai/samurai_white.webp); --sm-ar: 0.9571; }
[data-skin='samurai'] .sm-ink { position: absolute; right: 0; top: 0; width: calc(var(--sm-h) * var(--sm-ar)); height: var(--sm-h); opacity: var(--sm-o); pointer-events: none;
  --sm-ink-fade: linear-gradient(90deg, transparent calc(100% - var(--sm-h) * 1.02), #000 calc(100% - var(--sm-h) * 0.7));
  -webkit-mask: var(--sm-ink-fade), var(--sm-white) 0 0 / 100% 100% no-repeat; -webkit-mask-composite: source-in;
  mask: var(--sm-ink-fade), var(--sm-white) 0 0 / 100% 100% no-repeat; mask-composite: intersect; }
[data-skin='samurai'][data-artink='off'] .sm-ink { display: none; }
/* the floor under the hero (css/hero_art.css) lies on the same black: no colour of its own, no pattern unless the admin
   picks one */
[data-skin='samurai'] :is(.floor, .floor-page) { background: none; }
[data-skin='samurai'] :is(.floor, .floor-page)[data-floor='auto']::after { display: none; }
/* the hero's edge (Admin > Appearance, data-heroline): none unless the brush line is chosen, so the hero and the page are
   one black and the painting shows whole (the line itself is css/hero_art.css's) */
[data-skin='samurai']:not([data-heroline='brush']) .hero-wrap:not(.wrap, .hero-style-strip) .hero::after,
[data-skin='samurai']:not([data-heroline='brush']) .hero-wrap:not(.wrap, .hero-style-strip) .hero::before,
[data-skin='samurai']:not([data-heroline='brush']) .hero-wrap.wrap + .floor::before,
[data-skin='samurai']:not([data-heroline='brush']) .hero-wrap.wrap + .floor > .floor-edge { display: none; }

/* the petals' canvas (site.js, sakura): over the page under the bar and its panels, the pointer passing through; the
   hero's embers give way to them */
[data-skin='samurai'] .sakura { position: fixed; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
[data-skin='samurai'] .embers { display: none; }

/* ---------- Header: the logo, the menu in brush script, no slab ---------- */

[data-skin='samurai'] .head { height: 88px; margin-bottom: -88px; }
[data-skin='samurai'] .main { padding-top: 112px; }
[data-skin='samurai'] .page-home .main { padding-top: 0; }
[data-skin='samurai'] .bar { height: 88px; background: linear-gradient(to bottom, color-mix(in srgb, var(--sm-ink) 92%, transparent), transparent); backdrop-filter: none; box-shadow: none; }
[data-skin='samurai'] .bar::after, [data-skin='samurai'] .bar-art { display: none; }
@supports (animation-timeline: scroll()) {
  [data-skin='samurai'] .bar { animation: sm-bar linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
  @keyframes sm-bar { to { background: color-mix(in srgb, var(--sm-ink) 90%, transparent); backdrop-filter: blur(10px); box-shadow: 0 14px 30px -20px #000; } }
}
@media (min-width: 861px) {
  [data-skin='samurai'] .bar-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 30px; height: 88px; padding-bottom: 0; }
  [data-skin='samurai'] .emblem { grid-column: 1; width: 150px; height: 88px; }
  [data-skin='samurai'] .emblem img { top: 50%; width: 132px; max-height: 66px; translate: -50% -50%; }
  [data-skin='samurai'] .nav-left { grid-column: 2; justify-content: flex-start; gap: 4px; padding: 0; }
  [data-skin='samurai'] .nav-right { grid-column: 3; justify-content: flex-end; gap: 12px; padding: 0; }
  /* the filigree hangs under the logo, its strings of dots running out of the bar */
  [data-skin='samurai'] .emblem-art { display: block; position: absolute; left: calc(50% - 9px); top: 66px; width: 18px; height: 68px; background: var(--sm-bone); opacity: 0.7;
    -webkit-mask: var(--sm-filigree) center top / contain no-repeat; mask: var(--sm-filigree) center top / contain no-repeat; filter: none; animation: none; transition: opacity 300ms; }
  [data-skin='samurai'] .emblem:hover .emblem-art { opacity: 1; }
}
[data-skin='samurai'] .emblem img { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.85)); }
[data-skin='samurai'] .emblem:hover img { filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.35)); }
[data-skin='samurai'] .nav-link { padding: 8px 14px 10px; color: var(--sm-bone-dim); font: 400 22px/1 var(--font-display); letter-spacing: 0.02em; text-transform: none; text-shadow: 0 2px 10px #000; transition: color 200ms var(--ease); }
[data-skin='samurai'] .nav-link:is(:hover, .is-here, .is-open) { color: var(--sm-bone); text-shadow: 0 2px 10px #000; }
/* under the item pointed at, a red brush stroke is laid left to right */
[data-skin='samurai'] .nav-link::after { content: ''; position: absolute; left: 8px; right: 6px; bottom: 1px; height: 11px; border-radius: 0; background: var(--sm-blood); box-shadow: none;
  -webkit-mask: var(--sm-stroke) left center / 100% 100% no-repeat; mask: var(--sm-stroke) left center / 100% 100% no-repeat;
  transform: scaleX(0); transform-origin: left; transition: transform 380ms cubic-bezier(0.7, 0, 0.2, 1); z-index: -1; }
[data-skin='samurai'] .nav-link:is(:hover, .is-here, .is-open)::after { transform: scaleX(1); }
[data-skin='samurai'] .nav-link.is-here:not(:hover)::after { opacity: 0.75; }
[data-skin='samurai'] .nav-caret { margin-inline-start: 6px; opacity: 0.6; }
[data-skin='samurai'] .nav-right > .nav-link[data-fold-open] { font-size: 20px; }
[data-skin='samurai'] .nav-coins { gap: 7px; height: 38px; padding: 0 12px; color: var(--sm-bone); font: 600 14px var(--font-ui); }
[data-skin='samurai'] .notify-bell { color: var(--sm-bone-dim); }
[data-skin='samurai'] .notify-bell:hover { color: var(--sm-bone); }
[data-skin='samurai'] .notify-count { background: var(--accent); color: #fff; box-shadow: none; }

/* the menu's panels: ink washes under the bar */
[data-skin='samurai'] .drops > .nav-drop { top: 78px; padding: 12px 10px; }
[data-skin='samurai'] .nav-drop-text b { color: var(--sm-bone); font: 400 20px var(--font-display); letter-spacing: 0.01em; text-transform: none; }
[data-skin='samurai'] .nav-drop-item:hover .nav-drop-text b { text-shadow: none; }
[data-skin='samurai'] .nav-drop-text small { color: var(--text-2); font-size: 12.5px; }

/* ---------- Panels: ink washes with dry-brushed edges ---------- */

/* the panel itself is clear; its wash is the effects layer, its edge a 9-sliced mask (Chromium and Safari; elsewhere
   the wash keeps a straight edge) */
[data-skin='samurai'] :is(.card, .panel) { padding: 30px 32px 32px; border: 0; border-image: none; border-radius: 0; background: none; backdrop-filter: none; box-shadow: none;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.7)); animation: none; }
[data-skin='samurai'] .panel:not(:has(> .orn-fx)) { background: radial-gradient(ellipse 90% 70% at 30% 0, var(--sm-wash-hi), transparent 70%), color-mix(in srgb, var(--sm-wash) 92%, transparent); }
[data-skin='samurai'] .orn-fx { display: block; inset: 0; border-radius: 0; opacity: 1; animation: none;
  background: radial-gradient(ellipse 90% 70% at 22% 0, var(--sm-wash-hi), transparent 70%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(var(--accent-rgb), 0.05), transparent 70%), color-mix(in srgb, var(--sm-wash) 93%, transparent);
  -webkit-mask: none; mask: none;
  -webkit-mask-box-image: var(--sm-edge) 48 fill / 24px stretch; }
[data-skin='samurai'] .block-glass { border-radius: 0; background: color-mix(in srgb, var(--sm-wash) 70%, transparent); }
/* a block's title: brush calligraphy in bone white, a slash of the colour laid under its first words */
[data-skin='samurai'] :is(.card-head, .h-title) { position: relative; margin: 0 0 20px; padding: 0; border: 0; color: var(--sm-bone); font: 400 31px/1.15 var(--font-display); letter-spacing: 0.01em; text-transform: none; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9); }
[data-skin='samurai'] .h-title { font-size: 40px; }
[data-skin='samurai'] .card-head h2 { position: relative; z-index: 0; font: inherit; }
[data-skin='samurai'] :is(.card-head h2, .h-title:not(.char-head, .guild-head))::after { content: ''; position: absolute; inset: auto auto -3px -12px; z-index: -1; width: min(100% + 30px, 210px); height: 15px; background: var(--sm-blood); opacity: 0.85;
  -webkit-mask: var(--sm-stroke) left center / 100% 100% no-repeat; mask: var(--sm-stroke) left center / 100% 100% no-repeat; display: block; border: 0; filter: none; animation: none; }
[data-skin='samurai'] .h-title:not(.char-head, .guild-head) { display: inline-block; justify-content: flex-start; }
[data-skin='samurai'] :is(.card-head, .h-title) .rune, [data-skin='samurai'] :is(.card-head, .h-title) .head-rune { display: none; }
[data-skin='samurai'] .card-more { display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; color: var(--sm-bone-dim); font: 400 19px var(--font-display); letter-spacing: 0; text-transform: none; text-shadow: none; transition: color 200ms; }
[data-skin='samurai'] .card-more::after { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--sm-chev) center / contain no-repeat; mask: var(--sm-chev) center / contain no-repeat; transition: translate 200ms var(--ease); }
[data-skin='samurai'] .card-more:hover { color: var(--sm-bone); }
[data-skin='samurai'] .card-more:hover::after { translate: 3px 0; }
[data-skin='samurai'] .block-head { border-bottom-color: var(--line); }
/* a rule between sections: a dry stroke from each side into the filigree turned on its side */
[data-skin='samurai'] .divider { position: relative; height: 30px; margin: 26px 0; }
[data-skin='samurai'] .divider::before, [data-skin='samurai'] .divider::after { content: ''; position: absolute; top: 50%; width: calc(50% - 64px); height: 10px; translate: 0 -50%; background: rgba(236, 228, 214, 0.42); mix-blend-mode: normal; animation: none;
  -webkit-mask: var(--sm-stroke) center / 100% 100% no-repeat; mask: var(--sm-stroke) center / 100% 100% no-repeat; display: block; }
[data-skin='samurai'] .divider::before { right: calc(50% + 64px); scale: -1 1; }
[data-skin='samurai'] .divider::after { left: calc(50% + 64px); }
[data-skin='samurai'] .divider { background: url(../../img/ui/samurai/filigree_h.svg) center / 112px 30px no-repeat; opacity: 0.8; }
[data-skin='samurai'] :is(.lead, .muted) { color: var(--text-2); }
[data-skin='samurai'] .lead { color: var(--text-1); }
[data-skin='samurai'] .flash { border: 0; border-radius: 0; background: rgba(74, 157, 110, 0.14); }
[data-skin='samurai'] .flash-error { background: rgba(var(--accent-rgb), 0.16); }
[data-skin='samurai'] .h-display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; }

/* ---------- Buttons: a swipe of the brush that holds its words ---------- */

/* every button is one brush band (band_l/m/r.webp: the head and the dry tail keep their shape, the middle stretches to any
   width): the call to action in the colour, the others in a wash of bone ink, a ghost
   in dark ink. Hovered, the band brightens and a darker slash of ink sweeps in UNDER the words; pressed, it sinks */
[data-skin='samurai'] .btn { --sm-band: rgba(236, 228, 214, 0.13); --sm-slash: var(--sm-blood);
  isolation: isolate; height: 46px; min-width: 0; padding: 0 34px 0 30px; overflow: visible; border: 0; border-image: none; border-radius: 0; background: none; box-shadow: none;
  color: var(--sm-bone); font: 400 21px/1 var(--font-display); letter-spacing: 0.02em; text-transform: none; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); filter: none; animation: none;
  transition: color 180ms var(--ease), scale 140ms var(--ease); }
[data-skin='samurai'] .btn::before, [data-skin='samurai'] .btn::after { content: ''; position: absolute; display: block; pointer-events: none; translate: none; }
[data-skin='samurai'] .btn::before { inset: 0; z-index: -2; background: var(--sm-band);
  --sm-cl: 25px; --sm-cr: 35px; -webkit-mask: url(../../img/ui/samurai/band_l.webp) left top / var(--sm-cl) 100% no-repeat, url(../../img/ui/samurai/band_r.webp) right top / var(--sm-cr) 100% no-repeat, url(../../img/ui/samurai/band_m.webp) var(--sm-cl) top / calc(100% - var(--sm-cl) - var(--sm-cr) + 1px) 100% no-repeat; mask: url(../../img/ui/samurai/band_l.webp) left top / var(--sm-cl) 100% no-repeat, url(../../img/ui/samurai/band_r.webp) right top / var(--sm-cr) 100% no-repeat, url(../../img/ui/samurai/band_m.webp) var(--sm-cl) top / calc(100% - var(--sm-cl) - var(--sm-cr) + 1px) 100% no-repeat;
  transition: background 200ms var(--ease), filter 200ms var(--ease); }
/* the slash: a thin stroke along the band's lower part, under the words, drawn in from the left */
[data-skin='samurai'] .btn::after { left: 16px; right: 28px; top: 66%; z-index: -1; height: 22%; translate: 0 -50%; rotate: -1.5deg; background: var(--sm-slash); opacity: 0.85;
  -webkit-mask: var(--sm-stroke) left center / 100% 100% no-repeat; mask: var(--sm-stroke) left center / 100% 100% no-repeat;
  clip-path: inset(-6px 100% -6px -6px); transition: clip-path 380ms cubic-bezier(0.6, 0, 0.2, 1); }
[data-skin='samurai'] .btn:is(:hover, :focus-visible) { color: #fff; translate: none; filter: none; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
/* the band is the only face: no fill of the button's own, whatever site.css gives modern's buttons when hovered */
[data-skin='samurai'] .btn.btn:is(:hover, :focus-visible, :active) { background: none; box-shadow: none; }
[data-skin='samurai'] .btn:is(:hover, :focus-visible)::before { background: rgba(236, 228, 214, 0.2); }
[data-skin='samurai'] .btn:is(:hover, :focus-visible)::after { clip-path: inset(-6px -6px -6px -6px); }
[data-skin='samurai'] .btn:active { scale: 0.97; }
[data-skin='samurai'] .btn:focus-visible { outline: 1px dashed rgba(236, 228, 214, 0.55); outline-offset: 5px; }
/* the call to action: the band in the colour, its slash a deeper ink of it */
[data-skin='samurai'] :is(.btn-primary, .btn-play, .btn-accent, .tab.is-active) { --sm-band: var(--sm-blood); --sm-slash: rgba(0, 0, 0, 0.42); color: #fff; }
[data-skin='samurai'] :is(.btn-primary, .btn-play, .btn-accent):is(:hover, :focus-visible)::before { background: var(--sm-blood); filter: brightness(1.14) saturate(1.05); }
[data-skin='samurai'][data-custom] :is(.btn-primary, .btn-play, .btn-accent, .tab.is-active) { color: var(--accent-ink); text-shadow: none; }
/* a ghost: the band in dark ink, its words dimmer until pointed at */
[data-skin='samurai'] .btn-ghost { --sm-band: rgba(236, 228, 214, 0.06); opacity: 1; color: var(--text-1); }
[data-skin='samurai'] .btn-lg { height: 58px; padding: 0 44px 0 38px; font-size: 25px; }
[data-skin='samurai'] .btn-sm { height: 36px; padding: 0 26px 0 22px; font-size: 18px; }
[data-skin='samurai'] .btn-sm::before { --sm-cl: 18px; --sm-cr: 26px; -webkit-mask: url(../../img/ui/samurai/band_l.webp) left top / var(--sm-cl) 100% no-repeat, url(../../img/ui/samurai/band_r.webp) right top / var(--sm-cr) 100% no-repeat, url(../../img/ui/samurai/band_m.webp) var(--sm-cl) top / calc(100% - var(--sm-cl) - var(--sm-cr) + 1px) 100% no-repeat; mask: url(../../img/ui/samurai/band_l.webp) left top / var(--sm-cl) 100% no-repeat, url(../../img/ui/samurai/band_r.webp) right top / var(--sm-cr) 100% no-repeat, url(../../img/ui/samurai/band_m.webp) var(--sm-cl) top / calc(100% - var(--sm-cl) - var(--sm-cr) + 1px) 100% no-repeat; }
/* the header's register and Play now: the colour's band */
[data-skin='samurai'] .nav-right > :is(.nav-accent, .btn-play) { --sm-band: var(--sm-blood); --sm-slash: rgba(0, 0, 0, 0.42);
  position: relative; isolation: isolate; height: 42px; padding: 0 30px 0 24px; color: #fff; font: 400 21px/1 var(--font-display); letter-spacing: 0.02em; text-transform: none; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
[data-skin='samurai'] .nav-right > .nav-accent::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--sm-band);
  --sm-cl: 22px; --sm-cr: 30px; -webkit-mask: url(../../img/ui/samurai/band_l.webp) left top / var(--sm-cl) 100% no-repeat, url(../../img/ui/samurai/band_r.webp) right top / var(--sm-cr) 100% no-repeat, url(../../img/ui/samurai/band_m.webp) var(--sm-cl) top / calc(100% - var(--sm-cl) - var(--sm-cr) + 1px) 100% no-repeat; mask: url(../../img/ui/samurai/band_l.webp) left top / var(--sm-cl) 100% no-repeat, url(../../img/ui/samurai/band_r.webp) right top / var(--sm-cr) 100% no-repeat, url(../../img/ui/samurai/band_m.webp) var(--sm-cl) top / calc(100% - var(--sm-cl) - var(--sm-cr) + 1px) 100% no-repeat; }
[data-skin='samurai'] .nav-right > .nav-accent::after { display: none; }
[data-skin='samurai'] .nav-right > .nav-accent:hover::before { filter: brightness(1.14); }
/* the gacha's pulls: the band holds the label, the price under it and the perks as small dark chips inside */
[data-skin='samurai'] .gacha-pulls { gap: 18px; }
[data-skin='samurai'] .gacha-pull.btn { min-width: 230px; height: auto; min-height: 76px; padding: 12px 48px 12px 40px; gap: 4px; }
[data-skin='samurai'] .gacha-pull.btn::before { --sm-cl: 30px; --sm-cr: 44px; -webkit-mask: url(../../img/ui/samurai/band_l.webp) left top / var(--sm-cl) 100% no-repeat, url(../../img/ui/samurai/band_r.webp) right top / var(--sm-cr) 100% no-repeat, url(../../img/ui/samurai/band_m.webp) var(--sm-cl) top / calc(100% - var(--sm-cl) - var(--sm-cr) + 1px) 100% no-repeat; mask: url(../../img/ui/samurai/band_l.webp) left top / var(--sm-cl) 100% no-repeat, url(../../img/ui/samurai/band_r.webp) right top / var(--sm-cr) 100% no-repeat, url(../../img/ui/samurai/band_m.webp) var(--sm-cl) top / calc(100% - var(--sm-cl) - var(--sm-cr) + 1px) 100% no-repeat; }
[data-skin='samurai'] .gacha-pull.btn::after { top: 40px; height: 9px; translate: none; }
[data-skin='samurai'] .gacha-pull.is-ten { min-width: 320px; }
[data-skin='samurai'] .gacha-pull b { font: 400 25px/1 var(--font-display); letter-spacing: 0.01em; text-transform: none; }
[data-skin='samurai'] .gacha-pull span { font: 700 15px var(--font-ui); }
[data-skin='samurai'] .gacha-perks { gap: 5px; margin-top: 4px; max-width: 300px; }
[data-skin='samurai'] .gacha-perks i { padding: 2px 8px; border-radius: 0; background: rgba(0, 0, 0, 0.42); color: var(--sm-bone); font: 600 11px var(--font-ui); letter-spacing: 0.02em; }

/* ---------- Pills, tags and fields ---------- */

[data-skin='samurai'] .subtabs { justify-content: flex-start; gap: 4px; margin: 0 0 22px; }
[data-skin='samurai'] .subtabs .nav-link { font-size: 21px; }
[data-skin='samurai'] .tabs { justify-content: flex-start; gap: 6px; }
[data-skin='samurai'] .tab { font-size: 19px; }
[data-skin='samurai'] .tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 0; border-radius: 0; background: rgba(0, 0, 0, 0.55); color: var(--sm-bone); font: 600 11.5px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
[data-skin='samurai'] .tag::before { content: ''; width: 7px; height: 7px; rotate: 45deg; background: var(--tag); }
[data-skin='samurai'] .input { border: 0; border-bottom: 1px solid rgba(236, 228, 214, 0.22); border-radius: 0; background: rgba(0, 0, 0, 0.35); box-shadow: none; color: var(--text-0); font-family: var(--font-ui); }
[data-skin='samurai'] .input:hover { border-bottom-color: rgba(236, 228, 214, 0.4); }
[data-skin='samurai'] .input:focus { border-bottom-color: var(--sm-blood); box-shadow: 0 1px 0 var(--sm-blood); }
[data-skin='samurai'] .input::placeholder { color: #6f685f; }
[data-skin='samurai'] .field-label { color: var(--text-2); font-size: 12px; letter-spacing: 0.1em; }
[data-skin='samurai'] .field:focus-within .field-label { color: var(--sm-blood); }
[data-skin='samurai'] :is(.thumb-arrow, .fold-go) { width: 42px; height: 42px; border-radius: 50%; background-color: rgba(236, 228, 214, 0.06); box-shadow: inset 0 0 0 1px rgba(236, 228, 214, 0.2); }
[data-skin='samurai'] :is(.thumb-arrow, .fold-go):hover { background-color: var(--accent); box-shadow: none; }
[data-skin='samurai'] .fold-go { width: 34px; height: 34px; }

/* ---------- Home: the hero ---------- */

/* the hero is open: the page's painting stands beside its words */
[data-skin='samurai'] .hero { background: none; }
/* the words keep a pool of black behind them */
[data-skin='samurai'] .slide-welcome .slide-body { position: relative; }
[data-skin='samurai'] .slide-welcome .slide-body::before { content: ''; position: absolute; inset: -30% 18%; z-index: -1; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.5) 55%, transparent); pointer-events: none; }
[data-skin='samurai'] .slide-title { color: var(--sm-bone); font: 400 clamp(46px, 6vw, 84px)/1 var(--font-display); letter-spacing: 0.01em; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.95); }
[data-skin='samurai'] .hero.is-short .slide-title { font-size: clamp(40px, 5vw, 68px); }
[data-skin='samurai'] .slide-sub { color: var(--text-1); font-size: clamp(16px, 1.5vw, 19px); letter-spacing: 0.02em; text-shadow: 0 1px 12px #000; }
[data-skin='samurai'] .slide-actions { gap: 20px; }
[data-skin='samurai'] .slide-tagline { border: 0; border-radius: 0; background: none; color: var(--sm-blood); font: 400 22px var(--font-display); letter-spacing: 0.02em; text-transform: none; }
/* the kanji 侍 brushed at the foot of the welcome slide, under its words */
[data-skin='samurai'] .slide-welcome .slide-text::after { content: ''; order: 9; width: 64px; height: 62px; margin-top: 22px; background: var(--sm-bone); opacity: 0.85;
  -webkit-mask: url(../../img/ui/samurai/kanji.webp) center / contain no-repeat; mask: url(../../img/ui/samurai/kanji.webp) center / contain no-repeat; }
[data-skin='samurai'] .hero.is-short .slide-welcome .slide-text::after { display: none; }
/* the crest: an ensō brushed round the logo, turning slowly, a red sun behind */
[data-skin='samurai'] .crest-ring { background: var(--sm-bone); opacity: 0.85; -webkit-mask: url(../../img/ui/samurai/enso.webp) center / contain no-repeat; mask: url(../../img/ui/samurai/enso.webp) center / contain no-repeat; border: 0; border-radius: 0; animation-duration: 120s; }
[data-skin='samurai'] .crest-ring.is-back { display: none; }
[data-skin='samurai'] .crest::before { inset: 20%; background: radial-gradient(circle, var(--sm-blood) 0 60%, transparent 71%); opacity: 0.55; filter: blur(2px); }
/* slides with pictures: ink fading in from the side the words are on */
[data-skin='samurai'] .slide:has(.slide-art)::after { background: linear-gradient(90deg, color-mix(in srgb, var(--sm-ink) calc(min(1, var(--hero-dim, 0.3) + 0.6) * 100%), transparent) 0%, color-mix(in srgb, var(--sm-ink) calc(var(--hero-dim, 0.3) * 100%), transparent) 60%), linear-gradient(to top, var(--sm-ink), transparent 30%); }
[data-skin='samurai'] .slide.is-right:has(.slide-art)::after { background: linear-gradient(-90deg, color-mix(in srgb, var(--sm-ink) calc(min(1, var(--hero-dim, 0.3) + 0.6) * 100%), transparent) 0%, color-mix(in srgb, var(--sm-ink) calc(var(--hero-dim, 0.3) * 100%), transparent) 60%), linear-gradient(to top, var(--sm-ink), transparent 30%); }
[data-skin='samurai'] .hero-count { border: 0; border-radius: 0; background: none; color: var(--text-2); font: 400 17px var(--font-display); }
[data-skin='samurai'] .hero-count b { color: var(--sm-bone); font-size: 24px; }
/* the designs' controls */
[data-skin='samurai'] .hero-arrow { border-radius: 50%; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(236, 228, 214, 0.25); color: var(--sm-bone); }
[data-skin='samurai'] .hero-arrow:hover { background: var(--accent); box-shadow: none; }
[data-skin='samurai'] .hero-arrow.is-out { box-shadow: none; background: none; }
[data-skin='samurai'] .hero-rail-item { border-radius: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)); color: var(--text-1); font: 400 19px/1.2 var(--font-display); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-skin='samurai'] .hero-rail-item i { color: var(--sm-blood); font: 400 18px var(--font-display); }
[data-skin='samurai'] .hero-rail-item.is-on { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.3), rgba(0, 0, 0, 0.4)); color: #fff; }
[data-skin='samurai'] :is(.hero-rail-item, .hero-pick, .hero-page).is-on::after { height: 3px; background: var(--sm-blood); }
/* the pager (samurai's own design): its numerals brushed as kanji, the one shown on a red stroke */
[data-skin='samurai'] .hero-pager { gap: 2px; padding: 4px 10px; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-skin='samurai'] .hero-pager .hero-arrow { background: none; box-shadow: none; }
[data-skin='samurai'] .hero-page { isolation: isolate; min-width: 44px; height: 44px; border-radius: 0; background: none; color: transparent; font: 400 0/1 var(--font-display); overflow: visible; }
[data-skin='samurai'] .hero-page::before { content: counter(sm-page, cjk-decimal); counter-increment: sm-page; color: var(--sm-bone-dim); font: 600 30px/44px 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif; transition: color 200ms; }
[data-skin='samurai'] .hero-pager { counter-reset: sm-page; }
[data-skin='samurai'] .hero-page:hover::before { color: var(--sm-bone); }
[data-skin='samurai'] .hero-page.is-on { background: none; }
[data-skin='samurai'] .hero-page.is-on::before { color: var(--sm-blood); text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5); }
[data-skin='samurai'] .hero-page.is-on::after { left: 4px; right: 4px; bottom: 3px; height: 6px; z-index: -1; background: var(--sm-blood);
  -webkit-mask: var(--sm-stroke) left center / 100% 100% no-repeat; mask: var(--sm-stroke) left center / 100% 100% no-repeat; }
[data-skin='samurai'] .hero-story i { border-radius: 0; background: rgba(236, 228, 214, 0.18); }
[data-skin='samurai'] .hero-story i::after { background: var(--sm-blood); }
[data-skin='samurai'] .hero-dot { background: rgba(236, 228, 214, 0.2); }
[data-skin='samurai'] .hero-dot.is-on { background: rgba(var(--accent-rgb), 0.3); }
[data-skin='samurai'] .hero-dot.is-on::after { background: var(--sm-blood); }
[data-skin='samurai'] .hero-showcase, [data-skin='samurai'] .hero-style-showcase .hero, [data-skin='samurai'] .hero-aside, [data-skin='samurai'] .hero-pick { border-radius: 0; }
[data-skin='samurai'] .hero-aside { background: color-mix(in srgb, var(--sm-wash) 92%, transparent); }
[data-skin='samurai'] .hero-pick { background: var(--sm-ink); font: 400 17px var(--font-display); }
[data-skin='samurai'] .hero-pick.is-on { box-shadow: inset 0 0 0 1px var(--sm-blood); }
[data-skin='samurai'] .hero-style-panel .hero { border-radius: 0; box-shadow: none; }
[data-skin='samurai'] .thumbs { border: 0; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--sm-ink) 94%, transparent) 30%); box-shadow: none; }
[data-skin='samurai'] .thumb { border-radius: 0; background: rgba(236, 228, 214, 0.04); color: var(--text-1); font: 400 18px/1.2 var(--font-display); }
[data-skin='samurai'] .thumb img { opacity: 0.4; }
[data-skin='samurai'] .thumb.is-on { color: #fff; background: rgba(var(--accent-rgb), 0.1); }
[data-skin='samurai'] .thumb.is-on::after { height: 3px; background: var(--sm-blood); box-shadow: none; }

/* ---------- News, posts, rankings ---------- */

[data-skin='samurai'] .news-row { border-bottom: 1px solid var(--line); }
[data-skin='samurai'] .news-title { color: var(--text-0); font-weight: 600; }
[data-skin='samurai'] .news-date { color: var(--text-2); font-size: 13px; }
[data-skin='samurai'] .w-news :is(.news-item, .news-card, .news-tile, .news-lead) .news-title { font: 400 22px/1.2 var(--font-display); }
/* a news row pointed at: the red slash cuts under its title */
[data-skin='samurai'] :is(.news-row, .news-item, .news-card, .news-lead, .news-compact li) { position: relative; isolation: isolate; }
[data-skin='samurai'] :is(.news-row, .news-item, .news-compact li)::after { content: ''; position: absolute; left: -6px; bottom: 2px; z-index: -1; width: min(70%, 320px); height: 9px; background: var(--sm-blood); opacity: 0.8;
  -webkit-mask: var(--sm-stroke) left center / 100% 100% no-repeat; mask: var(--sm-stroke) left center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: left; transition: transform 380ms cubic-bezier(0.7, 0, 0.2, 1); pointer-events: none; }
[data-skin='samurai'] :is(.news-row, .news-item, .news-compact li):hover::after { transform: scaleX(1); }
[data-skin='samurai'] .news-row:hover .news-title, [data-skin='samurai'] .news-compact a:hover { color: #fff; text-shadow: none; }
[data-skin='samurai'] .news-dot { background: var(--sm-blood); box-shadow: none; border-radius: 0; rotate: 45deg; }
[data-skin='samurai'] :is(.news-card, .news-lead) { border: 0; border-radius: 0; background: rgba(0, 0, 0, 0.35); }
[data-skin='samurai'] :is(.news-cover, .news-thumb, .news-tile) { border: 0; border-radius: 0; }
[data-skin='samurai'] .news-tile::after { background: linear-gradient(to top, color-mix(in srgb, var(--sm-ink) 96%, transparent) 10%, color-mix(in srgb, var(--sm-ink) 35%, transparent) 60%, transparent); }
[data-skin='samurai'] :is(.news-cover, .news-thumb).is-blank { background: radial-gradient(circle at 70% 40%, color-mix(in srgb, var(--sm-blood) 70%, transparent) 0 18%, transparent 19%), var(--sm-ink); }
[data-skin='samurai'] article.panel { max-width: 880px; }
[data-skin='samurai'] .post-meta { color: var(--text-2); }
[data-skin='samurai'] .post-media { border: 0; border-radius: 0; }
[data-skin='samurai'] .post-body { color: var(--text-1); font-size: 16px; line-height: 1.75; }
[data-skin='samurai'] :is(.post-body, .md) :is(h1, h2, h3, h4) { color: var(--sm-bone); font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; text-transform: none; }
[data-skin='samurai'] :is(.post-body, .md) :is(h1, h2) { font-size: 1.9em; }
[data-skin='samurai'] :is(.post-body, .md) a { color: color-mix(in srgb, var(--sm-blood) 70%, #fff); }
[data-skin='samurai'] :is(.post-body, .md) blockquote { border: 0; border-left: 0; padding: 12px 18px; background: rgba(0, 0, 0, 0.35); }
[data-skin='samurai'] .comments-title { font: 400 26px var(--font-display); letter-spacing: 0; text-transform: none; }
[data-skin='samurai'] .comment-author { color: var(--sm-bone); }
[data-skin='samurai'] .rank-row { border-bottom: 1px solid var(--line); }
[data-skin='samurai'] .rank-row:hover { background: rgba(236, 228, 214, 0.03); }
[data-skin='samurai'] .rank-pos { font: 400 24px var(--font-display); }
[data-skin='samurai'] .rank-row:nth-child(1) .rank-pos { color: var(--sm-blood); text-shadow: none; animation: none; }
[data-skin='samurai'] .rank-row:nth-child(2) .rank-pos { color: var(--sm-bone); }
[data-skin='samurai'] .rank-row:nth-child(3) .rank-pos { color: var(--sm-bone-dim); }
[data-skin='samurai'] .stat-value, [data-skin='samurai'] .stat-num { font-family: var(--font-display); font-weight: 400; }
[data-skin='samurai'] .stat-label { letter-spacing: 0.1em; }
[data-skin='samurai'] .avatar { box-shadow: 0 0 0 1px rgba(236, 228, 214, 0.25), 0 2px 8px rgba(0, 0, 0, 0.6); }
[data-skin='samurai'] .stat-rune { stroke: var(--sm-blood); filter: none; }
[data-skin='samurai'] .event-name { font: 400 21px/1.1 var(--font-display); }

/* a character's page: the name brushed large */
[data-skin='samurai'] .h-title.char-head { display: flex; color: var(--text-1); font: 400 15px/1.6 var(--font-ui); }
[data-skin='samurai'] .char-name-big { font: 400 44px/1.05 var(--font-display); letter-spacing: 0.01em; }
[data-skin='samurai'] .char-class { color: var(--sm-blood); font: 400 21px var(--font-display); letter-spacing: 0.01em; text-transform: none; }
[data-skin='samurai'] .side-box h3 { color: var(--sm-bone); font: 400 22px var(--font-display); letter-spacing: 0; text-transform: none; }
[data-skin='samurai'] .forum { --surface: rgba(236, 228, 214, 0.03); --surface-2: rgba(236, 228, 214, 0.06); --pop: var(--sm-wash-hi); }
[data-skin='samurai'] .board-link.is-here { background: rgba(var(--accent-rgb), 0.12); }
[data-skin='samurai'] .tw-tabs a.is-here::after { background: var(--sm-blood); }
[data-skin='samurai'] .loader { background: radial-gradient(ellipse at 50% 45%, var(--sm-wash), var(--sm-ink) 70%); }
[data-skin='samurai'] .loader-stem { stroke: var(--sm-blood); }
[data-skin='samurai'] .loader-track { stroke: rgba(236, 228, 214, 0.1); }
[data-skin='samurai'] .loader-label { color: var(--text-2); font: 400 20px var(--font-display); letter-spacing: 0.02em; text-transform: none; }

/* ---------- Footer: the filigree beside the logo, the kanji in the corner ---------- */

[data-skin='samurai'] .foot { overflow: hidden; border-top: 0; background: linear-gradient(to bottom, transparent, var(--sm-ink) 40%); box-shadow: none; }
[data-skin='samurai'] .foot::before { content: ''; position: absolute; left: 50%; top: 0; width: min(1160px, 92%); height: 10px; translate: -50% 0; background: rgba(236, 228, 214, 0.1);
  -webkit-mask: var(--sm-stroke) center / 100% 100% no-repeat; mask: var(--sm-stroke) center / 100% 100% no-repeat; }
[data-skin='samurai'] .foot::after { content: ''; position: absolute; right: max(16px, calc(50% - 640px)); bottom: -18px; width: 150px; height: 144px; background: rgba(var(--accent-rgb), 0.16);
  -webkit-mask: url(../../img/ui/samurai/kanji.webp) center / contain no-repeat; mask: url(../../img/ui/samurai/kanji.webp) center / contain no-repeat; pointer-events: none; }
[data-skin='samurai'] .foot-row { position: relative; z-index: 1; gap: 26px; padding-top: 40px; padding-bottom: 40px; }
[data-skin='samurai'] .foot-row::before { content: ''; flex: none; order: -1; width: 16px; height: 62px; background: var(--sm-bone); opacity: 0.55;
  -webkit-mask: var(--sm-filigree) center / contain no-repeat; mask: var(--sm-filigree) center / contain no-repeat; }
[data-skin='samurai'] .foot-row strong { color: var(--sm-bone); font: 400 24px var(--font-display); letter-spacing: 0.01em; }
[data-skin='samurai'] .foot-lang { font: 400 19px var(--font-display); }
[data-skin='samurai'] .foot-lang:hover { color: var(--sm-bone); }
[data-skin='samurai'] .credits-list h3 { color: var(--sm-bone); font: 400 20px var(--font-display); letter-spacing: 0.01em; text-transform: none; }
[data-skin='samurai'] .foot-link { border-radius: 50%; color: var(--sm-bone-dim); }
[data-skin='samurai'] .foot-link:hover { background: rgba(var(--accent-rgb), 0.18); color: #fff; }

/* ---------- Blocks keep their whole layout in narrower room ---------- */

/* the events strip wraps into rows instead of scrolling cards out of sight; titles wrap instead of being cut */
[data-skin='samurai'] .event-list.is-strip { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); overflow: visible; padding-bottom: 0; }
[data-skin='samurai'] .card-head { flex-wrap: wrap; row-gap: 4px; }
[data-skin='samurai'] .card-head h2 { overflow: visible; white-space: normal; text-overflow: clip; }

/* ---------- The hero's pictures: no edge, ever ---------- */

/* a slide's picture fades into the black on every side, the side its words are on the most, so it melts into the page
   and into the painting beside it */
[data-skin='samurai'] .slide-art {
  -webkit-mask: linear-gradient(to right, transparent 3%, #000 40%, #000 52%, transparent 88%), linear-gradient(to bottom, transparent 6%, #000 26%, #000 46%, transparent 80%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, transparent 3%, #000 40%, #000 52%, transparent 88%), linear-gradient(to bottom, transparent 6%, #000 26%, #000 46%, transparent 80%);
  mask-composite: intersect; }
[data-skin='samurai'] .slide.is-right .slide-art {
  -webkit-mask: linear-gradient(to left, transparent 3%, #000 40%, #000 52%, transparent 88%), linear-gradient(to bottom, transparent 6%, #000 26%, #000 46%, transparent 80%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to left, transparent 3%, #000 40%, #000 52%, transparent 88%), linear-gradient(to bottom, transparent 6%, #000 26%, #000 46%, transparent 80%);
  mask-composite: intersect; }
[data-skin='samurai'] .slide.is-center .slide-art {
  -webkit-mask: radial-gradient(ellipse 55% 58% at 50% 42%, #000 35%, transparent 100%); mask: radial-gradient(ellipse 55% 58% at 50% 42%, #000 35%, transparent 100%); }
[data-skin='samurai'] .slide:has(.slide-art)::after { background: radial-gradient(ellipse 80% 90% at 30% 50%, color-mix(in srgb, var(--sm-ink) calc(var(--hero-dim, 0.3) * 100% + 30%), transparent), transparent 75%); }
[data-skin='samurai'] .slide.is-right:has(.slide-art)::after { background: radial-gradient(ellipse 80% 90% at 70% 50%, color-mix(in srgb, var(--sm-ink) calc(var(--hero-dim, 0.3) * 100% + 30%), transparent), transparent 75%); }
/* the rail's titles: ink washes fading out to the right, not boxes */
[data-skin='samurai'] .hero-rail-item { background: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.35) 70%, transparent); }
[data-skin='samurai'] .hero-rail-item.is-on { background: linear-gradient(90deg, color-mix(in srgb, var(--sm-paint) 55%, transparent), rgba(0, 0, 0, 0.3) 75%, transparent); }

/* ---------- Progress: a brush stroke that paints itself ---------- */

/* every autoplay line (rail, pager, thumbnails, showcase, dots, stories) is the dry stroke, revealed from its loaded end
   to its dry tail over the slide's time, never squeezed */
@keyframes sm-paint { from { clip-path: inset(-4px 100% -4px -4px); } to { clip-path: inset(-4px -4px -4px -4px); } }
[data-skin='samurai'] :is(.hero-rail-item, .hero-pick, .hero-page, .thumb, .hero-dot).is-on::after, [data-skin='samurai'] .hero-story i::after {
  height: 7px; border-radius: 0; background: var(--sm-blood); box-shadow: none; transform: none;
  -webkit-mask: var(--sm-stroke) left center / 100% 100% no-repeat; mask: var(--sm-stroke) left center / 100% 100% no-repeat;
  animation: sm-paint var(--autoplay) linear both; }
[data-skin='samurai'] .hero-rail-item.is-on::after { bottom: 1px; }
[data-skin='samurai'] .hero-dot.is-on { width: 48px; height: 10px; background: rgba(236, 228, 214, 0.12); -webkit-mask: var(--sm-stroke) left center / 100% 100% no-repeat; mask: var(--sm-stroke) left center / 100% 100% no-repeat; }
[data-skin='samurai'] .hero-dot.is-on::after { inset: 0; height: auto; -webkit-mask: none; mask: none; }
[data-skin='samurai'] .hero-story i { height: 8px; overflow: visible; background: rgba(236, 228, 214, 0.1); -webkit-mask: var(--sm-stroke) left center / 100% 100% no-repeat; mask: var(--sm-stroke) left center / 100% 100% no-repeat; }
[data-skin='samurai'] .hero-story i::after { inset: 0; height: auto; -webkit-mask: none; mask: none; animation: none; clip-path: inset(-4px 100% -4px -4px); }
[data-skin='samurai'] .hero-story:has(~ .hero-story.is-on) i::after { clip-path: none; }
[data-skin='samurai'] .hero-story.is-on i::after { animation: sm-paint var(--autoplay) linear both; }
[data-skin='samurai'] .hero-wrap.is-still :is(.hero-rail-item, .hero-page, .hero-pick, .hero-dot, .thumb).is-on::after, [data-skin='samurai'] .hero-wrap.is-still .hero-story.is-on i::after { animation: none; clip-path: none; }
[data-skin='samurai'] .is-paused :is(.hero-rail-item, .hero-page, .hero-pick, .hero-dot, .thumb).is-on::after, [data-skin='samurai'] .is-paused .hero-story.is-on i::after { animation-play-state: paused; }
/* the gacha's odds: each tier's share a stroke of its colour, painted in when the panel shows */
[data-skin='samurai'] .gacha-rate-bar { height: 9px; border-radius: 0; overflow: visible; background: color-mix(in srgb, var(--tier) 12%, transparent); -webkit-mask: var(--sm-stroke) left center / 100% 100% no-repeat; mask: var(--sm-stroke) left center / 100% 100% no-repeat; }
[data-skin='samurai'] .gacha-rate-bar i { border-radius: 0; box-shadow: none; animation: sm-paint 1.1s cubic-bezier(0.5, 0, 0.2, 1) both; }
[data-skin='samurai'] .gacha-rate-tier b { font: 400 19px var(--font-display); letter-spacing: 0.02em; text-transform: none; }

/* ---------- The loader: an ensō turning, and in it the kana あ brushed stroke by stroke as the page arrives ---------- */

[data-skin='samurai'] .loader-vine { display: none; }
[data-skin='samurai'] .loader-logo { width: min(200px, 46vw); }
[data-skin='samurai'] .loader-circle { position: relative; display: grid; place-items: center; width: min(230px, 60vw); aspect-ratio: 1; }
[data-skin='samurai'] .loader-ring { inset: 0; background: var(--sm-bone); opacity: 0.4; -webkit-mask: url(../../img/ui/samurai/enso.webp) center / contain no-repeat; mask: url(../../img/ui/samurai/enso.webp) center / contain no-repeat; animation: turn 40s linear infinite; }
[data-skin='samurai'] .loader-circle::before { content: ''; position: absolute; inset: 24%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sm-paint) 55%, transparent), transparent 70%); }
[data-skin='samurai'] .loader-star { display: none; }
[data-skin='samurai'] .loader-kana { position: absolute; inset: 20%; display: block; overflow: visible; fill: none; stroke: var(--sm-bone); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8)); }
/* stroke i of n is drawn while the progress runs from i/n to (i+1)/n */
[data-skin='samurai'] .loader-kana path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--p, 0) * var(--n) - var(--i), 1)); opacity: clamp(0, (var(--p, 0) * var(--n) - var(--i)) * 40, 1); transition: stroke-dashoffset 260ms var(--ease); }

/* ---------- The menu's kanji: each item's meaning brushed before it, its strokes drawn in order ---------- */

[data-skin='samurai'] .nav-kanji { display: inline-block; flex: none; width: 21px; height: 21px; margin-inline-end: 8px; overflow: visible; fill: none; stroke: var(--sm-blood); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.9)); }
[data-skin='samurai'] .nav-kanji path { stroke-dasharray: 1; stroke-dashoffset: 0; }
[data-skin='samurai'] :is(.nav-link, .nav-drop-item):is(:hover, :focus-visible) .nav-kanji path { animation: sm-stroke 340ms cubic-bezier(0.5, 0, 0.3, 1) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes sm-stroke { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- The menus: ink-wash panels, each item its kanji brushed to the left of its name ---------- */

/* the panels under the bar (nav categories, the bell) are framed blocks: the ink wash with its dry-brushed edge (.orn-fx)
   lies under them; here only their room and their items */
[data-skin='samurai'] .drops > :is(.nav-drop, .notify-panel) { filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.85)); }
[data-skin='samurai'] .drops > .nav-drop { width: 330px; padding: 26px 14px 16px; }
[data-skin='samurai'] .nav-drop-list { gap: 0; }
[data-skin='samurai'] .nav-drop-item { position: relative; isolation: isolate; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 10px 12px 12px 8px; border-radius: 0; background: none; translate: none; }
[data-skin='samurai'] .nav-drop-item + .nav-drop-item, [data-skin='samurai'] .nav-drop-list li + li .nav-drop-item { border-top: 1px solid rgba(236, 228, 214, 0.05); }
[data-skin='samurai'] .nav-drop-item:is(:hover, :focus-visible, .is-here) { background: none; translate: none; }
[data-skin='samurai'] .nav-drop-rune { display: grid; place-items: center; align-self: center; }
[data-skin='samurai'] .nav-drop-rune .nav-kanji { width: 26px; height: 26px; margin: 0; stroke-width: 7; }
[data-skin='samurai'] .nav-drop-rune .nav-rune { display: none; }
[data-skin='samurai'] .nav-drop-text { gap: 2px; }
[data-skin='samurai'] .nav-drop-text b { color: var(--sm-bone); font: 400 21px/1.1 var(--font-display); letter-spacing: 0.01em; text-transform: none; }
[data-skin='samurai'] .nav-drop-item:is(:hover, :focus-visible) .nav-drop-text b { color: #fff; text-shadow: none; }
[data-skin='samurai'] .nav-drop-text small { color: var(--text-2); font: 12.5px/1.3 var(--font-ui); }
/* pointed at or current: a brush stroke of the colour laid under the name, from the kanji outwards */
[data-skin='samurai'] .nav-drop-item::after { content: ''; position: absolute; left: 40px; bottom: 6px; z-index: -1; width: min(70%, 190px); height: 9px; background: var(--sm-blood); opacity: 0.8;
  -webkit-mask: var(--sm-stroke) left center / 100% 100% no-repeat; mask: var(--sm-stroke) left center / 100% 100% no-repeat;
  clip-path: inset(-4px 100% -4px -4px); transition: clip-path 360ms cubic-bezier(0.6, 0, 0.2, 1); }
[data-skin='samurai'] .nav-drop-item:is(:hover, :focus-visible, .is-here)::after { clip-path: inset(-4px -4px -4px -4px); }
[data-skin='samurai'] .nav-drop-item.is-here:not(:hover)::after { opacity: 0.5; }

/* the bar: each item's kanji to the left of its label, never over it; tighter between 861 and 1300 px */
[data-skin='samurai'] .nav-left, [data-skin='samurai'] .nav-right { min-width: 0; }
[data-skin='samurai'] .nav-link { flex: none; align-items: center; }
[data-skin='samurai'] .nav-link > .nav-kanji { position: static; flex: none; margin: 0; margin-inline-end: 8px; }
@media (min-width: 861px) and (max-width: 1300px) {
  [data-skin='samurai'] .bar-row { gap: 14px; }
  [data-skin='samurai'] .emblem { width: 118px; }
  [data-skin='samurai'] .emblem img { width: 104px; }
  [data-skin='samurai'] .nav-left { gap: 0; }
  [data-skin='samurai'] .nav-right { gap: 6px; }
  [data-skin='samurai'] .nav-link { padding: 8px 8px 10px; font-size: 19px; }
  [data-skin='samurai'] .nav-right > .nav-link[data-fold-open] { font-size: 18px; }
  [data-skin='samurai'] .nav-link > .nav-kanji { width: 17px; height: 17px; margin-inline-end: 6px; }
  [data-skin='samurai'] .nav-caret { margin-inline-start: 3px; }
}

/* a menu longer than the bar's room on a wide screen (site.js `is-crowded`: el, uk, ja) sets as tight as that */
@media (min-width: 1301px) {
  [data-skin='samurai'] .bar-row.is-crowded { gap: 14px; }
  [data-skin='samurai'] .is-crowded .nav-left { gap: 0; }
  [data-skin='samurai'] .is-crowded .nav-right { gap: 6px; }
  [data-skin='samurai'] .is-crowded .nav-link { padding: 8px 8px 10px; font-size: 19px; }
  [data-skin='samurai'] .is-crowded .nav-right > .nav-link[data-fold-open] { font-size: 18px; }
  [data-skin='samurai'] .is-crowded .nav-link > .nav-kanji { width: 17px; height: 17px; margin-inline-end: 6px; }
  [data-skin='samurai'] .is-crowded .nav-caret { margin-inline-start: 3px; }
}

/* the account's fold: its links on a band of dark ink in the bar, each with the colour's stroke under it when pointed at */
[data-skin='samurai'] .fold-menu { position: relative; isolation: isolate; height: 40px; padding: 0 26px 0 16px; }
[data-skin='samurai'] .fold-menu::before { content: ''; position: absolute; inset: 0; z-index: -2; background: rgba(0, 0, 0, 0.72);
  --sm-cl: 18px; --sm-cr: 26px; -webkit-mask: url(../../img/ui/samurai/band_l.webp) left top / var(--sm-cl) 100% no-repeat, url(../../img/ui/samurai/band_r.webp) right top / var(--sm-cr) 100% no-repeat, url(../../img/ui/samurai/band_m.webp) var(--sm-cl) top / calc(100% - var(--sm-cl) - var(--sm-cr) + 1px) 100% no-repeat; mask: url(../../img/ui/samurai/band_l.webp) left top / var(--sm-cl) 100% no-repeat, url(../../img/ui/samurai/band_r.webp) right top / var(--sm-cr) 100% no-repeat, url(../../img/ui/samurai/band_m.webp) var(--sm-cl) top / calc(100% - var(--sm-cl) - var(--sm-cr) + 1px) 100% no-repeat; }
[data-skin='samurai'] .fold-link { position: relative; isolation: isolate; padding: 6px 10px; color: var(--text-1); font: 400 19px var(--font-display); letter-spacing: 0.01em; text-transform: none; }
[data-skin='samurai'] .fold-link::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 3px; z-index: -1; height: 7px; background: var(--sm-blood);
  -webkit-mask: var(--sm-stroke) left center / 100% 100% no-repeat; mask: var(--sm-stroke) left center / 100% 100% no-repeat;
  clip-path: inset(-4px 100% -4px -4px); transition: clip-path 320ms cubic-bezier(0.6, 0, 0.2, 1); }
[data-skin='samurai'] .fold-link:is(:hover, :focus-visible) { color: #fff; text-shadow: none; }
[data-skin='samurai'] .fold-link:is(:hover, :focus-visible)::after { clip-path: inset(-4px -4px -4px -4px); }
[data-skin='samurai'] .fold-form .input { height: 28px; }

/* ---------- Phones ---------- */

@media (max-width: 860px) {
  [data-skin='samurai'] .head { height: 72px; margin-bottom: -72px; }
  [data-skin='samurai'] .bar, [data-skin='samurai'] .bar-row { height: 72px; }
  [data-skin='samurai'] .bar-row { grid-template-columns: auto 1fr 44px; }
  [data-skin='samurai'] .emblem { grid-column: 1; justify-self: start; width: 120px; height: 72px; }
  [data-skin='samurai'] .emblem img { top: 50%; width: 108px; max-height: 56px; translate: -50% -50%; }
  [data-skin='samurai'] .emblem-art { display: none; }
  [data-skin='samurai'] .nav-toggle span, [data-skin='samurai'] .nav-toggle span::before, [data-skin='samurai'] .nav-toggle span::after { background-color: var(--sm-bone); }
  [data-skin='samurai'] .nav-toggle[aria-expanded='true'] span { background-color: transparent; }
  [data-skin='samurai'] .drawer { padding-top: 16px; border: 0; border-radius: 0; background: color-mix(in srgb, var(--sm-ink) 97%, transparent); box-shadow: 0 20px 40px -20px #000; }
  [data-skin='samurai'] .main { padding-top: 92px; }
  [data-skin='samurai'] .nav-left .nav-link { border: 0; font-size: 24px; }
  [data-skin='samurai'] .nav-right > .nav-link[data-fold-open], [data-skin='samurai'] .nav-right > .nav-accent { flex: 1; justify-content: center; }
  /* one painting behind the words, centred, darker */
  /* the painting stands behind the content, its figure in the middle, darker */
  [data-skin='samurai'] { --sm-h: 82vh; --sm-pos: center top 4vh / auto var(--sm-h) no-repeat; }
  [data-skin='samurai'] .bg-fade { --sm-o: 0.5; --sm-fade: linear-gradient(to bottom, transparent 0, #000 12%, #000 60%, transparent 92%); }
  /* the living ink on the painting, centred like it; the page's fade (top to bottom of the screen) in its own box */
  [data-skin='samurai'] .sm-ink { right: auto; left: 50%; top: 4vh; translate: -50% 0;
    --sm-ink-fade: linear-gradient(to bottom, transparent -4.9%, #000 9.8%, #000 68.3%, transparent 107.3%); }
}
@media (max-width: 560px) {
  [data-skin='samurai'] :is(.card, .panel) { padding: 24px 18px 24px; }
  [data-skin='samurai'] .h-title { font-size: 32px; }
  [data-skin='samurai'] :is(.card-head, .h-title) { font-size: 27px; }
  [data-skin='samurai'] .foot::after { width: 100px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-skin='samurai'] .bar { animation: none; }
  [data-skin='samurai'] :is(.nav-link, .btn, .news-row, .news-item, .news-compact li)::after { transition: none; }
  [data-skin='samurai'] :is(.nav-link, .nav-drop-item) .nav-kanji path, [data-skin='samurai'] .gacha-rate-bar i { animation: none !important; }
}

/* a panel going (site.js burnAway): samurai has no cloth to burn, so instead of site.css's fire flare (which tints it
   orange) it sinks into the black like ink drying, keeping its shadow */
[data-skin='samurai'] .drops > .card.is-burning:not(.is-woven) { animation: sm-ink-out 460ms var(--ease) forwards; }
@keyframes sm-ink-out {
  to { opacity: 0; translate: 0 -6px; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.85)) brightness(0.35) blur(2px); }
}
