/* =========================================================
   fudosha.net / WORKS card visual override
   Concept:
   - B 70% (pale-sky / melancholic visual-novel atmosphere)
   - A 30% (restrained classic Windows UI grammar)
   - no Win98 parody: borrow bevel/titlebar/sunken-panel language only
   ========================================================= */

body[data-page="works"]{
  --works-retro-frame-hi: #ffffff;
  --works-retro-frame-mid: #97a5ab;
  --works-retro-frame-lo: #4f5d64;

  --works-retro-panel: #bfccd0;
  --works-retro-panel-2: #a9b8bd;

  --works-retro-title-a: #3f709e;
  --works-retro-title-b: #7fa8c5;
  --works-retro-title-c: #d6e3e8;

  --works-retro-ink: #2d383f;
  --works-retro-paper: #dbe3e4;

  /* Deliberately digital / display-like yellow, not gold. */
  --works-retro-cream: #ffe95c;
}

/* ---------------------------------------------------------
   Card = old application window, but softened for site mood
   --------------------------------------------------------- */
body[data-page="works"] .book-card{
  border-radius: 4px;
  padding: calc(9px * var(--pc-ui-scale, 1));
  background:
    linear-gradient(180deg,
      rgba(211,222,224,.98) 0%,
      var(--works-retro-panel) 42%,
      var(--works-retro-panel-2) 100%);

  border: 1px solid var(--works-retro-frame-lo);
  box-shadow:
    inset 1px 1px 0 var(--works-retro-frame-hi),
    inset -1px -1px 0 #7b898f,
    0 1px 0 rgba(255,255,255,.55),
    0 6px 16px rgba(21,27,34,.16);

  transition:
    transform .14s ease,
    box-shadow .14s ease,
    filter .14s ease;
}

/* Modern floating-card motion is intentionally reduced. */
body[data-page="works"] .book-card:hover{
  transform: translateY(-1px);
  filter: saturate(1.025) contrast(1.015);
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 rgba(74,86,92,.72),
    0 7px 17px rgba(21,27,34,.19);
}

body[data-page="works"] .book-card:active{
  transform: translateY(0);
  box-shadow:
    inset 1px 1px 0 rgba(79,91,97,.66),
    inset -1px -1px 0 rgba(255,255,255,.86),
    0 3px 10px rgba(21,27,34,.13);
}

body[data-page="works"] .book-card:focus-visible{
  outline: 2px solid rgba(45,93,150,.72);
  outline-offset: 3px;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 rgba(74,86,92,.68),
    0 0 0 4px rgba(122,167,209,.23);
}

/* ---------------------------------------------------------
   Title bar = pale sky blue, not Windows-brand blue
   --------------------------------------------------------- */
body[data-page="works"] .caption{
  position: relative;
  margin:
    calc(-1 * 9px * var(--pc-ui-scale, 1))
    calc(-1 * 9px * var(--pc-ui-scale, 1))
    calc(8px * var(--pc-ui-scale, 1));

  min-height: calc(32px * var(--pc-ui-scale, 1));
  padding:
    calc(7px * var(--pc-ui-scale, 1))
    calc(38px * var(--pc-ui-scale, 1))
    calc(7px * var(--pc-ui-scale, 1))
    calc(10px * var(--pc-ui-scale, 1));

  color: rgba(255,255,255,.97);
  background:
    linear-gradient(90deg,
      var(--works-retro-title-a) 0%,
      var(--works-retro-title-b) 58%,
      var(--works-retro-title-c) 100%);

  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid #68767d;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(46,58,66,.28);

  font-weight: 800;
  letter-spacing: .025em;
  text-shadow:
    1px 1px 0 rgba(22,31,42,.72),
    0 0 2px rgba(22,31,42,.22);
}

