/* ==================================================
   たまの部屋
   Stable Version 8

   Diary / Categories / Embeds / Game / Counter / Tox
================================================== */


/* ==================================================
   RESET
================================================== */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
  min-height: 100vh;

  color: rgba(255,255,255,.92);

  background: #263d78;

  font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

  font-size: 14px;
  line-height: 1.8;
}


a {
  color: inherit;
  text-decoration: none;
}


button {
  font: inherit;
}


[hidden] {
  display: none !important;
}


/* ==================================================
   BACKGROUND
================================================== */

.bg {
  position: fixed;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(20, 38, 92, 0.55),
      rgba(45, 35, 105, 0.55)
    ),
    url("assets/wallpaper.png");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  z-index: -2;

  pointer-events: none;
}


body::before {
  content: "";

  position: fixed;
  inset: 0;

  background:
    rgba(15, 25, 65, 0.18);

  z-index: -1;

  pointer-events: none;
}


/* ==================================================
   HEADER
================================================== */

.site-header {
  width: min(
    1180px,
    calc(100% - 48px)
  );

  margin: 0 auto;

  padding:
    30px
    0
    26px;

  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;
}


.brand {
  min-width: 0;
}


.title {
  font-family:
    Georgia,
    "Yu Mincho",
    serif;

  font-size: 34px;

  letter-spacing: .12em;

  white-space: nowrap;
}


.paw {
  font-size: 20px;

  margin-left: 5px;
}


.subtitle {
  margin-top: 3px;

  color:
    rgba(255,255,255,.58);

  font-size: 9px;

  letter-spacing: .18em;
}


/* ==================================================
   NAVIGATION
================================================== */

.site-header nav {
  display: flex;

  align-items: center;

  gap: 18px;

  padding-top: 8px;

  color:
    rgba(255,255,255,.82);

  font-size: 11px;
}


.site-header nav a {
  transition:
    opacity .2s ease;
}


.site-header nav a:hover {
  opacity: .55;
}


.menu {
  border: 0;

  padding: 0;

  color: inherit;

  background: none;

  cursor: pointer;

  font-size: 16px;
}


/* ==================================================
   MAIN
================================================== */

main {
  width: min(
    1180px,
    calc(100% - 48px)
  );

  margin: 0 auto;
}


/* ==================================================
   GLASS
================================================== */

.glass {
  border:
    1px solid
    rgba(255,255,255,.24);

  background:
    rgba(52,72,135,.30);

  box-shadow:
    0 18px 50px
    rgba(10,25,70,.20);

  backdrop-filter:
    blur(13px);

  -webkit-backdrop-filter:
    blur(13px);
}


/* ==================================================
   TOP LAYOUT
================================================== */

.top-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    285px;

  gap: 32px;

  align-items: start;
}


/* ==================================================
   LATEST DIARY
================================================== */

.latest-diary {
  min-height: 365px;

  padding:
    25px
    30px
    28px;

  border-radius: 13px;
}


.meta {
  display: flex;

  align-items: center;

  min-height: 20px;

  color:
    rgba(255,255,255,.72);

  font-size: 10px;

  letter-spacing: .04em;
}


.weather {
  display: none;
}


.latest-category {
  margin-top: 3px;

  color:
    rgba(255,255,255,.48);

  font-size: 9px;
}


.latest-category::before {
  content: "▣ ";
}


.latest-diary h1 {
  margin:
    8px
    0
    12px;

  font-family:
    Georgia,
    "Yu Mincho",
    serif;

  font-size: 24px;

  font-weight: 500;

  letter-spacing: .08em;
}


.latest-body {
  max-width: 720px;
}


.latest-body p {
  margin: 0;

  white-space: pre-line;

  color:
    rgba(255,255,255,.88);

  font-size: 13px;

  line-height: 2.05;
}


.latest-body.collapsed {
  max-height: 205px;

  overflow: hidden;

  position: relative;
}


.latest-body.collapsed::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: 0;

  height: 72px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(48,69,132,.94)
    );

  pointer-events: none;
}


/* ==================================================
   READ MORE
================================================== */

.read-more {
  display: inline-block;

  margin-top: 13px;

  padding: 0;

  border: 0;

  color:
    rgba(255,255,255,.88);

  background: none;

  cursor: pointer;

  font-size: 10px;

  letter-spacing: .08em;

  transition:
    opacity .2s ease;
}


.read-more:hover {
  opacity: .6;
}


/* ==================================================
   SIDEBAR
================================================== */

