@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap");

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

body {
  background-color: #fff5e6;
  font-family: "Noto Sans JP", "Roboto", sans-serif;
  padding: 0 !important;
  margin: 0;
  line-height: 1.6;
  color: #444;
}

:root {
  --oren-primary: #D83F00;
  --oren-secondary: #FF7F50;
  --oren-bg: #FFDAB9;
  --oren-border: #FF7F50;
  --oren-bodybg: #FFF0E6;

  --raddy-primary: #B22222;
  --raddy-secondary: #bf0000de;
  --raddy-bg: #FFD9CC;
  --raddy-border: #e02626;
  --raddy-bodybg: #FFF4F0;

  --clukr-primary: #4A4A4A;
  --clukr-secondary: #A0A0A0;
  --clukr-bg: #DCDCDC;
  --clukr-border: #A0A0A0;
  --clukr-bodybg: #F0F0F0;

  --fun-bot-primary: #2F4F8F;
  --fun-bot-secondary: #4169E1;
  --fun-bot-bg: #D2E4F5;
  --fun-bot-border: #4169E1;
  --fun-bot-bodybg: #F0F5FF;

  --vineria-primary: #228B22;
  --vineria-secondary: #4CAF50;
  --vineria-bg: #D8EBD8;
  --vineria-border: #4CAF50;
  --vineria-bodybg: #F2FAF2;

  --gray-primary: #4A4A4A;
  --gray-secondary: #A9A9A9;
  --gray-bg: #E0E0E0;
  --gray-border: #A9A9A9;
  --gray-bodybg: #F5F5F5;

  --brud-primary: #6B3C0F;
  --brud-secondary: #8B4513;
  --brud-bg: #E8DBC3;
  --brud-border: #8B4513;
  --brud-bodybg: #FAF0E6;

  --garnold-primary: #B8860B;
  --garnold-secondary: #DAA520;
  --garnold-bg: #FFE5A8;
  --garnold-border: #DAA520;
  --garnold-bodybg: #FFF8E1;

  --owakcx-primary: #1A6B1A;
  --owakcx-secondary: #228B22;
  --owakcx-bg: #D8EBD8;
  --owakcx-border: #228B22;
  --owakcx-bodybg: #F2FAF2;

  --sky-primary: #2F4F8F;
  --sky-secondary: #4169E1;
  --sky-bg: #D2E4F5;
  --sky-border: #4169E1;
  --sky-bodybg: #E6F0FA;

  --mr-sun-primary: #D2691E;
  --mr-sun-secondary: #FF8C00;
  --mr-sun-bg: #FFDCB3;
  --mr-sun-border: #FF8C00;
  --mr-sun-bodybg: #FFF3E6;

  --durple-primary: #6A006A;
  --durple-secondary: #8B008B;
  --durple-bg: #E8D8E8;
  --durple-border: #8B008B;
  --durple-bodybg: #FAF0FA;

  --mr-tree-primary: #1A6B1A;
  --mr-tree-secondary: #228B22;
  --mr-tree-bg: #D8EBD8;
  --mr-tree-border: #228B22;
  --mr-tree-bodybg: #F2FAF2;

  --simon-primary: #B8860B;
  --simon-secondary: #DAA520;
  --simon-bg: #FFE5A8;
  --simon-border: #DAA520;
  --simon-bodybg: #FFF8E1;

  --tunner-primary: #6B3C0F;
  --tunner-secondary: #8B4513;
  --tunner-bg: #E8DBC3;
  --tunner-border: #8B4513;
  --tunner-bodybg: #FAF0E6;

  --mr-fun-computer-primary: #2F4F8F;
  --mr-fun-computer-secondary: #4169E1;
  --mr-fun-computer-bg: #D2E4F5;
  --mr-fun-computer-border: #4169E1;
  --mr-fun-computer-bodybg: #F0F5FF;

  --wenda-primary: #C71585;
  --wenda-secondary: #FF69B4;
  --wenda-bg: #FFD6E0;
  --wenda-border: #FF69B4;
  --wenda-bodybg: #FFF0F5;

  --pinki-primary: #C71585;
  --pinki-secondary: #FF69B4;
  --pinki-bg: #FFD6E0;
  --pinki-border: #FF69B4;
  --pinki-bodybg: #FFF0F5;

  --jevin-primary: #2F4F8F;
  --jevin-secondary: #4169E1;
  --jevin-bg: #D2E4F5;
  --jevin-border: #4169E1;
  --jevin-bodybg: #F0F5FF;

  --black-primary: #4A4A4A;
  --black-secondary: #929292;
  --black-bg: #E8E8E8;
  --black-border: #FFFFFF;
  --black-bodybg: #FAFAFA;
}

