:root {
  
  --frame-panel-slice: 42;
  --frame-panel-w: 13px;
  --frame-modal-slice: 42;
  --frame-modal-w: 13px;
  
  --frame-bar-slice: 28 40;
  --frame-bar-w: 8px 13px;
  --header-h: 80px;
  
  --content-top: 94px;

  --wood: #9c6b34;
  --wood-light: #c79a5c;
  --wood-dark: #3d2410;
  --parch: #f7e8c6;
  --parch-2: #efd6a4;

  --ink: #3a2410;
  --ink-dim: #7a5a33;

  --gold: #ffce3a;
  --gold-deep: #e89b1e;
  --red: #d6452f;
  
  --green-btn: #57a93b;
  
  --blue-btn: #2f63d4;
  
  --exp: #46c66a;
  
  --stock: #ef7d3a;

  --sky-1: #6fc4f0;
  --sky-2: #a8e0f7;

  --font-jp: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-num: "Cinzel", "Noto Sans JP", serif;

  --space: clamp(10px, 3vw, 16px);
  --maxw-mobile: 440px;
  --maxw-pc: 1000px;

  /* --- Oripaquest Static Skin Assets --- */
  --skin-app-bg: url('/oripaquest/assets/skin-app.png');
  --skin-header-bg: url('/oripaquest/assets/skin-header.png');
  --skin-header-frame: url('/oripaquest/assets/frame-header.png');
  --skin-footer-bg: #141210;
  --skin-nav-bg: url('/oripaquest/assets/skin-nav.png');
  /* --skin-panel-bg: url('/oripaquest/assets/skin-panel.png'); */
  --skin-modal-bg: url('/oripaquest/assets/skin-modal.png');
  --skin-invite-bg: url('/oripaquest/assets/skin-invite.png');
  --skin-ranking-bg: url('/oripaquest/assets/skin-ranking.png');
  --skin-rank-hero-bg: url('/oripaquest/assets/skin-rank-hero.png');

  --skin-panel-frame: url('/oripaquest/assets/frame-panel.png');
  --skin-modal-frame: url('/oripaquest/assets/frame-modal.png');
  --skin-btn-frame: url('/oripaquest/assets/frame-btn.png');
  --skin-card-frame: url('/oripaquest/assets/frame-card.png');
  --skin-campaign-frame: url('/oripaquest/assets/frame-campaign.png');

  --skin-bar-frame: url('/oripaquest/assets/frame-bar.png');
  --skin-tabs-frame: url('/oripaquest/assets/frame-tabs.png');
  --skin-title-frame: url('/oripaquest/assets/frame-title.png');
  --skin-chip-off-frame: url('/oripaquest/assets/frame-chip-off.png');
  --skin-chip-on-frame: url('/oripaquest/assets/frame-chip-on.png');
  --skin-tab-off-frame: url('/oripaquest/assets/frame-tab-off.png');
  --skin-tab-on-frame: url('/oripaquest/assets/frame-tab-on.png');

  --skin-btn-gold-frame: url('/oripaquest/assets/frame-btn-gold.png');
  --skin-btn-red-frame: url('/oripaquest/assets/frame-btn-red.png');
  --skin-btn-blue-frame: url('/oripaquest/assets/frame-btn-blue.png');
  --skin-btn-buy-frame: url('/oripaquest/assets/frame-btn-buy.png');
  --skin-btn-green-frame: url('/oripaquest/assets/frame-btn-green.png');
  --skin-btn-single-frame: url('/oripaquest/assets/frame-btn-single.png');

  --coin-img: url('/oripaquest/assets/icon-coin.png');
  --dot-off-img: url('/oripaquest/assets/icon-dot-off.png');
  --dot-on-img: url('/oripaquest/assets/icon-dot-on.png');
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-jp);
  color: var(--ink);
  
  background: #17110b;
  font-weight: 500;
}

body.has-skin-app,
html.has-skin-app body {
  background: transparent !important;
}

body.has-skin-app::before,
html.has-skin-app body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--skin-app-bg) top center / cover no-repeat !important;
}

.frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw-mobile);
  margin: 0 auto;
  min-height: 100vh;
  padding-top: var(--content-top, 120px);
  padding-bottom: 0;
  background: transparent;
}

.frame>main {
  min-height: calc(100vh - var(--content-top, 120px));
}

.frame.no-tabbar {
  padding-bottom: var(--space);
}

.win {
  background: var(--skin-panel-bg, linear-gradient(180deg, var(--parch), var(--parch-2)));
  background-size: cover;
  background-position: center;
  border: 4px solid var(--wood);
  border-radius: 7px;
  border-image: var(--skin-panel-frame) var(--frame-panel-slice, 34) / var(--frame-panel-w, 12px) stretch;
  box-shadow: 0 0 0 2px var(--wood-dark), inset 0 0 0 2px var(--wood-light), 0 4px 0 var(--wood-dark);
  position: relative;
}

.win-pad {
  padding: 12px;
}

.slot {
  display: grid;
  place-content: center;
  text-align: center;
  gap: 3px;
  background: repeating-linear-gradient(45deg, #00000010 0 8px, transparent 8px 16px), #00000008;
  border: 2px dashed var(--wood);
  border-radius: 5px;
  color: var(--ink-dim);
  font-size: 10px;
  line-height: 1.4;
  padding: 6px;
}

.slot .slot__tag {
  font-family: var(--font-num);
  font-size: 8px;
  color: var(--gold-deep);
}

.slot .slot__size {
  font-size: 9px;
  color: var(--ink-dim);
}

.slot,
.logo-slot {
  position: relative;
}

.slot.has-img,
.logo-slot.has-img {
  background-image: var(--slot-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-style: solid;
  border-color: var(--wood);
}

.slot.has-img>*:not(.slot-id-badge),
.logo-slot.has-img>*:not(.slot-id-badge) {
  visibility: hidden;
}

.slot-id-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 3;
  pointer-events: none;
  font-family: var(--font-num);
  font-size: 7px;
  line-height: 1;
  background: #000000c0;
  color: #ffd84d;
  padding: 3px 4px;
  border-radius: 3px;
  visibility: visible !important;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #000000b8;
  z-index: 100050 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalFade .2s ease-out;
}

.modal {
  z-index: 100060 !important;
}

@keyframes modalFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-box {
  width: 100%;
  max-width: 380px;
  padding: 18px;
  text-align: center;
  animation: modalPop .25s cubic-bezier(.16, 1, .3, 1);
  
  background: var(--skin-modal-bg, linear-gradient(180deg, #1d1610, #100c07));
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  box-shadow: 0 0 0 2px #8a6a2f66;
  border-image: var(--skin-modal-frame, var(--skin-panel-frame)) var(--frame-modal-slice, 34) fill / var(--frame-modal-w, 12px) stretch;
}

.modal-box h3 {
  color: var(--gold);
  text-shadow: 1px 1px 0 #000;
}

.modal-box p {
  color: #d9c9a8;
}

.modal-box .modal-num {
  color: #ff8a75;
}

@keyframes modalPop {
  from {
    transform: scale(.85);
  }

  to {
    transform: scale(1);
  }
}

.modal-box .gacha-confirm-content {
  padding: 0;
}

.modal-box .gacha-confirm-points {
  background: transparent;
  padding: 0;
  margin-bottom: 20px;
  color: #d9c9a8;
}

.modal-box .points-calc {
  font-size: 16px;
}

.modal-box .points-current {
  color: #d9c9a8;
}

.modal-box .calc-arrow {
  color: var(--ink-dim);
}

.modal-box .points-after {
  color: var(--gold-deep) !important;
}

.modal-box .coin-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.modal-box .gacha-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ship-modal-dialog { max-width: 560px; }
.ship-modal-dialog .modal-box { max-width: none !important; }

.ship-modal-header {
  border: none;
  padding: 0 0 10px;
}

.ship-modal-title {
  font-size: 16px;
  margin: 0;
  text-shadow: 0 1px 2px #000;
}

.ship-modal-body { padding: 0; }

.ship-modal-info,
.ship-modal-schedule {
  color: #dfd5c0;
  font-size: 12px;
  margin-bottom: 4px;
}

.ship-modal-warning {
  color: #ef4444;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 12px;
}

.ship-modal-address-section {
  text-align: left;
  margin-bottom: 12px;
}

.ship-modal-address-label {
  color: #d9c9a8;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 6px;
}

.ship-modal-address-box {
  background: #17110a !important;
  border: 2px solid #5a452a !important;
  color: #dfd5c0 !important;
  padding: 12px;
  border-radius: 6px;
}

.ship-modal-address-name { margin-bottom: 4px; font-weight: bold; }
.ship-modal-address-detail { margin-bottom: 4px; }
.ship-modal-address-phone { margin-bottom: 0; }

.ship-modal-case-warning {
  display: none;
  background: #2a1818 !important;
  border: 2px solid #8c3b3b !important;
  color: #ff9999 !important;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  text-align: left;
}

.ship-modal-case-title { margin-bottom: 4px; font-weight: bold; }
.ship-modal-case-body { margin-bottom: 0; font-size: 11px; }

.ship-modal-items-section {
  text-align: left;
  margin-bottom: 12px;
}

.ship-modal-items-label {
  color: #d9c9a8;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 6px;
}

.ship-modal-items-scroll {
  max-height: 120px;
  overflow-y: auto;
  background: #17110a;
  border: 2px solid #5a452a;
  border-radius: 6px;
  padding: 8px;
}

.ship-modal-items-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.ship-modal-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  background: transparent;
  padding: 0;
}

.ship-modal-total-label { color: #dfd5c0; font-size: 14px; }

.ship-modal-coin-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.ship-modal-total-value {
  font-size: 22px;
  font-weight: bold;
  color: var(--gold-deep) !important;
}

.ship-modal-total-unit {
  color: var(--gold-deep) !important;
  font-size: 14px;
}

.ship-modal-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: none;
  padding: 0;
}

.ship-modal-footer .btn-rpg { width: 100%; }

.ship-error-modal-dialog { max-width: 440px; }

.ship-error-modal-header {
  border: none;
  padding: 0 0 10px;
  text-align: center;
}

.ship-error-modal-body {
  text-align: center;
  padding: 0;
}

.ship-error-modal-footer {
  border: none;
  padding: 0;
}

.ship-error-modal-footer .btn-rpg { width: 100%; }

.modal-box h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

.modal-box p {
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.modal-box .modal-num {
  color: var(--red);
  font-family: var(--font-num);
  font-size: 13px;
}

.modal-box .modal-warn {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 8px;
}

.modal-box .modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-box .opt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 14px;
  text-align: left;
}

.modal-box .opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border: 2px solid var(--wood);
  border-radius: 6px;
  background: #fffdf4;
  font-size: 13px;
  cursor: pointer;
}

.modal-box .opt.sel {
  border-color: var(--gold-deep);
  background: #fff3d6;
  box-shadow: inset 0 0 0 2px var(--gold);
}

.modal-box .opt .lim {
  font-size: 11px;
  color: var(--ink-dim);
}

.modal-box {
  position: relative;
}

.modal-box .opt .radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--wood);
  border-radius: 50%;
  flex: none;
  position: relative;
}

.modal-box .opt.sel .radio {
  border-color: var(--gold-deep);
}

.modal-box .opt.sel .radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--gold);
}

.modal-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-content: center;
  background: #fffdf4;
  border: 2px solid var(--wood);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
}

.name-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: #fffdf4;
  border: 2px solid var(--wood);
  border-radius: 6px;
}

.name-copy .name-txt {
  flex: 1;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
}

.name-copy .copy-btn {
  width: 34px;
  height: 34px;
  flex: none;
  border: 2px solid var(--wood);
  border-radius: 6px;
  background: var(--parch);
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}

.name-copy .copy-btn:hover {
  filter: brightness(1.05);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%) translateY(10px);
  z-index: 99;
  background: #000000d8;
  color: #fff;
  font-size: 12px;
  padding: 10px 16px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.gold-text {
  color: var(--gold);
  text-shadow: 1px 1px 0 var(--wood-dark), -1px 1px 0 var(--wood-dark),
    1px -1px 0 var(--wood-dark), -1px -1px 0 var(--wood-dark), 0 3px 0 var(--wood-dark);
}

.page-title {
  font-size: 16px;
  padding: 2px;
  text-align: center;
}