.sidebar {
  display: flex;

  flex-direction: column;

  gap: 18px;
}


/* ==================================================
   PROFILE
================================================== */

.profile {
  padding: 18px;

  border-radius: 12px;
}


.section-head {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 15px;

  padding-bottom: 8px;

  border-bottom:
    1px solid
    rgba(255,255,255,.18);

  font-size: 11px;

  font-weight: 600;

  letter-spacing: .06em;
}


.section-link,
.section-note {
  color:
    rgba(255,255,255,.58);

  font-size: 8px;

  font-weight: normal;
}


.profile-body {
  display: flex;

  gap: 13px;

  margin-top: 16px;
}


.avatar {
  flex:
    0 0 auto;

  width: 48px;
  height: 48px;

  display: block;

  overflow: hidden;

  border-radius: 50%;
}


.profile-avatar-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: 50%;
}


.profile-text {
  min-width: 0;
}


.profile-text h2 {
  margin: 0;

  font-family:
    Georgia,
    serif;

  font-size: 15px;

  font-weight: normal;
}


.profile-text p {
  margin:
    2px
    0
    0;

  color:
    rgba(255,255,255,.68);

  font-size: 9px;

  line-height: 1.7;
}


/* ==================================================
   TOX
================================================== */

.tox-contact {
  margin-top: 18px;

  padding-top: 16px;

  border-top:
    1px solid
    rgba(255,255,255,.12);
}


.tox-contact-header {
  display: flex;

  align-items: center;

  gap: 12px;
}


.tox-logo {
  width: 42px;
  height: 42px;

  object-fit: contain;

  flex-shrink: 0;
}


.tox-title {
  font-size: 1rem;

  font-weight: 700;

  letter-spacing: .04em;
}


.tox-description {
  margin-top: 3px;

  font-size: .78rem;

  opacity: .7;
}


.tox-copy-button {
  width: 100%;

  margin-top: 12px;

  padding:
    9px
    12px;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius: 8px;

  background:
    rgba(255,255,255,.06);

  color: inherit;

  font: inherit;

  font-size: .82rem;

  cursor: pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .1s ease;
}


.tox-copy-button:hover {
  background:
    rgba(255,255,255,.12);

  border-color:
    rgba(255,255,255,.30);
}


.tox-copy-button:active {
  transform:
    scale(.98);
}


.tox-copy-button.copied {
  background:
    rgba(80,180,120,.15);

  border-color:
    rgba(80,180,120,.35);
}


/* ==================================================
   GAME SECTION
================================================== */

.game-section {
  margin-top: 30px;
}


.game-panel {
  padding: 18px;

  border-radius: 13px;
}


.game-intro {
  margin-top: 13px;

  padding: 10px;

  border-radius: 7px;

  background:
    rgba(116,141,202,.25);

  text-align: center;
}


.game-intro-label {
  color:
    rgba(255,255,255,.55);

  font-size: 8px;
}


.game-intro-number {
  margin-top: -1px;

  font-family:
    Georgia,
    serif;

  font-size: 19px;

  font-weight: bold;
}


.game-intro-number span {
  font-size: 9px;

  font-weight: normal;
}


/* ==================================================
   GAME LIST
================================================== */

.recent-games {
  margin-top: 9px;
}


.recent-games-list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 5px;
}


.recent-game {
  min-width: 0;

  display: grid;

  grid-template-columns:
    26px
    52px
    minmax(0, 1fr);

  align-items: center;

  gap: 7px;

  min-height: 58px;

  padding:
    5px
    8px;

  border-radius: 6px;

  background:
    rgba(101,128,191,.34);

  border:
    1px solid
    rgba(255,255,255,.07);
}


.recent-game-rank {
  color:
    rgba(255,255,255,.45);

  text-align: center;

  font-size: 9px;
}


.recent-game-image-wrap {
  width: 52px;
  height: 38px;
}


.recent-game-image-link {
  display: block;

  width: 52px;
  height: 38px;
}


.recent-game-image {
  display: block;

  width: 52px;
  height: 38px;

  object-fit: cover;

  border-radius: 4px;

  background:
    rgba(20,35,70,.35);
}


.recent-game-image.no-image {
  display: flex;

  align-items: center;

  justify-content: center;

  color:
    rgba(255,255,255,.5);

  font-size: 11px;
}


.recent-game-info {
  min-width: 0;
}


.recent-game-title {
  display: block;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  color:
    rgba(255,255,255,.9);

  font-size: 9px;
}


.recent-game-title:hover {
  opacity: .65;
}


