/* =========================================================
   KIRAKIRA GAME CENTER — TEST PAGE DESIGN ENHANCEMENTS v318
   Scope: kirakira-gamecenter/index.html
   No production files are referenced by this stylesheet.
   ========================================================= */

:root{
  --gc-sky:#c8efff;
  --gc-sky-2:#eefaff;
  --gc-pink:#f06aa7;
  --gc-blue:#6fa9d7;
  --gc-deep:#17396e;
  --gc-line:#8bb7d7;
  --gc-panel:#fbfdff;
  --gc-shadow:rgba(61,87,139,.22);
  --gc-depth:0;
}

body.gc-design-test{
  background:
    linear-gradient(180deg,#bceaff 0%,#eafaff 18%,#e6f8ff 46%,#cbeefa 70%,#9fd4e8 100%);
}

/* 1. Stronger information hierarchy / breathing room */
.gc-design-test .official-page{padding-inline:clamp(8px,2vw,18px)}
.gc-design-test .section-box{position:relative;margin:18px 0;padding:18px clamp(12px,2.2vw,22px);border-radius:8px;overflow:visible}
.gc-design-test .section-box + .section-box{margin-top:22px}
.gc-design-test .welcome-box{margin-top:16px}
.gc-design-test .floor-panel{border-radius:10px;padding:24px clamp(12px,2vw,24px) 28px}

/* 2. Unified section headers */
.gc-design-test .section-box > h1,
.gc-design-test .section-box > h2,
.gc-design-test .floor-panel > h2{
  position:relative;
  margin:-18px -22px 16px;
  padding:10px 44px 9px;
  border-bottom:1px solid #9cc9df;
  border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,#ffffff 0%,#e5f7ff 48%,#caeaf8 49%,#f8fdff 100%);
  color:#e55f9e;
  text-shadow:0 1px #fff;
  letter-spacing:.04em;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(69,120,154,.08);
}
.gc-design-test .section-box > h1::before,
.gc-design-test .section-box > h2::before,
.gc-design-test .floor-panel > h2::before{content:"☁";position:absolute;left:15px;top:8px;color:#84cbe8;font-size:15px}
.gc-design-test .section-box > h1::after,
.gc-design-test .section-box > h2::after,
.gc-design-test .floor-panel > h2::after{content:"★";position:absolute;right:15px;top:8px;color:#f3bf51;font-size:13px}
.gc-design-test .floor-panel > h2{margin:0 0 12px;border:1px solid #a6cee1;border-radius:7px}

/* 3. Consistent card system */
.gc-design-test .today-grid article,
.gc-design-test .service-card,
.gc-design-test .machine-card,
.gc-design-test .prize-item,
.gc-design-test .staff-message,
.gc-design-test .hours-board > div{
  border-radius:7px!important;
  border-color:#9dbfd7!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(239,249,255,.96))!important;
  box-shadow:0 2px 0 rgba(255,255,255,.9) inset,0 3px 8px rgba(62,96,132,.12)!important;
}

/* 4 + 5. Artificial sky atmosphere and CSS-only clouds */
.gc-design-test .official-wrap{position:relative;background:linear-gradient(180deg,rgba(226,248,255,.94),rgba(246,253,255,.96))}
.gc-design-test .official-wrap::before,
.gc-design-test .official-wrap::after{
  content:"";position:absolute;pointer-events:none;z-index:0;opacity:.42;filter:blur(.1px)
}
.gc-design-test .official-wrap::before{
  width:190px;height:48px;left:4vw;top:44px;
  background:radial-gradient(ellipse at 30% 65%,#fff 0 34%,transparent 35%),radial-gradient(ellipse at 52% 45%,#fff 0 38%,transparent 39%),radial-gradient(ellipse at 72% 68%,#fff 0 32%,transparent 33%);
}
.gc-design-test .official-wrap::after{
  width:150px;height:42px;right:5vw;top:160px;
  background:radial-gradient(ellipse at 25% 70%,#fff 0 33%,transparent 34%),radial-gradient(ellipse at 52% 46%,#fff 0 40%,transparent 41%),radial-gradient(ellipse at 78% 70%,#fff 0 30%,transparent 31%);
}
.gc-design-test .official-page{position:relative;z-index:1}

/* 6 + 7. Stronger submerged feeling toward the bottom */
.gc-design-test::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:8000;opacity:calc(var(--gc-depth) * .20);
  background:
    repeating-radial-gradient(ellipse at 50% 110%,rgba(255,255,255,.22) 0 1px,transparent 2px 32px),
    linear-gradient(180deg,transparent 20%,rgba(52,153,193,.20) 70%,rgba(15,81,135,.40) 100%);
  mix-blend-mode:multiply;
  transition:opacity .25s linear;
}
.gc-design-test .lower-official{background:linear-gradient(180deg,#e9faff,#ccecf6)}
.gc-design-test .after-footer-gap{background:linear-gradient(#09102e,#071d3a)}

/* 8. Cabinet-like navigation buttons */
.gc-design-test .old-nav{gap:7px;padding:9px;border:1px solid #8fb2cb;border-radius:8px;background:linear-gradient(#d7effa,#bddfed);box-shadow:inset 0 1px 0 #fff,0 3px 0 #7197aa}
.gc-design-test .old-nav a{
  position:relative;border:2px solid #f7fcff;border-bottom-color:#7199b3;border-right-color:#7199b3;border-radius:6px;
  background:linear-gradient(#fff,#e6f5ff 48%,#cee9f8 52%,#f4fbff);
  box-shadow:0 3px 0 #7396aa,0 4px 7px rgba(55,95,116,.16),inset 0 1px 0 #fff;
  transition:transform .08s,filter .12s,box-shadow .08s;
}
.gc-design-test .old-nav a::before{content:"";width:6px;height:6px;margin-right:6px;border:1px solid #7396aa;border-radius:50%;background:#d9e4e9;box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}
.gc-design-test .old-nav a:hover{filter:brightness(1.04);background:linear-gradient(#fff,#fff0f7 48%,#ffdce9 52%,#fff)}
.gc-design-test .old-nav a:active{transform:translateY(3px);box-shadow:0 0 0 #7396aa,inset 0 2px 5px rgba(37,78,103,.16)}

/* 9 + 10. Game cards + status badges */
.gc-design-test .machine-card{overflow:visible;padding-top:36px!important;transition:transform .15s ease,box-shadow .15s ease!important}
.gc-design-test .machine-card:hover{transform:translateY(-3px);box-shadow:0 2px 0 #fff inset,0 8px 16px rgba(44,72,117,.18)!important}
.gc-design-test .machine-card::before{content:"PLAYABLE";position:absolute;top:8px;right:8px;padding:3px 7px;border:1px solid #70a986;border-radius:10px;background:#ebfff1;color:#34845a;font:9px/1.2 "DotGothic16",sans-serif;letter-spacing:.05em}
.gc-design-test .machine-card.broken-card::before{content:"MAINTENANCE";border-color:#c39a70;background:#fff8df;color:#9a6d37}
.gc-design-test .isho-card::after{content:"NEW";position:absolute;top:8px;left:8px;padding:3px 7px;border:1px solid #e293b9;border-radius:10px;background:#fff0f7;color:#c84f87;font:9px/1.2 "DotGothic16",sans-serif}
.gc-design-test .machine-card h3{min-height:2.8em;display:grid;place-items:center;margin-bottom:5px}
.gc-design-test .machine-card h3 + .gc-game-desc{margin:0 0 8px;color:#7586a5;font-size:9px;line-height:1.55;min-height:2.8em}
.gc-design-test .play-link{position:relative;border-radius:7px;filter:drop-shadow(0 3px 0 rgba(78,99,145,.22));transition:transform .08s,filter .12s}
.gc-design-test .play-link:active{transform:translateY(3px);filter:none}

/* 11. Prize showcase */
.gc-design-test .prize-grid{padding:12px;border:3px double #9dbcd5;border-radius:9px;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(224,244,253,.82));box-shadow:inset 0 0 22px rgba(255,255,255,.9),0 5px 12px rgba(48,79,113,.12)}
.gc-design-test .prize-item{overflow:visible}
.gc-design-test .prize-item::after{content:"";position:absolute;inset:1px;border-radius:6px;background:linear-gradient(105deg,transparent 24%,rgba(255,255,255,.58) 48%,transparent 72%);pointer-events:none;z-index:0}.gc-design-test .prize-item>*{position:relative;z-index:1}.gc-design-test .prize-new{z-index:2}

/* 12. 2008-style NEWS */
.gc-design-test .news-list{border:1px solid #a7c7db;border-radius:6px;overflow:hidden;background:#fff}
.gc-design-test .news-list > div{position:relative;margin:0!important;padding:9px 10px 9px 62px!important;border-bottom:1px dotted #9fbed2!important}
.gc-design-test .news-list > div:last-child{border-bottom:0!important}
.gc-design-test .news-list dt{position:absolute;left:8px;top:10px;color:#617fa0;font-size:9px}
.gc-design-test .news-list dd{margin:0!important;font-size:11px;line-height:1.6}
.gc-design-test .news-list > div:first-child dd::after{content:" NEW!";color:#f04f92;font-weight:700;font-size:9px;animation:gcNewBlink 1.15s steps(2,end) infinite}
@keyframes gcNewBlink{50%{opacity:.35}}

/* 13 + 14. Electric sign / today's business bar */
.gc-today-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:10px 0 14px;border:3px ridge #7f9ab0;background:#526a7c;box-shadow:0 3px 0 rgba(42,66,80,.25)}
.gc-today-strip > span{min-width:0;padding:7px 8px;background:#132c3b;color:#a9efff;text-align:center;font:10px/1.45 "DotGothic16",monospace;text-shadow:0 0 6px rgba(130,235,255,.7)}
.gc-today-strip b{color:#fff16e;font-weight:400}

/* 15. Staff card */
.gc-design-test .staff-box{background:linear-gradient(135deg,#fff,#f3fbff 60%,#fff5fa)!important}
.gc-design-test .staff-message{position:relative;display:grid!important;grid-template-columns:70px 1fr;align-items:center;gap:12px;padding:13px!important;text-align:left!important}
.gc-design-test .staff-message::before{content:"STAFF CARD\A FLOOR SUPPORT";white-space:pre;position:absolute;right:10px;top:8px;color:#91a5b7;font:8px/1.4 "DotGothic16",sans-serif;letter-spacing:.08em;text-align:right}
.gc-design-test .staff-face{display:grid;place-items:center;width:58px;height:58px;border:2px solid #9dc2d8;border-radius:4px;background:linear-gradient(#fff,#e6f7ff);color:#e5659f;font-size:14px;box-shadow:inset 0 0 0 3px #fff}
.gc-design-test .staff-message p{margin:0;padding-right:72px}

/* 16. Indoor directory separators */
.gc-floor-guide{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:15px 0 2px;padding:8px 10px;border-top:1px dotted #9abbd1;border-bottom:1px dotted #9abbd1;color:#6386a1;font:9px/1.5 "DotGothic16",sans-serif;letter-spacing:.05em}
.gc-floor-guide span:not(:last-child)::after{content:" →";color:#e46b9e}

/* 17. Tiny tap feedback */
.gc-design-test a,.gc-design-test button{ -webkit-tap-highlight-color:transparent }
.gc-design-test .service-card,.gc-design-test .pet-entry-link,.gc-design-test .aozora-restore-link{transition:transform .08s ease,filter .12s ease,box-shadow .12s ease}
.gc-design-test .service-card:active,.gc-design-test .pet-entry-link:active,.gc-design-test .aozora-restore-link:active{transform:translateY(2px) scale(.995)}
.gc-click-spark{position:fixed;z-index:99999;pointer-events:none;font-size:14px;line-height:1;animation:gcSpark .42s ease-out forwards}
@keyframes gcSpark{from{opacity:1;transform:translate(-50%,-50%) scale(.55) rotate(-15deg)}to{opacity:0;transform:translate(-50%,-90%) scale(1.25) rotate(15deg)}}

/* 18. Richer old-site footer */
.gc-footer-meta{margin:12px auto 0;padding-top:10px;border-top:1px dotted rgba(181,205,255,.45);max-width:560px;color:#abb9da;font:8px/1.75 "DotGothic16",sans-serif;letter-spacing:.04em}
.gc-footer-meta a{min-height:44px!important;padding:6px 8px!important}

/* 19. Tiny, infrequent anomaly */
.gc-design-test.gc-cloud-glitch .official-wrap::after{transform:translateX(1px);filter:blur(.35px)}
.gc-design-test.gc-cloud-glitch .mini-header{transform:translateX(-1px)}

/* 20. Day -> pre-closing atmospheric mode */
.gc-design-test.gc-evening .hero-vignette{background:linear-gradient(180deg,rgba(255,208,221,.06),rgba(53,76,135,.18))}
.gc-design-test.gc-evening .official-wrap{filter:saturate(.96)}
.gc-design-test.gc-late .hero-vignette{background:linear-gradient(180deg,rgba(44,63,116,.10),rgba(13,31,79,.35))}
.gc-design-test.gc-late .official-wrap{filter:saturate(.88) brightness(.96)}
.gc-design-test.gc-late .open-status{color:#d69243!important}

@media(max-width:720px){
  .gc-design-test .section-box{margin:14px 0;padding:15px 10px}
  .gc-design-test .section-box > h1,.gc-design-test .section-box > h2{margin:-15px -10px 13px;padding:9px 34px;font-size:15px}
  .gc-design-test .section-box > h1::before,.gc-design-test .section-box > h2::before{left:10px}
  .gc-design-test .section-box > h1::after,.gc-design-test .section-box > h2::after{right:10px}
  .gc-design-test .old-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:7px}
  .gc-design-test .old-nav a{min-width:0;padding:6px 4px;font-size:10px}
  .gc-design-test .old-nav a::before{display:none}
  .gc-today-strip{grid-template-columns:1fr}
  .gc-design-test .game-grid{gap:9px}
  .gc-design-test .staff-message{grid-template-columns:58px 1fr;gap:9px}
  .gc-design-test .staff-face{width:50px;height:50px}
  .gc-design-test .staff-message p{padding-right:0;font-size:10px}
  .gc-design-test .staff-message::before{position:static;grid-column:1/-1;grid-row:1;margin-bottom:-4px;text-align:right}
  .gc-floor-guide{font-size:8px;padding-inline:4px}
}
@media(max-width:520px){
  .gc-design-test .old-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gc-design-test .machine-card{padding-inline:5px!important}
  .gc-design-test .machine-card::before,.gc-design-test .isho-card::after{font-size:7px;padding:2px 5px}
}
@media(prefers-reduced-motion:reduce){
  .gc-design-test::before,.gc-design-test *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* v317 audit: preserve 44px tap targets and safe bottom spacing */
.gc-design-test .old-nav a{min-height:44px}
@media(max-width:520px){.gc-design-test .old-nav a{min-height:46px}.gc-design-test .fake-footer-inner{padding-bottom:max(28px,env(safe-area-inset-bottom))}}


/* v318 micro design audit — tiny alignment and leakage fixes */
.gc-design-test .section-box{--gc-section-pad-x:clamp(12px,2.2vw,22px);padding-left:var(--gc-section-pad-x);padding-right:var(--gc-section-pad-x)}
.gc-design-test .section-box > h1,.gc-design-test .section-box > h2{
  margin-left:calc(-1 * var(--gc-section-pad-x));
  margin-right:calc(-1 * var(--gc-section-pad-x));
  padding:10px 44px 9px!important;
  border:0!important;border-bottom:1px solid #9cc9df!important;
}
.gc-design-test .pet-entry-copy > h2{display:block;margin:0 0 10px!important;padding:7px 12px!important;border:1px solid #a6cee1;border-radius:6px;background:linear-gradient(180deg,#fff 0%,#e5f7ff 48%,#caeaf8 49%,#f8fdff 100%);box-shadow:inset 0 1px 0 #fff;color:#e55f9e!important;text-shadow:0 1px #fff}
.gc-design-test .old-nav a:focus-visible,.gc-design-test .service-card:focus-visible,.gc-design-test .pet-entry-link:focus-visible,.gc-design-test .aozora-restore-link:focus-visible,.gc-design-test .play-link:focus-visible{outline:3px solid rgba(226,93,155,.72);outline-offset:3px}
.gc-design-test .kirakira-global-sound{z-index:8200}.gc-design-test .closing-announcement{z-index:8300}
.gc-design-test .prize-new{font-size:9px}
.gc-design-test .gc-footer-meta{font-size:9px;line-height:1.8}
@media(max-width:720px){
  .gc-design-test .section-box{--gc-section-pad-x:10px}
  .gc-design-test .section-box > h1,.gc-design-test .section-box > h2{padding:9px 34px!important}
  .gc-design-test .staff-message p{font-size:11px;line-height:1.65}
  .gc-design-test .staff-message::before{font-size:9px;line-height:1.35}
  .gc-floor-guide{font-size:9px;line-height:1.55}
}
@media(max-width:520px){
  .gc-design-test .machine-card::before,.gc-design-test .isho-card::after{font-size:8px;line-height:1.25;padding:3px 6px}
  .gc-design-test .gc-footer-meta{font-size:9px;letter-spacing:.025em}
}

/* v319 user-device fixes */
/* First view: on phones the flooded arcade occupies the full visual viewport; the official site begins after scrolling. */
@media(max-width:720px){
  .gc-design-test .hero-original{min-height:100svh!important;height:100dvh!important;max-height:none!important;margin:0!important}
  @supports not (height:100dvh){.gc-design-test .hero-original{height:100svh!important}}
  .gc-design-test .hero-original .hero-photo{background-position:center center;transform:scale(1.01)}
  .gc-design-test .hero-original .hero-content{min-height:100%;box-sizing:border-box;justify-content:center;padding:calc(18px + env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom))}
  .gc-design-test .official-wrap{margin-top:0!important;border-top-width:4px;padding-top:24px}
}

/* Compact TODAY'S INFO without sacrificing readability. */
.gc-design-test .today-grid{gap:7px}
.gc-design-test .today-grid article{min-height:92px;padding:9px 8px;display:flex;flex-direction:column;justify-content:center}
.gc-design-test .today-grid b{margin:4px 0 3px;font-size:21px;line-height:1.15}
.gc-design-test .today-grid small{line-height:1.4}
.gc-design-test .lucky-value{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 0 3px}
.gc-design-test .lucky-value b{margin:0}
.gc-design-test .lucky-swatch{display:inline-block;width:22px;height:22px;box-sizing:border-box;border:2px solid #a8bfd2;border-radius:3px;background:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),0 1px 2px rgba(72,105,133,.12)}
.gc-design-test .lucky-swatch.is-clear{background:linear-gradient(135deg,#fff 0 42%,#d9f5ff 43% 57%,#fff 58% 100%)}
@media(max-width:420px){
  .gc-design-test .today-grid{grid-template-columns:1fr 1fr!important;gap:6px}
  .gc-design-test .today-grid article{min-height:88px;padding:8px 5px}
  .gc-design-test .today-grid b{font-size:19px}
  .gc-design-test .today-grid span{font-size:9px}
  .gc-design-test .today-grid small{font-size:10px}
}

/* 2008 girls-blog category navigation instead of control-panel keys. */
.gc-design-test .old-nav{gap:7px;padding:8px;border:1px dashed #e6a8c5;border-radius:10px;background:#fffafc;box-shadow:none}
.gc-design-test .old-nav a{position:relative;min-height:44px;border:1px solid #efb4cf!important;border-radius:12px!important;background:linear-gradient(#fff,#fff6fa)!important;box-shadow:0 2px 0 #f5d5e4!important;color:#6c78a0!important;font-size:11px;text-shadow:0 1px #fff;transform:none!important}
.gc-design-test .old-nav a:nth-child(3n+2){border-color:#a9d4e8!important;background:linear-gradient(#fff,#f1fbff)!important;box-shadow:0 2px 0 #d2eaf5!important}
.gc-design-test .old-nav a:nth-child(3n){border-color:#ead99a!important;background:linear-gradient(#fff,#fffbea)!important;box-shadow:0 2px 0 #f3e8ba!important}
.gc-design-test .old-nav a::before{content:"☆"!important;display:inline!important;width:auto!important;height:auto!important;margin-right:5px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:#ed72aa;font-size:11px}
.gc-design-test .old-nav a:nth-child(even)::before{content:"♪"!important;color:#70b7d7}
.gc-design-test .old-nav a:hover,.gc-design-test .old-nav a:active{filter:none!important;background:#fff0f7!important;border-color:#e57aaa!important;color:#d85c96!important;box-shadow:0 2px 0 #f2bfd5!important}
@media(max-width:720px){.gc-design-test .old-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}.gc-design-test .old-nav a{font-size:11px!important;padding:7px 5px!important}}

/* Staff kaomoji must remain a single centered glyph-string. */
.gc-design-test .staff-face{width:64px;min-width:64px;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;font-size:13px;line-height:1;letter-spacing:-.03em;text-align:center}
@media(max-width:720px){.gc-design-test .staff-message{grid-template-columns:66px minmax(0,1fr)}.gc-design-test .staff-face{width:60px;min-width:60px;height:52px;font-size:12px}}

/* Prevent preceding content from visually leaking into the RAINBOW TEST title band. */
.gc-design-test #rainbowTestTitle{position:relative;z-index:2;isolation:isolate;background:linear-gradient(180deg,#fff 0%,#eaf9ff 45%,#d7f1fb 46%,#f8fdff 100%)!important;overflow:hidden;clear:both}
.gc-design-test #rainbowTestTitle::before,.gc-design-test #rainbowTestTitle::after{z-index:1}
.gc-design-test .rainbow-test-section{position:relative;clear:both;overflow:hidden;margin-top:26px!important;background:#fff}
@media(max-width:720px){.gc-design-test .rainbow-test-section{margin-top:20px!important}}


/* v320 — artificial sky / sinking-depth redesign */
.gc-design-test{--gc-depth:0;--gc-depth-overlay:0;--gc-cloud-opacity:.76;--gc-ui-blue:0}
.gc-design-test .site-shell{position:relative;isolation:isolate;background:linear-gradient(180deg,#e8fbff 0%,#c8f1fb 15%,#91d9ec 34%,#58acd0 52%,#2e78aa 69%,#174c7e 84%,#08274f 100%)!important}
.gc-design-test .gc-sky-layer,.gc-design-test .gc-water-layer{position:fixed;inset:0;pointer-events:none;z-index:-2;overflow:hidden}
.gc-design-test .gc-sky-layer{background:linear-gradient(180deg,rgba(232,251,255,.82),rgba(106,190,221,.24) 58%,rgba(18,69,118,.14));opacity:1}
.gc-design-test .gc-water-layer{z-index:7900;background:rgba(2,25,64,.1);opacity:var(--gc-depth-overlay);mix-blend-mode:multiply;transition:opacity .18s linear}
.gc-design-test .gc-water-caustics{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:calc(var(--gc-depth) * .13);background:repeating-radial-gradient(ellipse at 25% 5%,rgba(255,255,255,.22) 0 1px,transparent 3px 28px);background-size:180px 90px;animation:gcCaustic 13s ease-in-out infinite alternate;mix-blend-mode:soft-light}
@keyframes gcCaustic{to{transform:translate3d(18px,10px,0);background-position:28px 14px}}
.gc-design-test .official-wrap{background:linear-gradient(180deg,rgba(238,251,255,.88),rgba(220,246,255,.82))!important;backdrop-filter:blur(.6px)}
.gc-design-test .hero-original{position:relative;overflow:hidden}
.gc-design-test .hero-original::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:-1px;height:26%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(212,247,255,.30) 35%,rgba(224,249,255,.92) 100%)}
.gc-design-test .official-wrap::before{background:linear-gradient(180deg,rgba(230,250,255,.95),rgba(230,250,255,0))!important;height:68px!important;top:-34px!important;filter:blur(7px)}
.gc-design-test .photo-section{position:relative}
.gc-design-test .photo-section::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(196,239,249,.06),rgba(15,69,113,.14));mix-blend-mode:multiply}

/* Real CSS cloud loops — intentionally repetitive like a ceiling video. */
.gc-cloud{position:absolute;left:-32vw;width:128px;height:34px;border-radius:999px;background:rgba(255,255,255,.76);filter:blur(.2px);opacity:var(--gc-cloud-opacity);box-shadow:34px -17px 0 8px rgba(255,255,255,.70),70px -7px 0 3px rgba(255,255,255,.66),92px 3px 0 -3px rgba(255,255,255,.58);animation:gcCloudLoop var(--cloud-speed,32s) linear infinite;pointer-events:auto;touch-action:pan-y;will-change:transform}
.gc-cloud::after{content:"";position:absolute;inset:-14px -18px;}
.gc-cloud:nth-child(2){top:20%;transform:scale(.72);--cloud-speed:39s;animation-delay:-18s;opacity:.55}.gc-cloud:nth-child(3){top:42%;transform:scale(1.08);--cloud-speed:34s;animation-delay:-8s;opacity:.45}.gc-cloud:nth-child(4){top:66%;transform:scale(.62);--cloud-speed:42s;animation-delay:-27s;opacity:.30}
@keyframes gcCloudLoop{from{translate:-20vw 0}to{translate:145vw 0}}
.gc-cloud.is-held{animation-play-state:paused!important}.gc-design-test.gc-sunset .gc-sky-layer{background:linear-gradient(180deg,rgba(255,211,190,.92),rgba(255,182,196,.65) 45%,rgba(98,147,191,.28))}.gc-design-test.gc-sunset .gc-cloud{background:rgba(255,235,218,.82);box-shadow:34px -17px 0 8px rgba(255,225,209,.76),70px -7px 0 3px rgba(255,216,205,.70),92px 3px 0 -3px rgba(255,225,219,.62)}

/* TODAY'S INFO: one sheet, not nested boxes. */
.gc-design-test .today-box{overflow:hidden}
.gc-design-test .today-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;border:0!important;background:rgba(255,255,255,.42);padding:4px 6px!important}
.gc-design-test .today-grid article{position:relative;min-height:104px!important;margin:0!important;padding:12px 8px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.gc-design-test .today-grid article:nth-child(odd){border-right:1px dotted #9bc8dc!important}.gc-design-test .today-grid article:nth-child(-n+2){border-bottom:1px dotted #9bc8dc!important}
.gc-design-test .today-grid article::before{position:absolute;left:8px;top:7px;color:#8bcce3;font-size:11px}.gc-design-test .today-water::before{content:"☁"}.gc-design-test .lucky-card::before{content:"☆";color:#e885b0}.gc-design-test .today-people::before{content:"♡";color:#e885b0}.gc-design-test .today-crowd::before{content:"♪"}
.gc-design-test .today-grid b{font-size:20px!important}.gc-design-test .today-grid span{font-size:9px!important}.gc-design-test .today-grid small{font-size:10px!important}
.gc-design-test .lucky-card{cursor:pointer}.gc-design-test .lucky-pop{position:absolute;left:50%;bottom:8px;z-index:5;transform:translate(-50%,6px);white-space:nowrap;padding:5px 8px;border:1px solid #eeb3cd;border-radius:8px;background:#fff;color:#d16696;font-size:10px;box-shadow:0 3px 8px rgba(91,116,140,.16);animation:gcPop .22s ease-out forwards}.gc-design-test .lucky-pop::after{content:"";position:absolute;left:50%;top:-5px;width:8px;height:8px;background:#fff;border-left:1px solid #eeb3cd;border-top:1px solid #eeb3cd;transform:translateX(-50%) rotate(45deg)}@keyframes gcPop{to{transform:translate(-50%,0)}}
.gc-ripple{position:absolute;z-index:4;width:14px;height:14px;border:1.5px solid rgba(113,190,221,.72);border-radius:50%;transform:translate(-50%,-50%) scale(.2);pointer-events:none;animation:gcRipple .82s ease-out forwards}@keyframes gcRipple{to{opacity:0;transform:translate(-50%,-50%) scale(8)}}

/* NEWS: reserve sensible date width and avoid ugly mid-word wraps. */
.gc-design-test .news-list > div{display:grid!important;grid-template-columns:max-content minmax(0,1fr)!important;column-gap:10px!important;padding:9px 10px!important}
.gc-design-test .news-list dt{position:static!important;white-space:nowrap;font-size:9px!important;padding-top:1px}.gc-design-test .news-list dd{min-width:0;word-break:normal!important;overflow-wrap:break-word!important;line-break:strict!important}
.gc-design-test .news-list > div:first-child dd::after{white-space:nowrap}

/* Bubbles appear only below the upper sky. */
.gc-bubble-layer{position:fixed;inset:0;z-index:7800;pointer-events:none;overflow:hidden}.gc-bubble{position:absolute;bottom:-30px;width:var(--bubble-size,12px);height:var(--bubble-size,12px);border:1px solid rgba(226,249,255,.78);border-radius:50%;background:radial-gradient(circle at 30% 27%,rgba(255,255,255,.65),rgba(214,246,255,.14) 45%,transparent 68%);box-shadow:inset -2px -2px 5px rgba(255,255,255,.22);pointer-events:auto;animation:gcBubbleRise var(--bubble-speed,8s) linear forwards;touch-action:manipulation}.gc-bubble.is-pop{animation:gcBubblePop .22s ease-out forwards!important}@keyframes gcBubbleRise{to{transform:translateY(-115vh) translateX(var(--bubble-drift,18px));opacity:.12}}@keyframes gcBubblePop{50%{transform:scale(1.55);opacity:.8}to{transform:scale(2);opacity:0}}
.gc-design-test.gc-deep-return .gc-cloud{animation:none!important;background:transparent!important;box-shadow:none!important;width:22px;height:22px;border:1px solid rgba(236,253,255,.85);border-radius:50%;filter:none;opacity:.75}

/* Tiny fluorescent-light interruption. */
.gc-flicker{position:fixed;inset:0;z-index:9000;pointer-events:none;background:rgba(2,15,39,.24);opacity:0;transition:opacity .06s linear}.gc-flicker.is-on{opacity:1}

@media(max-width:720px){
  .gc-design-test .official-wrap{padding-top:8px!important}
  .gc-design-test .hero-original::after{height:19%}
  .gc-design-test .today-grid article{min-height:96px!important;padding:11px 5px!important}
  .gc-design-test .news-list > div{grid-template-columns:6.7em minmax(0,1fr)!important;column-gap:7px!important;padding:9px 8px!important}
  .gc-design-test .news-list dt{font-size:8.5px!important}.gc-design-test .news-list dd{font-size:10.5px!important;line-height:1.55!important}
}
@media(max-width:360px){.gc-design-test .news-list > div{grid-template-columns:6.2em minmax(0,1fr)!important;column-gap:5px!important}.gc-design-test .today-grid article{min-height:92px!important}}
@media(prefers-reduced-motion:reduce){.gc-cloud,.gc-water-caustics,.gc-bubble{animation:none!important}.gc-bubble{display:none!important}.gc-flicker{display:none!important}.gc-ripple{animation-duration:.01ms!important}.gc-design-test.gc-sunset .gc-sky-layer{transition:none!important}}


/* v321 — AOZORA ARG test-only fixes requested in review */
.gc-design-test .ao-reset-wrap{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:auto;z-index:9300}
.gc-design-test .ao-reset-btn{appearance:none;min-height:44px;border:1px solid rgba(88,134,156,.48);border-radius:999px;background:rgba(247,253,255,.82);color:#668696;padding:5px 10px;font:9px/1.2 "DotGothic16",sans-serif;box-shadow:0 1px 4px rgba(30,68,86,.1);backdrop-filter:blur(3px);cursor:pointer;touch-action:manipulation}
.gc-design-test .ao-reset-btn:active{transform:translateY(1px)}

/* Keep RAINBOW TEST in a normal official-page column so the heading cannot collide with the previous block. */
.gc-design-test .aozora-system-wrap{position:relative;padding-top:34px!important;padding-bottom:42px!important;overflow:visible!important}
.gc-design-test .rainbow-test-section{width:100%;max-width:none;margin:0!important;padding-top:18px!important;overflow:visible!important;isolation:isolate}
.gc-design-test .rainbow-test-section .ao-system-id{position:relative;z-index:3;margin-bottom:9px!important;min-height:16px}
.gc-design-test #rainbowTestTitle{position:relative!important;z-index:2!important;display:block!important;margin:0 0 14px!important;min-height:42px!important;padding:10px 12px!important;line-height:1.35!important;overflow:visible!important;clear:both!important}
.gc-design-test .rainbow-test-section .arg-system-box{clear:both;margin-top:0!important}

/* Small independent entry to the sky puzzle inside the game-center game area. */
.gc-design-test .aozora-puzzle-entry{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;width:min(420px,calc(100% - 20px));margin:18px auto 2px;padding:8px 11px;border:1px dashed rgba(156,204,224,.7);background:rgba(246,252,255,.72);font:10px/1.5 "DotGothic16",sans-serif;color:#7296a8}
.gc-design-test .aozora-puzzle-entry a{color:#397f9e;font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* Fragment storage is deliberately quiet and sits low on the page. */
.gc-design-test .fragment-storage-section{margin-top:24px!important}
.gc-design-test .fragment-storage-box{border:1px solid #a4c9da;background:rgba(251,254,255,.82);padding:12px;color:#58798a;font:11px/1.65 "DotGothic16",sans-serif}
.gc-design-test .fragment-storage-count{display:flex;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px dotted #b8d4df}
.gc-design-test .fragment-storage-count strong{color:#2f789a;font-size:13px}
.gc-design-test .fragment-storage-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}
.gc-design-test .fragment-storage-slots span{display:block;padding:6px 7px;border:1px solid #c0d7e1;background:#f5fafc;color:#9aabb3;text-align:center}
.gc-design-test .fragment-storage-slots span.is-saved{border-color:#8fc6dd;background:#eaf8fe;color:#397d9b}

/* Blend the long vertical world instead of exposing hard section seams. */
.gc-design-test .official-wrap,.gc-design-test .photo-section,.gc-design-test .fake-footer,.gc-design-test .depth-intro,.gc-design-test .dream-room{position:relative}
.gc-design-test .official-wrap + .photo-section::before,
.gc-design-test .photo-section + .photo-section::before,
.gc-design-test .photo-section + .official-wrap::before,
.gc-design-test .aozora-system-wrap::before,
.gc-design-test .fake-footer::before,
.gc-design-test .depth-intro::before{
  content:"";position:absolute;left:0;right:0;top:-72px;height:74px;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(117,195,220,0),rgba(112,188,216,.34) 38%,rgba(226,248,255,.72) 100%);
}
.gc-design-test .photo-section + .photo-section::before{background:linear-gradient(180deg,rgba(24,79,122,0),rgba(45,118,157,.46) 48%,rgba(37,102,145,.24) 100%)}
.gc-design-test .fake-footer::before{background:linear-gradient(180deg,rgba(20,73,116,0),rgba(12,53,94,.74) 72%,#08274f 100%)}
.gc-design-test .depth-intro::before{background:linear-gradient(180deg,#08274f 0%,rgba(8,39,79,.75) 42%,rgba(19,77,117,0) 100%)}
.gc-design-test .after-footer-gap{background:linear-gradient(180deg,#08274f 0%,#0c3864 52%,#15517e 100%)!important;margin:0!important;min-height:clamp(90px,15vh,180px)!important}

@media(max-width:720px){
  .gc-design-test .aozora-system-wrap{padding-top:26px!important;padding-bottom:30px!important}
  .gc-design-test .fragment-storage-slots{grid-template-columns:1fr}
  .gc-design-test .official-wrap + .photo-section::before,.gc-design-test .photo-section + .photo-section::before,.gc-design-test .photo-section + .official-wrap::before,.gc-design-test .aozora-system-wrap::before,.gc-design-test .fake-footer::before,.gc-design-test .depth-intro::before{top:-52px;height:54px}
}

/* v323 — make the moving artificial-sky clouds clearly visible behind the page. */
body.gc-design-test{position:relative;isolation:isolate}
.gc-design-test .gc-sky-layer{z-index:0!important;opacity:1!important}
.gc-design-test .site-shell{position:relative;z-index:1;background:linear-gradient(180deg,rgba(232,251,255,.76) 0%,rgba(200,241,251,.72) 15%,rgba(145,217,236,.72) 34%,rgba(88,172,208,.74) 52%,rgba(46,120,170,.78) 69%,rgba(23,76,126,.82) 84%,rgba(8,39,79,.86) 100%)!important}
.gc-design-test{--gc-cloud-opacity:.94}
.gc-design-test .gc-cloud{width:154px;height:40px;background:rgba(255,255,255,.91);box-shadow:40px -19px 0 10px rgba(255,255,255,.86),82px -8px 0 5px rgba(255,255,255,.82),112px 4px 0 -2px rgba(255,255,255,.76);filter:blur(.1px)}
.gc-design-test .gc-cloud:nth-child(2){opacity:.82!important}
.gc-design-test .gc-cloud:nth-child(3){opacity:.72!important}
.gc-design-test .gc-cloud:nth-child(4){opacity:.62!important}
/* Keep cards readable while letting the moving sky remain perceptible. */
.gc-design-test .official-wrap{background:linear-gradient(180deg,rgba(238,251,255,.78),rgba(220,246,255,.72))!important}
.gc-design-test .gc-cloud:nth-child(5){transform:scale(.86);opacity:.68!important}
.gc-design-test .gc-cloud:nth-child(6){transform:scale(.68);opacity:.58!important}

/* v324 — open the page up: keep frames only where they help interaction or state. */
/* The broad content sections become transparent so the moving cloud layer can remain visible. */
.gc-design-test .section-box:not(.rainbow-test-section):not(.fragment-storage-section){
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.gc-design-test .section-box:not(.rainbow-test-section):not(.fragment-storage-section) > h1,
.gc-design-test .section-box:not(.rainbow-test-section):not(.fragment-storage-section) > h2{
  margin-bottom:14px!important;
  border:0!important;
  border-bottom:1px dotted rgba(109,163,188,.55)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-shadow:0 1px rgba(255,255,255,.75)!important;
}
/* Remove decorative corner symbols from unframed section headings. */
.gc-design-test .section-box:not(.rainbow-test-section):not(.fragment-storage-section) > h1::before,
.gc-design-test .section-box:not(.rainbow-test-section):not(.fragment-storage-section) > h1::after,
.gc-design-test .section-box:not(.rainbow-test-section):not(.fragment-storage-section) > h2::before,
.gc-design-test .section-box:not(.rainbow-test-section):not(.fragment-storage-section) > h2::after{display:none!important}

/* Keep actual controls/data objects framed: they should still read as machines, counters and cards. */
.gc-design-test .hours-board,
.gc-design-test .arcade-counter,
.gc-design-test .arg-system-box,
.gc-design-test .service-card,
.gc-design-test .machine-card,
.gc-design-test .prize-grid,
.gc-design-test .fragment-storage-box,
.gc-design-test .rainbow-test-section,
.gc-design-test .fragment-storage-section{position:relative}

/* Weather is mostly part of the sky; only reveal a machine-like box once restore controls are opened. */
.gc-design-test #aozoraWeather > .arg-system-box{
  border:0!important;background:transparent!important;box-shadow:none!important;padding-inline:0!important;
}
.gc-design-test #weatherRestorePanel{
  padding:12px!important;border:1px solid rgba(125,177,199,.68)!important;background:rgba(248,253,255,.76)!important;box-shadow:0 3px 10px rgba(33,83,107,.08)!important;
}

/* Let the game/photo floors breathe too; the cabinets and prize objects already provide structure. */
.gc-design-test .floor-panel{
  background:rgba(235,250,255,.18)!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.gc-design-test .floor-panel > h2{
  border:0!important;border-bottom:1px dotted rgba(204,235,246,.56)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.gc-design-test .floor-panel > h2::before,.gc-design-test .floor-panel > h2::after{display:none!important}

/* The sky behind the official blocks should be clearly present, not covered by a pale slab. */
.gc-design-test .official-wrap{
  background:linear-gradient(180deg,rgba(232,249,255,.26),rgba(215,243,252,.16))!important;
  backdrop-filter:none!important;
}
.gc-design-test .official-wrap::before,.gc-design-test .official-wrap::after{opacity:.42}
.gc-design-test .site-shell{
  background:linear-gradient(180deg,rgba(232,251,255,.38) 0%,rgba(200,241,251,.32) 15%,rgba(145,217,236,.30) 34%,rgba(88,172,208,.34) 52%,rgba(46,120,170,.42) 69%,rgba(23,76,126,.55) 84%,rgba(8,39,79,.68) 100%)!important;
}

/* Secondary boxes that were visually over-contained become simple open groups. */
.gc-design-test .news-list{border:0!important;border-radius:0!important;background:rgba(255,255,255,.18)!important;overflow:visible!important}
.gc-design-test .news-list > div{background:transparent!important}
.gc-design-test .staff-box{background:transparent!important}
.gc-design-test .pet-entry-copy > h2{border:0!important;border-bottom:1px dotted rgba(108,169,195,.55)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.gc-design-test .aozora-puzzle-entry{border:0!important;border-top:1px dotted rgba(202,235,246,.6)!important;border-bottom:1px dotted rgba(202,235,246,.6)!important;background:rgba(240,252,255,.12)!important}

@media(max-width:720px){
  .gc-design-test .section-box:not(.rainbow-test-section):not(.fragment-storage-section){padding-left:6px!important;padding-right:6px!important}
  .gc-design-test .section-box:not(.rainbow-test-section):not(.fragment-storage-section) > h1,
  .gc-design-test .section-box:not(.rainbow-test-section):not(.fragment-storage-section) > h2{margin-left:-6px!important;margin-right:-6px!important;padding-left:8px!important;padding-right:8px!important}
  .gc-design-test .floor-panel{padding-left:8px!important;padding-right:8px!important}
}

/* v325 — cache bump + top-control collision/tap-target fix. */

/* v326 — restore mobile GAME / PRIZE hall photographs.
   The seam-blending ::before rules introduced for the long page reused the
   same pseudo-element that the base mobile layout uses for the 16:9 hall photo,
   so the gradient background shorthand replaced the photograph. Keep the
   seam treatment elsewhere, but explicitly restore these two photo frames. */
@media(max-width:720px){
  .gc-design-test .game-floor::before{
    background-image:url("kirakira-gamecenter/hall-prize.webp")!important;
    background-position:center!important;
    background-size:100% 100%!important;
    background-repeat:no-repeat!important;
  }
  .gc-design-test .exchange-floor::before{
    background-image:url("kirakira-gamecenter/hall-exchange.webp")!important;
    background-position:center!important;
    background-size:100% 100%!important;
    background-repeat:no-repeat!important;
  }
}


/* v327 — make the Aozora Puzzle entry a real, easy-to-tap game button. */
.gc-design-test .aozora-puzzle-entry{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:min(360px,calc(100% - 28px))!important;
  margin:18px auto 4px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.gc-design-test .aozora-puzzle-kicker{
  color:rgba(224,247,255,.9)!important;
  font:9px/1.2 "DotGothic16",sans-serif!important;
  letter-spacing:.12em!important;
  text-shadow:0 1px 2px rgba(20,73,103,.35)!important;
}
.gc-design-test .aozora-puzzle-button{
  appearance:none!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  width:100%!important;
  min-height:52px!important;
  padding:10px 14px!important;
  border:2px solid rgba(255,255,255,.9)!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(244,253,255,.94),rgba(196,237,250,.9))!important;
  box-shadow:0 3px 0 rgba(78,145,177,.45),0 6px 16px rgba(19,78,112,.18),inset 0 1px 0 #fff!important;
  color:#2e7898!important;
  text-decoration:none!important;
  font-family:"DotGothic16",sans-serif!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
.gc-design-test .aozora-puzzle-button-title{
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
}
.gc-design-test .aozora-puzzle-button-sub{
  flex:0 0 auto!important;
  padding:4px 7px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.72)!important;
  color:#4e8da8!important;
  font-size:9px!important;
  line-height:1!important;
}
.gc-design-test .aozora-puzzle-button:hover{filter:brightness(1.025)!important}
.gc-design-test .aozora-puzzle-button:active{
  transform:translateY(2px)!important;
  box-shadow:0 1px 0 rgba(78,145,177,.45),0 3px 9px rgba(19,78,112,.15),inset 0 1px 0 #fff!important;
}
.gc-design-test .aozora-puzzle-button:focus-visible{
  outline:3px solid rgba(255,255,255,.95)!important;
  outline-offset:3px!important;
}
@media(max-width:480px){
  .gc-design-test .aozora-puzzle-entry{width:calc(100% - 34px)!important}
  .gc-design-test .aozora-puzzle-button{min-height:56px!important;padding:11px 13px!important}
  .gc-design-test .aozora-puzzle-button-title{font-size:14px!important}
}


/* =========================================================
   v328 — continuous artificial-sky -> seabed experience
   TEST PAGE ONLY.
   ========================================================= */

/* 2. Give the artificial sky room to breathe before the first information block. */
.gc-design-test .gc-sky-breath{
  position:relative;z-index:1;min-height:clamp(150px,24vh,280px);pointer-events:none;
  background:linear-gradient(180deg,rgba(226,249,255,.18),rgba(206,241,250,.04));
}
@media(max-width:720px){.gc-design-test .gc-sky-breath{min-height:clamp(125px,20vh,210px)}}

/* One continuous vertical world: bright artificial sky at the top, dark seabed at the end. */
body.gc-design-test{background:#bfeeff!important}
.gc-design-test .site-shell{
  background:linear-gradient(180deg,
    #dff8ff 0%,#c9f0fb 13%,#afe5f3 27%,#80cadf 42%,
    #4ca0c4 56%,#2675a5 70%,#134b7b 82%,#092f59 91%,#041b36 100%)!important;
}
.gc-design-test .official-wrap,.gc-design-test .lower-official,.gc-design-test .photo-section,.gc-design-test .fake-footer,.gc-design-test .depth-intro{
  background-color:transparent!important;
}
.gc-design-test .gc-sky-layer{
  background:linear-gradient(180deg,rgba(244,253,255,.88),rgba(188,232,245,.52) 52%,rgba(76,151,188,.22) 76%,rgba(8,55,101,.10))!important;
  opacity:calc(1 - (var(--gc-depth) * .72))!important;
  transition:opacity .12s linear,filter .12s linear;
  filter:saturate(calc(1 - (var(--gc-depth) * .18))) blur(calc(var(--gc-depth) * .35px));
}
.gc-design-test .gc-water-layer{
  background:linear-gradient(180deg,rgba(52,159,193,.04),rgba(6,64,111,.42) 58%,rgba(1,21,49,.74))!important;
  opacity:calc(var(--gc-depth) * .62)!important;mix-blend-mode:multiply!important;
}
.gc-design-test .gc-water-caustics{opacity:calc(var(--gc-depth) * .17)!important}

/* Random, thin clouds made from uneven translucent lobes rather than icon-like circles. */
.gc-design-test .gc-cloud{
  width:var(--cloud-w,180px)!important;height:var(--cloud-h,46px)!important;
  left:-42vw!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;
  opacity:calc(var(--gc-cloud-opacity) * var(--cloud-alpha,.68))!important;
  filter:blur(var(--cloud-blur,1.4px))!important;
  scale:var(--cloud-scale,1);transform:none!important;
  transition:opacity .45s ease,filter .45s ease;
}
.gc-design-test .gc-cloud::before,.gc-design-test .gc-cloud::after{content:none!important}
.gc-design-test .gc-cloud > span{
  position:absolute;display:block;border-radius:50%;pointer-events:none;
  left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  background:rgba(255,255,255,var(--a,.22));
  filter:blur(var(--b,2px));transform:rotate(var(--r,0deg));
}
.gc-design-test .gc-cloud.is-tapped{animation-play-state:paused!important;filter:blur(2.4px)!important}
.gc-design-test .gc-cloud.is-dissolving{opacity:.04!important;filter:blur(7px)!important}
@keyframes gcCloudTapSoft{0%,100%{translate:0 0}45%{translate:0 3px}}
.gc-design-test .gc-cloud.is-soft-tap{animation:gcCloudTapSoft .42s ease-out, gcCloudLoop var(--cloud-speed,42s) linear infinite!important}

/* Cloud-touch bubbles: their amount increases with depth. */
.gc-cloud-bubble{
  position:fixed;z-index:7850;pointer-events:none;border:1px solid rgba(238,253,255,.78);border-radius:50%;
  width:var(--s,10px);height:var(--s,10px);
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.62),rgba(216,248,255,.12) 48%,transparent 70%);
  animation:gcCloudBubbleRise var(--d,1.7s) ease-out forwards;
}
@keyframes gcCloudBubbleRise{to{opacity:0;transform:translate(var(--dx,0px),-90px) scale(.72)}}

/* 8. Clickable controls share one shallow physical shadow; disabled/static states stay flat. */
.gc-design-test :is(a.arg-btn,button.arg-btn,.play-link,.pet-entry-link,.aozora-restore-link,.aozora-puzzle-button,.machine-127-button,.old-nav a){
  box-shadow:0 3px 0 rgba(70,112,137,.34),0 5px 10px rgba(37,76,100,.12)!important;
  transition:transform .08s ease,box-shadow .08s ease,filter .12s ease!important;
}
.gc-design-test :is(a.arg-btn,button.arg-btn,.play-link,.pet-entry-link,.aozora-restore-link,.aozora-puzzle-button,.machine-127-button,.old-nav a):active{
  transform:translateY(2px)!important;box-shadow:0 1px 0 rgba(70,112,137,.34),0 2px 4px rgba(37,76,100,.10)!important;
}
.gc-design-test button:disabled,.gc-design-test [aria-disabled="true"]{box-shadow:none!important;transform:none!important;filter:saturate(.65)!important}

/* 11. Thursday restoration reads as a recovered record, not an abrupt symbol swap. */
.gc-design-test #weatherBroken.is-restoring{position:relative;overflow:hidden;animation:gcWeatherRecover .78s steps(4,end)}
.gc-design-test #weatherBroken.is-restoring::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.0) 0 3px,rgba(142,214,235,.34) 4px 5px);
  animation:gcWeatherScan .78s linear forwards;
}
@keyframes gcWeatherRecover{0%{opacity:.35;filter:contrast(1.8)}35%{opacity:1;translate:1px 0}55%{translate:-1px 0}100%{opacity:1;filter:none;translate:0 0}}
@keyframes gcWeatherScan{from{transform:translateY(-100%)}to{transform:translateY(100%);opacity:0}}

/* At the deepest end, content feels seated on the bottom rather than ending on a flat color. */
.gc-design-test .fake-footer{box-shadow:0 70px 110px rgba(0,12,29,.55)!important}

@media(prefers-reduced-motion:reduce){
  .gc-design-test .gc-cloud.is-soft-tap,.gc-cloud-bubble,.gc-design-test #weatherBroken.is-restoring{animation:none!important}
  .gc-design-test #weatherBroken.is-restoring::after{display:none!important}
}

/* =========================================================
   v333 — consolidated depth/layout layer (TEST PAGE ONLY)
   Replaces the v329-v332 patch stack with one predictable source
   for page depth, mobile hall photos, and fixed controls.
   ========================================================= */

/* Centralized depth palette. */
body.gc-design-test{
  --depth-sky-0:#eafcff;
  --depth-sky-1:#d7f6fc;
  --depth-water-1:#bcebf5;
  --depth-water-2:#8bd2e6;
  --depth-water-3:#56add0;
  --depth-water-4:#3284b2;
  --depth-deep-1:#1f6494;
  --depth-deep-2:#124a78;
  --depth-deep-3:#0a345d;
  --depth-bottom:#04192f;
  /* Anything outside <main> (safe-area / global return) must match the seabed,
     never flash back to sky blue at the very end of the document. */
  background:var(--depth-bottom)!important;
}

/* The ONLY non-photographic depth-color source. It runs continuously from
   the first pixel of the long page to the final pixel of <main>. */
.gc-design-test .site-shell{
  position:relative;
  isolation:isolate;
  background:linear-gradient(180deg,
    var(--depth-sky-0) 0%,
    var(--depth-sky-1) 8%,
    var(--depth-water-1) 18%,
    var(--depth-water-2) 31%,
    var(--depth-water-3) 45%,
    var(--depth-water-4) 58%,
    var(--depth-deep-1) 70%,
    var(--depth-deep-2) 81%,
    var(--depth-deep-3) 91%,
    var(--depth-bottom) 100%)!important;
  background-color:var(--depth-bottom)!important;
}

/* Structural sections do not paint their own full-width color slabs. Small
   cards/controls keep their own backgrounds, but the page itself stays one world. */
.gc-design-test .official-wrap,
.gc-design-test .lower-official,
.gc-design-test .aozora-system-wrap,
.gc-design-test .rainbow-test-section,
.gc-design-test .fake-footer,
.gc-design-test .loop-water{
  background-color:transparent!important;
  background-image:none!important;
  border-top-color:transparent!important;
  border-bottom-color:transparent!important;
}
.gc-design-test .official-wrap,
.gc-design-test .lower-official,
.gc-design-test .aozora-system-wrap,
.gc-design-test .rainbow-test-section,
.gc-design-test .fake-footer{
  box-shadow:none!important;
}

/* Kill old seam painters. Photo ::before is intentionally excluded because on
   phones it is the actual 16:9 hall photograph. */
.gc-design-test .official-wrap::before,
.gc-design-test .aozora-system-wrap::before,
.gc-design-test .fake-footer::before,
.gc-design-test .fake-footer::after,
.gc-design-test .loop-water::before,
.gc-design-test .loop-water::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}

/* Photos are allowed to be photographs, not depth-color panels. Their section
   color is transparent so the master gradient is visible immediately around them. */
.gc-design-test .photo-section{
  background-color:transparent!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
}
.gc-design-test .photo-section>.photo-shade{pointer-events:none}

/* Keep GAME / PRIZE hall photos deterministic on iPhone. The base mobile layout
   stores the actual image in ::before; never reuse that pseudo-element for seams. */
@media(max-width:720px){
  .gc-design-test .photo-section{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:calc(56.28vw + 14px) 10px 30px!important;
    background-image:none!important;
  }
  .gc-design-test .photo-section::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    left:0!important;
    top:0!important;
    width:100%!important;
    height:56.28vw!important;
    max-height:430px!important;
    background-position:center!important;
    background-size:100% 100%!important;
    background-repeat:no-repeat!important;
    pointer-events:none!important;
    opacity:1!important;
    filter:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .gc-design-test .game-floor::before{background-image:url("kirakira-gamecenter/hall-prize.webp")!important}
  .gc-design-test .exchange-floor::before{background-image:url("kirakira-gamecenter/hall-exchange.webp")!important}
  .gc-design-test .photo-section>.photo-shade{
    top:0!important;bottom:auto!important;
    height:56.28vw!important;max-height:430px!important;
  }
  .gc-design-test .photo-section>.floor-panel{margin:0 auto!important}
}

/* No layout height is used merely to fake depth. The tiny pause before the
   repeated entrance is atmospheric only, not another blank scene. */
.gc-design-test .loop-water{
  min-height:clamp(32px,6vh,64px)!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.gc-design-test .loop-water>div{
  min-height:inherit!important;
  opacity:.34!important;
  pointer-events:none!important;
}

/* Deep photographic rooms keep their photos, but only a very short edge fade.
   This avoids the old "thin photo strip" look while preventing a hard 1px seam. */
.gc-design-test .dream-room{
  margin-top:-1px!important;
  border:0!important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 1.5%,#000 98.5%,transparent 100%)!important;
  mask-image:linear-gradient(180deg,transparent 0%,#000 1.5%,#000 98.5%,transparent 100%)!important;
}
.gc-design-test .dream-room::before{
  background:rgba(3,29,54,calc(var(--gc-depth) * .16))!important;
  pointer-events:none!important;
}

/* Repeated entrance remains a photo and dissolves only at its very edges. */
.gc-design-test .hero-clone{
  background:transparent!important;
  overflow:hidden!important;
}
.gc-design-test .hero-clone::before{content:none!important;display:none!important}
.gc-design-test .hero-clone .hero-photo,
.gc-design-test .hero-clone .hero-vignette{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 2.5%,#000 97.5%,transparent 100%)!important;
  mask-image:linear-gradient(180deg,transparent 0%,#000 2.5%,#000 97.5%,transparent 100%)!important;
}

/* Scroll effects can darken the master gradient but can never substitute a
   second background band. */
.gc-design-test .gc-sky-layer,
.gc-design-test .gc-water-layer,
.gc-design-test .gc-water-caustics,
.gc-design-test .gc-bubble-layer,
.gc-design-test .gc-flicker{
  pointer-events:none!important;
}
.gc-design-test .gc-sky-layer{
  background:linear-gradient(180deg,rgba(246,254,255,.48),rgba(195,237,248,.14) 58%,transparent 100%)!important;
  opacity:calc(1 - (var(--gc-depth) * .94))!important;
}
.gc-design-test .gc-water-layer{
  background:#03172d!important;
  opacity:calc(var(--gc-depth) * .34)!important;
  mix-blend-mode:multiply!important;
}

/* The bottom becomes quieter instead of increasingly busy. JS still emits a few
   bubbles, but they fade with depth so the seabed feels still. */
.gc-design-test .gc-bubble-layer{opacity:calc(.95 - (var(--gc-depth) * .62))!important}

/* Fixed controls: retain a 44px hit target without visually occupying a large
   chunk of an iPhone screen. Reset stays left, sound stays right. */
.gc-design-test .kirakira-global-sound{
  min-width:0!important;
  min-height:44px!important;
  padding:4px 7px!important;
  font-size:10px!important;
  line-height:1.1!important;
  border-width:1px!important;
  box-shadow:0 1px 3px rgba(38,75,98,.16)!important;
  opacity:.88!important;
  touch-action:manipulation!important;
}
.gc-design-test .ao-reset-btn{
  min-height:44px!important;
  padding:4px 8px!important;
  font-size:9px!important;
  touch-action:manipulation!important;
}

/* Deep-page text that sits directly on the world background remains readable. */
.gc-design-test .fake-footer,
.gc-design-test .fake-footer a,
.gc-design-test .fake-footer small,
.gc-design-test .room-caption{
  color:#e4f8ff!important;
  text-shadow:0 1px 3px rgba(0,20,40,.72)!important;
}/* Motion/state safety. */
.gc-design-test :is(.gc-cloud,.gc-cloud-bubble,.gc-bubble){will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){
  .gc-design-test :is(.gc-cloud,.gc-cloud-bubble,.gc-bubble){will-change:auto}
}


/* ================================================================
   v341 — final atmosphere layer (TEST PAGE ONLY)
   Consolidates the old v334-v340 atmosphere patch stack into one source.
   The page still uses the single v333 depth gradient; this block only
   controls clouds, bubbles, lower-page legibility and the return blend.
   ================================================================ */
.gc-design-test{
  --gc-sky-film-opacity:1;
  --gc-thin-cloud-stage-opacity:.18;
  --gc-summer-cloud-stage-opacity:1;
  --gc-bubble-stage-opacity:0;
}

/* One visual atmosphere layer: above the master gradient, below content. */
.gc-design-test .site-shell{z-index:1!important}
.gc-design-test .site-shell > .gc-sky-layer{
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  opacity:var(--gc-sky-film-opacity)!important;
  mix-blend-mode:normal!important;
  filter:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035) 58%,transparent 100%)!important;
  transition:opacity .34s ease-out!important;
}
.gc-design-test .site-shell > :not(.gc-sky-layer){
  position:relative;
  z-index:1;
}

/* Clouds are decorative only. They never steal a tap or interrupt scrolling. */
.gc-design-test .site-shell > .gc-sky-layer .gc-cloud{
  display:block!important;
  visibility:visible!important;
  pointer-events:none!important;
  touch-action:auto!important;
  filter:blur(var(--cloud-blur,1px))!important;
  opacity:calc(var(--gc-cloud-opacity) * var(--cloud-alpha,.68) * var(--gc-thin-cloud-stage-opacity))!important;
  transition:opacity .34s ease-out,filter .34s ease-out!important;
}

/* Midsummer cumulonimbus dominate the opening view. Thin artificial-sky
   clouds are deliberately faint at first and emerge only as these towers
   begin to recede. */
.gc-design-test .site-shell > .gc-sky-layer .gc-cloud.gc-cumulonimbus{
  height:var(--cloud-h,125px)!important;
  border-radius:0!important;
  filter:blur(var(--cloud-blur,.35px))!important;
  opacity:calc(var(--gc-cloud-opacity) * var(--cloud-alpha,.9) * var(--gc-summer-cloud-stage-opacity))!important;
}
.gc-design-test .site-shell > .gc-sky-layer .gc-cloud.gc-cumulonimbus::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:3%!important;
  right:1%!important;
  bottom:4%!important;
  height:35%!important;
  border-radius:55% 48% 44% 52% / 74% 72% 31% 28%!important;
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(245,252,255,.64) 62%,rgba(210,234,244,.38))!important;
  box-shadow:0 8px 14px rgba(104,157,181,.08)!important;
  filter:blur(.25px)!important;
  pointer-events:none!important;
}
.gc-design-test .site-shell > .gc-sky-layer .gc-cloud.gc-cumulonimbus > span{
  background:linear-gradient(180deg,rgba(255,255,255,var(--a,.58)),rgba(242,251,255,calc(var(--a,.58) * .84)))!important;
  box-shadow:inset 0 -8px 12px rgba(139,185,204,.06)!important;
}
.gc-design-test.gc-depth-mid .gc-cloud.gc-cumulonimbus{filter:blur(1.1px)!important}

/* Water motion fades in gradually while sky motion fades out. */
.gc-design-test .gc-bubble-layer{
  opacity:var(--gc-bubble-stage-opacity)!important;
  transition:opacity .42s ease-in!important;
  pointer-events:none!important;
}
.gc-design-test .gc-bubble{pointer-events:none!important}

/* Let the master sky/water gradient show behind the 2008-style official site.
   Only individual cards keep opaque pale surfaces. */
.gc-design-test .official-wrap,
.gc-design-test .lower-official{
  background:rgba(226,247,255,.24)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.gc-design-test .official-wrap::before,
.gc-design-test .official-wrap::after{
  content:none!important;
  display:none!important;
}
.gc-design-test .official-wrap{
  padding-top:8px!important;
  border-top-width:0!important;
}
.gc-design-test .official-page{padding-top:0!important}
.gc-design-test .mini-header{margin-top:0!important}

/* Lower diary text sits directly on deep blue. */
.gc-design-test .lower-official .diary-box,
.gc-design-test .lower-official .diary-box p,
.gc-design-test .lower-official .diary-box article p{
  color:#f2fbff!important;
  text-shadow:0 1px 3px rgba(0,18,40,.72)!important;
}
.gc-design-test .lower-official .diary-box h2{
  color:#ffe2ef!important;
  text-shadow:0 1px 3px rgba(0,18,40,.72)!important;
}
.gc-design-test .lower-official .diary-box time{
  color:#ffb7d5!important;
  text-shadow:0 1px 3px rgba(0,18,40,.72)!important;
}
.gc-design-test .lower-official .diary-box a{
  color:#e8f7ff!important;
  text-decoration-color:rgba(232,247,255,.58)!important;
  text-shadow:0 1px 3px rgba(0,18,40,.72)!important;
}
.gc-design-test .lower-official .diary-box article{border-top-color:rgba(226,247,255,.42)!important}/* Explicitly neutralize old base height rules on this test page so an older
   declaration cannot resurrect giant blank gaps on iPhone Safari. */
.gc-design-test .photo-section{min-height:0!important;height:auto}
.gc-design-test .loop-water{min-height:clamp(32px,6vh,64px)!important;height:auto!important}
.gc-design-test .dream-room{min-height:0!important}

@media(max-width:720px){
  .gc-design-test .official-wrap{padding-top:4px!important}
}
@media(max-width:520px){
  .gc-design-test .site-shell > .gc-sky-layer .gc-cloud.gc-cumulonimbus{
    --cloud-scale:.82;
    max-width:82vw!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .gc-design-test :is(.gc-cloud,.gc-cloud-bubble,.gc-bubble){will-change:auto}
}


/* ================================================================
   v342 — cloud silhouette + bubble visibility correction (TEST ONLY)
   SVG silhouettes replace random CSS lobes; bubbles begin visibly before
   the halfway point and stay legible over both pale cards and deep water.
   ================================================================ */
.gc-design-test .site-shell > .gc-sky-layer .gc-cloud{
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.gc-design-test .site-shell > .gc-sky-layer .gc-cloud::before,
.gc-design-test .site-shell > .gc-sky-layer .gc-cloud::after,
.gc-design-test .site-shell > .gc-sky-layer .gc-cloud > span{
  content:none!important;
  display:none!important;
}
.gc-design-test .site-shell > .gc-sky-layer .gc-cloud > svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  pointer-events:none!important;
}
.gc-design-test .gc-cloud-svg-body{
  fill:rgba(255,255,255,.84);
  filter:drop-shadow(0 7px 7px rgba(84,142,170,.09));
}
.gc-design-test .gc-cloud-svg-base{fill:rgba(219,239,247,.44)}
.gc-design-test .gc-thin-cloud-svg{fill:rgba(255,255,255,.47)}
.gc-design-test .site-shell > .gc-sky-layer .gc-cloud.gc-cumulonimbus{
  width:var(--cloud-w,320px)!important;
  height:var(--cloud-h,150px)!important;
}
.gc-design-test .site-shell > .gc-sky-layer .gc-cloud.gc-thin-cloud{
  width:var(--cloud-w,210px)!important;
  height:var(--cloud-h,62px)!important;
}

/* Bubble layer must remain visibly above the atmosphere films. It is still
   pointer-events:none, so no button, link or scroll gesture is intercepted. */
.gc-design-test .gc-bubble-layer{
  z-index:7900!important;
  opacity:var(--gc-bubble-stage-opacity)!important;
  mix-blend-mode:screen!important;
}
.gc-design-test .gc-bubble{
  border:1.25px solid rgba(235,252,255,.92)!important;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.86) 0 11%,rgba(220,249,255,.22) 34%,rgba(180,231,246,.08) 54%,transparent 70%)!important;
  box-shadow:inset -2px -2px 5px rgba(255,255,255,.28),0 0 5px rgba(225,250,255,.18)!important;
  opacity:.86;
}
@media(max-width:720px){
  .gc-design-test .site-shell > .gc-sky-layer .gc-cloud.gc-cumulonimbus{
    width:clamp(250px,78vw,330px)!important;
    height:auto!important;
    aspect-ratio:380/180!important;
  }
}

/* v343 — improve readability for NEWS and the KIRAKIRA STAMP CARD only. */
.gc-design-test .news-box,
.gc-design-test .stamp-box{
  background:rgba(255,255,255,.58)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:12px!important;
  box-shadow:0 4px 16px rgba(37,92,126,.08)!important;
  padding-left:clamp(12px,2.2vw,22px)!important;
  padding-right:clamp(12px,2.2vw,22px)!important;
}
.gc-design-test .news-box > h2,
.gc-design-test .stamp-box > h2{
  margin-left:0!important;
  margin-right:0!important;
}
.gc-design-test .news-list{
  background:rgba(255,255,255,.30)!important;
}
@media(max-width:720px){
  .gc-design-test .news-box,
  .gc-design-test .stamp-box{
    padding-left:10px!important;
    padding-right:10px!important;
  }
}


/* ================================================================
   v419 — TEST ONLY scroll pop reveal
   Small, playful "pyoko" entrances as each block enters the viewport.
   Layout, hit areas and final positions are unchanged.
   ================================================================ */
.gc-design-test .gc-pop-reveal{
  --gc-pop-x:0px;
  --gc-pop-delay:0ms;
  opacity:0;
  transform:translate3d(var(--gc-pop-x),30px,0) scale(.94);
  transform-origin:50% 88%;
  will-change:transform,opacity;
}
.gc-design-test .gc-pop-reveal.gc-pop-section{
  transform:translate3d(0,36px,0) scale(.965);
}
.gc-design-test .gc-pop-reveal.gc-pop-in{
  animation:gcPopIn .62s cubic-bezier(.2,.86,.27,1.14) var(--gc-pop-delay) both;
}
.gc-design-test .gc-pop-reveal.gc-pop-section.gc-pop-in{
  animation-name:gcPopSectionIn;
  animation-duration:.68s;
}
@keyframes gcPopIn{
  0%{opacity:0;transform:translate3d(var(--gc-pop-x),30px,0) scale(.94)}
  58%{opacity:1;transform:translate3d(0,-7px,0) scale(1.035)}
  80%{opacity:1;transform:translate3d(0,3px,0) scale(.992)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes gcPopSectionIn{
  0%{opacity:0;transform:translate3d(0,36px,0) scale(.965)}
  62%{opacity:1;transform:translate3d(0,-6px,0) scale(1.018)}
  82%{opacity:1;transform:translate3d(0,2px,0) scale(.997)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
.gc-design-test .gc-pop-card:nth-child(3n+2){--gc-pop-delay:65ms}
.gc-design-test .gc-pop-card:nth-child(3n){--gc-pop-delay:130ms}
@media(max-width:520px){
  .gc-design-test .gc-pop-reveal{transform:translate3d(var(--gc-pop-x),25px,0) scale(.95)}
  .gc-design-test .gc-pop-reveal.gc-pop-section{transform:translate3d(0,30px,0) scale(.972)}
}
@media(prefers-reduced-motion:reduce){
  .gc-design-test .gc-pop-reveal,
  .gc-design-test .gc-pop-reveal.gc-pop-section,
  .gc-design-test .gc-pop-reveal.gc-pop-in{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
    will-change:auto!important;
  }
}


/* ================================================================
   v421 — TEST ONLY falling DEN coin
   The DEN medal falls from above, bounces twice, then rolls away.
   It is visual-only and never changes layout or hit areas.
   ================================================================ */
.gc-design-test .gc-scroll-den-coin{
  --gc-coin-x:50vw;
  --gc-coin-floor-gap:11vh;
  --gc-coin-size:44px;
  --gc-coin-roll-x:32vw;
  position:fixed!important;
  z-index:9400!important;
  left:var(--gc-coin-x);
  top:calc(-1 * var(--gc-coin-size) - 22px);
  width:var(--gc-coin-size)!important;
  height:var(--gc-coin-size)!important;
  object-fit:contain!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  filter:drop-shadow(0 4px 2px rgba(31,57,78,.28));
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
.gc-design-test .gc-scroll-den-coin.roll-right{
  animation:gcDenDropRollRight 2.05s cubic-bezier(.18,.70,.25,1) both;
}
.gc-design-test .gc-scroll-den-coin.roll-left{
  animation:gcDenDropRollLeft 2.05s cubic-bezier(.18,.70,.25,1) both;
}
@keyframes gcDenDropRollRight{
  0%{opacity:0;transform:translate3d(0,-18px,0) rotate(0deg) scale(.92)}
  5%{opacity:1}
  43%{transform:translate3d(0,calc(100vh - var(--gc-coin-floor-gap) - var(--gc-coin-size)),0) rotate(300deg) scale(1.04,.94)}
  53%{transform:translate3d(6px,calc(100vh - var(--gc-coin-floor-gap) - var(--gc-coin-size) - 58px),0) rotate(390deg) scale(.98)}
  62%{transform:translate3d(12px,calc(100vh - var(--gc-coin-floor-gap) - var(--gc-coin-size)),0) rotate(470deg) scale(1.03,.96)}
  70%{transform:translate3d(18px,calc(100vh - var(--gc-coin-floor-gap) - var(--gc-coin-size) - 23px),0) rotate(540deg)}
  77%{opacity:1;transform:translate3d(24px,calc(100vh - var(--gc-coin-floor-gap) - var(--gc-coin-size)),0) rotate(610deg)}
  100%{opacity:0;transform:translate3d(var(--gc-coin-roll-x),calc(100vh - var(--gc-coin-floor-gap) - var(--gc-coin-size)),0) rotate(980deg) scale(.96)}
}
@keyframes gcDenDropRollLeft{
  0%{opacity:0;transform:translate3d(0,-18px,0) rotate(0deg) scale(.92)}
  5%{opacity:1}
  43%{transform:translate3d(0,calc(100vh - var(--gc-coin-floor-gap) - var(--gc-coin-size)),0) rotate(-300deg) scale(1.04,.94)}
  53%{transform:translate3d(-6px,calc(100vh - var(--gc-coin-floor-gap) - var(--gc-coin-size) - 58px),0) rotate(-390deg) scale(.98)}
  62%{transform:translate3d(-12px,calc(100vh - var(--gc-coin-floor-gap) - var(--gc-coin-size)),0) rotate(-470deg) scale(1.03,.96)}
  70%{transform:translate3d(-18px,calc(100vh - var(--gc-coin-floor-gap) - var(--gc-coin-size) - 23px),0) rotate(-540deg)}
  77%{opacity:1;transform:translate3d(-24px,calc(100vh - var(--gc-coin-floor-gap) - var(--gc-coin-size)),0) rotate(-610deg)}
  100%{opacity:0;transform:translate3d(var(--gc-coin-roll-x),calc(100vh - var(--gc-coin-floor-gap) - var(--gc-coin-size)),0) rotate(-980deg) scale(.96)}
}
@media(max-width:520px){
  .gc-design-test .gc-scroll-den-coin{--gc-coin-size:42px}
}
@media(prefers-reduced-motion:reduce){
  .gc-design-test .gc-scroll-den-coin{display:none!important;animation:none!important}
}


/* v421 — PLAY PNGs are transparent image buttons. Never draw a rectangular
   shadow/focus panel on the anchor hit-box; keep the visual shadow on the PNG. */
.gc-design-test .play-link,
.gc-design-test .play-link:hover,
.gc-design-test .play-link:active,
.gc-design-test .play-link:focus,
.gc-design-test .play-link:focus-visible{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  border-radius:0!important;
  -webkit-tap-highlight-color:transparent!important;
}
.gc-design-test .play-link img{
  filter:drop-shadow(0 3px 0 rgba(78,99,145,.22)) drop-shadow(0 5px 8px rgba(37,76,100,.10))!important;
}
.gc-design-test .play-link:active img{
  transform:translateY(2px)!important;
  filter:drop-shadow(0 1px 0 rgba(78,99,145,.22))!important;
}

/* v423 — くもくもわたあめ：テストゲームセンター用の筐体カード。 */
.gc-design-test .kumokumo-game-card{
  border-color:#b8a7dc!important;
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.92) 0 10%,transparent 11%),
    linear-gradient(180deg,#fffaff 0%,#fbeaff 46%,#e7f8ff 100%)!important;
}
.gc-design-test .kumokumo-game-card::before{
  content:"NEW GAME";
  border-color:#d89bd0;
  background:#fff0fb;
  color:#a95b9e;
}
.gc-design-test .kumokumo-game-machine{
  width:min(220px,94%);
  height:255px;
  object-fit:contain;
  image-rendering:auto!important;
  border-radius:8px;
  background:#fff;
}
.gc-design-test .kumokumo-mascot-area{
  display:grid;
  justify-items:center;
  width:min(250px,100%);
  margin:3px auto 10px;
}
.gc-design-test .kumokumo-speech{
  position:relative;
  z-index:1;
  width:min(230px,96%);
  margin:0 auto -3px;
  padding:10px 11px 11px;
  border:2px solid #8fc8e9;
  border-radius:18px;
  background:linear-gradient(180deg,#fff 0%,#fff4fb 100%);
  box-shadow:0 3px 0 rgba(94,133,188,.18),inset 0 1px 0 #fff;
  color:#52669a;
  font:700 clamp(15px,2vw,18px)/1.45 "DotGothic16",sans-serif;
  text-align:center;
  letter-spacing:.02em;
}
.gc-design-test .kumokumo-speech::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  width:16px;
  height:16px;
  border-right:2px solid #8fc8e9;
  border-bottom:2px solid #8fc8e9;
  background:#fff4fb;
  transform:translateX(-50%) rotate(45deg);
}
.gc-design-test .kumokumo-cloud-button{
  position:relative;
  z-index:0;
  display:grid;
  place-items:center;
  width:126px;
  height:126px;
  margin:0;
  padding:0;
  appearance:none;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 7px 12px rgba(87,125,170,.13);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.gc-design-test .kumokumo-cloud-button:focus-visible{
  outline:3px solid rgba(225,105,184,.7);
  outline-offset:3px;
}
.gc-design-test .kumokumo-cloud-button img{
  display:block;
  width:126px;
  height:126px;
  object-fit:cover;
  border-radius:50%;
  image-rendering:auto;
  transform-origin:50% 70%;
  user-select:none;
  -webkit-user-drag:none;
}
.gc-design-test .kumokumo-cloud-button.is-squish img{
  animation:kumokumo-puni .42s cubic-bezier(.3,.8,.3,1);
}
.gc-design-test .kumokumo-cloud-button.is-crying{
  box-shadow:0 5px 12px rgba(87,125,170,.10);
}
@keyframes kumokumo-puni{
  0%{transform:scale(1)}
  24%{transform:scale(1.12,.82) translateY(6px)}
  48%{transform:scale(.91,1.13) translateY(-3px)}
  72%{transform:scale(1.06,.94) translateY(2px)}
  100%{transform:scale(1)}
}
.gc-design-test .kumokumo-title-button{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(255px,94%);
  min-height:50px;
  margin:2px auto 9px;
  padding:8px 18px 10px;
  border:3px solid #6983cb;
  border-radius:999px;
  background:
    radial-gradient(circle at 18% 24%,#fff 0 3px,transparent 4px),
    radial-gradient(circle at 84% 68%,#fff 0 2px,transparent 3px),
    linear-gradient(180deg,#fffdfd 0 7%,#ffd7ef 8% 48%,#d9f5ff 49% 100%);
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -2px 0 rgba(255,255,255,.46),
    0 4px 0 #8f9dd4,
    0 7px 12px rgba(76,91,154,.22);
  color:#5664a4;
  text-decoration:none;
  font:700 clamp(16px,2.15vw,21px)/1.15 "DotGothic16",sans-serif;
  letter-spacing:.055em;
  text-shadow:1px 1px 0 #fff;
  -webkit-tap-highlight-color:transparent;
  transition:transform .08s ease,box-shadow .08s ease,filter .12s ease;
}
.gc-design-test .kumokumo-title-button::before,
.gc-design-test .kumokumo-title-button::after{
  position:absolute;
  top:50%;
  color:#f5c84e;
  font-size:16px;
  line-height:1;
  transform:translateY(-50%);
}
.gc-design-test .kumokumo-title-button::before{content:"★";left:9px}
.gc-design-test .kumokumo-title-button::after{content:"☆";right:9px;color:#ee86c1}
.gc-design-test .kumokumo-title-button:hover{filter:brightness(1.035)}
.gc-design-test .kumokumo-title-button:active{
  transform:translateY(4px) scale(.985);
  box-shadow:inset 0 2px 5px rgba(72,82,140,.18),0 1px 0 #8f9dd4;
}
.gc-design-test .kumokumo-title-button:focus-visible{
  outline:3px solid rgba(226,93,155,.72);
  outline-offset:3px;
}
.gc-design-test .kumokumo-play-link{
  width:150px;
  max-width:82%;
}
.gc-design-test .kumokumo-play-link img{
  image-rendering:pixelated;
}
@media(max-width:720px){
  .gc-design-test .kumokumo-game-machine{height:250px;width:min(260px,92%)}
  .gc-design-test .kumokumo-speech{font-size:18px;width:min(270px,94%)}
  .gc-design-test .kumokumo-cloud-button,
  .gc-design-test .kumokumo-cloud-button img{width:138px;height:138px}
  .gc-design-test .kumokumo-title-button{width:min(290px,94%);font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .gc-design-test .kumokumo-cloud-button.is-squish img{animation:none}
  .gc-design-test .kumokumo-title-button{transition:none}
}

/* v424 — くもくもわたあめ素材の透過表示＋狭幅安全策。
   画像自体の白背景を除去したため、CSS側でも白い台紙を描かない。 */
.gc-design-test .kumokumo-game-card{min-width:0}
.gc-design-test .kumokumo-game-machine{
  max-width:100%;
  background:transparent!important;
}
.gc-design-test .kumokumo-cloud-button{
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible;
}
.gc-design-test .kumokumo-cloud-button img{
  object-fit:contain!important;
  border-radius:0!important;
}
.gc-design-test .kumokumo-play-link img{max-width:100%;height:auto}
@media(max-width:430px){
  .gc-design-test .kumokumo-game-machine{width:min(250px,92%);height:auto;aspect-ratio:1/1}
  .gc-design-test .kumokumo-mascot-area{max-width:100%}
  .gc-design-test .kumokumo-speech{max-width:94%;overflow-wrap:anywhere}
  .gc-design-test .kumokumo-title-button{max-width:94%;min-width:0}
}
@media (orientation:landscape) and (max-height:700px) and (max-width:1100px){
  .gc-design-test .kumokumo-game-machine{height:min(210px,46vh);width:auto;max-width:92%}
  .gc-design-test .kumokumo-cloud-button,
  .gc-design-test .kumokumo-cloud-button img{width:112px;height:112px}
  .gc-design-test .kumokumo-speech{font-size:16px;padding-block:8px}
}


/* v439 — PLAY / あそぶ image buttons: show only the artwork itself.
   No rectangular anchor/image backing, border, shadow, focus box or padding. */
.gc-design-test .play-link,
.gc-design-test .play-link:hover,
.gc-design-test .play-link:active,
.gc-design-test .play-link:focus,
.gc-design-test .play-link:focus-visible,
.gc-design-test .kumokumo-play-link,
.gc-design-test .kumokumo-play-link:hover,
.gc-design-test .kumokumo-play-link:active,
.gc-design-test .kumokumo-play-link:focus,
.gc-design-test .kumokumo-play-link:focus-visible{
  display:block!important;
  padding:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  background:none!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:visible!important;
  -webkit-tap-highlight-color:transparent!important;
}
.gc-design-test .play-link img,
.gc-design-test .kumokumo-play-link img{
  display:block!important;
  margin:0 auto!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
}
.gc-design-test .play-link:active img,
.gc-design-test .kumokumo-play-link:active img{
  transform:translateY(2px)!important;
  filter:none!important;
  box-shadow:none!important;
}

/* v448 — PLAY / あそぶ再発防止。
   画像ボタンの外接矩形を一切描画せず、本番・管理プレビューで同一仕様に固定する。 */
.gc-design-test .play-link,
.gc-design-test .play-link:hover,
.gc-design-test .play-link:active,
.gc-design-test .play-link:focus,
.gc-design-test .play-link:focus-visible,
.gc-design-test .kumokumo-play-link,
.gc-design-test .kumokumo-play-link:hover,
.gc-design-test .kumokumo-play-link:active,
.gc-design-test .kumokumo-play-link:focus,
.gc-design-test .kumokumo-play-link:focus-visible{
  display:block!important;
  padding:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:visible!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
.gc-design-test .play-link img,
.gc-design-test .kumokumo-play-link img{
  display:block!important;
  margin:0 auto!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
}
.gc-design-test .play-link:active img,
.gc-design-test .kumokumo-play-link:active img{
  transform:translateY(2px)!important;
  filter:none!important;
  box-shadow:none!important;
}


/* v469 — definitive PLAY / あそぶ regression fix.
   Previous fixes were cache-stuck at ?v=448 / ?v=423 and some mobile rules could win later.
   Keep the clickable artwork itself only; no rectangular backing/pill is painted by the anchor. */
.gc-design-test a.play-link,
.gc-design-test a.play-link:link,
.gc-design-test a.play-link:visited,
.gc-design-test a.play-link:hover,
.gc-design-test a.play-link:active,
.gc-design-test a.play-link:focus,
.gc-design-test a.kumokumo-play-link,
.gc-design-test a.kumokumo-play-link:link,
.gc-design-test a.kumokumo-play-link:visited,
.gc-design-test a.kumokumo-play-link:hover,
.gc-design-test a.kumokumo-play-link:active,
.gc-design-test a.kumokumo-play-link:focus{
  display:block!important;
  width:fit-content!important;
  max-width:82%!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:5px auto 0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:visible!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
.gc-design-test a.play-link > img,
.gc-design-test a.kumokumo-play-link > img{
  display:block!important;
  width:auto!important;
  max-width:150px!important;
  height:auto!important;
  aspect-ratio:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
.gc-design-test .aozora-puzzle-button-sub{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}