:root {
  --shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  --border-radius: 16px;
  --content-max-width: 1200px;
  --content-padding: 20px;
}

.body {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 70px var(--content-padding) 35px;
}

.content {
  max-width: var(--content-max-width);
  margin: 0 auto 40px;
  padding: 30px var(--content-padding);
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

h1 {
  color: #d35400;
  font-weight: 700;
  font-size: 2.5em;
  text-align: center;
  margin: 0 0 30px;
  padding: 0 20px;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(211, 84, 0, 0.1);
}

h2 {
  color: #d35400;
  font-weight: 600;
  font-size: 1.8em;
  text-align: left;
  margin: 35px 0 20px;
  padding: 0;
  line-height: 1.3;
  border-bottom: 3px solid #d35400;
  padding-bottom: 10px;
}

.main-cate > h3 {
  color: #d35400;
  font-weight: 600;
  font-size: 1.4em;
  margin: 25px 0 15px;
  text-align: left;
}

p {
  font-size: 1.1em;
  color: #444;
  line-height: 1.8;
  margin: 15px 0;
  text-align: justify;
  text-justify: inter-word;
}

.content p:first-of-type {
  font-size: 1.2em;
  color: #333;
  font-weight: 500;
  margin-bottom: 25px;
  text-align: center;
  background: #fff0e4;
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #d35400;
}

a {
  color: #2980b9;
  text-decoration: none;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
}

nav a {
  font-weight: bold;
}

a:hover {
  color: #d35400;
  text-decoration: none;
}

.strong {
  font-weight: 600;
  font-style: normal;
}

.strong.oren {
  color: var(--oren-primary);
}
.strong.raddy {
  color: var(--raddy-primary);
}
.strong.clukr {
  color: var(--clukr-primary);
}
.strong.fun-bot {
  color: var(--fun-bot-primary);
}
.strong.vineria {
  color: var(--vineria-primary);
}
.strong.gray {
  color: var(--gray-primary);
}
.strong.brud {
  color: var(--brud-primary);
}
.strong.garnold {
  color: var(--garnold-primary);
}
.strong.owakcx {
  color: var(--owakcx-primary);
}
.strong.sky {
  color: var(--sky-primary);
}
.strong.mr-sun {
  color: var(--mr-sun-primary);
}
.strong.durple {
  color: var(--durple-primary);
}
.strong.mr-tree {
  color: var(--mr-tree-primary);
}
.strong.simon {
  color: var(--simon-primary);
}
.strong.tunner {
  color: var(--tunner-primary);
}
.strong.mr-fun-computer {
  color: var(--mr-fun-computer-primary);
}
.strong.wenda {
  color: var(--wenda-primary);
}
.strong.pinki {
  color: var(--pinki-primary);
}
.strong.jevin {
  color: var(--jevin-primary);
}
.strong.black {
  color: var(--black-primary);
}

.highlight {
  color: #e91e63;
  font-weight: 600;
  background: linear-gradient(
    120deg,
    rgba(233, 30, 99, 0.1) 0%,
    rgba(233, 30, 99, 0.05) 100%
  );
  padding: 2px 4px;
  border-radius: 4px;
  text-decoration: none;
}

@media (max-width: 768px) {
  body {
    padding: 0 !important;
  }

  .body {
    padding: 20px 15px;
  }

  .content {
    padding: 20px 15px;
    margin-bottom: 25px;
  }

  h1 {
    font-size: 2em;
    margin-bottom: 20px;
    padding: 0 10px;
  }

  h2 {
    font-size: 1.5em;
    margin: 25px 0 15px;
  }

  .main-cate > h3 {
    font-size: 1.2em;
    margin: 20px 0 10px;
  }

  p {
    font-size: 1em;
    line-height: 1.7;
    margin: 12px 0;
    text-align: left;
  }

  .content p:first-of-type {
    font-size: 1.1em;
    padding: 15px;
    margin-bottom: 20px;
  }

  .items {
    width: 100%;
    max-width: 350px;
    padding: 0 10px;
    box-sizing: border-box;
    gap: 15px;
  }

  .item.box {
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto !important;
  }

  .items li {
    max-width: 100%;
  }

  .popular-games .item.box .image-container {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .popular-games .item.box img {
    object-fit: contain !important;
  }

  a.round-btn {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .play-button {
    opacity: 0.7;
    padding: 12px 20px;
    font-size: clamp(13px, 3.5vw, 14px);
  }

  .popular-games .item.box:active .play-button {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }

  .item.box .desc {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    min-height: 40px;
    font-size: clamp(13px, 3.5vw, 14px);
  }

  .category-label {
    font-size: clamp(12px, 3.5vw, 13px);
    padding: 3px 6px;
  }

  .game-tag {
    font-size: clamp(12px, 3.5vw, 13px);
    padding: 5px 10px;
    top: 8px;
    left: 8px;
  }

  .info-container {
    gap: 10px;
  }

  .item.box .info-label,
  .item.box .info-text {
    font-size: clamp(13px, 3.5vw, 14px);
  }

  .items.bonus-characters .item.box .japanese-name,
  .items.bonus-characters .item.box .english-name {
    font-size: clamp(16px, 4vw, 18px);
  }

  .gif-toggle:focus,
  .play-button:focus,
  a.round-btn:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
  }

  .gif-toggle {
    touch-action: manipulation;
  }

  .item.box {
    will-change: transform, box-shadow;
  }

  #black .category-label,
  #black .round-btn {
    color: #000000 !important;
  }

  .item.box img {
    width: 120px !important;
    height: 120px !important;
    margin: 0 3px;
  }
}

.box {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  background: #fff;
}

.red_class {
  color: red;
}

.cate {
  margin-bottom: 30px;
  padding: 0 var(--content-padding);
}

.items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.item.box {
  width: 300px !important;
  height: auto;
  border: 2px solid transparent;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  box-sizing: content-box;
  position: relative;
  will-change: transform, box-shadow;
}

.item.box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.item.box figure:hover figcaption {
  transform: scale(1.05) translateY(-2px);
  font-weight: bolder;
  color: #333;
  text-shadow: rgba(0, 0, 0, 0.15);
}

.item.box figcaption {
  text-align: center;
  margin-top: 5px;
  font-size: 0.85em;
  color: #666;
  transition: color 0.3s ease, transform 0.3s ease, font-weight 0.3s ease;
}

.item.box a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.item.box .name-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.item.box h3 {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
}

.item.box .english-name {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
}

.item.box .japanese-name {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
}

.items.bonus-characters .item.box .english-name,
.items.bonus-characters .item.box .japanese-name {
  font-size: 17px;
}

.main-cate .english-name, 
.items.bonus-characters .item.box .japanese-name {
  display: none;
}


.item.box .desc {
  font-size: 14px;
  font-style: italic;
  margin: 12px 0;
  min-height: 40px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

a.round-btn:focus,
.play-button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.item.box > div:has(img) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 160px;
}

.item.box img {
  border-radius: 10px;
  border: 2px solid transparent;
  transition: transform 0.3s;
  width: 140px;
  height: 140px;
  object-fit: contain;
  margin: 0 5px;
}

.item.box img:hover {
  transform: scale(1.1);
}

.item.box strong {
  font-size: 15px;
}

.item.box .info-label {
  font-weight: bold;
  font-size: 14px;
}

.item.box .info-text {
  font-size: 14px;
  color: inherit;
}

.item.box[data-character="oren"] {
  background-color: var(--oren-bg);
  border-color: var(--oren-border);
}

.item.box[data-character="oren"] h3,
.item.box[data-character="oren"] .english-name,
.item.box[data-character="oren"] .desc,
.item.box[data-character="oren"] strong,
.item.box[data-character="oren"] .info-label,
.item.box[data-character="oren"] .info-text {
  color: var(--oren-primary);
}

.item.box[data-character="oren"] .category-label {
  background: var(--oren-primary);
}

.item.box[data-character="oren"] img {
  border-color: var(--oren-border);
}

.item.box[data-character="raddy"] {
  background-color: var(--raddy-bg);
  border-color: var(--raddy-border);
}

.item.box[data-character="raddy"] h3,
.item.box[data-character="raddy"] .english-name,
.item.box[data-character="raddy"] .desc,
.item.box[data-character="raddy"] strong,
.item.box[data-character="raddy"] .info-label,
.item.box[data-character="raddy"] .info-text {
  color: var(--raddy-primary);
}

.item.box[data-character="raddy"] .category-label {
  background: var(--raddy-primary);
}

.item.box[data-character="raddy"] img {
  border-color: var(--raddy-border);
}

.item.box[data-character="clukr"] {
  background-color: var(--clukr-bg);
  border-color: var(--clukr-border);
}

.item.box[data-character="clukr"] h3,
.item.box[data-character="clukr"] .english-name,
.item.box[data-character="clukr"] .desc,
.item.box[data-character="clukr"] strong,
.item.box[data-character="clukr"] .info-label,
.item.box[data-character="clukr"] .info-text {
  color: var(--clukr-primary);
}

.item.box[data-character="clukr"] .category-label {
  background: var(--clukr-primary);
}

.item.box[data-character="clukr"] img {
  border-color: var(--clukr-border);
}
.item.box[data-character="fun-bot"] {
  background-color: var(--fun-bot-bg);
  border-color: var(--fun-bot-border);
}

.item.box[data-character="fun-bot"] h3,
.item.box[data-character="fun-bot"] .english-name,
.item.box[data-character="fun-bot"] .desc,
.item.box[data-character="fun-bot"] strong,
.item.box[data-character="fun-bot"] .info-label,
.item.box[data-character="fun-bot"] .info-text {
  color: var(--fun-bot-primary);
}

.item.box[data-character="fun-bot"] .category-label {
  background: var(--fun-bot-primary);
}

.item.box[data-character="fun-bot"] img {
  border-color: var(--fun-bot-border);
}
.item.box[data-character="vineria"] {
  background-color: var(--vineria-bg);
  border-color: var(--vineria-border);
}

.item.box[data-character="vineria"] h3,
.item.box[data-character="vineria"] .english-name,
.item.box[data-character="vineria"] .desc,
.item.box[data-character="vineria"] strong,
.item.box[data-character="vineria"] .info-label,
.item.box[data-character="vineria"] .info-text {
  color: var(--vineria-primary);
}

.item.box[data-character="vineria"] .category-label {
  background: var(--vineria-primary);
}

.item.box[data-character="vineria"] img {
  border-color: var(--vineria-border);
}

.item.box[data-character="gray"] {
  background-color: var(--gray-bg);
  border-color: var(--gray-border);
}

.item.box[data-character="gray"] h3,
.item.box[data-character="gray"] .english-name,
.item.box[data-character="gray"] .desc,
.item.box[data-character="gray"] strong,
.item.box[data-character="gray"] .info-label,
.item.box[data-character="gray"] .info-text {
  color: var(--gray-primary);
}

.item.box[data-character="gray"] .category-label {
  background: var(--gray-primary);
}

.item.box[data-character="gray"] img {
  border-color: var(--gray-border);
}

.item.box[data-character="brud"] {
  background-color: var(--brud-bg);
  border-color: var(--brud-border);
}

.item.box[data-character="brud"] h3,
.item.box[data-character="brud"] .english-name,
.item.box[data-character="brud"] .desc,
.item.box[data-character="brud"] strong,
.item.box[data-character="brud"] .info-label,
.item.box[data-character="brud"] .info-text {
  color: var(--brud-primary);
}

.item.box[data-character="brud"] .category-label {
  background: var(--brud-primary);
}

.item.box[data-character="brud"] img {
  border-color: var(--brud-border);
}

.item.box[data-character="garnold"] {
  background-color: var(--garnold-bg);
  border-color: var(--garnold-border);
}

.item.box[data-character="garnold"] h3,
.item.box[data-character="garnold"] .english-name,
.item.box[data-character="garnold"] .desc,
.item.box[data-character="garnold"] strong,
.item.box[data-character="garnold"] .info-label,
.item.box[data-character="garnold"] .info-text {
  color: var(--garnold-primary);
}

.item.box[data-character="garnold"] .category-label {
  background: var(--garnold-primary);
}

.item.box[data-character="garnold"] img {
  border-color: var(--garnold-border);
}

.item.box[data-character="owakcx"] {
  background-color: var(--owakcx-bg);
  border-color: var(--owakcx-border);
}

.item.box[data-character="owakcx"] h3,
.item.box[data-character="owakcx"] .english-name,
.item.box[data-character="owakcx"] .desc,
.item.box[data-character="owakcx"] strong,
.item.box[data-character="owakcx"] .info-label,
.item.box[data-character="owakcx"] .info-text {
  color: var(--owakcx-primary);
}

.item.box[data-character="owakcx"] .category-label {
  background: var(--owakcx-primary);
}

.item.box[data-character="owakcx"] img {
  border-color: var(--owakcx-border);
}
.item.box[data-character="sky"] {
  background-color: var(--sky-bg);
  border-color: var(--sky-border);
}

.item.box[data-character="sky"] h3,
.item.box[data-character="sky"] .english-name,
.item.box[data-character="sky"] .desc,
.item.box[data-character="sky"] strong,
.item.box[data-character="sky"] .info-label,
.item.box[data-character="sky"] .info-text {
  color: var(--sky-primary);
}

.item.box[data-character="sky"] .category-label {
  background: var(--sky-primary);
}

.item.box[data-character="sky"] img {
  border-color: var(--sky-border);
}

.item.box[data-character="mr-sun"] {
  background-color: var(--mr-sun-bg);
  border-color: var(--mr-sun-border);
}

.item.box[data-character="mr-sun"] h3,
.item.box[data-character="mr-sun"] .english-name,
.item.box[data-character="mr-sun"] .desc,
.item.box[data-character="mr-sun"] strong,
.item.box[data-character="mr-sun"] .info-label,
.item.box[data-character="mr-sun"] .info-text {
  color: var(--mr-sun-primary);
}

.item.box[data-character="mr-sun"] .category-label {
  background: var(--mr-sun-primary);
}

.item.box[data-character="mr-sun"] img {
  border-color: var(--mr-sun-border);
}

.item.box[data-character="durple"] {
  background-color: var(--durple-bg);
  border-color: var(--durple-border);
}

.item.box[data-character="durple"] h3,
.item.box[data-character="durple"] .english-name,
.item.box[data-character="durple"] .desc,
.item.box[data-character="durple"] strong,
.item.box[data-character="durple"] .info-label,
.item.box[data-character="durple"] .info-text {
  color: var(--durple-primary);
}

.item.box[data-character="durple"] .category-label {
  background: var(--durple-primary);
}

.item.box[data-character="durple"] img {
  border-color: var(--durple-border);
}

.item.box[data-character="mr-tree"] {
  background-color: var(--mr-tree-bg);
  border-color: var(--mr-tree-border);
}

.item.box[data-character="mr-tree"] h3,
.item.box[data-character="mr-tree"] .english-name,
.item.box[data-character="mr-tree"] .desc,
.item.box[data-character="mr-tree"] strong,
.item.box[data-character="mr-tree"] .info-label,
.item.box[data-character="mr-tree"] .info-text {
  color: var(--mr-tree-primary);
}

.item.box[data-character="mr-tree"] .category-label {
  background: var(--mr-tree-primary);
}

.item.box[datacharacter="mr-tree"] img {
  border-color: var(--mr-tree-border);
}

.item.box[data-character="simon"] {
  background-color: var(--simon-bg);
  border-color: var(--simon-border);
}

.item.box[data-character="simon"] h3,
.item.box[data-character="simon"] .english-name,
.item.box[data-character="simon"] .desc,
.item.box[data-character="simon"] strong,
.item.box[data-character="simon"] .info-label,
.item.box[data-character="simon"] .info-text {
  color: var(--simon-primary);
}

.item.box[data-character="simon"] .category-label {
  background: var(--simon-primary);
}

.item.box[data-character="simon"] img {
  border-color: var(--simon-border);
}

.item.box[data-character="tunner"] {
  background-color: var(--tunner-bg);
  border-color: var(--tunner-border);
}

.item.box[data-character="tunner"] h3,
.item.box[data-character="tunner"] .english-name,
.item.box[data-character="tunner"] .desc,
.item.box[data-character="tunner"] strong,
.item.box[data-character="tunner"] .info-label,
.item.box[data-character="tunner"] .info-text {
  color: var(--tunner-primary);
}

.item.box[data-character="tunner"] .category-label {
  background: var(--tunner-primary);
}

.item.box[data-character="tunner"] img {
  border-color: var(--tunner-border);
}
.item.box[data-character="mr-fun-computer"] {
  background-color: var(--mr-fun-computer-bg);
  border-color: var(--mr-fun-computer-border);
}

.item.box[data-character="mr-fun-computer"] h3,
.item.box[data-character="mr-fun-computer"] .english-name,
.item.box[data-character="mr-fun-computer"] .desc,
.item.box[data-character="mr-fun-computer"] strong,
.item.box[data-character="mr-fun-computer"] .info-label,
.item.box[data-character="mr-fun-computer"] .info-text {
  color: var(--mr-fun-computer-primary);
}

.item.box[data-character="mr-fun-computer"] .category-label {
  background: var(--mr-fun-computer-primary);
}

.item.box[data-character="mr-fun-computer"] img {
  border-color: var(--mr-fun-computer-border);
}

.item.box[data-character="wenda"] {
  background-color: var(--wenda-bg);
  border-color: var(--wenda-border);
}

.item.box[data-character="wenda"] h3,
.item.box[data-character="wenda"] .english-name,
.item.box[data-character="wenda"] .desc,
.item.box[data-character="wenda"] strong,
.item.box[data-character="wenda"] .info-label,
.item.box[data-character="wenda"] .info-text {
  color: var(--wenda-primary);
}

.item.box[data-character="wenda"] .category-label {
  background: var(--wenda-primary);
}

.item.box[data-character="wenda"] img {
  border-color: var(--wenda-border);
}

.item.box[data-character="pinki"] {
  background-color: var(--pinki-bg);
  border-color: var(--pinki-border);
}

.item.box[data-character="pinki"] h3,
.item.box[data-character="pinki"] .english-name,
.item.box[data-character="pinki"] .desc,
.item.box[data-character="pinki"] strong,
.item.box[data-character="pinki"] .info-label,
.item.box[data-character="pinki"] .info-text {
  color: var(--pinki-primary);
}

.item.box[data-character="pinki"] .category-label {
  background: var(--pinki-primary);
}

.item.box[data-character="pinki"] img {
  border-color: var(--pinki-border);
}

.item.box[data-character="jevin"] {
  background-color: var(--jevin-bg);
  border-color: var(--jevin-border);
}

.item.box[data-character="jevin"] h3,
.item.box[data-character="jevin"] .english-name,
.item.box[data-character="jevin"] .desc,
.item.box[data-character="jevin"] strong,
.item.box[data-character="jevin"] .info-label,
.item.box[data-character="jevin"] .info-text {
  color: var(--jevin-primary);
}

.item.box[data-character="jevin"] .category-label {
  background: var(--jevin-primary);
}

.item.box[data-character="jevin"] img {
  border-color: var(--jevin-border);
}

.item.box[data-character="black"] {
  background-color: var(--black-bg);
  border-color: var(--black-border);
}

.item.box[data-character="black"] h3,
.item.box[data-character="black"] .english-name,
.item.box[data-character="black"] .desc,
.item.box[data-character="black"] strong,
.item.box[data-character="black"] .info-label,
.item.box[data-character="black"] .info-text {
  color: var(--black-primary);
}

.item.box[data-character="black"] .category-label {
  color: white;
  background: var(--black-primary);
}

.item.box[data-character="black"] img {
  border-color: var(--black-border);
}

.item.box img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.item.box[data-character="black"] img {
  background: linear-gradient(135deg, #e6e6e6 0%, #b0b0b0 100%);
  border-color: #333333 !important;
}

.item.box[data-character="oren"] img {
  background: linear-gradient(135deg, #ffe6d5 0%, #ffc9a5 100%);
  border-color: #ff7f50;
}
.item.box[data-character="raddy"] img {
  background: linear-gradient(135deg, #ffe6e6 0%, #ffc9c9 100%);
  border-color: #ff4500;
}
.item.box[data-character="pinki"] img,
.item.box[data-character="wenda"] img {
  background: linear-gradient(135deg, #ffe6f0 0%, #ffc9e0 100%);
  border-color: #ff69b4;
}

.item.box[data-character="clukr"] img {
  background: linear-gradient(135deg, #f0f0f0 0%, #d0d0d0 100%);
  border-color: #a0a0a0;
}
.item.box[data-character="fun-bot"] img {
  background: linear-gradient(135deg, #e6f0fa 0%, #c6d6e8 100%);
  border-color: #4169e1;
}

.item.box[data-character="vineria"] img {
  background: linear-gradient(135deg, #e6ffe6 0%, #c9ffc9 100%);
  border-color: #4caf50;
}
.item.box[data-character="mr-tree"] img {
  background: linear-gradient(135deg, #e8f4e8 0%, #c8e6c9 100%);
  border-color: #228b22;
}

.item.box[data-character="wenda"] img {
  background: linear-gradient(135deg, #ffe6f0 0%, #ffc9e0 100%);
  border-color: #ff69b4;
}
.item.box[data-character="simon"] img {
  background: linear-gradient(135deg, #f5f5dc 0%, #e6e6c9 100%);
  border-color: #daa520;
}
.item.box[data-character="owakcx"] img {
  background: linear-gradient(135deg, #e6f5e6 0%, #c9e6c9 100%);
  border-color: #228b22;
}

.item.box[data-character="black"] img {
  background: linear-gradient(135deg, #e6e6e6 0%, #b0b0b0 100%);
  border: 2px solid #333333 !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.item.box[data-character="gray"] img {
  background: linear-gradient(135deg, #f0f0f0 0%, #d0d0d0 100%);
  border-color: #a9a9a9;
}
.item.box[data-character="garnold"] img {
  background: linear-gradient(135deg, #fff0e6 0%, #ffd8c9 100%);
  border-color: #ebb52c;
}
.item.box[data-character="sky"] img {
  background: linear-gradient(135deg, #e6f0ff 0%, #c9d8ff 100%);
  border-color: #4169e1;
}
.item.box[data-character="mr-sun"] img {
  background: linear-gradient(135deg, #fff5e6 0%, #ffe8c9 100%);
  border-color: #ff8c00;
}
.item.box[data-character="durple"] img {
  background: linear-gradient(135deg, #f0e6ff 0%, #d8c9ff 100%);
  border-color: #8b008b;
}
.item.box[data-character="tunner"] img {
  background: linear-gradient(135deg, #f5ede6 0%, #e6d8c9 100%);
  border-color: #8b4513;
}
.item.box[data-character="jevin"] img {
  background: linear-gradient(135deg, #ffe6f0 0%, #ffc9e0 100%);
  border-color: #ff69b4;
}
.item.box[data-character="mr-fun-computer"] img {
  background: linear-gradient(
    135deg,
    #ffe6e6 0%,
    #e6ffe6 33%,
    #e6f0ff 66%,
    #f0e6ff 100%
  );
  border-color: #4169e1;
}

.item.box[data-character="black"] img {
  background: linear-gradient(135deg, #555555 0%, #333333 100%);
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.item.box[data-character="brud"] img {
  background: linear-gradient(135deg, #ccaa88 0%, #8b4513 100%);
  border-color: #8b4513;
}

.item.box[data-character="garnold"] img {
  background: linear-gradient(
    135deg,
    rgba(255, 236, 179, 0.7) 0%,
    rgba(255, 215, 140, 0.7) 100%
  );
  border-color: #daa520;
  box-shadow: 0 2px 8px rgba(218, 165, 32, 0.3);
}

.item.box[data-character="jevin"] img {
  background: linear-gradient(
    135deg,
    rgba(25, 25, 112, 0.7) 0%,
    rgba(65, 105, 225, 0.7) 100%
  );
  border-color: #4169e1;
  box-shadow: 0 2px 8px rgba(65, 105, 225, 0.3);
}

.items.popular-games {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.popular-games .item.box.horror {
  background: linear-gradient(135deg, #ffffff);
}

.popular-games .item.box.horror:hover {
  background: linear-gradient(135deg, #ffe6e6, #ffd1d1);
  border-color: #b22222;
  box-shadow: 0 8px 20px rgba(178, 34, 34, 0.3);
}

.popular-games .item.box.cute {
  background: linear-gradient(135deg, #fefefe, #f9f9f9);
}

.popular-games .item.box.cute:hover {
  background: linear-gradient(135deg, #fff0f5, #ffe4e1);
  border-color: #f368e0;
  box-shadow: 0 8px 20px rgba(255, 105, 180, 0.3);
}

.popular-games .item.box.hot {
  background: linear-gradient(135deg, #fefefe, #f9f9f9);
}

.popular-games .item.box.hot:hover {
  background: linear-gradient(135deg, #ffe4e1, #ffcdc2);
  border-color: #d83f31;
  box-shadow: 0 8px 20px rgba(216, 63, 49, 0.3);
}

.popular-games .item.box .image-container {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 15px;
  background: linear-gradient(135deg, #f0f8ff, #e6f3ff);
  aspect-ratio: 16 / 9;
}

.popular-games .item.box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  margin: 0 !important;
  border-radius: 12px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.game-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: clamp(12px, 3.5vw, 13px);
  font-weight: bold;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.game-tag.horror {
  background: linear-gradient(135deg, #e63946, #b22222);
  color: white;
}

.game-tag.cute {
  background: linear-gradient(135deg, #ff9ff3, #f368e0);
  color: white;
}

.game-tag.hot {
  background: linear-gradient(135deg, #ff6f61, #d83f31);
  color: white;
}

.popular-games .item.box .name-container {
  text-align: center;
  margin-bottom: 12px;
}

.popular-games .item.box .game-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
  line-height: 1.3;
}

.game-description {
  text-align: center;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  padding: 0 5px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popular-games .item.box .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 20px;
  border-radius: 25px;
  font-weight: bold;
  font-size: 14px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 4;
  border: 2px solid #fff;
  cursor: pointer;
  white-space: nowrap;
}

.popular-games .item.box.horror .play-button {
  background: linear-gradient(135deg, #e63946, #b22222);
  color: #fff;
}

.popular-games .item.box.cute .play-button {
  background: linear-gradient(135deg, #ff9ff3, #f368e0);
  color: #fff;
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
}

.popular-games .item.box.hot .play-button {
  background: linear-gradient(135deg, #ff6f61, #d83f31);
  color: #fff;
  box-shadow: 0 4px 15px rgba(216, 63, 49, 0.3);
}

.popular-games .item.box:hover .play-button {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.popular-games .item.box:hover img {
  transform: scale(1.1);
  filter: brightness(0.7) blur(1px);
}

.popular-games .item.box:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  border-color: #ff7f50;
}

.popular-games .item.box:hover .game-tag {
  transform: scale(1.1);
}

.gif-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgb(115 115 115 / 60%);
  color: white;
  font-size: clamp(12px, 3.5vw, 13px);
  padding: 3px 6px;
  border-radius: 5px;
  font-weight: bold;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gif-badge.active {
  background: #d83f00;
  color: white;
  transform: scale(1.1);
}

.gif-container {
  position: relative;
  display: inline-block;
}

.gif-container img.gif-toggle {
  cursor: pointer;
}

.items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  max-width: 1200px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.items li {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
}

a.round-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: white !important;
  font-size: 16px;
  font-weight: bolder;
  text-decoration: none;
  transition: all 0.2s ease;
  line-height: normal;
  padding: 0;
}

a.round-btn:hover {
  transform: scale(1.2);
}

.info-label-category {
  display: block;
  margin-top: 5px;
}

.category-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 5px;
  font-weight: bold;
}


.info-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.info-container > div {
  flex: 1;
}

.info-container > div:first-child {
  margin-right: 15px;
}

.menu-icon,
#menu1 li a {
  display: inline-block;
  padding: 8px 20px;
  font-size: 14px;
  font-family: "Noto Sans JP", "Roboto", Arial, sans-serif;
  background: #fff;
  color: #d35400;
  border: 2px solid #d35400;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.menu-icon {
  cursor: pointer;
}

.menu-icon:hover,
#menu1 li a:hover {
  background: #d35400;
  color: #fff;
}

.menu-icon:active,
.menu-icon:focus,
#menu1 li a:active,
#menu1 li a:focus {
  background: #e67e22;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.3);
}

#menuCheckbox {
  display: none;
}

.menu-icon {
  display: none;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 1001;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: bold;
}

#menuToggle1 #menu1 {
  display: none;
  position: fixed;
  top: 50px;
  right: 15px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  list-style: none;
  padding: 8px 0;
  margin: 0;
  min-width: 150px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateY(-10px);
  opacity: 0;
  max-height: 300px;
  overflow-y: auto;
}

#menuToggle1 #menu1 li {
  margin: 3px 0;
}

#menuToggle1 #menu1 li a {
  display: block;
  margin: 3px 8px;
  padding: 6px 15px;
  font-size: 13px;
}

#menuCheckbox:checked ~ #menu1 {
  display: block;
  transform: translateY(0);
  opacity: 1;
}

@media (min-width: 769px) {
  #main-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 998;
    transition: opacity 0.3s ease;
  }

  #main-nav.hidden {
    opacity: 0;
    pointer-events: none;
  }

  #main-nav #menu1 {
    display: flex !important;
    position: static;
    transform: none;
    opacity: 1;
    background: transparent;
    border: none;
    box-shadow: none;
    margin-top: 50px;
  }

  #main-nav #menu1,
  #menuToggle1 #menu1 {
    list-style: none;
  }

  #main-nav li a {
    background: #fff;
  }

  #main-nav li {
    margin: 10px;
  }

  .menu-icon {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .scrolled .menu-icon {
    display: block;
    opacity: 1;
  }
}

@media (max-width: 768px) {
  #main-nav {
    display: none;
  }

  .menu-icon {
    display: block;
    opacity: 1;
  }
}

html {
  scroll-behavior: smooth;
}

.summary-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--border-radius);
  padding: 2.5rem var(--content-padding);
  margin: 3rem auto;
  border-left: 5px solid var(--color-oren);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  max-width: var(--content-max-width);
}

.summary-section h2 {
  color: #d35400;
  text-align: left;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  border-bottom: 3px solid #d35400;
  padding-bottom: 10px;
}

.summary-section p {
  line-height: 1.8;
  margin-bottom: 1.2rem;
  color: #444;
  text-align: justify;
  text-justify: inter-word;
}

.play-now-link {
  text-align: center !important;
  margin-top: 2.5rem;
  font-weight: bold;
}

.play-now-link a {
  background: linear-gradient(135deg, var(--color-oren), #e65c00);
  color: white;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(255, 111, 0, 0.3);
  border: 2px solid transparent;
}

.play-now-link a:hover {
  background: linear-gradient(135deg, #e65c00, #cc5200);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 111, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}