.recent-game-meta {
  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  color:
    rgba(255,255,255,.46);

  font-size: 7px;
}


.recent-game-progress {
  margin-top: 1px;

  color:
    rgba(255,255,255,.55);

  font-size: 7px;
}


.exophase-loading {
  padding: 18px;

  color:
    rgba(255,255,255,.55);

  text-align: center;

  font-size: 10px;
}


/* ==================================================
   XBOX
================================================== */

.xbox-games {
  margin-top: 13px;
}


.game-source-title {
  display: flex;

  justify-content:
    space-between;

  align-items: center;

  padding:
    5px
    7px;

  border-radius:
    4px
    4px
    0
    0;

  background:
    rgba(24,42,88,.48);

  color:
    rgba(255,255,255,.5);

  font-size: 7px;
}


.trueachievements-card {
  display: block;
}


.trueachievements-card img {
  display: block;

  width: 100%;

  max-width: 560px;

  margin: 0 auto;

  border-radius:
    0
    0
    5px
    5px;
}


.exophase-card {
  margin-top: 12px;

  text-align: center;
}


.exophase-card img {
  display: inline-block;

  max-width: 100%;

  height: auto;

  border-radius: 5px;
}


/* ==================================================
   CATEGORIES
   ゲーム履歴の下
   Diary Archiveと同じ列
================================================== */

.categories-panel {
  width: min(
    820px,
    100%
  );

  margin:
    30px
    0
    0;

  padding: 18px;

  border-radius: 13px;
}


.category-list {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 12px;
}


.category-button {
  width: auto;

  padding:
    7px
    14px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 999px;

  color:
    rgba(255,255,255,.67);

  background:
    rgba(255,255,255,.04);

  text-align: center;

  cursor: pointer;

  font-size: 10px;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}


.category-button:hover {
  color:
    rgba(255,255,255,.95);

  background:
    rgba(255,255,255,.08);

  border-color:
    rgba(255,255,255,.20);
}


.category-button.active {
  color:
    rgba(255,255,255,.95);

  background:
    rgba(255,255,255,.12);

  border-color:
    rgba(255,255,255,.24);
}


/* ==================================================
   DIARY ARCHIVE
================================================== */

.diary-archive {
  width: min(
    820px,
    100%
  );

  margin:
    18px
    0
    70px;

  padding: 18px;

  border-radius: 13px;
}


.diary-archive .entry {
  padding:
    18px
    0;

  border-bottom:
    1px solid
    rgba(255,255,255,.13);
}


.diary-archive .entry:first-child {
  padding-top: 14px;
}


.diary-archive .entry:last-child {
  border-bottom: 0;
}


.entry time {
  display: inline-block;

  color:
    rgba(255,255,255,.55);

  font-size: 9px;
}


.entry-category {
  display: inline-block;

  margin-left: 8px;

  padding:
    1px
    6px;

  border-radius: 10px;

  color:
    rgba(255,255,255,.62);

  background:
    rgba(255,255,255,.08);

  font-size: 8px;
}


.entry h3 {
  margin:
    4px
    0
    8px;

  font-family:
    Georgia,
    "Yu Mincho",
    serif;

  font-size: 15px;

  font-weight: normal;
}


.entry p {
  margin: 0;

  white-space: pre-line;

  color:
    rgba(255,255,255,.75);

  font-size: 10px;

  line-height: 1.9;
}


.small {
  color:
    rgba(255,255,255,.55);

  font-size: 9px;
}


/* ==================================================
   LOAD MORE
================================================== */

.diary-load-more {
  display: flex;

  justify-content: center;

  margin-top: 24px;

  padding-top: 8px;
}


.load-more-button {
  appearance: none;

  border:
    1px solid
    rgba(255,255,255,.22);

  background:
    rgba(255,255,255,.08);

  color: inherit;

  padding:
    10px
    24px;

  border-radius: 999px;

  font: inherit;

  font-size: .9rem;

  cursor: pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.load-more-button:hover {
  background:
    rgba(255,255,255,.14);

  border-color:
    rgba(255,255,255,.35);

  transform:
    translateY(-1px);
}


/* ==================================================
   DIARY DETAIL
================================================== */

.diary-detail {
  width: min(
    820px,
    100%
  );

  margin:
    0
    0
    70px;

  padding:
    24px
    26px;

  border-radius: 13px;

  animation:
    diaryDetailFadeIn .28s ease;
}


.diary-detail > .section-head {
  padding-bottom: 10px;

  color:
    rgba(255,255,255,.86);
}


.diary-detail > .section-head .read-more {
  margin-top: 0;

  padding:
    4px
    8px;

  border-radius: 6px;

  background:
    rgba(255,255,255,.05);

  color:
    rgba(255,255,255,.72);

  font-size: 9px;

  letter-spacing: .04em;
}


.diary-detail-meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 16px;
}


