/*
 * Higemegane App Home Visual UX v0.25.47
 * Presentation-only layer. Existing IDs, data contracts and navigation remain unchanged.
 */

.home-dashboard-screen {
  --home-card-radius: 22px;
  --home-art-ease: cubic-bezier(.2, .75, .25, 1);
}

.home-dashboard-top {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr);
}

.home-feature-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1fr;
}

.home-today-card,
.home-feature-tile,
.home-account-panel,
.home-connection-panel {
  position: relative;
  isolation: isolate;
}

.home-today-card {
  min-height: 326px;
  padding-right: min(43%, 372px);
}

.home-today-card__header,
.home-today-card__messages,
.home-today-card__note {
  position: relative;
  z-index: 3;
}

.home-today-card__messages {
  max-width: 100%;
}

.home-character {
  pointer-events: none;
  user-select: none;
  margin: 0;
}

.home-character__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: 60% 80%;
  transition: transform .18s var(--home-art-ease), opacity .18s ease;
}

.home-character--today {
  position: absolute;
  right: 4px;
  bottom: -1px;
  z-index: 1;
  width: min(44%, 372px);
  height: 92%;
}

.home-character--today::after {
  position: absolute;
  right: 5%;
  bottom: 1%;
  left: 4%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(10, 7, 12, .24), transparent 72%);
  content: "";
  filter: blur(5px);
  z-index: -1;
}

.home-character__steam {
  position: absolute;
  top: 21%;
  left: 29%;
  width: 30px;
  height: 64px;
  opacity: .42;
  background:
    radial-gradient(ellipse at 45% 82%, transparent 44%, rgba(255,255,255,.84) 49%, transparent 60%),
    radial-gradient(ellipse at 58% 38%, transparent 45%, rgba(255,255,255,.56) 50%, transparent 61%);
  filter: blur(1.2px);
  animation: home-steam-rise 7s ease-in-out infinite;
}

.home-feature-tile {
  min-height: 226px;
  padding-right: 46%;
  transition: transform .18s var(--home-art-ease), box-shadow .18s ease, border-color .18s ease;
}

.home-feature-tile > :not(.home-character):not(.home-symbol-visual) {
  position: relative;
  z-index: 3;
}

.home-feature-tile .home-character,
.home-feature-tile .home-symbol-visual {
  position: absolute;
  right: -5px;
  bottom: 2px;
  z-index: 1;
  width: 49%;
  height: 77%;
}

.home-feature-tile--fortune .home-character {
  right: -7%;
  bottom: -3%;
  width: 64%;
  height: 79%;
}

.home-feature-tile--play .home-character {
  right: -2%;
  bottom: -1%;
  width: 54%;
  height: 88%;
}

.home-feature-tile--talk .home-character {
  right: 1%;
  bottom: -2%;
  width: 44%;
  height: 84%;
}

.home-feature-tile--notice .home-symbol-visual {
  right: 3%;
  bottom: 7%;
  width: 43%;
  height: 59%;
  color: #276b7c;
  opacity: .88;
}

.home-symbol-visual svg,
.home-record-visual svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.home-symbol-visual svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-symbol-visual__paper {
  fill: rgba(255,255,255,.72);
}

.home-symbol-visual__badge {
  fill: #fff;
  stroke: #c64c3f;
}

.home-symbol-visual__signal {
  fill: #c64c3f;
  stroke: none;
  transform-origin: center;
}

.home-feature-action {
  max-width: 58%;
}

button.home-feature-tile--play,
button.home-feature-tile--talk,
button.home-feature-tile--link {
  align-content: start;
  padding-right: 45%;
}

.home-feature-tile--link .home-feature-tile__description {
  -webkit-line-clamp: 3;
}

@media (hover: hover) and (pointer: fine) {
  .home-feature-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 30px rgba(52, 41, 31, .11);
  }

  button.home-feature-tile:hover .home-character__image {
    transform: translateY(-2px);
  }
}

.home-feature-tile:active {
  transform: scale(.988);
}

.home-feature-tile--fortune:active .home-character__image {
  transform: translateY(-3px) scale(.99);
}

.home-feature-tile--play:active .home-character__image {
  transform: rotate(-1.5deg) scale(.985);
}

.home-feature-tile--talk:active .home-character__image {
  transform: translateX(2px) scale(.99);
}