/* One quiet decorative window control: enough to suggest old UI. */
body[data-page="works"] .caption::after{
  content: "–";
  position: absolute;
  top: 50%;
  right: calc(7px * var(--pc-ui-scale, 1));
  transform: translateY(-50%);

  width: calc(20px * var(--pc-ui-scale, 1));
  height: calc(18px * var(--pc-ui-scale, 1));
  box-sizing: border-box;

  display: grid;
  place-items: center;

  color: #263039;
  background: #d7dedf;
  border: 1px solid #5e6970;
  border-radius: 1px;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #8c969a;

  font-family: system-ui, sans-serif;
  font-size: calc(13px * var(--pc-ui-scale, 1));
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Thumbnail = recessed image / monitor pane
   --------------------------------------------------------- */
body[data-page="works"] .thumb-wrap{
  box-sizing: border-box;
  padding: calc(3px * var(--pc-ui-scale, 1));
  border-radius: 2px;
  border: 1px solid #5f6a70;
  background: #11161a;
  box-shadow:
    inset 2px 2px 0 rgba(40,48,53,.92),
    inset -2px -2px 0 rgba(246,250,251,.90),
    0 1px 0 rgba(255,255,255,.52);
}

body[data-page="works"] .thumb-wrap img{
  border-radius: 0;
}

/* ---------------------------------------------------------
   Status labels: squarer + subtle bevel, still easy to scan
   --------------------------------------------------------- */
body[data-page="works"] .book-card.new .thumb-wrap::before{
  right: calc(9px * var(--pc-ui-scale, 1));
  top: calc(9px * var(--pc-ui-scale, 1));

  padding:
    calc(5px * var(--pc-ui-scale, 1))
    calc(9px * var(--pc-ui-scale, 1));

  color: #1d1b16;
  background: #f2e5b9;
  border: 1px solid #776d50;
  border-radius: 2px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.88),
    inset -1px -1px 0 rgba(150,133,81,.58),
    1px 2px 5px rgba(0,0,0,.18);

  font-weight: 800;
  letter-spacing: .05em;
}

body[data-page="works"] .shop-label{
  right: calc(9px * var(--pc-ui-scale, 1));
  bottom: calc(9px * var(--pc-ui-scale, 1));

  padding:
    calc(5px * var(--pc-ui-scale, 1))
    calc(9px * var(--pc-ui-scale, 1));

  color: #fff;
  background: rgba(47,72,151,.94);
  border: 1px solid #283d76;
  border-radius: 2px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.48),
    inset -1px -1px 0 rgba(15,29,76,.52),
    1px 2px 6px rgba(0,0,0,.22);
}

body[data-page="works"] .shop-label:hover{
  background: rgba(55,86,171,.98);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.55),
    inset -1px -1px 0 rgba(15,29,76,.58),
    1px 2px 6px rgba(0,0,0,.22);
}

body[data-page="works"] .soldout-label{
  border-radius: 2px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.85),
    inset -1px -1px 0 rgba(120,0,0,.22),
    0 5px 14px rgba(0,0,0,.22);
}

/* ---------------------------------------------------------
   Lower information pane = faded paper / old dialog panel
   --------------------------------------------------------- */
body[data-page="works"] .book-info{
  margin-top: calc(8px * var(--pc-ui-scale, 1));
  padding:
    calc(7px * var(--pc-ui-scale, 1))
    calc(8px * var(--pc-ui-scale, 1));

  color: var(--works-retro-ink);
  background:
    linear-gradient(180deg,
      #edf2f2 0%,
      #d8e0e1 100%);
  border: 1px solid #68767d;
  border-radius: 1px;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #9aa6aa;
}

body[data-page="works"] .book-info h3{
  margin: 0 0 calc(8px * var(--pc-ui-scale, 1));
  font-family:"MOBO",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",Arial,sans-serif;
  font-size: calc(18px * var(--pc-ui-scale, 1));
  line-height: 1.16;
  letter-spacing: .01em;
  font-weight:700;
  color:#162833;
  -webkit-text-stroke:0;
  paint-order:normal;
  text-shadow:
    1px 1px 0 rgba(255,255,255,.55),
    1px 2px 1px rgba(68,82,92,.18);
}

body[data-page="works"] .book-info p{
  color: #3d484f;
}

/* ---------------------------------------------------------
   Mobile: retain the language, reduce decorative density
   --------------------------------------------------------- */
@media (max-width: 767px){
  body[data-page="works"] .book-card{
    border-radius: 3px;
    padding: 9px;
  }

  body[data-page="works"] .caption{
    margin: -9px -9px 8px;
    padding: 7px 35px 7px 9px;
  }

  body[data-page="works"] .caption::after{
    width: 19px;
    height: 17px;
    right: 7px;
  }

  body[data-page="works"] .book-info{
    padding: 7px 8px;
  }
}

@media (prefers-reduced-motion: reduce){
  body[data-page="works"] .book-card{
    transition: none;
  }
}