.diary-detail-meta time {
  color:
    rgba(255,255,255,.52);

  font-size: 9px;

  letter-spacing: .04em;
}


.diary-detail-meta .entry-category {
  margin-left: 0;

  padding:
    2px
    7px;

  border:
    1px solid
    rgba(255,255,255,.10);

  color:
    rgba(255,255,255,.64);

  background:
    rgba(255,255,255,.07);

  font-size: 8px;
}


.diary-detail h2 {
  margin:
    9px
    0
    20px;

  color:
    rgba(255,255,255,.96);

  font-family:
    Georgia,
    "Yu Mincho",
    serif;

  font-size: 25px;

  font-weight: normal;

  line-height: 1.55;

  letter-spacing: .07em;
}


.diary-detail-body,
#latest-text {
  color:
    rgba(255,255,255,.88);

  font-size: 13px;

  line-height: 1.9;

  overflow-wrap:
    anywhere;
}


.diary-detail-body p,
#latest-text p {
  margin:
    0
    0
    1em;
}


.diary-detail-body h1,
.diary-detail-body h2,
.diary-detail-body h3 {
  margin:
    26px
    0
    12px;

  color:
    rgba(255,255,255,.94);

  font-family:
    Georgia,
    "Yu Mincho",
    serif;

  font-weight:
    normal;

  line-height: 1.6;
}


.diary-detail-body h1 {
  font-size: 22px;
}


.diary-detail-body h2 {
  font-size: 19px;
}


.diary-detail-body h3 {
  font-size: 16px;
}


.diary-detail-body ul,
.diary-detail-body ol {
  margin:
    12px
    0
    18px;

  padding-left:
    1.6em;
}


.diary-detail-body li {
  margin-bottom:
    5px;
}


.diary-detail-body a,
#latest-text a {
  color:
    rgba(225,235,255,.92);

  text-decoration:
    underline;

  text-underline-offset:
    3px;
}


.diary-detail-body blockquote,
#latest-text blockquote {
  margin:
    20px
    0;

  padding:
    10px
    16px;

  border-left:
    2px solid
    rgba(255,255,255,.28);

  color:
    rgba(255,255,255,.68);

  background:
    rgba(255,255,255,.04);
}


/* ==================================================
   DIARY IMAGES
================================================== */

.diary-detail-body img {
  display: block;

  max-width: 100%;

  height: auto;

  margin:
    20px
    auto;

  border-radius:
    10px;

  box-shadow:
    0 12px 35px
    rgba(5,15,50,.28);
}


.diary-detail-images {
  display: flex;

  flex-direction: column;

  gap: 18px;

  margin-top: 24px;

  padding-top: 20px;

  border-top:
    1px solid
    rgba(255,255,255,.12);
}


.diary-detail-images:empty {
  display: none;
}


.diary-detail-images img {
  display: block;

  width: 100%;

  max-width: 100%;

  max-height: 720px;

  margin:
    0
    auto;

  object-fit: contain;

  border-radius:
    10px;

  box-shadow:
    0 14px 40px
    rgba(5,15,50,.32);
}


/* ==================================================
   EMBEDS
================================================== */

.diary-embeds {
  width: 100%;
}


.diary-embed {
  width: 100%;

  margin:
    28px
    0;
}


.diary-embed-label {
  margin-bottom: 8px;

  font-size:
    .82rem;

  opacity:
    .65;
}


/* ==================================================
   YOUTUBE
   ★ ここは以前解決したサイズを維持
================================================== */

.diary-embed-youtube {
  width: 100%;
}


.diary-youtube-frame {
  position: relative;

  width: 100%;

  aspect-ratio:
    16 / 9;

  overflow: hidden;

  border-radius:
    10px;

  background:
    rgba(0,0,0,.20);
}


.diary-youtube-frame iframe {
  display: block;

  width: 100%;

  height: 100%;

  min-width: 100%;
  min-height: 100%;

  border: 0;
}


/* ==================================================
   VIMEO
================================================== */

.diary-embed-vimeo {
  width: 100%;
}


.diary-video-frame {
  position: relative;

  width: 100%;

  aspect-ratio:
    16 / 9;

  overflow: hidden;

  border-radius:
    10px;

  background:
    rgba(0,0,0,.20);
}