html.has-frame-title .page-title {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 900;
  
  border-style: solid;
  border-color: transparent;
  
  border-width: 6px 80px 28px 80px;
  border-image: var(--skin-title-frame) 230 1150 420 1150 fill / 6px 80px 28px 80px stretch;
  padding: 6px 28px 11px;
  width: max-content;
  max-width: 100%;
  margin: -6px auto 6px;
  color: #ffd84d;
  text-shadow: 0 1px 0 #3a2410, 0 2px 3px #000c, 0 0 6px #0008;
}

.coin-total {
  white-space: nowrap;
}

.ct-unit {
  font-size: 11px;
  font-weight: 500;
  color: #d9c9a8;
  margin-left: 2px;
}

.section-label {
  font-size: 12px;
  color: var(--ink-dim);
  padding: 2px 2px 8px;
  margin-bottom: 0;
}

.btn, .btn-rpg {
  font-family: var(--font-jp);
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  border: 3px solid var(--wood-dark);
  border-radius: 7px;
  border-image: var(--skin-btn-frame) var(--frame-btn-slice, 42 60) fill / var(--frame-btn-w, 6px 14px) stretch;
  color: #fff;
  padding: 9px 12px;
  font-size: 13px;
  box-shadow: inset 0 2px 0 #ffffff66, inset 0 -3px 0 #00000033, 0 4px 0 var(--wood-dark);
  transition: transform 120ms, box-shadow 120ms, filter 120ms;
}

.btn:active, .btn-rpg:active {
  transform: translateY(4px);
  box-shadow: inset 0 2px 0 #ffffff44, inset 0 -2px 0 #00000033, 0 0 0 var(--wood-dark);
}

.btn:hover, .btn-rpg:hover {
  filter: brightness(1.06);
}

