/* WS-003 | motion-rich cinematic surface V1 | 2026-10-08
   Restores crystal particles without intersecting ROUTE cards.
   Uses official artwork and optional source-derived motion loops.
   Reduced motion, data saver, and responsive readability always win. */
:root{--motion-gold:rgba(243,210,129,.9);--motion-cyan:rgba(111,227,245,.8);--sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif}
.map-origin{position:relative;isolation:isolate}
.map-origin::before{content:"";position:absolute;left:50%;top:-20px;width:180px;height:180px;transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(244,202,89,.18) 0 14%,transparent 48%),conic-gradient(from 0deg,transparent 0 8%,rgba(117,231,236,.18) 10%,transparent 13% 30%,rgba(253,205,94,.25) 34%,transparent 38% 60%,rgba(117,231,236,.16) 63%,transparent 68%);filter:blur(8px);animation:energy-halo 7s linear infinite}
.map-origin::after{content:"";position:absolute;left:50%;top:-58px;width:180px;height:240px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(circle at 25% 52%,#f2d18ad9 0 2px,transparent 4px),radial-gradient(circle at 70% 37%,#7de3ffe0 0 2px,transparent 4px),radial-gradient(circle at 45% 20%,#fff6ca 0 1px,transparent 3px),radial-gradient(circle at 82% 70%,#f9df9980 0 2px,transparent 5px),radial-gradient(circle at 13% 80%,#83dfff 0 2px,transparent 4px);background-size:100% 100%;filter:drop-shadow(0 0 8px #f5d08b);animation:particle-rise 4.8s ease-in-out infinite alternate;z-index:3}
.map-origin .crystal{animation:crystal-pulse 2.4s ease-in-out infinite,crystal-float 5s ease-in-out infinite alternate;filter:drop-shadow(0 0 20px #f3d27cb8)}
.route-select .world-map .route-lines{display:none!important}
@keyframes energy-halo{0%{transform:translateX(-50%) rotate(0);opacity:.55}50%{opacity:1}100%{transform:translateX(-50%) rotate(360deg);opacity:.55}}
@keyframes particle-rise{0%{opacity:.35;transform:translate(-50%,16px) scale(.86)}100%{opacity:1;transform:translate(-50%,-13px) scale(1.09)}}
@keyframes crystal-float{from{transform:translateY(5px)}to{transform:translateY(-8px)}}
@keyframes world-drift{0%{transform:scale(1.01) translate3d(-.8%,0,0)}50%{transform:scale(1.055) translate3d(.7%,-.7%,0)}100%{transform:scale(1.02) translate3d(-.4%,-.3%,0)}}
@keyframes glitter-tide{from{background-position:0 0,50px 20px;opacity:.18}to{background-position:120px -110px,-160px -30px;opacity:.6}}
@keyframes glint{0%,100%{opacity:.3;filter:brightness(1)}50%{opacity:.9;filter:brightness(1.6)}}
@keyframes aura-flow{0%,100%{opacity:.15;transform:translate3d(0,0,0)}50%{opacity:.5;transform:translate3d(14px,-28px,0)}}
@keyframes title-light{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.business-world .business-art,.individual-world .individual-art{animation:world-drift 21s ease-in-out infinite alternate;transform-origin:50% 40%;will-change:transform}
.world-motion-video{object-fit:cover;object-position:center 46%;pointer-events:none;position:absolute;left:0;top:0;width:100%;height:760px;z-index:-4;opacity:0;transition:opacity 1.2s ease;filter:none}
.world-motion-video.is-live{opacity:1}
.individual-world .world-motion-video{height:820px;filter:none}
.individual-world .scene-stars,.individual-world .scene-stars::after{display:none}
.business-world::before{content:"";position:absolute;inset:0 0 auto;height:760px;pointer-events:none;z-index:-1;opacity:0}
.world-section .scene-status i,.strategy-map .stage-node,.quest-map .quest-orb{animation:glint 5s ease-in-out infinite alternate}
.world-section .area-banner b{animation:glint 6s ease-in-out infinite alternate}
.social-pickup .section-heading h2,.activity-media .section-heading h2,.social-pickup-copy h3{font-weight:600!important;letter-spacing:-.02em;text-shadow:none}
.home-contact-teaser{position:relative;width:min(1180px,calc(100% - 42px));margin:68px auto 90px;padding:clamp(36px,7vw,85px);background:transparent;border:0;overflow:hidden}
.home-contact-teaser::after{content:"";position:absolute;pointer-events:none;right:-90px;top:-70px;width:320px;height:320px;border:1px solid #82dcff27;border-radius:50%;box-shadow:0 0 0 44px #82dcff09,0 0 0 88px #f5d18a06;animation:energy-halo 20s linear infinite}
.home-contact-teaser h2{font-size:clamp(1.65rem,3vw,2.55rem);line-height:1.35;max-width:18em;font-weight:600;letter-spacing:-.02em;margin:12px 0 20px}
.home-contact-teaser>p:not(.area-label){max-width:680px;color:#c6d6e1;line-height:1.8;margin-bottom:28px}
.info-page .contact-world,.info-page .privacy{max-width:1180px;margin:0 auto;padding-top:80px;padding-bottom:110px}
.info-page .privacy{min-height:80vh}
.info-page .contact-world{min-height:82vh}
.motion-capable .motion-enter{opacity:.7;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.motion-capable .motion-enter.motion-visible{opacity:1;transform:none}
.button-primary,.button-gold,.header-cta{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.button-primary:hover,.button-gold:hover,.header-cta:hover{transform:translateY(-3px);box-shadow:0 0 20px #83dbfa30}
@media(max-width:900px){
 .world-motion-video{height:640px}
 .individual-world .world-motion-video,.individual-world .scene-stars{height:650px}
 .map-origin::after{width:120px;height:160px;top:-20px}
 .map-origin::before{width:130px;height:130px}
 .home-contact-teaser{margin:44px auto 64px;padding:32px 22px}
 .info-page .contact-world,.info-page .privacy{padding-top:40px;padding-bottom:60px}
 .social-pickup .section-heading h2{font-weight:600!important}
}
@media(prefers-reduced-motion:reduce){
 .map-origin::before,.map-origin::after,.map-origin .crystal,
 .business-world .business-art,.individual-world .individual-art,
 .individual-world .scene-stars,.individual-world .scene-stars::after,
 .business-world::before,.world-section .scene-status i,
 .strategy-map .stage-node,.quest-map .quest-orb,.world-section .area-banner b,
 .home-contact-teaser::after{animation:none!important;transform:none!important}
 .motion-capable .motion-enter{opacity:1;transform:none}
 .world-motion-video{display:none!important}
}

/* Design pass 2026-10-08: one type scale, night surfaces, no cheap glitter. */
h1,h2,h3,h4{font-weight:600!important;letter-spacing:-.02em;line-height:1.28}
.hero h1,.section-heading h2,.world-copy h2,.home-contact-teaser h2,.contact-copy h2,.privacy h2,.profile-world h2,.line-product-copy h3{
  word-break:keep-all;line-break:strict;text-wrap:balance
}
.phrase{display:inline}
.area-label,.ui-label,.button,.header-cta,.log-tabs .active,.owned-video-cta,.line-product-points strong,.social-pickup-copy>span,.route-badge,.brand-word{font-weight:600!important}
.logs-world{color:#e7eef3;background:#061522}
.logs-world .area-label{color:#d8c993}
.logs-world .section-heading h2{color:#f5f0e3}
.logs-world .section-heading>p:last-child{color:#adbbc3}
.log-console{background:rgba(7,22,34,.55);border:1px solid rgba(169,228,247,.14);box-shadow:none}
.log-tabs{border-bottom-color:rgba(169,228,247,.14)}
.log-tabs .active{font-weight:600!important}
.log-entry{border-bottom-color:rgba(169,228,247,.12)}
.log-index{border-right-color:rgba(169,228,247,.12)}
.log-index span{color:#9eb0bb;font-weight:500}
.log-content h3{color:#f5f0e3}
.log-content>p,.log-route span{color:#c5d4de}
.log-meta{color:#8ea0ab}
.log-meta b{font-weight:600}
.privacy{color:#e7eef3;background:#061522}
.privacy-head{border-bottom-color:rgba(245,240,227,.22)}
.privacy .area-label{color:#d8c993}
.privacy h2{color:#f5f0e3}
.privacy h2 small,.privacy-head>span,.privacy-intro,.privacy-list p{color:#c5d4de}
.privacy-list,.privacy-list li{border-color:rgba(169,228,247,.16)}
.privacy-list h3{color:#f5f0e3}
.contact-form,.form-success{background:transparent;border:0;box-shadow:none;padding:8px 0 0}
.contact-form .panel-corners{display:none}
.contact-form input,.contact-form select,.contact-form textarea{background:rgba(2,10,16,.45);border:1px solid rgba(169,228,247,.22)}
.vertical-reel,.social-video-feature,.social-embed-panel{border-color:rgba(169,228,247,.12);box-shadow:none}
.line-product-points article{background:transparent;border-color:rgba(169,228,247,.14)}
.status-screen{box-shadow:none;border-color:rgba(240,216,142,.28)}
.business-art,.individual-art{filter:none!important}
.business-world .world-shade{background:linear-gradient(180deg,rgba(4,22,36,.04) 0,rgba(5,32,48,.12) 58%,#061522 100%),linear-gradient(90deg,rgba(3,19,31,.38),rgba(4,26,38,0) 52%)}
.individual-world .world-shade{background:linear-gradient(180deg,rgba(6,31,43,0) 0,rgba(7,39,48,.1) 62%,#061522 100%),linear-gradient(90deg,rgba(5,29,39,.34),rgba(4,30,39,0) 48%)}
.world-copy h2{text-shadow:0 2px 18px rgba(0,0,0,.72)}

/* Adopted 2026-10-08: one night, one grid, two line roles, solid header. */
body{background:#061522}
.profile-world,.logs-world,.privacy,.contact-world{background:#061522!important;position:relative}
.profile-world::before,.logs-world::before,.privacy::before,.contact-world::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;animation:none!important;
  background-image:linear-gradient(rgba(169,228,247,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(169,228,247,.08) 1px,transparent 1px);
  background-size:64px 64px
}
.world-map .map-grid{
  background-image:linear-gradient(rgba(169,228,247,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(169,228,247,.08) 1px,transparent 1px)!important;
  background-size:64px 64px!important;border-color:rgba(169,228,247,.16)
}
.player-hud,.route-card,.route-card:hover,.strategy-map,.quest-map,.log-console,.status-screen,.contact-form,.form-success{box-shadow:none!important}
.route-card,.strategy-map,.quest-map,.log-console,.status-screen,.player-hud{border-color:rgba(169,228,247,.16)}
.site-header{background:rgba(6,21,34,.96)!important;border-bottom:1px solid rgba(169,228,247,.16)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-header::after{opacity:0!important;animation:none!important}
.site-header>.header-cta{flex:none;flex-shrink:0;white-space:nowrap;gap:8px;color:#f5f0e3!important;background:#061522!important;border:1px solid rgba(240,216,142,.45)!important;box-shadow:none!important}
.site-header>.header-cta span{white-space:nowrap;flex:none}
.site-header>.header-cta:hover{transform:none;box-shadow:none;background:#10283a!important}
.business-world .business-art,.individual-world .individual-art{animation:none!important}
.world-motion-video{transition:opacity .35s ease}


/* CONTACT BODY CLIP FIX 2026-10-08 | Human screen recording 21:56.
   Previous QA measured the header CTA instead of the clipped main content.
   The old two-column contact grid had an overwide minimum-size text item,
   justify-self:end and overflow:hidden. The left h2 was visibly cropped.
   Scope this adjustment to the contact page only; leave the form API/fields intact. */
.info-page #contact.contact-world {
  box-sizing:border-box;
  width:100%;
  max-width:1280px;
  margin-inline:auto;
  padding:clamp(64px,6vw,96px) clamp(24px,3vw,48px) 96px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(28px,3vw,48px);
  align-items:start;
  overflow:visible;
}
.info-page #contact .contact-copy {
  min-width:0;
  width:100%;
  max-width:none;
  justify-self:stretch;
  margin:0;
  padding:0;
  overflow:visible;
}
.info-page #contact .contact-copy h2 {
  max-width:100%;
  margin:14px 0 18px;
  font-size:clamp(2rem,3vw,3.15rem);
  line-height:1.2;
  letter-spacing:-.035em;
  font-weight:600;
  word-break:normal;
  overflow-wrap:anywhere;
  text-wrap:wrap;
}
.info-page #contact .contact-copy > p,
.info-page #contact .contact-scope,
.info-page #contact .contact-route {
  max-width:100%;
  min-width:0;
}
.info-page #contact .contact-form {
  box-sizing:border-box;
  min-width:0;
  width:100%;
  max-width:100%;
  justify-self:stretch;
}
.info-page #contact .contact-form .field-row {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(max-width:1179px) {
  .info-page #contact.contact-world {
    grid-template-columns:minmax(0,1fr);
    gap:40px;
    padding:50px clamp(20px,5vw,50px) 76px;
  }
  .info-page #contact .contact-copy,
  .info-page #contact .contact-form {width:100%;max-width:760px;margin-inline:auto}
  .info-page #contact .contact-copy h2 {font-size:clamp(2rem,4.4vw,3.2rem)}
}
@media(max-width:600px) {
  .info-page #contact.contact-world {padding:32px 20px 64px;gap:28px}
  .info-page #contact .contact-copy h2 {font-size:clamp(1.9rem,8vw,2.65rem);line-height:1.25}
  .info-page #contact .contact-form .field-row {grid-template-columns:minmax(0,1fr)}
}