.home-feature-tile--notice:active .home-symbol-visual {
  transform: translateY(-2px);
}

.home-account-panel {
  min-height: 178px;
  overflow: hidden;
  padding-right: 212px;
}

.home-account-panel > :not(.home-record-visual) {
  position: relative;
  z-index: 2;
}

.home-record-visual {
  position: absolute;
  right: 16px;
  bottom: 48px;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 54px;
  align-items: end;
  gap: 11px;
  width: 178px;
  height: 86px;
  margin: 0;
  opacity: .92;
}

.home-record-chart {
  display: flex;
  align-items: end;
  gap: 5px;
  height: 68px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  padding: 9px 10px;
}

.home-record-chart span {
  width: 9px;
  height: var(--bar);
  border-radius: 999px 999px 3px 3px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04);
  transform: scaleY(.05);
  transform-origin: bottom;
}

.home-record-chart span:nth-child(3n + 2) {
  background: #87d9d0;
}

.home-record-chart span:nth-child(4n) {
  background: #e7c889;
}

.home-record-visual.is-visible .home-record-chart span {
  animation: home-bar-enter .42s var(--home-art-ease) both;
  animation-delay: calc(var(--index) * 45ms);
}

.home-record-clipboard {
  width: 52px;
  height: 70px;
  color: rgba(255,255,255,.85);
}

.home-record-clipboard rect,
.home-record-clipboard path,
.home-record-clipboard line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-connection-panel > summary {
  position: relative;
  min-height: 148px;
  overflow: hidden;
  padding-right: 142px;
}

.home-connection-panel > summary > :not(.home-character) {
  position: relative;
  z-index: 2;
}

.home-character--connection {
  position: absolute;
  right: -6px;
  bottom: -7px;
  z-index: 1;
  width: 136px;
  height: 144px;
  opacity: .96;
}

.home-connection-panel__state.is-home-state-changed,
.home-feature-status--notice.is-home-state-changed {
  animation: home-state-pop .42s var(--home-art-ease);
}

.home-connection-panel__state.is-home-state-changed + .home-connection-panel__chevron {
  animation: home-state-glow .42s ease;
}

@keyframes home-steam-rise {
  0%, 100% { opacity: 0; transform: translateY(8px) scale(.92); }
  25% { opacity: .5; }
  68% { opacity: .25; }
  100% { transform: translateY(-11px) scale(1.06); }
}

@keyframes home-bar-enter {
  from { opacity: .28; transform: scaleY(.05); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes home-state-pop {
  0%, 100% { transform: scale(1); }
  48% { transform: scale(1.12); }
}

@keyframes home-state-glow {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 5px rgba(49,81,95,.55)); }
}