.btn-gold {
  background: linear-gradient(180deg, #ffe06b, #f0a92a);
  color: #5a3310;
}

.btn-blue {
  background: linear-gradient(180deg, #3f7be0, #2a52b0);
}

.btn-buy {
  background: linear-gradient(180deg, #ff9a45, #e0641b);
}

.btn-red {
  background: linear-gradient(180deg, #ec5c45, #c2371f);
}

.btn-green {
  background: linear-gradient(180deg, #6fc24e, #4a8c30);
}

.btn-block {
  width: 100%;
}

.btn-disabled {
  background: #b9a87f;
  filter: grayscale(.5) brightness(.97);
  pointer-events: none;
  opacity: .75;
}

header.hud {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: var(--skin-header-bg, #140e0a);
  background-size: cover;
  background-position: center;
  
  border-image: var(--skin-header-frame) var(--frame-header-slice, 60 130) fill / var(--frame-header-w, 9px 15px) stretch;
}

.logo-slot {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  border: 1.5px dashed var(--wood);
  border-radius: 5px;
  display: grid;
  place-content: center;
  font-size: 9px;
  color: var(--ink-dim);
  background: #00000008;
  text-align: center;
  text-decoration: none;
}

.logo-slot b {
  color: var(--gold-deep);
  font-family: var(--font-num);
  font-size: 11px;
}

.hud__stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
}

.hud__auth {
  display: flex;
  gap: 6px;
}

.hud__auth .btn {
  padding: 7px 10px;
  font-size: 11px;
}

.coin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold) 45%, var(--gold-deep));
  border: 2px solid var(--wood-dark);
  display: inline-block;
  flex: none;
}

.coin.has-img {
  background-image: var(--slot-img) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
}

.coin.sm {
  width: 13px;
  height: 13px;
  border-width: 1.5px;
}

.coin-in {
  vertical-align: -2.5px;
  margin-right: 3px;
}

html.has-icon-coin .coin {
  background: var(--coin-img) center / contain no-repeat;
  border: none;
  border-radius: 0;
}

.hud__btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-content: center;
  font-size: 15px;
  font-weight: bold;
  flex: none;
  line-height: 1;
  padding: 0 0 3px;
}

.hud__bell {
  width: 36px;
  height: 36px;
  z-index: 60;
  display: grid;
  place-content: center;
  cursor: pointer;
  background: linear-gradient(180deg, #1c1610, #0b0805);
  border: 1.5px solid #d9a441;
  border-radius: 50%;
  box-shadow: 0 2px 6px #000c, inset 0 1px 0 #ffffff22;
  text-decoration: none;
}

.hud__bell:hover {
  filter: brightness(1.15);
}

.rcard,
.hcard,
.report-card {
  border-image: var(--skin-card-frame) var(--frame-card-slice, 20) / var(--frame-card-w, 8px) repeat;
}

.gacha {
  border-image: var(--skin-card-frame, var(--skin-panel-frame)) var(--frame-panel-slice, 42) fill / var(--frame-panel-w, 13px) stretch;
  background: #14100c;
}

.gacha .price b {
  color: #ffd84d;
}

.gacha .price span {
  color: #d9c9a8;
}

.gacha .gauge {
  background: #00000055;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  padding: 10px 12px;
  border-radius: 8px;
}

.gauge,
.buybar__meter {
  border-image: var(--skin-bar-frame) var(--frame-bar-slice, 30) fill / var(--frame-bar-w, 9px) stretch;
}

.buybar__meter {
  padding: 8px 12px;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  border-radius: 6px;
}

.pm-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pm-row .price {
  flex: none;
  padding: 0;
}

.pm-right {
  flex: 1;
  min-width: 0;
}

.pm-label {
  font-size: 14px;
  font-weight: 700;
  color: #d9c9a8;
  margin-bottom: 4px;
  text-align: center;
}

.pm-label b {
  color: #fff;
  font-family: var(--font-num);
  font-size: 15px;
}

.pm-label span {
  color: #fff;
  font-weight: 700;
  font-family: var(--font-num);
  font-size: 15px;
}

.gauge__sub {
  font-size: 10px;
  color: #bfae8c;
  margin-top: 6px;
}

.meter-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
}

.meter-row .m-cap {
  font-size: 12px;
  color: #d9c9a8;
  flex: none;
}

.meter-row .bar {
  flex: 1;
}

.meter-row .m-num {
  font-family: var(--font-num);
  font-size: 12px;
  color: #9ee34a;
  flex: none;
}

.meter-row .m-den {
  font-family: var(--font-num);
  font-size: 11px;
  color: #fff;
  flex: none;
}

html.has-frame-bar .bar {
  height: 13px;
  border-radius: 8px;
  background: #0d0b08;
  border: 1.5px solid #8a6a2f;
  overflow: hidden;
}

html.has-frame-bar .bar>i {
  border-radius: 6px;
  background: linear-gradient(180deg, #c8f56a, #57c520 55%, #3f9a17);
  box-shadow: inset 0 1px 0 #ffffff88;
}

.btn-gold {
  border-image: var(--skin-btn-gold-frame, var(--skin-btn-frame)) 26 37 fill / 6px 14px stretch;
}

.btn-blue {
  border-image: var(--skin-btn-blue-frame, var(--skin-btn-frame)) 42 60 fill / 6px 14px stretch !important;
}

.btn-buy {
  border-image: var(--skin-btn-buy-frame, var(--skin-btn-frame)) 26 37 fill / 6px 14px stretch;
}

.btn-green {
  border-image: var(--skin-btn-green-frame, var(--skin-btn-frame)) 26 37 fill / 6px 14px stretch;
}

.btn-red {
  border-image: var(--skin-btn-red-frame, var(--skin-btn-frame)) 42 60 fill / 6px 14px stretch;
}

html.has-frame-btn .btn, html.has-frame-btn .btn-rpg {
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .05em;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 3px #000c;
  box-shadow: 0 3px 0 #00000088;
}

html.has-frame-btn .btn-gold {
  color: #4a2a00;
  text-shadow: 0 1px 0 #ffefb8, 0 0 3px #ffffff66;
}

.btn, .btn-rpg {
  position: relative;
  overflow: hidden;
  transition: transform 90ms, filter 120ms, box-shadow 90ms;
}

.btn:hover, .btn-rpg:hover {
  filter: brightness(1.12);
}

html.has-frame-btn .btn:active, html.has-frame-btn .btn-rpg:active {
  transform: translateY(3px) scale(.985);
  box-shadow: 0 0 0 #00000088;
}

.btn-single {
  border-image: var(--skin-btn-single-frame, var(--skin-btn-blue-frame, var(--skin-btn-frame))) 26 37 fill / 6px 14px stretch;
}

html.has-frame-bar .gauge__label,
html.has-frame-bar .stock-row,
html.has-frame-bar .buybar__meter .m-label {
  color: #d9c9a8;
}

html.has-frame-bar .gauge__label b {
  color: #ffd84d;
}

html.has-frame-bar .stock-row b {
  color: #fff;
}

.gacha .gauge__label {
  color: #d9c9a8;
}

.gacha .gauge__label b {
  color: #ffd84d;
}

.gacha .stock-row {
  color: #d9c9a8;
}

.gacha .stock-row b {
  color: #fff;
}

#campaignGrid .gacha {
  border-image: var(--skin-campaign-frame, var(--skin-panel-frame)) var(--frame-campaign-slice, 42) fill / var(--frame-campaign-w, 13px) stretch;
}

.ico.has-icon {
  display: block;
  width: 44px;
  height: 44px;
  font-size: 0;
  color: transparent;
  text-shadow: none;
  background: var(--icon-img) center/contain no-repeat;
}

.hud__bell.has-icon {
  font-size: 0;
  color: transparent;
  background: var(--icon-img) center/62% no-repeat, linear-gradient(180deg, #1c1610, #0b0805);
}

header.hud .logo-slot {
  flex: 0 0 auto;
  width: 152px;
  aspect-ratio: 280 / 150;
  height: auto;
  margin-right: 2px;
}

.logo-slot.has-img {
  border: none !important;
  background-color: transparent !important;
  background-size: contain !important;
}

.hud__center {
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  z-index: 3;
}

.hud__right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: auto;
}

.hud__pill {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  background: linear-gradient(180deg, #000000a8, #00000088);
  border: 1.5px solid #d9a44166;
  border-radius: 999px;
  padding: 3px 3px 3px 5px;
  box-shadow: inset 0 1px 2px #000c, 0 1px 0 #ffffff22;
}

.hud__pill .coin {
  width: 32px;
  height: 32px;
  margin: -6px 1px -6px -4px;
}

.hud__pill .hud__stat {
  margin: 0 !important;
}

.hud__pill .hud__btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-left: 2px;
}

header.hud .hud__stat+.hud__stat {
  margin-left: 4px;
}

.hud__rank {
  display: block;
  flex: none;
  text-decoration: none;
}

.hud__rank:hover {
  filter: brightness(1.08);
}

.hud__rank-badge {
  display: block;
  position: relative;
  width: 118px;
  aspect-ratio: 1156 / 812;
  height: auto;
}

.hud__rank-emblem {
  position: absolute;
  inset: 0;
  padding: 0 !important;
  background: transparent;
  border: none !important;
}

.hud__rank-emblem.has-img {
  background-size: contain !important;
  border: none !important;
}

.hud__rank-char {
  position: absolute;
  left: 10%;
  right: 10%;
  top: -12%;
  bottom: 38%;
  padding: 0 !important;
  background: transparent;
  border: none !important;
  filter: drop-shadow(0 2px 2px #000a);
}

.hud__rank-char.has-img {
  background-size: contain !important;
  background-position: center bottom;
  border: none !important;
}

.hud__rank-emblem .slot-id-badge,
.hud__rank-char .slot-id-badge {
  display: none;
}

.hud__rank-txt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.hud__rank-txt b {
  font-size: 8.5px;
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}

.hud__rank-txt span {
  font-family: var(--font-num);
  font-size: 9px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

.tier__seal .slot-id-badge,
.advrank__seal .slot-id-badge {
  display: none;
}

.tier__seal,
.advrank__seal {
  padding: 0 !important;
}

@media (max-width: 799px) {
  header.hud {
    padding: 8px 3vw;
    gap: 1vw;
  }

  header.hud .logo-slot {
    width: clamp(100px, 30vw, 140px);
    height: auto;
  }

  .hud__rank-badge {
    width: clamp(88px, 26vw, 112px);
    height: auto;
  }

  .hud__stat {
    font-size: clamp(11px, 3.3vw, 14px);
  }

  .coin {
    width: clamp(14px, 4vw, 18px);
    height: clamp(14px, 4vw, 18px);
  }

  .hud__pill {
    padding: 2px 2px 2px 4px;
    gap: 4px;
  }

  .hud__pill .coin {
    width: 26px;
    height: 26px;
    margin: -5px 0 -5px -3px;
  }

  .hud__pill .hud__btn {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .hud__btn {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .hud__right {
    gap: 4px;
  }

  .hud__coins .hud__stat+.hud__stat {
    font-size: 8px;
  }
}

@media (max-width: 374px) {
  header.hud {
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .hud__stat {
    font-size: 8.5px;
  }

  .hud__btn {
    width: 21px;
    height: 21px;
    font-size: 12px;
  }

  .hud__bell {
    font-size: 12px;
  }

  .hud__right {
    gap: 3px;
  }
}

main {
  padding: var(--space);
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.breadcrumb {
  font-size: 12px;
  font-weight: 700;
  color: #f0e6cc;
  padding: 6px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  background: #000000a0;
  border: 1px solid #d9a44155;
  border-radius: 999px;
  text-shadow: 0 1px 2px #000;
}

.breadcrumb a {
  color: #ffd84d;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb .sep {
  color: #d9a441;
}

.banner-full {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: calc(var(--header-h, 80px) + 20px) !important;
  margin-bottom: 12px;
}

.banner-full .slot {
  display: block;
  border-radius: 6px;
  border: 2px solid var(--wood);
  border-image: var(--skin-panel-frame) var(--frame-panel-slice, 42) / var(--frame-panel-w, 13px) stretch;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--slot-img);
}

.banner-full .slot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  object-fit: cover;
}

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
  padding: 0 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel>.slot {
  flex: 0 0 88%;
  scroll-snap-align: center;
}

.dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 10px 0 4px;
  align-items: center;
}

.dots i {
  width: 15px;
  height: 15px;
  cursor: pointer;
  display: inline-block;
  background: var(--dot-off-img, var(--wood)) center / contain no-repeat;
  border: none;
  transform: none;
  transition: transform 0.2s ease;
}

.dots i.on {
  background: var(--dot-on-img, var(--gold)) center / contain no-repeat;
  transform: scale(1.15);
}

.cmd__title {
  font-size: 12px;
  color: var(--ink-dim);
  padding: 0 2px 8px;
}

.cmd__grid {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px;
  background: linear-gradient(180deg, #4a3a24, #271b10);
  border: 3px solid var(--wood-dark);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #d9a441, inset 0 2px 6px #00000066, 0 4px 0 var(--wood-dark);
}

.cmd__grid::-webkit-scrollbar {
  display: none;
}

.cmd__item {
  flex: 1 1 0;
  min-width: max-content;
  padding: 9px 8px;
  font-size: 12px;
  color: #4a3212;
  cursor: pointer;
  font-family: var(--font-jp);
  white-space: nowrap;
  border: none;
  border-right: 2px solid #0000002e;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: filter 140ms, transform 120ms;
  background: linear-gradient(180deg, #f0e2c2, #d3ba8e);
  box-shadow: inset 0 1px 0 #fff7e6, inset 0 -2px 3px #0000001f;
}

.cmd__item:first-child {
  border-radius: 6px 0 0 6px;
}

.cmd__item:last-child {
  border-right: none;
  border-radius: 0 6px 6px 0;
}

.cmd__item:hover {
  filter: brightness(1.04);
}

.cmd__item[aria-selected="true"] {
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1px 2px #00000099;
  border-right: none;
  border-radius: 6px;
  background: linear-gradient(180deg, #5a97f2, #234fb4);
  box-shadow: inset 0 0 0 2px #ffd23a, inset 0 2px 0 #ffffff77, inset 0 -3px 4px #00000033, 0 0 8px #234fb455;
}

.cmd__ico {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
}

.cmd__ico.has-icon {
  width: 20px;
  height: 20px;
  font-size: 0;
  color: transparent;
  background: var(--icon-img) center / contain no-repeat;
}

.cmd__item[aria-selected="true"] .cmd__ico {
  filter: drop-shadow(0 1px 1px #00000066);
}

.cmd__grid {
  background: transparent !important;
  box-shadow: none !important;
  border-width: 4px 14px !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 6px !important;
  gap: 2px !important;
  align-items: center !important;
  justify-content: center !important;
  border-image: var(--skin-tabs-frame, url('/oripaquest/assets/frame-tabs.png')) 40 60 fill / 4px 14px stretch !important;
}

.cmd__item {
  background: transparent !important;
  box-shadow: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  flex: 0 0 auto !important;
  padding: 6px 14px !important;
  color: #4a2c0e !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  border-width: 8px 9px !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-image: var(--skin-tab-off-frame, url('/oripaquest/assets/frame-tab-off.png')) 110 130 fill / 8px 9px stretch !important;
  text-decoration: none !important;
}

.cmd__item:first-child,
.cmd__item:last-child {
  border-radius: 0 !important;
}

.cmd__item[aria-selected="true"],
.cmd__item.on,
.cmd__item.active {
  color: #fff !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px #000 !important;
  border-image: var(--skin-tab-on-frame, url('/oripaquest/assets/frame-tab-on.png')) 110 130 fill / 8px 9px stretch !important;
}

.chip,
.tag-filter .tag-item {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #4a2c0e !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  padding: 6px 12px !important;
  border-width: 7px 12px !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-image: var(--skin-chip-off-frame, url('/oripaquest/assets/frame-chip-off.png')) 42 55 fill / 7px 12px stretch !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chip.sort,
.chip.on,
.chip.active,
.tag-filter .tag-item.active {
  color: #fff !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px #000 !important;
  border-image: var(--skin-chip-on-frame, url('/oripaquest/assets/frame-chip-on.png')) 125 165 fill / 7px 12px stretch !important;
}

html.has-frame-toolbtn-view .rtoolbar #viewBtn,
html.has-frame-toolbtn-view .htoolbar #viewBtn,
html.has-frame-toolbtn-sort .rtoolbar #sortBtn,
html.has-frame-toolbtn-sort .htoolbar #sortBtn {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: #fff;
  font-weight: 900;
  padding: 10px 8px;
  text-shadow: 0 1px 0 #000c, 1px 0 0 #000c, -1px 0 0 #000c, 0 -1px 0 #000c, 0 2px 3px #000a;
  border-width: 7px 12px;
  border-style: solid;
  border-color: transparent;
}

html.has-frame-toolbtn-view .rtoolbar #viewBtn,
html.has-frame-toolbtn-view .htoolbar #viewBtn {
  border-image: var(--skin-toolbtn-view-frame) 47 100 fill / 17px 36px stretch;
}

html.has-frame-toolbtn-sort .rtoolbar #sortBtn,
html.has-frame-toolbtn-sort .htoolbar #sortBtn {
  border-image: var(--skin-toolbtn-sort-frame) 47 100 fill / 17px 36px stretch;
}

@keyframes blink {
  50% {
    opacity: .2;
  }
}

.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  padding: 8px 13px;
  font-size: 12px;
  color: #4a3212;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-jp);
  font-weight: bold;
  background: linear-gradient(180deg, #f0e2c2, #d3ba8e);
  border: 2px solid var(--wood-dark);
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px #d9a44155, inset 0 1px 0 #fff7e6, 0 3px 0 var(--wood-dark);
  transition: filter 140ms, transform 120ms;
}

.chip:hover {
  filter: brightness(1.05);
}

.chip:active {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 2px #d9a44155, 0 0 0 var(--wood-dark);
}

.chip.sort,
.chip.on {
  color: #fff;
  text-shadow: 0 1px 2px #00000099;
  background: linear-gradient(180deg, #5a97f2, #234fb4);
  box-shadow: inset 0 0 0 2px #ffd23a, inset 0 2px 0 #ffffff77, inset 0 -3px 4px #00000033, 0 3px 0 var(--wood-dark);
}

.ribbon {
  text-align: center;
  padding: 14px 12px 16px;
  background: var(--skin-invite-bg, repeating-linear-gradient(45deg, #ffffff20 0 10px, transparent 10px 20px), linear-gradient(180deg, #2f8c4a, #226b39));
  background-size: cover;
  background-position: center;
  border: 4px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--wood-dark), 0 4px 0 var(--wood-dark);
}

html.has-skin-invite .ribbon {
  border: none;
  box-shadow: none;
  aspect-ratio: 1647 / 955;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
}

html.has-skin-invite .ribbon small,
html.has-skin-invite .ribbon h2 {
  display: none;
}

html.has-skin-invite .ribbon .btn {
  width: 66%;
  margin: 0 auto 9%;
  padding: 8px 10px;
  font-size: 13px;
}

.ribbon small {
  display: block;
  font-size: 11px;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #00000080;
}

.ribbon h2 {
  font-size: 19px;
  margin-top: 6px;
}

.campaign {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 16px 0 24px;
  background: transparent;
}

.campaign__inner {
  max-width: var(--maxw-mobile);
  margin: 0 auto;
  padding: 0 var(--space);
}

.campaign__head {
  text-align: center;
  margin-bottom: 14px;
  position: relative;
}

.campaign__ribbonimg {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 868 / 256;
  border: none;
  background: transparent;
}

.campaign__ribbonimg.has-img {
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
}

.campaign__ribbon {
  display: inline-block;
  position: relative;
  z-index: 3;
  font-size: 12px;
  letter-spacing: .05em;
  color: #ffe9b0;
  background: linear-gradient(180deg, #4a2018, #2c120c);
  border: 1.5px solid #d9a441;
  padding: 4px 20px;
  margin-bottom: -8px;
  box-shadow: 0 2px 5px #00000066;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
}

.campaign__title {
  display: inline-block;
  position: relative;
  z-index: 2;
  margin-top: 6px;
  font-size: 20px;
  color: #fff;
  padding: 14px 46px;
  letter-spacing: .02em;
  background: linear-gradient(180deg, #c33a2b 0%, #9a2118 52%, #741610 100%);
  border-top: 2px solid #ffd23a;
  border-bottom: 2px solid #4d0f0a;
  text-shadow: 2px 2px 0 #520a06, 0 0 10px #ffcf6b55;
  box-shadow: inset 0 1px 0 #ffffff55, inset 0 -6px 10px #00000040, 0 5px 12px #00000066;
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
}

.campaign__title::before,
.campaign__title::after {
  content: "";
  position: absolute;
  top: calc(100% - 4px);
  width: 22px;
  height: 16px;
  z-index: -1;
  background: linear-gradient(180deg, #7a150e, #4d0f0a);
}

.campaign__title::before {
  left: 10px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: skewX(12deg);
}

.campaign__title::after {
  right: 10px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: skewX(-12deg);
}

@media (min-width: 800px) {
  .campaign__inner {
    max-width: var(--maxw-pc);
  }
}

.gacha-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.gacha {
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
  color: var(--ink);
}

.gpanel {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  container-type: inline-size;
}

.gpanel__bg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.gpanel>*:not(.gpanel__bg) {
  position: absolute;
}

.gpanel__media {
  top: 4.2%;
  left: 6.5%;
  width: 87%;
  height: 55%;
  border: none;
  background: transparent;
  overflow: hidden;
}

.gpanel__media.has-img {
  background-size: cover !important;
  background-position: center;
  border: none;
}

.gpanel__price {
  top: 64.5%;
  height: 8.5%;
  right: 8%;
  width: 48%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.gpanel__price b {
  font-family: var(--font-num);
  font-size: 6cqw;
  color: #ffe27a;
  line-height: 1;
  text-shadow: 0 2px 0 #3a2410, 0 0 6px #000, 1px 1px 0 #5a3a12;
}

/* Styling for original list_gacha.blade.php structure (.list-gacha, .gacha-item, .card) */
.list-gacha {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-top: 16px !important;
}

.list-gacha .gacha-item {
  flex: 0 0 calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
}

@media (max-width: 799px) {
  .list-gacha .gacha-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

.list-gacha .card {
  background: #14100c !important;
  border-radius: 8px !important;
  border-width: var(--frame-panel-w, 13px) !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-image: var(--skin-panel-frame) var(--frame-panel-slice, 42) fill / var(--frame-panel-w, 13px) stretch !important;
  padding: 12px !important;
  color: #fff !important;
  box-shadow: 0 5px 15px #0009 !important;
}

.list-gacha .card .card-img-top {
  border-radius: 4px !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

/* Container for price + stock gauge (.gacha-price-quantity, .gauge) */
.gacha-price-quantity,
.gacha-price-quantity-list {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: #00000055 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-image: var(--skin-bar-frame) var(--frame-bar-slice, 30) fill / var(--frame-bar-w, 9px) stretch !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* Left side: Price & Coin */
.gacha-price-quantity-list>h5 {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* Right side: Stock Quantity + Progress Bar */
.gacha-price-quantity-list>div.d-flex,
.gacha-price-quantity-list>div {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  width: auto !important;
}

.gacha-price-quantity-list .card-quantity {
  margin-bottom: 2px !important;
  width: 100% !important;
  text-align: right !important;
}

/* Price & Coin icon */
.icon_p_img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  vertical-align: sub !important;
  margin-right: 4px !important;
  display: inline-block !important;
}

.gacha-price,
.list-gacha .card .gacha-price,
.gacha-price-num {
  display: inline-flex !important;
  align-items: baseline !important;
  color: #ffe27a !important;
  font-family: var(--font-num), Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 0 #3a2410, 0 0 6px #000, 1px 1px 0 #5a3a12 !important;
}

.gacha-price-unit,
.gacha-price .gacha-price-unit {
  color: #d9c9a8 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--font-jp), sans-serif !important;
  text-shadow: 0 1px 1px #000 !important;
  margin-left: 2px !important;
}

.gacha-text-quantity,
.list-gacha .card .gacha-text-quantity,
.card-quantity h5 {
  color: #ffffff !important;
  font-family: var(--font-num), Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px #000, 0 0 4px #000 !important;
  margin: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Countdown box styling for Oripaquest RPG theme */
.countdown-edit,
.countdown-edit-list {
  background: #00000066 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-image: var(--skin-bar-frame) var(--frame-bar-slice, 30) fill / var(--frame-bar-w, 9px) stretch !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-top: 10px !important;
  margin-bottom: 6px !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 4px #000c !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.text_countdown {
  color: #d9c9a8 !important;
  font-family: var(--font-jp), sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-shadow: 0 1px 2px #000 !important;
  white-space: nowrap !important;
}

.time_countdown {
  color: #ffd84d !important;
  font-family: var(--font-num), Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-shadow: 0 1px 2px #000, 0 0 6px #ffd84d55 !important;
}

.time_countdown .countdown-num {
  color: #ff5252 !important;
  font-family: var(--font-num), Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin: 0 2px !important;
  text-shadow: 0 1px 2px #000, 0 0 6px #ff5252aa !important;
}

.time_countdown .countdown-unit {
  color: #d9c9a8 !important;
  font-family: var(--font-jp), sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-right: 4px !important;
}

/* Progress Track & Bar */
.list-gacha .card .progress {
  height: 10px !important;
  width: 100% !important;
  border-radius: 8px !important;
  background: #0d0b08 !important;
  border: 1.5px solid #8a6a2f !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  box-shadow: inset 0 1px 3px #000c !important;
}

.list-gacha .card .progress-bar {
  border-radius: 6px !important;
  background: linear-gradient(180deg, #9df06f, #3fa53f) !important;
  box-shadow: inset 0 1px 0 #ffffff77 !important;
  height: 100% !important;
}

.btn-gacha-view-detail-custom,
.btn-gacha-view-detail-wrapper a {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-family: var(--font-jp), sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .05em !important;
  padding: 10px 14px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 7px !important;
  border: 3px solid var(--wood-dark) !important;
  border-image: var(--skin-btn-blue-frame, var(--skin-btn-frame)) 26 37 fill / 6px 14px stretch !important;
  background: linear-gradient(180deg, #3f7be0, #2a52b0) !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 3px #000c !important;
  box-shadow: 0 3px 0 #00000088 !important;
  transition: transform 90ms, filter 120ms !important;
}

.btn-gacha-view-detail-custom:hover,
.btn-gacha-view-detail-wrapper a:hover {
  filter: brightness(1.12) !important;
  color: #fff !important;
}

.btn-gacha-view-detail-custom:active,
.btn-gacha-view-detail-wrapper a:active {
  transform: translateY(2px) scale(.985) !important;
}

.button-buy {
  font-family: var(--font-jp), sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #ffffff !important;
  border-radius: 7px !important;
  border: 2.5px solid var(--wood-dark) !important;
  border-image: var(--skin-btn-blue-frame, var(--skin-btn-frame)) 26 37 fill / 6px 14px stretch !important;
  background: linear-gradient(180deg, #3f7be0, #2a52b0) !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 3px #000c !important;
  padding: 8px 12px !important;
  box-shadow: 0 3px 0 #00000088 !important;
  transition: transform 90ms, filter 120ms !important;
}

.button-buy.buy-10,
.button-buy.buy-100 {
  background: linear-gradient(180deg, #ff9a45, #e0641b) !important;
  border-image: var(--skin-btn-buy-frame, var(--skin-btn-frame)) 26 37 fill / 6px 14px stretch !important;
}

.button-buy.btn-buy-all {
  background: linear-gradient(180deg, #ec5c45, #c2371f) !important;
  border-image: var(--skin-btn-red-frame, var(--skin-btn-frame)) 42 60 fill / 6px 14px stretch !important;
}

.button-buy:hover {
  filter: brightness(1.12) !important;
}

.button-buy:active {
  transform: translateY(2px) scale(.985) !important;
}

.price {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 2px;
}

.price b {
  font-family: var(--font-num);
  font-size: 18px;
  color: var(--gold-deep) !important;
}

.price span {
  font-size: 12px;
  color: #d9c9a8 !important;
}

.price.lg b {
  font-size: 18px;
}

.gauge {
  padding: 5px 6px;
  background: #00000010;
  border: 1.5px solid var(--wood);
  border-radius: 5px;
}

.gauge__label {
  font-size: 11px;
  color: var(--ink-dim);
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.gauge__label b {
  color: var(--gold-deep);
  font-family: var(--font-num);
  font-size: 13px;
}

.bar {
  height: 10px;
  background: #2a1c0c;
  border: 2px solid var(--wood-dark);
  border-radius: 4px;
  overflow: hidden;
}

.bar>i {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, #88e6a4, var(--exp));
}

.bar.stock>i {
  background: linear-gradient(180deg, #ffb27a, var(--stock));
}

.stock-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 5px;
}

.stock-row b {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--ink);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 2px solid var(--wood-dark);
  background: linear-gradient(180deg, #fff3c8, #ffe08a);
  color: var(--ink);
}

.badge.red {
  background: linear-gradient(180deg, #ffb3a6, #ec5c45);
  color: #fff;
}

.acc {
  border: 2px solid var(--wood);
  border-radius: 6px;
  background: #fffdf4e0;
  overflow: hidden;
  width: 100% !important;
}

.acc>summary {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
}

.acc>summary::-webkit-details-marker {
  display: none;
}

.acc>summary::after {
  content: "▼";
  color: var(--gold-deep);
  font-size: 10px;
}

.acc[open]>summary::after {
  content: "▲";
}

.acc__body {
  padding: 4px 12px 12px;
  font-size: 11px;
  color: var(--ink);
  line-height: 1.7;
}

.acc__body li {
  margin-left: 1em;
  margin-bottom: 4px;
}

.rank-band {
  text-align: center;
  font-size: 14px;
  padding: 7px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(90deg, #ff5e8a, #ffce3a, #46c6e0);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--wood-dark);
}

.prize-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.prize-grid .slot {
  aspect-ratio: 3 / 4;
}

.buybar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--maxw-mobile);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--space);
  background: linear-gradient(180deg, var(--parch), var(--parch-2));
  border-top: 4px solid var(--wood-dark);
}

.buybar .price {
  flex: none;
}

.buybar .btn {
  flex: 1;
}

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  color: var(--ink);
}

.field .req {
  color: var(--red);
  font-size: 10px;
  margin-left: 4px;
}

.field .opt {
  color: var(--ink-dim);
  font-size: 10px;
  margin-left: 4px;
}

.input {
  width: 100%;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--ink);
  padding: 11px;
  background: #fffdf4;
  border: 2px solid var(--wood);
  border-radius: 5px;
  box-shadow: inset 0 2px 0 #00000012;
}

.input::placeholder {
  color: #b9a679;
}

.checkrow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  margin: 12px 0;
}

.checkrow a {
  color: var(--gold-deep);
}

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-dim);
  font-family: var(--font-num);
  font-size: 10px;
  margin: 16px 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--wood);
}

.link-center {
  display: block;
  text-align: center;
  color: var(--ink);
  text-decoration: underline;
  font-size: 12px;
  margin-top: 10px;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  background: linear-gradient(180deg, var(--parch), var(--parch-2));
  border: 3px solid var(--wood);
  border-radius: 6px;
  box-shadow: 0 3px 0 var(--wood-dark);
}

.list-row:hover {
  filter: brightness(1.04);
}

.list-row .left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list-row .yen {
  font-family: var(--font-num);
  font-size: 12px;
  color: #5a3310;
  background: linear-gradient(180deg, #ffe06b, #f0a92a);
  padding: 6px 9px;
  border-radius: 5px;
  border: 2px solid var(--wood-dark);
}

.list-row.nav::after {
  content: "›";
  color: var(--wood);
  font-size: 18px;
}

.rank-card {
  text-align: center;
  padding: 16px;
  border-radius: 8px;
  color: #5a3310;
  background: linear-gradient(180deg, #ffe06b, #f0a92a);
  border: 3px solid var(--wood-dark);
  box-shadow: inset 0 2px 0 #ffffff88, 0 4px 0 var(--wood-dark);
}

.rank-card small {
  font-size: 10px;
}

.rank-card .lv {
  font-family: var(--font-num);
  font-size: 22px;
  display: block;
  margin: 4px 0;
}

.jp-gauge {
  display: flex;
  gap: 3px;
}

.jp-gauge i {
  flex: 1;
  height: 14px;
  background: #2a1c0c;
  border: 1.5px solid var(--wood-dark);
  border-radius: 2px;
}

.jp-gauge i.on {
  background: linear-gradient(180deg, #fff3a0, var(--gold));
}

.group-title {
  font-size: 12px;
  color: var(--ink-dim);
  margin: 6px 2px 2px;
}

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 3px solid var(--wood);
}

.tabs button,
.tabs a {
  flex: 1;
  padding: 9px 4px;
  font-family: var(--font-jp);
  font-size: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  position: relative;
  text-decoration: none;
  text-align: center;
  display: block;
}

.tabs button.active,
.tabs a.active {
  color: var(--red);
  border-bottom-color: var(--red);
  font-weight: bold;
}

.empty {
  text-align: center;
  padding: 24px 12px;
}

.empty .slot {
  width: 120px;
  height: 120px;
  margin: 0 auto 12px;
  border-radius: 50%;
}

.empty p {
  font-size: 13px;
  margin-bottom: 4px;
}

.empty .sub {
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 14px;
}

.report-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.report-card {
  padding: 10px;
}

.report-card .slot {
  aspect-ratio: 1 / 1;
  margin-bottom: 8px;
}

.report-card .name {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 4px;
}

.report-card .body {
  font-size: 11px;
  color: var(--ink-dim);
  line-height: 1.6;
}

.report-card .time {
  font-size: 9px;
  color: var(--ink-dim);
  text-align: right;
  margin-top: 6px;
}

.news-row {
  padding: 9px 4px;
  border-bottom: 1px dashed var(--wood);
  font-size: 12px;
}

.news-row:last-child {
  border-bottom: none;
}

.news-row .date {
  font-size: 10px;
  color: var(--ink-dim);
  font-family: var(--font-num);
}

.devnote {
  font-family: var(--font-num);
  font-size: 9px;
  color: #ffffffcc;
  text-align: center;
  letter-spacing: 1px;
  padding: 4px;
  text-shadow: 1px 1px 0 #00000080;
}

nav.tabbar {
  
  position: sticky;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  background: var(--skin-nav-bg, linear-gradient(180deg, var(--wood-light), var(--wood)));
  background-size: cover;
  background-position: center;
  border-top: 4px solid var(--wood-dark);
  box-shadow: 0 -3px 0 #00000040;
  z-index: 40;
}

nav.tabbar a,
nav.tabbar .tabbar__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 2px;
  text-decoration: none;
  color: #fff5e0;
  font-family: var(--font-jp);
  font-size: 10px;
  text-shadow: 1px 1px 0 #00000070;
}

nav.tabbar a .ico {
  font-size: 32px;
}

nav.tabbar a[aria-current="page"] {
  color: var(--gold);
}

nav.tabbar a:hover {
  color: #fff;
}

.site-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 0;
  padding: 20px clamp(16px, 5vw, 80px) 32px;
  background: var(--skin-footer-bg, #232327);
  background-size: cover;
  background-position: center;
}

.site-footer h3 {
  font-size: 12px;
  color: var(--gold);
  margin: 12px 0 6px;
}

.site-footer a {
  display: block;
  color: #fff5e0;
  text-decoration: none;
  font-size: 11px;
  padding: 3px 0;
}

/* ---------- 10. PC（≥800px） ---------- */
@media (min-width: 800px) {
  .frame {
    max-width: var(--maxw-pc);
    padding-bottom: 0;
  }

  header.hud {
    max-width: 100%;
    padding-left: clamp(16px, 5vw, 80px);
    padding-right: clamp(16px, 5vw, 80px);
  }

  .frame.no-tabbar {
    padding-bottom: 24px;
  }

  .banner-full .carousel>.slot {
    flex: 0 0 46vw;
  }

  .cmd__item {
    flex: 1 1 14%;
    justify-content: center;
  }

  .cmd__grid {
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .chips {
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hud__bell {
    position: static;
    margin-left: 10px;
    flex: none;
  }

  .gacha-grid {
    grid-template-columns: 1fr 1fr;
  }

  .prize-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .report-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  nav.tabbar,
  .buybar {
    max-width: 100%;
    padding-left: clamp(16px, 5vw, 80px);
    padding-right: clamp(16px, 5vw, 80px);
  }

  .ribbon h2 {
    font-size: 24px;
  }

  .form-narrow {
    max-width: 460px;
    margin: 40px auto;
  }
}

.gauge,
.buybar__meter {
  border-image: var(--skin-bar-frame) var(--frame-bar-slice, 30) fill / var(--frame-bar-w, 9px) stretch;
}

html.has-frame-panel .rcard,
html.has-frame-panel .hcard {
  background: #14100c;
  border-radius: 0;
  box-shadow: none;
  border-width: var(--frame-panel-w, 13px);
  border-style: solid;
  border-color: transparent;
  border-image: var(--skin-panel-frame) var(--frame-panel-slice, 42) fill / var(--frame-panel-w, 13px) stretch;
}

html.has-frame-panel .rcard.sel {
  box-shadow: 0 0 0 3px var(--gold);
}

html.has-frame-panel .rcard .rname,
html.has-frame-panel .hcard .hname {
  color: #f3ead2;
}

html.has-frame-panel .hcard .hdate {
  color: #c9b98f;
}

html.has-frame-bar .rcard .rcoin,
html.has-frame-bar .hcard .hcoin {
  background: #0d0b08;
  color: #fff;
  font-size: 11px;
  border-radius: 0;
  padding: 4px 6px;
  text-shadow: 0 1px 2px #000c;
  border-width: 6px 10px;
  border-style: solid;
  border-color: transparent;
  border-image: var(--skin-bar-frame) var(--frame-bar-slice, 28 40) fill / 6px 10px stretch;
}

/* Force filters, chips, and intermediate layout wrappers to be transparent */
.chips,
.chips-container,
.chips-wrapper,
.menu-header-bar,
.site-background,
.container,
.container.main,
.padding-main,
.tab-content,
.tab-pane,
.tab-content-0,
.list-gacha,
.gacha-item,
.card-body,
.card-body-edit,
.card-quantity {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.container.main {
  max-width: var(--maxw-pc, 1000px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.padding-main {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Styling for original nav_mobile HTML structure (.footer-nav-bar-custom) */
.footer-nav-bar-custom {
  position: sticky !important;
  bottom: 0 !important;
  width: 100% !important;
  background: var(--skin-nav-bg, linear-gradient(180deg, var(--wood-light), var(--wood))) center / cover no-repeat !important;
  border-top: 4px solid var(--wood-dark) !important;
  box-shadow: 0 -3px 0 #00000040 !important;
  z-index: 9999 !important;
  padding: 8px 0 !important;
}

.footer-nav-container-custom {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-around !important;
  align-items: center !important;
  width: 100% !important;
}

.footer-nav-bar-custom .nav-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  text-align: center !important;
}

.footer-nav-item-custom,
.footer-nav-bar-custom .nav-link,
.footer-nav-bar-custom a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  color: #fff5e0 !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Default tab label color: Cream / Off-white parchment (#fff5e0) with crisp dark text shadow */
.footer-nav-text-custom,
.footer-nav-bar-custom span,
.footer-nav-bar-custom .nav-link span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff5e0 !important;
  white-space: nowrap !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px #000 !important;
}

/* Active / Selected tab label color: Vibrant Gold (#ffd84d) */
.footer-nav-item-custom.active .footer-nav-text-custom,
.footer-nav-item-custom.active span,
.footer-nav-bar-custom .nav-link.active .footer-nav-text-custom,
.footer-nav-bar-custom .nav-link.active span,
.footer-nav-item-custom:hover .footer-nav-text-custom,
.footer-nav-item-custom:hover span {
  color: #ffd84d !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 6px #ffd84d88 !important;
}

.footer-nav-icon-custom img,
.footer-nav-icon-custom svg {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 2px #000);
}

/* Fix footer content alignment on desktop */
.site-footer {
  padding-left: clamp(16px, 5vw, 80px) !important;
  padding-right: clamp(16px, 5vw, 80px) !important;
}

.site-footer__inner {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 20px 0 32px !important;
  box-sizing: border-box !important;
  text-align: left !important;
  width: 100% !important;
  display: block !important;
}

@media (max-width: 799px) {
  .site-footer {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
}

@media (max-width: 374px) {
  .site-footer {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }
}

/* News Section Theme Styling */
.news-section {
  background: var(--skin-panel-bg, linear-gradient(180deg, #1d1610, #100c07)) !important;
  border-image: var(--skin-panel-frame) var(--frame-panel-slice, 42) fill / var(--frame-panel-w, 13px) stretch !important;
  color: #fff5e0 !important;
  padding: 20px !important;
  margin: 30px auto !important;
  max-width: var(--maxw-pc) !important;
}

.news-section-title {
  color: var(--gold) !important;
  font-size: 16px !important;
  font-weight: bold !important;
  margin-bottom: 12px !important;
}

.news-date-custom {
  color: #c9b98f !important;
  font-size: 11px !important;
}

.news-title-custom {
  color: #fff5e0 !important;
  font-size: 13px !important;
}

.news-section .news-link-custom {
  border-bottom-color: rgba(217, 164, 65, 0.2) !important;
}

.news-section .news-link-custom:hover {
  background-color: rgba(217, 164, 65, 0.08) !important;
}

.news-section h3,
.news-section h5 {
  color: var(--gold) !important;
  font-weight: bold !important;
}

.news-section a.a-link {
  color: var(--gold-deep, #e6b422) !important;
  text-decoration: none !important;
}

.news-section a.a-link:hover {
  color: var(--gold, #ffd84d) !important;
  text-decoration: underline !important;
}

.view-all-news-custom {
  color: var(--gold) !important;
  text-decoration: none !important;
  font-size: 12px !important;
}

/* --- GACHA PURCHASE BAR & BUTTONS STYLING OVERRIDES (DESIGN MATCH) --- */
.buybar.gacha-btn-container-sticky {
  display: block !important;
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 10px 16px 14px !important;
  background: linear-gradient(180deg, #1a140de6, #0d0a06f2) !important;
  border-top: 2px solid #d9a44155 !important;
  z-index: 45 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body:has(.footer-nav-bar-custom) .buybar.gacha-btn-container-sticky {
  bottom: 76px !important;
}

.buybar .gauge {
  background: #00000055 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: transparent !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  border-image: var(--skin-bar-frame) var(--frame-bar-slice, 30) fill / var(--frame-bar-w, 9px) stretch !important;
}

.buybar .price span {
  color: #d9c9a8 !important;
}

.buybar .price b {
  font-family: var(--font-num) !important;
  font-size: 18px !important;
  color: #ffd84d !important;
}

/* pm-row layout inside gauge */
.buybar .pm-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.buybar .pm-row .price {
  flex: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

.buybar .pm-right {
  flex: 1 !important;
  min-width: 0 !important;
}

.buybar .pm-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #d9c9a8 !important;
  margin-bottom: 4px !important;
  text-align: center !important;
}

.buybar .pm-label b {
  color: #fff !important;
  font-family: var(--font-num) !important;
  font-size: 15px !important;
}

.buybar .pm-label span {
  color: #fff !important;
  font-weight: 700 !important;
  font-family: var(--font-num) !important;
  font-size: 15px !important;
}

/* Custom progress bar in buybar matching design */
.buybar .pm-right .bar {
  height: 13px !important;
  border-radius: 8px !important;
  background: #0d0b08 !important;
  border: 1.5px solid #8a6a2f !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.buybar .pm-right .bar>i {
  display: block !important;
  height: 100% !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #c8f56a, #57c520 55%, #3f9a17) !important;
  box-shadow: inset 0 1px 0 #ffffff88 !important;
}

/* Buttons grid/flex container */
.buybar__btns.gacha-detail-css-btn-edit {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 0 !important;
}

.buybar__btns.gacha-detail-css-btn-edit .button-buy {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-family: var(--font-jp), sans-serif !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 0 #00000088 !important;
  border: 2.5px solid var(--wood-dark) !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 3px #000c !important;
  transition: transform 90ms, filter 120ms !important;
}

/* Button themes matching Design_Oripaquest */
.buybar__btns.gacha-detail-css-btn-edit .button-buy {
  background: linear-gradient(180deg, #3f7be0, #2a52b0) !important;
  border-image: var(--skin-btn-blue-frame, var(--skin-btn-frame)) 26 37 fill / 6px 14px stretch !important;
}

.buybar__btns.gacha-detail-css-btn-edit .button-buy.btn-single {
  border-image: var(--skin-btn-single-frame, var(--skin-btn-blue-frame, var(--skin-btn-frame))) 26 37 fill / 6px 14px stretch !important;
}

.buybar__btns.gacha-detail-css-btn-edit .button-buy.btn-red,
.buybar__btns.gacha-detail-css-btn-edit .button-buy.btn-buy-all {
  background: linear-gradient(180deg, #ec5c45, #c2371f) !important;
  border-image: var(--skin-btn-red-frame, var(--skin-btn-frame)) 42 60 fill / 6px 14px stretch !important;
}

/* Uniform button text styles */
.buybar__btns.gacha-detail-css-btn-edit .button-buy p.btn-buy-detail-text {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.buybar__btns.gacha-detail-css-btn-edit .button-buy p.btn-buy-detail-text span {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}

/* Responsive adjustment for desktop/larger screens */
@media (min-width: 800px) {
  .buybar__btns.gacha-detail-css-btn-edit .button-buy {
    height: 52px !important;
  }

  .buybar__btns.gacha-detail-css-btn-edit .button-buy p.btn-buy-detail-text,
  .buybar__btns.gacha-detail-css-btn-edit .button-buy p.btn-buy-detail-text span {
    font-size: 16px !important;
  }
}

/* Push gacha detail content below the fixed header */
.d-gacha-detail {
  padding-top: 30px !important;
}

@media (max-width: 767px) {
  .d-gacha-detail {
    padding-top: 84px !important;
  }
}

.container.main,
.site-background .container,
.footer,
.footer-container,
.hearder-container>.d-flex,
.hearder-container>div,
.d-gacha-detail,
.gacha-btn-container-sticky .gacha-card-area {
  max-width: 1000px !important;
}

.acc__body,
.acc__body * {
  background-color: transparent !important;
  background: transparent !important;
}

/* --- Notification/Contact/Charge custom styling --- */
.ntabs {
  display: flex;
  border-bottom: 2px solid #e7e0cf;
  margin-bottom: 14px;
  margin-top: 16px;
}
.ntabs + .page-title {
  margin: 36px auto 40px !important;
}
.ntabs a {
  flex: 1;
  padding: 12px 4px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink-dim);
  text-align: center;
  text-decoration: none;
  display: block;
}
.ntabs a:hover {
  color: var(--gold-deep);
}
.ntabs a.active,
.ntabs a[aria-selected="true"] {
  color: var(--gold-deep);
  font-weight: bold;
}
.ntabs a.active::after,
.ntabs a[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -2px;
  height: 3px;
  background: var(--gold);
  border-radius: 3px;
}
.nlist {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.nrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border-bottom: 1px solid #f1f1f1;
  text-decoration: none;
  color: #222;
}
.nrow:last-child {
  border-bottom: none;
}
.nrow:hover {
  background: #fafafa;
  color: #222;
}
.nrow__ico {
  font-size: 20px;
  flex: none;
}
.nrow__main {
  flex: 1;
  min-width: 0;
}
.nrow__date {
  display: block;
  font-size: 10px;
  color: #8a99a8;
  font-family: var(--font-num);
  margin-bottom: 4px;
}
.nrow__title {
  font-size: 13px;
  line-height: 1.5;
  color: #222;
}
.nrow__title b {
  font-weight: bold;
}
.nrow__amt {
  font-family: var(--font-num);
  color: var(--gold-deep);
  font-weight: bold;
}
.nrow__chev {
  color: #ccc;
  font-size: 18px;
  flex: none;
}

/* Empty state styling */
.win.empty,
.empty.win {
  background: linear-gradient(180deg, #f7e8c6, #efd6a4) !important;
  text-align: center;
  padding: 24px 12px;
}

.empty .slot {
  width: 120px;
  height: 120px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-size: 11px;
}

.empty p {
  font-size: 13px;
  margin-bottom: 4px;
  font-weight: bold;
  color: var(--ink);
}

.empty .sub {
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 14px;
  margin-top: 0;
}

.notification-page-unread-dot {
  width: 8px;
  height: 8px;
  background-color: var(--red, #dc3545);
  display: inline-block;
  vertical-align: middle;
}

.video-gacha .skip-button {
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: auto !important;
  left: auto !important;
  border: 3px solid transparent !important;
  border-image: var(--skin-btn-frame) var(--frame-btn-slice, 42 60) fill / var(--frame-btn-w, 6px 14px) stretch !important;
  padding: 9px 12px !important;
  font-size: 11px !important;
  box-shadow: inset 0 2px 0 #ffffff66, inset 0 -3px 0 #00000033, 0 4px 0 var(--wood-dark) !important;
  transition: transform 120ms, box-shadow 120ms, filter 120ms !important;
  background: linear-gradient(180deg, #3f7be0, #2a52b0) !important;
}

.video-gacha .skip-button:hover {
  filter: brightness(1.12) !important;
  background: linear-gradient(180deg, #3f7be0, #2a52b0) !important;
  border-color: transparent !important;
}

.video-gacha .skip-button:active {
  transform: translateY(4px) !important;
  box-shadow: inset 0 2px 0 #ffffff44, inset 0 -2px 0 #00000033, 0 0 0 var(--wood-dark) !important;
}

.video-gacha .skip-button::before {
  display: none !important;
}

/* --- GACHA RESULT PAGE THEME OVERRIDES --- */
.result-modern-container {
  position: fixed !important;
  top: var(--header-h, 54px) !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 40 !important; /* Below HUD header */
  background: var(--skin-app-bg, url('/oripaquest/assets/skin-app.png')) top center / cover no-repeat !important;
  overflow-y: auto;
  padding-bottom: 0 !important;
}

.bg-gacha-result-container {
  background: transparent !important;
  background-image: none !important;
}

.result-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  position: relative !important;
  top: 0 !important;
  z-index: 10 !important;
}

.result-header-title {
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  color: #fffdf4 !important;
  text-shadow: 0 1px 2px #000 !important;
  
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 6px 80px 28px 80px !important;
  border-image: var(--skin-title-frame, url('/oripaquest/assets/frame-title.png')) 230 1150 420 1150 fill / 6px 80px 28px 80px stretch !important;
  padding: 6px 28px 11px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 10px auto 6px !important;
}

.result-header .btn-later {
  position: fixed !important;
  top: 10px !important;
  right: 80px !important;
  z-index: 9999 !important;
  color: #f0e6cc !important;
  border: 1.5px solid #d9a44188 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #2a2118, #171009) !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 0 #000a !important;
  text-decoration: none !important;
}

/* Win Banner / Replay Section */
.replay-section {
  border: 3px solid var(--wood-dark) !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 0 var(--wood-dark) !important;
  margin-bottom: 10px !important;
}

.replay-section:not(.special) {
  background: linear-gradient(180deg, #ff6a5e, #e23b3b) !important;
  color: #fff !important;
}

.replay-section.special {
  background: linear-gradient(to right, #ff9eb5, #ffd27f, #ffff99, #b7ff9d, #a0f4ff, #c8b6ff, #f8b3ff) !important;
  color: #262626 !important;
}

.img-logo-rain-bow {
  height: 68px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* View Toggler Toolbar */
.view-toggler-wrapper {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  gap: 8px !important;
  margin: 16px 0 10px !important;
}

.view-toggle-btn {
  flex: 1;
  padding: 0 12px !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 17px 36px !important;
  border-radius: 0 !important;
  font-family: var(--font-jp) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: none !important;
  color: #fff !important;
  transition: transform 90ms !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: transparent !important;
  height: 52px !important;
  box-sizing: border-box !important;
}

#toggle-list-view {
  border-image: var(--skin-toolbtn-view-frame, url('/oripaquest/assets/frame-toolbtn-view.png')) 47 100 fill / 17px 36px stretch !important;
}

.btn-sort-toggle {
  border-image: var(--skin-toolbtn-sort-frame, url('/oripaquest/assets/frame-toolbtn-sort.png')) 47 100 fill / 17px 36px stretch !important;
}

.view-toggle-btn:active {
  transform: translateY(4px) !important;
  box-shadow: 0 0 0 var(--wood-dark) !important;
}

.view-toggle-btn.active {
  color: #fff !important;
}

.view-toggle-btn.active svg {
  color: #fff !important;
  fill: none !important;
  stroke: #fff !important;
}

.toggle-divider {
  display: none !important;
}

/* Card Lists & Grids (styled as wood panels) */
.result-products-list, .result-products-grid {
  background: #100c07f2 !important;
  border-width: 4px !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-image: var(--skin-modal-frame, var(--skin-panel-frame, url('/oripaquest/assets/frame-modal.png'))) 42 fill / 13px stretch !important;
  padding: 16px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 1000px !important;
  margin: 0 auto 240px auto !important;
}

/* Individual Card */
.result-card-modern {
  background: #fff !important;
  border: 2px solid var(--wood) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 0 var(--wood-dark) !important;
  padding: 12px !important;
}

.result-card-modern.selected {
  box-shadow: 0 0 0 3px var(--gold), 0 2px 0 var(--wood-dark) !important;
  border-color: var(--gold-deep) !important;
}

/* Check Circle (Checkbox replacement) */
.check-circle {
  border: 2px solid var(--wood-dark) !important;
  border-radius: 5px !important;
  background: #fffdf4 !important;
  color: var(--gold-deep) !important;
  width: 22px !important;
  height: 22px !important;
}

.check-circle svg {
  display: none !important;
}

.result-card-modern.selected .check-circle {
  background: var(--gold-deep) !important;
  border-color: var(--gold-deep) !important;
  color: #fff !important;
}

.result-card-modern.selected .check-circle svg {
  display: block !important;
}

.selection-status span {
  color: #475569 !important;
}

.result-card-modern.selected .selection-status span {
  color: var(--gold-deep) !important;
}

/* Card Badges alignment matching detail page */
.psa10-badge-modern {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  bottom: auto !important;
  left: auto !important;
  width: 20% !important;
  max-width: 48px !important;
  z-index: 5 !important;
}

.black-case-badge-modern {
  position: absolute !important;
  bottom: 4px !important;
  left: 4px !important;
  top: auto !important;
  right: auto !important;
  width: 20% !important;
  max-width: 48px !important;
  z-index: 5 !important;
}

.ship-only-badge-modern {
  position: absolute !important;
  bottom: 4px !important;
  left: 4px !important;
  top: auto !important;
  right: auto !important;
  width: 20% !important;
  max-width: 48px !important;
  z-index: 5 !important;
}

.black-case-badge-modern ~ .ship-only-badge-modern {
  left: calc(20% + 8px) !important;
}

/* Sticky Footer Actions */
.result-sticky-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 440px !important;
  z-index: 1000 !important;
  background: #100c07f2 !important;
  padding: 10px 14px 14px !important;
  border-width: 4px !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-image: var(--skin-modal-frame, var(--skin-panel-frame, url('/oripaquest/assets/frame-modal.png'))) 42 fill / 13px stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 800px) {
  .result-sticky-footer {
    max-width: 100% !important;
  }
}

.footer-coin-total span {
  font-family: var(--font-num) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ffd84d !important;
  text-shadow: 0 1px 2px #000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.footer-coin-icon {
  width: 30px !important;
  height: 30px !important;
}

.footer-actions-right {
  display: flex !important;
  gap: 6px !important;
}

.footer-actions-right .btn-ghost {
  padding: 9px 14px !important;
  border: 1.5px solid #d9a44188 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #2a2118, #171009) !important;
  font-family: var(--font-jp) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  color: #f0e6cc !important;
  box-shadow: 0 2px 0 #000a, inset 0 1px 0 #ffffff22 !important;
  transition: transform 90ms !important;
}

.footer-actions-right .btn-ghost:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0 0 #000a !important;
}

/* Action Buttons */
.footer-main-buttons {
  margin-top: 8px !important;
  gap: 8px !important;
}

.footer-main-buttons .btn-outline-primary-modern.btn-point {
  border: 3px solid transparent !important;
  border-radius: 7px !important;
  border-image: var(--skin-btn-blue-frame, var(--skin-btn-frame)) 26 37 fill / 6px 14px stretch !important;
  color: #fff !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  box-shadow: inset 0 2px 0 #ffffff66, inset 0 -3px 0 #00000033, 0 4px 0 var(--wood-dark) !important;
  transition: transform 120ms, box-shadow 120ms, filter 120ms !important;
  background: linear-gradient(180deg, #3f7be0, #2a52b0) !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-jp) !important;
  font-weight: 700 !important;
}

.footer-main-buttons .btn-outline-primary-modern.btn-point:hover:not(:disabled) {
  filter: brightness(1.12) !important;
}

.footer-main-buttons .btn-outline-primary-modern.btn-point:active:not(:disabled) {
  transform: translateY(4px) !important;
  box-shadow: inset 0 2px 0 #ffffff44, inset 0 -2px 0 #00000033, 0 0 0 var(--wood-dark) !important;
}

.footer-main-buttons .btn-primary-modern.btn-ship {
  border: 3px solid transparent !important;
  border-radius: 7px !important;
  border-image: var(--skin-btn-buy-frame, var(--skin-btn-frame)) 26 37 fill / 6px 14px stretch !important;
  color: #fff !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  box-shadow: inset 0 2px 0 #ffffff66, inset 0 -3px 0 #00000033, 0 4px 0 var(--wood-dark) !important;
  transition: transform 120ms, box-shadow 120ms, filter 120ms !important;
  background: linear-gradient(180deg, #ff9a45, #e0641b) !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-jp) !important;
  font-weight: 700 !important;
  }

.footer-main-buttons .btn-primary-modern.btn-ship:hover:not(:disabled) {
  filter: brightness(1.12) !important;
}

.footer-main-buttons .btn-primary-modern.btn-ship:active:not(:disabled) {
  transform: translateY(4px) !important;
  box-shadow: inset 0 2px 0 #ffffff44, inset 0 -2px 0 #00000033, 0 0 0 var(--wood-dark) !important;
}

.footer-main-buttons button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Warnings and Notes legibility overrides */
.footer-note-container {
  color: #d9c9a8 !important;
}

.footer-note-container .text-black {
  color: #d9c9a8 !important;
}

.footer-note-container .text-danger {
  color: #ff8888 !important;
  font-weight: bold !important;
}

/* --- INVENTORY (ACQUIRED) PAGE DESIGN OVERRIDES --- */
.rtoolbar {
  display: flex !important;
  gap: 8px !important;
  margin: 12px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.rtoolbar button {
  flex: 1 !important;
  font-family: var(--font-jp) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  height: 44px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: transparent !important;
  color: #fff !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 17px 36px !important;
  text-shadow: 0 1px 0 #000c, 1px 0 0 #000c, -1px 0 0 #000c, 0 -1px 0 #000c, 0 2px 3px #000a !important;
}

.rtoolbar #viewBtn {
  border-image: var(--skin-toolbtn-view-frame, url('/oripaquest/assets/frame-toolbtn-view.png')) 47 100 fill / 17px 36px stretch !important;
}

.rtoolbar #sortBtn {
  border-image: var(--skin-toolbtn-sort-frame, url('/oripaquest/assets/frame-toolbtn-sort.png')) 47 100 fill / 17px 36px stretch !important;
}

.rgrid.grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
}

.rgrid.list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
}

.rcard {
  position: relative !important;
  background: #14100c !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 13px !important;
  border-image: var(--skin-panel-frame, url('/oripaquest/assets/frame-panel.png')) 42 fill / 13px stretch !important;
  padding: 4px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: box-shadow 0.15s ease !important;
}

.rcard.sel {
  box-shadow: 0 0 0 3px var(--gold, #ffd700) !important;
}

.rcard .chk {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 22px !important;
  height: 22px !important;
  z-index: 5 !important;
  border: 1.5px solid #d9a44188 !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, #2a2118, #171009) !important;
  display: grid !important;
  place-content: center !important;
  font-size: 13px !important;
  font-weight: bold !important;
  color: #ffd84d !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

.rcard .oripaquest-acquired-card-image {
  position: relative !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  border-radius: 6px !important;
}

.rcard .oripaquest-acquired-card-image img:first-child {
  width: 100% !important;
  height: auto !important;
  border-radius: 6px !important;
  display: block !important;
}

.rcard .psa10-badge-modern {
  width: 64px !important;
  max-width: 64px !important;
  top: 6px !important;
  right: 6px !important;
}

.rcard .black-case-badge-modern,
.rcard .ship-only-badge-modern {
  width: 32px !important;
  max-width: 32px !important;
  bottom: 6px !important;
  left: 6px !important;
}

.rcard .black-case-badge-modern ~ .ship-only-badge-modern {
  left: calc(32px + 12px) !important;
}

/* Card Badge overrides for Acquired Page List View (.rgrid.list) */
.rgrid.list .rcard .psa10-badge-modern {
  width: 44px !important;
  max-width: 44px !important;
  top: 4px !important;
  right: 4px !important;
  bottom: auto !important;
  left: auto !important;
}

.rgrid.list .rcard .black-case-badge-modern,
.rgrid.list .rcard .ship-only-badge-modern {
  width: 24px !important;
  max-width: 24px !important;
  bottom: 4px !important;
  left: 4px !important;
  top: auto !important;
  right: auto !important;
}

.rgrid.list .rcard .black-case-badge-modern ~ .ship-only-badge-modern {
  left: calc(24px + 10px) !important;
}

/* Responsive adjustment for Mobile screens (.rcard grid) */
@media (max-width: 576px) {
  .rcard .psa10-badge-modern {
    width: 44px !important;
    max-width: 44px !important;
    top: 4px !important;
    right: 4px !important;
  }

  .rcard .black-case-badge-modern,
  .rcard .ship-only-badge-modern {
    width: 24px !important;
    max-width: 24px !important;
    bottom: 4px !important;
    left: 4px !important;
  }

  .rcard .black-case-badge-modern ~ .ship-only-badge-modern {
    left: calc(24px + 8px) !important;
  }
}

.rcard .oripaquest-acquired-card-inner,
.rcard .oripaquest-acquired-card-info {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.rcard .oripaquest-acquired-card-name {
  font-family: var(--font-jp) !important;
  font-size: 11px !important;
  margin: 6px 0 4px !important;
  line-height: 1.35 !important;
  color: #e6dbb8 !important;
  font-weight: 700 !important;
  text-align: left !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 30px !important;
  text-shadow: 0 1px 2px #000 !important;
}

.rcard .oripaquest-acquired-card-rarity {
  font-size: 9px !important;
  color: #ffd84d !important;
  margin-bottom: 2px !important;
  font-weight: bold !important;
  text-align: left !important;
  text-shadow: 0 1px 2px #000 !important;
}

.rcard .oripaquest-acquired-card-deadline p {
  font-size: 9px !important;
  color: #a89476 !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.rcard .oripaquest-acquired-ship-only-label {
  font-size: 9px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: #4a1212 !important;
  color: #ff8888 !important;
  font-weight: bold !important;
  display: inline-block !important;
  text-align: center !important;
  border: 1px solid #7a1d1d !important;
}

.rcard .oripaquest-acquired-auto-convert-text {
  font-size: 8px !important;
  color: #8f795d !important;
  line-height: 1.1 !important;
  margin: 4px 0 !important;
  opacity: 0.8 !important;
  text-align: left !important;
}

.rcard .oripaquest-acquired-card-coin {
  font-family: var(--font-num) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #ffd84d !important;
  background: transparent !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 6px 10px !important;
  border-image: var(--skin-bar-frame, url('/oripaquest/assets/frame-bar.png')) 30 fill / 6px 10px stretch !important;
  padding: 4px 6px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 6px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.rcard .oripaquest-acquired-coin-icon {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

.rcard .oripaquest-acquired-coin-value {
  color: #ffd84d !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}


.rgrid.list .rcard {
  display: grid !important;
  grid-template-columns: 90px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  text-align: left !important;
}

.rgrid.list .rcard .oripaquest-acquired-card-image {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
}

.rgrid.list .rcard .oripaquest-acquired-card-name {
  margin: 0 0 6px !important;
  height: auto !important;
}

/* Bottom actions panel matching design */
.result-actions {
  position: sticky !important;
  bottom: 80px !important; /* Above the tabbar bottom navigation */
  left: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 440px !important;
  z-index: 1000 !important;
  background: #100c07f2 !important;
  padding: 22px 14px 14px !important;
  border-width: 4px !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-image: var(--skin-modal-frame, var(--skin-panel-frame, url('/oripaquest/assets/frame-modal.png'))) 42 fill / 13px stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.result-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.result-top .coin-total {
  font-family: var(--font-num) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ffd84d !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-shadow: 0 1px 2px #000 !important;
}

.result-top .coin-total .coin {
  width: 30px !important;
  height: 30px !important;
}

.result-top .sc {
  display: flex !important;
  gap: 6px !important;
}

.result-top .sc button {
  padding: 9px 14px !important;
  border: 1.5px solid #d9a44188 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #2a2118, #171009) !important;
  font-family: var(--font-jp) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  color: #f0e6cc !important;
  box-shadow: 0 2px 0 #000a, inset 0 1px 0 #ffffff22 !important;
  display: inline-block !important;
}

.result-top .sc button:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0 0 #000a !important;
}

.result-buttons-row {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
}

.result-buttons-row .btn {
  flex: 1 !important;
  padding: 0 12px !important;
  font-family: var(--font-jp) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  height: 48px !important;
  color: #fff !important;
  text-shadow: 0 1px 2px #000 !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 6px 14px !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  box-shadow: 0 4px 0 var(--wood-dark) !important;
  transition: transform 90ms, box-shadow 90ms !important;
}

.result-buttons-row #btn-convert {
  border-image: var(--skin-btn-blue-frame, url('/oripaquest/assets/frame-btn-blue.png')) 42 60 fill / 6px 14px stretch !important;
}

.result-buttons-row #btn-ship {
  border-image: var(--skin-btn-buy-frame, url('/oripaquest/assets/frame-btn-buy.png')) 42 60 fill / 6px 14px stretch !important;
}

.result-buttons-row .btn:active:not(:disabled) {
  transform: translateY(4px) !important;
  box-shadow: 0 0 0 var(--wood-dark) !important;
}

.result-buttons-row .btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

@media (min-width: 800px) {
  .rgrid.grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .result-actions {
    max-width: 1000px !important;
  }
  .result-top, .result-buttons-row {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.product-content {
  margin-top: 80px !important;
}

@media (min-width: 800px) {
  .product-content {
    margin-top: 50px !important;
  }
}

.card-case-icon.has_bc,
.d-gacha-detail .card-item .card-case-icon.has_bc {
  left: min(calc(20% + 8px), 56px) !important;
}

/* Sub-navigation Tabs overrides */
.oripaquest-tabs-container {
  display: flex !important;
  gap: 0 !important;
  border-bottom: 3px solid var(--wood) !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.oripaquest-tabs-container a {
  flex: 1 !important;
  padding: 9px 4px !important;
  font-family: var(--font-jp, "Noto Sans JP", sans-serif) !important;
  font-size: 12px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--ink-dim, #7a5a33) !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -3px !important;
  position: relative !important;
  text-decoration: none !important;
  text-align: center !important;
  display: block !important;
  box-sizing: border-box !important;
}

.oripaquest-tabs-container a.active {
  color: var(--red, #d6452f) !important;
  border-bottom-color: var(--red, #d6452f) !important;
  font-weight: bold !important;
}

.oripaquest-tabs-container .red-mark-not-point-only,
.oripaquest-tabs-container .red-mark-point-only {
  position: absolute !important;
  font-size: 6px !important;
  color: #ef4444 !important;
  top: 8px !important;
  right: 8px !important;
  transform: translate(50%, -50%) !important;
  display: inline-block !important;
}

/* Toolbar and Headers */
.ph-header-bar {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ph-view-toggle,
.ph-sort-btn {
  flex: 1 !important;
  font-family: var(--font-jp) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  height: 44px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: transparent !important;
  color: #fff !important;
  border-style: solid !important;
  border-color: transparent !important;
  text-shadow: 0 1px 0 #000c, 1px 0 0 #000c, -1px 0 0 #000c, 0 -1px 0 #000c, 0 2px 3px #000a !important;
  transition: opacity 0.2s !important;
}

.ph-view-toggle {
  border-width: 17px 36px !important;
  border-image: var(--skin-toolbtn-view-frame, url('/oripaquest/assets/frame-toolbtn-view.png')) 47 100 fill / 17px 36px stretch !important;
}

.ph-sort-btn {
  border-width: 17px 36px !important;
  border-image: var(--skin-toolbtn-sort-frame, url('/oripaquest/assets/frame-toolbtn-sort.png')) 47 100 fill / 17px 36px stretch !important;
}

.ph-view-toggle:hover,
.ph-sort-btn:hover {
  background: transparent !important;
  opacity: 0.9 !important;
  color: #fff !important;
}

/* Sort Dropdown */
.ph-sort-dropdown {
  background: #14100c !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 13px !important;
  border-image: var(--skin-panel-frame, url('/oripaquest/assets/frame-panel.png')) 42 fill / 13px stretch !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
  border-radius: 0 !important;
  z-index: 1000 !important;
  top: calc(100% + 4px) !important;
}

.ph-sort-option {
  color: #dfd5c0 !important;
  font-family: var(--font-jp) !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  border: none !important;
  background: transparent !important;
}

.ph-sort-option:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.ph-sort-check {
  color: var(--gold, #ffd700) !important;
}

/* Grid layout and cards */
.ph-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
}

.ph-grid-card {
  position: relative !important;
  background: #14100c !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 13px !important;
  border-image: var(--skin-panel-frame, url('/oripaquest/assets/frame-panel.png')) 42 fill / 13px stretch !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ph-card-img-wrap {
  position: relative !important;
  background: transparent !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.ph-card-img-wrap > img:first-child {
  border-radius: 6px !important;
}

.ph-card-info {
  padding: 6px 4px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

.ph-card-name {
  font-family: var(--font-jp) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px #000 !important;
  margin-bottom: 2px !important;
  text-align: center !important;
  line-height: 1.3 !important;
  width: 100% !important;
}

.ph-card-rarity {
  font-family: var(--font-jp) !important;
  font-size: 10px !important;
  color: #8f795d !important;
  margin-bottom: 4px !important;
  text-align: center !important;
  width: 100% !important;
}

/* Sizing overrides for play video buttons */
.ph-replay-btn {
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.ph-replay-btn svg {
  width: 18px !important;
  height: 18px !important;
}

.ph-replay-btn-circle {
  width: 44px !important;
  height: 44px !important;
}

.ph-replay-btn-circle svg {
  width: 22px !important;
  height: 22px !important;
}



/* List Layout and Rows */
.ph-list-row {
  position: relative !important;
  background: #14100c !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 13px !important;
  border-image: var(--skin-panel-frame, url('/oripaquest/assets/frame-panel.png')) 42 fill / 13px stretch !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
  display: grid !important;
  grid-template-columns: 110px 1fr 44px !important;
  gap: 12px !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.ph-list-img {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  height: 154px !important;
  position: relative !important;
  background: transparent !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.ph-list-img img:first-child {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 6px !important;
}

.ph-list-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  padding: 0 !important;
}

.ph-card-name-list {
  font-family: var(--font-jp) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px #000 !important;
  margin-bottom: 2px !important;
  text-align: left !important;
}

.ph-card-rarity-list {
  font-family: var(--font-jp) !important;
  font-size: 10px !important;
  color: #8f795d !important;
  margin-bottom: 4px !important;
  text-align: left !important;
}

.ph-list-action {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: center !important;
}



/* Coin Capsule */
.ph-coin-capsule {
  font-family: var(--font-num) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffd84d !important;
  background: transparent !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 8px 12px !important;
  border-image: var(--skin-bar-frame, url('/oripaquest/assets/frame-bar.png')) 30 fill / 8px 12px stretch !important;
  padding: 6px 10px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ph-coin-icon {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  object-fit: contain !important;
}

.ph-coin-value {
  color: #ffd84d !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.ph-coin-unit {
  font-size: 12px !important;
  color: #ffd84d !important;
}

/* Prize badges */
.ph-prize-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-jp) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  color: #fff !important;
  height: 44px !important;
  border-radius: 6px !important;
  text-shadow: 1px 2px 3px rgba(0,0,0,0.5) !important;
  margin-bottom: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ph-prize-badge-grid {
  align-self: stretch !important;
}

.ph-prize-badge-list {
  width: 50% !important;
  align-self: flex-start !important;
  height: 32px !important;
  font-size: 14px !important;
}

@media (max-width: 576px) {
  .ph-prize-badge-list {
    width: 80% !important;
    height: 28px !important;
    font-size: 12px !important;
  }
}



/* Card Badge overrides for Grid View */
.ph-card-img-wrap .psa10-badge-modern {
  width: 120px !important;
  max-width: 120px !important;
  top: 6px !important;
  right: 6px !important;
}

.ph-card-img-wrap .black-case-badge-modern,
.ph-card-img-wrap .ship-only-badge-modern {
  width: 54px !important;
  max-width: 54px !important;
  bottom: 6px !important;
  left: 6px !important;
}

.ph-card-img-wrap .black-case-badge-modern ~ .ship-only-badge-modern {
  left: calc(54px + 12px) !important;
}

/* Card Badge overrides for List View */
.ph-list-img .psa10-badge-modern {
  width: 44px !important;
  max-width: 44px !important;
  top: 4px !important;
  right: 4px !important;
}

.ph-list-img .black-case-badge-modern,
.ph-list-img .ship-only-badge-modern {
  width: 24px !important;
  max-width: 24px !important;
  bottom: 4px !important;
  left: 4px !important;
}

.ph-list-img .black-case-badge-modern ~ .ship-only-badge-modern {
  left: calc(24px + 4px) !important;
}

/* Responsive adjustment for Grid View on Mobile screens */
@media (max-width: 576px) {
  .ph-card-img-wrap .psa10-badge-modern {
    width: 44px !important;
    max-width: 44px !important;
    top: 4px !important;
    right: 4px !important;
  }

  .ph-card-img-wrap .black-case-badge-modern,
  .ph-card-img-wrap .ship-only-badge-modern {
    width: 32px !important;
    max-width: 32px !important;
    bottom: 4px !important;
    left: 4px !important;
  }

  .ph-card-img-wrap .black-case-badge-modern ~ .ship-only-badge-modern {
    left: calc(32px + 8px) !important;
  }
}

/* My Page Top Section RPG Theme Overrides */
.my-page-profile-box {
  background: linear-gradient(180deg, var(--parch), var(--parch-2)) !important;
  border: 3px solid var(--wood-dark) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 0 #ffffff66, 0 4px 0 var(--wood-dark) !important;
  color: var(--ink) !important;
}

.my-page-profile-box .my-page-profile-name {
  color: var(--ink) !important;
}

.my-page-profile-box .my-page-profile-edit-txt {
  color: #c9a227 !important;
}

.my-page-profile-box .my-page-profile-edit-txt svg {
  stroke: #c9a227 !important;
}

.my-page-bonus-coin-box {
  background: linear-gradient(180deg, var(--parch), var(--parch-2)) !important;
  border: 3px solid var(--wood-dark) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 0 #ffffff66, 0 4px 0 var(--wood-dark) !important;
  color: var(--ink) !important;
}

.my-page-bonus-coin-title {
  color: var(--ink) !important;
}

.my-page-bonus-coin-progress {
  color: var(--ink) !important;
}

.my-page-bonus-coin-bar-container {
  background-color: rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.my-page-referral-box {
  background: linear-gradient(180deg, var(--parch), var(--parch-2)) !important;
  border: 3px solid var(--wood-dark) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 0 #ffffff66, 0 4px 0 var(--wood-dark) !important;
  color: var(--ink) !important;
}

.my-page-referral-title,
.my-page-referral-remaining,
.my-page-benefit-title,
.my-page-benefit-subtitle,
.my-page-step-text,
.my-page-note {
  color: var(--ink) !important;
}

.my-page-ref-code-active {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border: 2px dashed var(--wood) !important;
  border-radius: 8px !important;
}

.my-page-ref-code-text {
  color: var(--ink) !important;
}

.my-page-inner-white-box {
  background-color: rgba(255, 255, 255, 0.5) !important;
  border: 2px dashed var(--wood) !important;
  border-radius: 8px !important;
}

.my-page-arrow-wrapper {
  background-color: transparent !important;
}

.profile-card__edit {
  flex: none;
  font-size: 12px;
  color: var(--ink) !important;
  background: var(--parch-2) !important;
  border: 2.5px solid var(--wood) !important;
  border-radius: 7px !important;
  padding: 6px 10px;
  font-weight: 700;
  box-shadow: 0 2px 0 var(--wood-dark) !important;
  transition: filter 0.2s ease;
}

.profile-card__edit:hover {
  filter: brightness(0.95);
}

.input:disabled {
  background: #e9e3ce !important;
  color: var(--ink-dim) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.mypage-breadcrumb-wrap {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}

.site-background:not(:has(.menu-header-bar)):not(.site-background--home-news) {
  padding-top: 80px !important;
}

.site-background:has(.menu-header-bar) {
  padding-top: 8px !important;
}

@media (max-width: 767px) {
  .site-background:not(:has(.menu-header-bar)):not(.site-background--home-news) {
    padding-top: 40px !important;
  }

  .mypage-breadcrumb-wrap,
  .my-page-container {
    margin-top: 40px !important;
  }
}

.user-rank-img {
  width: 100% !important;
  max-width: 240px !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

.user-ranking-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px;
}

.user-rank-info-container {
  background-color: var(--parch-2) !important;
  color: var(--ink) !important;
  padding: 12px !important;
}

.table-rank {
  background-color: transparent !important;
}

.table-rank th, .table-rank td {
  color: var(--ink) !important;
}

.table-rank tr.header-row th {
  border-bottom: 2px solid var(--wood) !important;
}

.site-background .padding-main,
.site-background .main,
.site-background .container.main {
  padding-top: 0 !important;
}

.rank-intro-container {
  background-color: var(--parch-2) !important;
  padding: 16px !important;
}

.rank-intro-container-0 {
  background-color: transparent !important;
}

.rank-curent-line {
  background-color: rgba(0, 0, 0, 0.15) !important;
  border-radius: 6px !important;
  overflow: hidden;
}

.explaination-3 {
  background-color: transparent !important;
}

.table-rank tr:nth-child(even) {
  background-color: rgba(156, 107, 52, 0.12) !important;
}

.oripaquest-acquired-badge--selected .check-circle {
  background: var(--gold-deep, #e6b422) !important;
  border-color: var(--gold-deep, #e6b422) !important;
  color: #fff !important;
}

.oripaquest-acquired-badge--selected .check-circle svg {
  display: block !important;
}

.win .news-date-custom {
  color: var(--ink-dim, #7f6e5c) !important;
}

.win .news-title-custom {
  color: var(--ink, #1f1105) !important;
  font-weight: bold !important;
}

.win .news-link-custom {
  border-bottom-color: var(--wood-light, #c0a478) !important;
}

.win .news-link-custom:hover {
  background-color: rgba(156, 107, 52, 0.08) !important;
}

.win h3, .win h5 {
  color: var(--ink, #1f1105) !important;
}

.win .news-section-content {
  color: var(--ink, #1f1105) !important;
}

.win a.a-link {
  color: var(--gold-deep, #e6b422) !important;
}

.news-box-main,
.news-detail-main {
  padding-bottom: 110px !important;
}

.news-box-main .news-section,
.news-detail-main .news-section {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  .cmd__grid {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }
}

.hud__bell-wrapper {
  position: fixed !important;
  top: 64px !important;
  right: 12px !important;
  z-index: 9999 !important;
}

@media (max-width: 374px) {
  .hud__bell-wrapper {
    top: 54px !important;
    right: 12px !important;
  }
}

@media (min-width: 800px) {
  .hud__bell-wrapper {
    position: static !important;
  }
}

.site-background--home-news {
  padding-top: 40px !important;
}

@media (max-width: 767px) {
  .site-background--home-news {
    padding-top: 20px !important;
  }
}

/* Global 1000px synchronization overrides */
.my-page-container {
  max-width: 1000px !important;
}

.menu-header-bar {
  max-width: 1000px !important;
}

.form-address {
  max-width: 1000px !important;
}

.footer-nav-container-custom {
  max-width: 1000px !important;
}

.footer-nav-bar-custom {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0 !important;
  right: 0 !important;
}

/* CKEditor static pages styling overrides inside .win */
.win .ck-content,
.win .ck-content p,
.win .ck-content span,
.win .ck-content li,
.win .ck-content h1,
.win .ck-content h2,
.win .ck-content h3,
.win .ck-content h4,
.win .ck-content h5,
.win .ck-content h6,
.win .ck-content td,
.win .ck-content th {
  color: var(--ink, #1f1105) !important;
}

.win .ck-content a {
  color: var(--gold-deep, #e6b422) !important;
  text-decoration: underline !important;
}

/* Footer sections spacing fix */
.footer-section-custom {
  margin-bottom: 28px !important;
}

/* CKEditor static pages parchment container padding override */
.ck-content .win-pad {
  padding-left: 20px !important;
}

/* Dedicated flat delete button style */
.btn-delete-custom {
  display: inline-block !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  user-select: none !important;
  border: none !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  transition: none !important;
  width: auto !important;
  background-color: #b92828 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

.btn-delete-custom:hover {
  color: #ffffff !important;
  background-color: #b92828 !important;
  transform: none !important;
  filter: none !important;
}

.btn-delete-custom:active {
  transform: none !important;
  box-shadow: none !important;
}

/* Reset modal footer buttons to match standard Bootstrap flat style */
#deleteUserModal .modal-footer .btn {
  display: inline-block !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  user-select: none !important;
  border-image: none !important;
  border: 1px solid transparent !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  border-radius: 0.25rem !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

#deleteUserModal .modal-footer .btn-dark {
  background-color: #212529 !important;
  border-color: #212529 !important;
  color: #fff !important;
}

#deleteUserModal .modal-footer .btn-dark:hover {
  background-color: #1c1f23 !important;
  border-color: #1a1e21 !important;
  transform: none !important;
  filter: none !important;
}

#deleteUserModal .modal-footer .btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}

#deleteUserModal .modal-footer .btn-danger:hover {
  background-color: #bb2d3b !important;
  border-color: #b02a37 !important;
  transform: none !important;
  filter: none !important;
}

#deleteUserModal .modal-footer .btn:active {
  transform: none !important;
  box-shadow: none !important;
}

.modal-box .gold-text,
.modal-box h3.gold-text {
  color: #ffce3a !important;
}

.modal-box p {
  color: #d9c9a8 !important;
}

.modal-box p[style*="color:var(--ink-dim)"],
.modal-box p[style*="color: var(--ink-dim)"] {
  color: #7a5a33 !important;
}

.wrap-loading {
  z-index: 9999999 !important;
}

/* Back button style in forms */
.win .btn-bfl {
  background: transparent !important;
  color: var(--gold-deep, #e6b422) !important;
  border: none !important;
  padding: 0 !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: none !important;
}

.win .btn-bfl svg {
  stroke: var(--gold-deep, #e6b422) !important;
  width: 8px !important;
  height: 12px !important;
}

.win .btn-bfl:hover {
  opacity: 0.8 !important;
}

.age-verify-modal .btn {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  padding: 10px 20px !important;
  transform: none !important;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

.age-verify-modal .btn-primary {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

.age-verify-modal .btn-primary:disabled {
  background-color: #e9e9e9 !important;
  border-color: #e9e9e9 !important;
  color: #a1a1a1 !important;
  cursor: not-allowed !important;
}

.age-verify-modal .btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

.age-verify-modal .btn-outline-secondary {
  background-color: #fff !important;
  border-color: #ccc !important;
  color: #333 !important;
}

.age-verify-modal .btn-outline-secondary:hover {
  background-color: #f8f9fa !important;
  border-color: #bbb !important;
  color: #333 !important;
}

/* DP Detail Page Container Padding */
.dpdetail-container {
  padding: 20px 15px !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}