@font-face {
  font-family: "Wii Rodin";
  src: url("assets/FOT-RodinNTLG-Pro-DB.otf") format("opentype");
  font-display: swap;
}
:root {
  color-scheme: light;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #d9dde0; }
body { display: grid; place-items: center; font-family: "Trebuchet MS", Arial, sans-serif; }
#app { width: 100vw; height: 100vh; display: grid; place-items: center; background: radial-gradient(ellipse at center, #fff 0%, #eef0f2 62%, #c9ced2 100%); }
#app.channel-mode { background: #000; }
#app.game-mode { background: #050d18; }
#wii { display: block; width: 100vw; height: 100vh; object-fit: contain; outline: none; touch-action: none; cursor: none; }
#game-shell { position: fixed; inset: 0; z-index: 10; background: #050d18; }
#game-shell[hidden] { display: none; }
#game-frame { display: block; width: 100%; height: 100%; border: 0; background: #050d18; }
#home-overlay {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  color: #65696c;
  background: rgba(24, 28, 31, .58);
  font-family: "Wii Rodin", "Trebuchet MS", Arial, sans-serif;
  backdrop-filter: blur(4px) saturate(.62);
}
#home-overlay[hidden] { display: none; }
.home-actions { position: relative; z-index: 1; display: flex; justify-content: center; gap: clamp(22px, 4vw, 58px); width: min(900px, 92vw); }
.home-button {
  width: min(380px, 40vw);
  min-height: 108px;
  padding: 14px 24px;
  border: 3px solid #a9adb0;
  border-radius: 58px;
  color: #5e6265;
  background: linear-gradient(180deg, #fff 0%, #f5f6f7 42%, #d7dade 100%);
  box-shadow: 0 7px 13px rgba(0,0,0,.36), inset 0 0 0 2px #fff, inset 0 -4px 9px rgba(107,115,120,.15);
  font-family: inherit;
  font-size: clamp(25px, 3.8vh, 36px);
  line-height: 1.1;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.home-button:hover, .home-button:focus-visible { border-color: #45c7e8; outline: 0; box-shadow: 0 7px 13px rgba(0,0,0,.36), 0 0 0 4px rgba(69,199,232,.48), inset 0 0 0 2px #fff; }
.home-button:active { transform: translateY(2px); }
#home-confirmation {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: clamp(22px, 5vh, 52px) clamp(20px, 5vw, 72px);
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
}
#home-confirmation[hidden] { display: none; }
#home-confirmation[data-open="true"] { opacity: 1; }
.home-confirmation-card {
  display: grid;
  grid-template-rows: 1fr auto;
  width: min(1160px, 100%);
  min-height: min(620px, 86vh);
  padding: clamp(42px, 7vh, 76px) clamp(46px, 5vw, 76px) clamp(38px, 5vh, 58px);
  border: 2px solid rgba(150, 153, 155, .7);
  border-radius: 34px;
  color: #696b6d;
  background:
    repeating-linear-gradient(0deg, rgba(183, 187, 189, .12) 0 2px, rgba(255, 255, 255, .24) 2px 5px),
    linear-gradient(180deg, #f9fafb 0%, #fff 72%, #d8dadd 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .42), inset 0 3px 0 rgba(255, 255, 255, .85);
  opacity: 0;
  transform: scale(.96);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
#home-confirmation[data-open="true"] .home-confirmation-card { opacity: 1; transform: scale(1); }
.home-confirmation-copy { align-self: center; text-align: center; }
.home-confirmation-copy h2 { margin: 0; color: inherit; font: inherit; font-size: clamp(29px, 4.2vw, 54px); font-weight: 400; letter-spacing: .08em; }
.home-confirmation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); }
.home-confirm-button { width: 100%; min-height: clamp(92px, 15vh, 145px); font-size: clamp(31px, 4vw, 52px); }
#return-loading {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  background: #000;
  opacity: 0;
  pointer-events: all;
}
#return-loading[hidden] { display: none; }
#return-loading.is-active { animation: return-loading-overlay 3650ms linear forwards; }
.return-loading-grid {
  position: absolute;
  top: 8%;
  left: 8.4%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(14px, 2vh, 22px) clamp(20px, 2vw, 32px);
  width: 83.2%;
  height: 62%;
}
.return-loading-grid span {
  display: block;
  color: transparent;
  background: transparent url("assets/wii-loading-tile-template.png?v=20260908-1") center / 100% 100% no-repeat;
  font-size: 0;
  opacity: 0;
}
#return-loading.is-active .return-loading-grid span { animation: return-loading-tile 1300ms linear both; animation-delay: var(--tile-delay, 0ms); }
.return-loading-grid span:nth-child(1) { --tile-delay: 0ms; }
.return-loading-grid span:nth-child(2) { --tile-delay: 35ms; }
.return-loading-grid span:nth-child(3) { --tile-delay: 70ms; }
.return-loading-grid span:nth-child(4) { --tile-delay: 105ms; }
.return-loading-grid span:nth-child(5) { --tile-delay: 140ms; }
.return-loading-grid span:nth-child(6) { --tile-delay: 175ms; }
.return-loading-grid span:nth-child(7) { --tile-delay: 210ms; }
.return-loading-grid span:nth-child(8) { --tile-delay: 245ms; }
.return-loading-grid span:nth-child(9) { --tile-delay: 280ms; }
.return-loading-grid span:nth-child(10) { --tile-delay: 315ms; }
.return-loading-grid span:nth-child(11) { --tile-delay: 350ms; }
.return-loading-grid span:nth-child(12) { --tile-delay: 385ms; }
@keyframes return-loading-overlay {
  0%, 82% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes return-loading-tile {
  0% { opacity: 0; }
  31%, 62% { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 640px) {
  .home-actions { flex-direction: column; align-items: center; gap: 18px; }
  .home-button { width: min(420px, 86vw); min-height: 88px; }
  .home-confirmation-card { min-height: min(560px, 88vh); padding: 36px 24px; }
  .home-confirmation-actions { gap: 18px; }
  .home-confirm-button { min-height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  #home-confirmation,
  .home-confirmation-card { transition-duration: 200ms; }
  .home-confirmation-card { transform: none; }
  #return-loading.is-active { animation-duration: 350ms; }
  #return-loading.is-active .return-loading-grid span { animation: none; opacity: .7; }
}
#rotate-note { display: none; position: fixed; inset: 0; place-items: center; padding: 2rem; color: #666; background: #eef0f2; text-align: center; font-size: 1.2rem; }
@media (orientation: portrait) and (max-width: 700px) {
  #app:not(.game-mode) #rotate-note { display: grid; }
  #app:not(.game-mode) #wii { visibility: hidden; }
}