/* skin-gb.css: Game Boy (2D) skin, html[data-skin="gb"]. Four greys only, no colour, no alpha, no radius, no shadow,
   no smoothing. Everything is a whole number of "dots" (--gb-dot). Difference to PS1 is variables plus a few
   decorations below; DOM and class names are identical (UI_STYLE_GUIDE section 3). */

@layer skin {
  :root[data-skin="gb"] {
    color-scheme: light;

    /* the four greys */
    --gb-0: #ffffff; --gb-1: #aaaaaa; --gb-2: #555555; --gb-3: #000000;
    --gb-glyph: 16px;

    /* semantic colours (guide 3.1) */
    --c-ground: var(--gb-0); --c-surface: var(--gb-0); --c-surface-2: var(--gb-0); --c-plate: var(--gb-0);
    --c-ink-1: var(--gb-3); --c-ink-2: var(--gb-3); --c-ink-3: var(--gb-2);
    --c-line: var(--gb-3); --c-line-strong: var(--gb-3); --c-line-soft: var(--gb-1);
    --c-focus-bg: var(--gb-3); --c-focus-fg: var(--gb-0); --c-disabled-fg: var(--gb-2);
    --c-map-matte: var(--gb-3); --c-danger: var(--gb-3); --c-scrim: var(--gb-0);
    --sym-physical: var(--gb-3); --sym-fire: var(--gb-3); --sym-cold: var(--gb-3); --sym-lightning: var(--gb-3); --sym-water: var(--gb-3);
    --sym-poison: var(--gb-3); --sym-arcane: var(--gb-3); --sym-oil: var(--gb-3); --sym-wet: var(--gb-3); --sym-ice: var(--gb-3);
    --sym-metal: var(--gb-3); --sym-steam: var(--gb-3); --sym-grass: var(--gb-3); --sym-blood: var(--gb-3); --sym-spores: var(--gb-3);
    --sym-mud: var(--gb-3); --sym-ash: var(--gb-3); --sym-sand: var(--gb-3); --sym-glass: var(--gb-3); --sym-shards: var(--gb-3);
    --sym-rooted: var(--gb-3); --sym-weakened: var(--gb-3); --sym-confused: var(--gb-3); --sym-danger: var(--gb-3);
    --sym-rendering: crispEdges; --sym-size: calc(var(--gb-dot) * 8);

    /* type: DotGothic16, whole multiples of its 16px design size only */
    --ff-latin: "SW GB Pixel", monospace; --ff-ui: "SW GB Pixel", monospace; --ff-num: "SW GB Pixel", monospace;
    --fw-regular: 400; --fw-medium: 400; --fw-bold: 400;
    --fs-h1: calc(var(--gb-glyph) * var(--gb-mul-h1));
    --fs-h2: calc(var(--gb-glyph) * var(--gb-mul-h2));
    --fs-body: calc(var(--gb-glyph) * var(--gb-mul-body));
    --fs-note: var(--fs-body); --fs-num: var(--fs-h2); --fs-badge: var(--gb-glyph); --fs-floor: var(--gb-glyph);
    --fs-title: var(--fs-h2); --fs-title-ja: var(--fs-h2);
    --lh-body: 1.5; --lh-tight: 1.5; --lh-key: 1.25; --ls-caps: 0em; --ls-jp: 0em;

    /* dots: spacing, lines, no shadow / radius */
    --sp-1: var(--gb-dot); --sp-2: calc(var(--gb-dot) * 2); --sp-3: calc(var(--gb-dot) * 3);
    --sp-4: calc(var(--gb-dot) * 5); --sp-6: calc(var(--gb-dot) * 8); --sp-8: calc(var(--gb-dot) * 11);
    --bw-1: var(--gb-dot); --bw-2: calc(var(--gb-dot) * 2); --bw-panel: var(--bw-2);
    --radius: 0; --shadow-panel: none; --alpha-overlay: 1; --motion-fade: 0s;
    --lay-msg-h: calc(var(--fs-body) * var(--lh-body) * var(--gb-log-lines) + var(--log-pad-y) * 2 + var(--bw-panel) * 2);
    --lay-gauge-hp-h: calc(var(--gb-dot) * 7); --lay-gauge-sub-h: calc(var(--gb-dot) * 4);
    --inset-style: solid; --inset-bw-x: var(--bw-1); --c-inset-line: var(--c-line);
    --chip-pad: 0px; --title-pad: var(--sp-1) var(--sp-3);
    --c-title-bg: var(--gb-3); --c-title-fg: var(--gb-0); --c-title-sep: var(--gb-1);
    --bg-deco: none; --bg-deco-size: auto;

    /* pixel cursor and pixel masks (1 svg cell = 1 dot) */
    --gb-cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%20width='8'%20height='8'%20shape-rendering='crispEdges'%3E%3Cpath%20d='M0%200h1v1h-1zM0%201h2v1h-2zM0%202h3v1h-3zM0%203h4v1h-4zM0%204h4v1h-4zM0%205h3v1h-3zM0%206h2v1h-2zM0%207h1v1h-1z'/%3E%3C/svg%3E");
    --cursor-img: var(--gb-cursor);
    --cursor-x-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%20width='8'%20height='8'%20shape-rendering='crispEdges'%3E%3Cpath%20d='M0%200h1v1h-1zM1%201h1v1h-1zM2%202h1v1h-1zM3%203h1v1h-1zM4%204h1v1h-1zM5%205h1v1h-1zM6%206h1v1h-1zM7%207h1v1h-1zM7%200h1v1h-1zM6%201h1v1h-1zM5%202h1v1h-1zM4%203h1v1h-1zM3%204h1v1h-1zM2%205h1v1h-1zM1%206h1v1h-1zM0%207h1v1h-1z'/%3E%3C/svg%3E");
    --gb-pat-mp: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%206'%20width='6'%20height='6'%20shape-rendering='crispEdges'%3E%3Cpath%20d='M0%200h1v1h-1zM0%203h1v1h-1zM1%202h1v1h-1zM1%205h1v1h-1zM2%201h1v1h-1zM2%204h1v1h-1zM3%200h1v1h-1zM3%203h1v1h-1zM4%202h1v1h-1zM4%205h1v1h-1zM5%201h1v1h-1zM5%204h1v1h-1z'/%3E%3C/svg%3E");
    --gb-pat-sp: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%206'%20width='6'%20height='6'%20shape-rendering='crispEdges'%3E%3Cpath%20d='M0%200h1v1h-1zM0%202h1v1h-1zM0%204h1v1h-1zM1%201h1v1h-1zM1%203h1v1h-1zM1%205h1v1h-1zM2%200h1v1h-1zM2%202h1v1h-1zM2%204h1v1h-1zM3%201h1v1h-1zM3%203h1v1h-1zM3%205h1v1h-1zM4%200h1v1h-1zM4%202h1v1h-1zM4%204h1v1h-1zM5%201h1v1h-1zM5%203h1v1h-1zM5%205h1v1h-1z'/%3E%3C/svg%3E");
    --gb-pat-danger: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%20width='8'%20height='8'%20shape-rendering='crispEdges'%3E%3Cpath%20d='M0%200h1v1h-1zM0%201h1v1h-1zM0%204h1v1h-1zM0%205h1v1h-1zM1%200h1v1h-1zM1%203h1v1h-1zM1%204h1v1h-1zM1%207h1v1h-1zM2%202h1v1h-1zM2%203h1v1h-1zM2%206h1v1h-1zM2%207h1v1h-1zM3%201h1v1h-1zM3%202h1v1h-1zM3%205h1v1h-1zM3%206h1v1h-1zM4%200h1v1h-1zM4%201h1v1h-1zM4%204h1v1h-1zM4%205h1v1h-1zM5%200h1v1h-1zM5%203h1v1h-1zM5%204h1v1h-1zM5%207h1v1h-1zM6%202h1v1h-1zM6%203h1v1h-1zM6%206h1v1h-1zM6%207h1v1h-1zM7%201h1v1h-1zM7%202h1v1h-1zM7%205h1v1h-1zM7%206h1v1h-1z'/%3E%3C/svg%3E");

    /* gauges: HP solid black, MP diagonal hatch, SP dot matrix (guide 3.5) */
    --c-gauge-empty: var(--gb-0);
    --fill-hp: var(--gb-3); --fill-mp: var(--gb-3); --fill-sp: var(--gb-3);
    --mask-hp: none; --mask-mp: var(--gb-pat-mp); --mask-sp: var(--gb-pat-sp);
    --gauge-mask-size: calc(var(--gb-dot) * 6);
    --low-hatch: none;
    --mark-radius: 0; --mark-fill: none;

    /* minimap: explored light grey, wall black, unexplored white */
    --c-mm-bg: var(--gb-0); --c-mm-floor: var(--gb-1); --c-mm-wall: var(--gb-3); --c-mm-edge: var(--gb-0);
    --c-mm-you: var(--gb-3); --c-mm-foe: var(--gb-3); --c-mm-stair: var(--gb-3); --c-mm-item: var(--gb-3);

    /* buttons, tabs, rows: white windows, black cursor, no inversion of rows */
    --c-btn-bg: var(--gb-0); --c-btn-fg: var(--gb-3);
    --c-tab-bg: var(--gb-0); --c-tab-fg: var(--gb-3); --c-tab-line: var(--gb-3);
    --c-list-bg: var(--gb-0); --list-bw: var(--bw-panel); --list-pad: var(--sp-2); --row-gap: 0px;
    --c-row-bg: transparent; --c-row-fg: var(--gb-3); --c-row-meta: var(--gb-3);
    --c-row-focus-bg: transparent; --c-row-focus-fg: var(--gb-3);
    --c-tag-line: var(--gb-3);
    --c-range-off: var(--gb-0); --c-range-off-line: var(--gb-1); --c-range-hit: var(--gb-3); --c-range-self: var(--gb-3);
    --row-gutter-w: calc(var(--gb-dot) * 8); --row-bullet-w: 0px; --row-bullet-bw: 0px;
    --log-indent: calc(var(--gb-dot) * 8 + var(--sp-2)); --log-mark-w: calc(var(--gb-dot) * 8);
    --c-desc-bg: var(--gb-0); --c-desc-fg: var(--gb-3); --desc-pad: var(--sp-1) var(--sp-3);

    /* skin switches for shared DOM */
    --d-title-en: none; --d-title-ja: inline;
    --d-tab-ico: var(--gb-tab-ico, none); --d-tab-en: none; --d-tab-ja: inline; --d-tab-en-idle: none;
    --d-tag: none; --d-check: inline-flex; --d-hints: none;
    --d-log-old: var(--gb-d-log-old);
  }

  /* pixel text: no smoothing, no kerning */
  html[data-skin="gb"] {
    -webkit-font-smoothing: none;
    font-smooth: never;
    text-rendering: optimizeSpeed;
    font-kerning: none;
  }
  [data-skin="gb"] .ui-detail__hint { border-top: var(--bw-1) solid var(--c-line); padding-top: var(--sp-2); }
  [data-skin="gb"] .ui-tag { border-style: solid; }
  [data-skin="gb"] .ui-title__ja { font-size: var(--fs-title); }
  [data-skin="gb"] .ui-title__meta { font-size: var(--fs-body); }

  /* blink = two states, 500ms each, steps only; off when the user asks for reduced motion */
  @keyframes gb-blink { 50% { visibility: hidden; } }
  @media (prefers-reduced-motion: no-preference) {
    [data-skin="gb"] .ui-gauge[data-low="true"] .ui-gauge__fill,
    [data-skin="gb"] .ui-map__mark,
    [data-skin="gb"] .ui-threat .ui-sym {
      animation: gb-blink calc(var(--dur-blink) * 2) steps(1) infinite;
    }
  }

  /* witch portrait art, attached per skin (menu and conversation only) */
  [data-skin="gb"] .ui-portrait__img { background-image: url("../../../assets/ui/witch-gb.png"); }
}