@media (max-width: 900px) {
  .home-dashboard-top,
  .home-dashboard-lower {
    grid-template-columns: 1fr;
  }

  .home-feature-grid {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .home-today-card {
    min-height: 310px;
  }

  .home-account-panel {
    padding-right: 212px;
  }
}

/* v0.25.13 TALK mobile placement-only adjustment.
 * The adopted asset remains unchanged; only its mobile bounding box is enlarged.
 */

@media (max-width: 620px) {
  .home-today-card {
    min-height: 280px;
    padding-right: 42%;
  }

  .home-today-card__header {
    margin-right: -68%;
  }

  .home-today-card__messages {
    min-height: 110px;
    max-height: 158px;
  }

  .home-today-card__messages .daily-stage__message {
    font-size: clamp(1rem, 4.6vw, 1.22rem);
    line-height: 1.5;
  }

  .home-today-card__note {
    max-width: 108%;
    font-size: .69rem;
  }

  .home-character--today {
    right: -8px;
    bottom: 0;
    width: 46%;
    height: 69%;
  }

  .home-character__steam {
    top: 17%;
    left: 24%;
    transform: scale(.75);
  }

  .home-feature-grid {
    gap: 10px;
  }

  .home-feature-tile,
  button.home-feature-tile--play,
  button.home-feature-tile--talk,
  button.home-feature-tile--link {
    min-height: 184px;
    padding: 11px 43% 11px 11px;
  }

  .home-feature-tile .home-character,
  .home-feature-tile .home-symbol-visual {
    right: -4%;
    bottom: 4px;
    width: 49%;
    height: 67%;
  }

  .home-feature-tile--fortune .home-character {
    right: -14%;
    bottom: -2%;
    width: 70%;
    height: 66%;
  }

  .home-feature-tile--play .home-character {
    right: -8%;
    width: 60%;
    height: 74%;
  }

  .home-feature-tile--talk .home-character {
    right: -4px;
    bottom: 7px;
    width: 56%;
    height: 84%;
  }

  .home-feature-tile--notice .home-symbol-visual {
    right: 3%;
    bottom: 10%;
    width: 43%;
    height: 46%;
  }

  .home-feature-tile__body,
  .home-feature-tile__description {
    -webkit-line-clamp: 3;
  }

  .home-feature-action {
    max-width: 100%;
    min-height: 36px;
    padding-inline: 6px;
  }

  .home-account-panel {
    min-height: 176px;
    padding-right: 112px;
  }

  .home-record-visual {
    right: 12px;
    bottom: 51px;
    grid-template-columns: 1fr;
    width: 88px;
    height: 64px;
  }

  .home-record-chart {
    height: 52px;
    gap: 3px;
    padding: 7px;
  }

  .home-record-chart span {
    width: 6px;
  }

  .home-record-clipboard {
    display: none;
  }

  .home-connection-panel > summary {
    min-height: 104px;
    padding-right: 92px;
  }

  .home-character--connection {
    right: -9px;
    bottom: -5px;
    width: 92px;
    height: 101px;
  }

  .home-connection-panel__copy small {
    font-size: .58rem;
  }

  .home-connection-panel__copy strong {
    font-size: .86rem;
  }

  .home-connection-panel__state {
    position: absolute;
    right: 82px;
    top: 13px;
  }
}

@media (max-width: 399px) {
  .home-today-card {
    min-height: 272px;
    padding-right: 39%;
  }

  .home-feature-tile,
  button.home-feature-tile--play,
  button.home-feature-tile--talk,
  button.home-feature-tile--link {
    min-height: 178px;
    padding-right: 40%;
  }

  .home-feature-tile__body,
  .home-feature-tile__description {
    font-size: .63rem;
  }
}

@media (max-width: 359px) {
  .home-feature-grid {
    grid-template-columns: 1fr;
  }

  .home-feature-tile,
  button.home-feature-tile--play,
  button.home-feature-tile--talk,
  button.home-feature-tile--link {
    min-height: 164px;
    padding-right: 42%;
  }
}

/* v0.25.14 TALK desktop placement-only adjustment.
 * The adopted asset and mobile placement remain unchanged.
 */
@media (min-width: 621px) {
  .home-feature-tile--talk .home-character {
    right: 4%;
    bottom: 1%;
    width: 49%;
    height: 92%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-character__steam,
  .home-record-visual.is-visible .home-record-chart span,
  .home-connection-panel__state.is-home-state-changed,
  .home-feature-status--notice.is-home-state-changed,
  .home-connection-panel__state.is-home-state-changed + .home-connection-panel__chevron {
    animation: none !important;
  }

  .home-feature-tile,
  .home-character__image {
    transition: none !important;
  }

  .home-feature-tile:active,
  .home-feature-tile:active .home-character__image,
  .home-feature-tile:active .home-symbol-visual {
    transform: none !important;
  }

  .home-record-chart span {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* v0.25.8 visual polish: adopted mockup corrections. */
.home-feature-tile--notice .home-symbol-visual {
  right: 4%;
  bottom: 8%;
  width: 42%;
  height: 55%;
  color: #2d7180;
  opacity: .96;
}

.home-symbol-visual__notice-ring {
  fill: rgba(255, 255, 255, .72);
  stroke: #d75c50;
  stroke-width: 2;
}

.home-symbol-visual__notice-bell,
.home-symbol-visual__notice-ray {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-symbol-visual__notice-ray {
  opacity: .72;
}

@media (max-width: 620px) {
  .home-connection-panel > summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon copy chevron"
      "icon state chevron";
    align-content: center;
    min-height: 104px;
    padding-right: 96px;
  }

  .home-connection-panel__icon {
    grid-area: icon;
  }

  .home-connection-panel__copy {
    grid-area: copy;
    min-width: 0;
  }

  .home-connection-panel__state {
    position: static;
    grid-area: state;
    justify-self: start;
    margin-top: 3px;
  }

  .home-connection-panel__chevron {
    grid-area: chevron;
  }

  .home-character--connection {
    right: -7px;
    bottom: -5px;
    width: 92px;
    height: 101px;
  }

  .home-feature-tile--notice .home-symbol-visual {
    right: 4%;
    bottom: 10%;
    width: 43%;
    height: 46%;
  }
}

/* v0.25.8 NOTICES-only character and placement correction. */
.home-feature-tile--notice {
  overflow: hidden;
  padding-right: 47%;
}

.home-character--notice {
  position: absolute;
  right: -1%;
  bottom: 0;
  z-index: 1;
  width: 48%;
  height: 88%;
  overflow: visible;
}

.home-feature-tile--notice:active .home-character__image {
  transform: translateY(-2px) scale(.99);
}

@media (max-width: 620px) {
  .home-feature-tile--notice {
    padding-right: 47%;
  }

  .home-character--notice {
    right: -2%;
    bottom: 0;
    width: 51%;
    height: 82%;
    overflow: hidden;
  }

  .home-character--notice .home-character__image {
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    max-width: none;
    height: 130%;
    object-fit: contain;
    object-position: center top;
    transform: translateX(-50%);
  }

  .home-feature-tile--notice:active .home-character__image {
    transform: translateX(-50%) translateY(-2px) scale(.99);
  }
}

@media (max-width: 399px) {
  .home-feature-tile--notice {
    padding-right: 46%;
  }

  .home-character--notice {
    right: -3%;
    width: 52%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-feature-tile--notice:active .home-character__image {
    transform: none !important;
  }
}

@media (max-width: 620px) and (prefers-reduced-motion: reduce) {
  .home-feature-tile--notice .home-character__image {
    transform: translateX(-50%) !important;
  }
}



/* ==========================================================================
 * v0.25.10 WORDPRESS connection-card-only correction
 * - Uses the adopted nose-removed character asset.
 * - Mobile summary is an explicit two-row grid.
 * - Status, chevron and character never use overlapping absolute placement.
 * ========================================================================== */
.home-connection-panel > summary {
  overflow: hidden;
  padding-right: 154px;
}

.home-character--connection {
  right: 4px;
  bottom: -5px;
  width: 140px;
  height: 151px;
  opacity: 1;
}

.home-character--connection .home-character__image {
  object-position: center bottom;
}

@media (max-width: 620px) {
  .home-connection-panel > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon copy chevron"
      ". state character";
    grid-template-rows: auto minmax(78px, auto);
    align-items: center;
    column-gap: 10px;
    row-gap: 3px;
    min-height: 154px;
    padding: 14px 12px 0 14px;
  }

  .home-connection-panel__icon {
    grid-area: icon;
    align-self: start;
  }

  .home-connection-panel__copy {
    grid-area: copy;
    align-self: start;
    min-width: 0;
    padding-top: 2px;
  }

  .home-connection-panel__copy small {
    font-size: .58rem;
  }

  .home-connection-panel__copy strong {
    font-size: .86rem;
  }

  .home-connection-panel__state {
    position: static !important;
    inset: auto !important;
    grid-area: state;
    align-self: start;
    justify-self: start;
    margin: 8px 0 12px;
    z-index: 3;
  }

  .home-connection-panel__chevron {
    grid-area: chevron;
    align-self: start;
    margin-top: 12px;
  }

  .home-character--connection {
    position: relative;
    inset: auto;
    grid-area: character;
    align-self: end;
    justify-self: end;
    width: 96px;
    height: 126px;
    margin: 0 2px 4px 0;
    overflow: hidden;
    z-index: 1;
  }

  .home-character--connection .home-character__image {
    position: absolute;
    top: 0;
    left: 50%;
    width: 92px;
    max-width: none;
    height: auto;
    object-fit: contain;
    object-position: center top;
    transform: translateX(-50%);
  }

  .home-connection-panel__body {
    position: relative;
    z-index: 4;
  }
}

@media (max-width: 399px) {
  .home-connection-panel > summary {
    grid-template-rows: auto minmax(74px, auto);
    min-height: 148px;
    padding-inline: 12px 10px;
  }

  .home-character--connection {
    width: 91px;
    height: 119px;
    margin-right: -8px;
  }

  .home-character--connection .home-character__image {
    width: 87px;
  }
}

@media (max-width: 620px) and (prefers-reduced-motion: reduce) {
  .home-character--connection .home-character__image {
    transform: translateX(-50%) !important;
  }
}