.diary-video-frame iframe {
  display: block;

  width: 100%;

  height: 100%;

  border: 0;
}


/* ==================================================
   SPOTIFY
================================================== */

.diary-embed-spotify iframe {
  display: block;

  width: 100%;

  height: 152px;

  border: 0;

  border-radius:
    12px;
}


/* ==================================================
   SOUNDCLOUD
================================================== */

.diary-embed-soundcloud iframe {
  display: block;

  width: 100%;

  height: 166px;

  border: 0;

  border-radius:
    8px;
}


/* ==================================================
   ANIMATION
================================================== */

@keyframes diaryDetailFadeIn {

  from {

    opacity: 0;

    transform:
      translateY(8px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


/* ==================================================
   FOOTER
================================================== */

footer {
  width: min(
    1180px,
    calc(100% - 48px)
  );

  margin:
    0
    auto;

  padding:
    0
    0
    25px;

  display: flex;

  justify-content:
    flex-end;

  align-items: center;

  color:
    rgba(255,255,255,.58);

  font-size: 8px;
}


.counter {
  white-space: nowrap;

  color:
    rgba(255,255,255,.62);

  font-size: 8px;
}


.counter b {
  font-family:
    "Courier New",
    monospace;

  font-size: 10px;

  letter-spacing: .12em;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 900px) {

  .top-layout {

    grid-template-columns:
      1fr;

  }


  .sidebar {

    display: grid;

    grid-template-columns:
      1fr
      1fr;

  }


  .game-section {

    margin-top: 22px;

  }

}


@media (max-width: 650px) {

  .site-header {

    width:
      calc(100% - 28px);

    padding-top:
      20px;

  }


  .site-header nav {

    gap: 9px;

  }


  .site-header nav a {

    display: none;

  }


  .title {

    font-size:
      27px;

  }


  .subtitle {

    font-size:
      8px;

  }


  main {

    width:
      calc(100% - 28px);

  }


  .latest-diary {

    padding:
      20px;

  }


  .latest-diary h1 {

    font-size:
      21px;

  }


  .latest-body p {

    font-size:
      12px;

  }


  .sidebar {

    grid-template-columns:
      1fr;

  }


  .recent-games-list {

    grid-template-columns:
      1fr;

  }


  .recent-game {

    grid-template-columns:
      28px
      60px
      minmax(0,1fr);

  }


  .recent-game-image,
  .recent-game-image-link,
  .recent-game-image-wrap {

    width:
      60px;

    height:
      42px;

  }


  .categories-panel {

    width:
      100%;

  }


  .category-list {

    gap:
      6px;

  }


  .category-button {

    padding:
      6px
      11px;

  }


  .diary-archive {

    width:
      100%;

    margin:
      18px
      0
      45px;

  }


  .diary-detail {

    width:
      100%;

    margin-bottom:
      45px;

    padding:
      19px
      18px;

    border-radius:
      11px;

  }


  .diary-detail h2 {

    margin:
      8px
      0
      17px;

    font-size:
      21px;

  }


  .diary-detail-body {

    font-size:
      12px;

    line-height:
      2.05;

  }


  /*
   * YouTubeはスマホでも
   * 16:9のまま幅いっぱい
   */
  .diary-youtube-frame {

    width:
      100%;

    aspect-ratio:
      16 / 9;

  }


  footer {

    width:
      calc(100% - 28px);

    justify-content:
      flex-start;

  }
  
  /* ==================================================
   CATEGORIES
   Gameの下・Diary Archiveと同じ幅
================================================== */

.categories-section {
  width: 100%;
  margin-top: 24px;
}

.categories-section .categories {
  width: 100%;
  box-sizing: border-box;
}

.categories-section .category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.categories-section .category-button {
  white-space: nowrap;
}


/* ==================================================
   YOUTUBE
   この部分は絶対に縮小させない
================================================== */

.diary-youtube-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 10px;
}

.diary-youtube-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* Vimeoも同じ比率 */

.diary-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 10px;
}

.diary-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==================================================
   NOW PLAYING
================================================== */

.now-playing-content {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.now-playing-icon-wrap {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.now-playing-icon {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
}

.now-playing-placeholder-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.now-playing-text {
  min-width: 0;
  flex: 1;
}

.now-playing-title {
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.now-playing-subtitle {
  margin-top: 2px;
  font-size: 0.85em;
  opacity: 0.7;
  overflow-wrap: anywhere;
}

}