:root { color-scheme: light; --ink:#243c59; --coral:#ed615b; --paper:#fdf9e9; --blue:#def1f5; --line:#b8d2d7; --yellow:#ffc65a; font-family:'Hiragino Maru Gothic ProN','Yu Gothic','Meiryo',sans-serif; }
* { box-sizing:border-box; } [hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--blue); background-image:radial-gradient(#6ba8b91a 1px,transparent 1px); background-size:16px 16px; }
button { font:inherit; cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.45; cursor:default; } button:focus-visible,canvas:focus-visible { outline:3px solid #237cb3; outline-offset:4px; }
.app { max-width:1240px; margin:0 auto; padding:26px 28px 18px; }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.brand { display:flex; gap:12px; align-items:center; }.brand svg { width:54px; height:54px; }.brand strong { display:block; font-size:27px; letter-spacing:-1px; font-weight:900; }.brand span { display:block; font-size:12px; margin-top:2px; letter-spacing:3px; }
nav { display:flex; gap:9px; }.icon-button { border:1.5px solid #99bdc6; background:#eef8f9; padding:10px 14px; border-radius:10px; font-size:12px; font-weight:700; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 254px; align-items:start; gap:23px; }.play-column { min-width:0; }
.stage { position:relative; overflow:hidden; border:5px solid #fff9e8; border-radius:20px; box-shadow:0 4px 0 #96b8bf,0 10px 35px #42658019; background:#9ebd9b; isolation:isolate; }
canvas#game { display:block; width:100%; height:auto; touch-action:none; }
.title-screen { position:absolute; inset:0; display:flex; align-items:flex-start; background:linear-gradient(90deg,#e7f6eae8 0%,#e7f6eaa6 42%,transparent 75%); padding:46px 32px; }.title-copy { max-width:470px; position:relative; z-index:1; }
.edition { margin:0 0 18px; font-size:11px; font-weight:700; padding:5px 10px; background:#fff5d7; border:1px solid #c1cda4; display:inline-block; border-radius:6px; }
h1 { margin:0 0 14px; font-size:clamp(24px,3.2vw,42px); line-height:1.5; font-weight:900; letter-spacing:-1.5px; text-shadow:0 2px 0 #fff4; }.title-copy>p:not(.edition) { font-size:12px; line-height:1.9; margin:0 0 23px; }
.title-actions { display:flex; flex-wrap:wrap; gap:10px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:2px solid var(--ink); border-radius:12px; padding:13px 18px; font-size:14px; font-weight:800; box-shadow:0 3px 0 var(--ink); transition:transform .12s,box-shadow .12s; min-height:46px; }
.button:active:not(:disabled) { transform:translateY(3px); box-shadow:0 0 0 var(--ink); }.button.coral { background:var(--coral); color:#fffef0; }.button.light { background:#fff6de; }.button.navy { background:#486584; color:#fff; }.button small { font-size:10px; font-weight:500; opacity:.85; }.title-note { display:block; font-size:10px; margin-top:18px; }
.field-hud { position:absolute; top:17px; left:17px; right:17px; display:flex; justify-content:space-between; gap:8px; pointer-events:none; }.place-tag,.lens-status { padding:8px 12px; border-radius:8px; background:#fffae6e8; font-size:11px; box-shadow:0 2px 0 #42657c30; font-weight:700; }.lens-status { background:#29435ad9; color:#efffff; }.lens-status.active { background:#228eab; }
.toast { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:max-content; max-width:90%; text-align:center; background:#29435aee; color:#fff7e1; padding:12px 18px; border-radius:10px; font-size:12px; line-height:1.7; pointer-events:none; }
.action-area { margin-top:17px; }.field-controls { display:grid; grid-template-columns:125px 1fr; gap:8px 20px; align-items:center; }.field-buttons { display:flex; justify-content:flex-end; gap:12px; }.watch-button { background:#79c7d7; min-width:146px; }.watch-button.active { background:#ffc65a; }.watch-button svg { width:28px; height:28px; fill:none; stroke:var(--ink); stroke-width:2; }.watch-button span { display:grid; gap:2px; }.key-help { margin:0; font-size:10px; grid-column:2; justify-self:end; color:#5e7c8f; }
.dpad { display:grid; grid-template:repeat(3,33px)/repeat(3,36px); gap:3px; touch-action:none; }.dpad button { padding:0; border:1.5px solid #47647e; background:#fff6de; border-radius:7px; font-size:14px; box-shadow:0 2px 0 #47647e; user-select:none; touch-action:none; }.dpad button:active,.dpad button.pressed { background:#ffc65a; box-shadow:none; transform:translateY(2px); }.dpad .up { grid-area:1/2; }.dpad .left { grid-area:2/1; }.dpad span { grid-area:2/2; border:1.5px solid #a7c5cc; border-radius:50%; margin:5px; }.dpad .right { grid-area:2/3; }.dpad .down { grid-area:3/2; }
.journal { padding:6px 2px; }.journal-label { font-size:11px; color:#648898; }.mission h2 { font-size:24px; line-height:1.55; letter-spacing:-.6px; margin:10px 0; }.mission p { font-size:12px; line-height:1.9; margin:0; color:#557080; }.mission-progress { display:flex; gap:7px; margin:17px 0 24px; }.mission-progress i { height:5px; flex:1; background:#b9d4d5; border-radius:4px; }.mission-progress i.done { background:var(--coral); }.section-title { display:flex; justify-content:space-between; align-items:center; gap:8px; }.section-title h3 { font-size:12px; margin:0; }.section-title>span { font-size:11px; color:#5c8091; }.radar-section { border-top:1px dashed #9bbfc8; padding:20px 0 17px; }.radar { height:9px; background:#b6d4d9; border-radius:10px; margin-top:13px; position:relative; }.radar>div { height:100%; width:0; border-radius:10px; background:#6ea493; transition:width .25s; }.radar-dot { position:absolute; width:16px; height:16px; border:3px solid var(--blue); border-radius:50%; right:-2px; top:-3px; background:#ed615b; }.radar-section p { font-size:11px; line-height:1.8; margin:10px 0 0; min-height:38px; }
.friends-section { border-top:1px dashed #9bbfc8; padding-top:20px; }.medal-list { display:flex; flex-wrap:wrap; gap:8px; margin:15px 0 10px; }.medal { width:66px; padding:0; border:0; background:transparent; text-align:center; }.medal canvas { width:58px; height:58px; display:block; margin:auto; border-radius:50%; border:3px solid #fff7da; box-shadow:0 2px 0 #b3b6a5; background:#ddede4; }.medal span { display:block; font-size:8px; margin-top:6px; white-space:nowrap; }.medal.locked { opacity:.42; }.medal.locked canvas { filter:grayscale(1); }.text-button { padding:6px 0; border:0; border-bottom:1px solid #6f98a7; border-radius:0; background:transparent; font-size:11px; }.pocket { display:flex; justify-content:space-between; gap:8px; font-size:11px; margin-top:25px; padding:13px 0; border-top:1px dashed #9bbfc8; border-bottom:1px dashed #9bbfc8; }.pocket b { font-size:14px; }.journal-footer { font-size:10px; color:#6b8a99; margin-top:19px; }.footer { display:flex; justify-content:space-between; margin-top:20px; font-size:10px; color:#6d8d9c; gap:12px; }
.battle-hud { position:absolute; inset:0; pointer-events:none; }.enemy-info,.team-info { position:absolute; left:5%; width:42%; font-size:13px; font-weight:800; }.enemy-info { top:20px; }.team-info { bottom:20px; }.hp-track { height:11px; background:#243c5940; border:2px solid #fff8e7; border-radius:10px; margin:7px 0 3px; overflow:hidden; }.hp-track>div { height:100%; background:#ed7964; transition:width .12s; }.team-info .hp-track>div { background:#72ae94; }.enemy-info small,.team-info small { font-size:10px; font-weight:600; }.warning { position:absolute; top:25%; left:50%; transform:translateX(-50%); background:#ed615b; color:white; border:2px solid #fff2cc; border-radius:9px; font-size:14px; font-weight:800; padding:10px 15px; width:max-content; max-width:90%; }.timing { position:absolute; width:70%; left:15%; top:54%; text-align:center; background:#243c59ee; border:2px solid #fff6de; border-radius:10px; color:#fff6de; padding:12px; font-size:12px; }.timing-track { position:relative; height:18px; background:#61728a; border-radius:10px; margin-top:9px; }.timing-track i { position:absolute; inset:0 33%; background:#ffc65a; border-radius:4px; }.timing-track b { position:absolute; width:7px; height:26px; top:-4px; background:#fff7e5; border:1px solid #243c59; border-radius:4px; left:0; }
.battle-actions { display:flex; gap:10px; }.battle-actions .button { flex:1; padding:13px 8px; }.energy-line { display:flex; align-items:center; gap:10px; font-size:11px; margin-top:15px; }.energy-track { background:#b6d4d9; border-radius:8px; height:8px; flex:1; overflow:hidden; }.energy-track>div { height:100%; background:#d6a74b; transition:width .1s; }.energy-line strong { width:26px; text-align:right; }.battle-log { min-height:22px; font-size:12px; margin:13px 0 8px; line-height:1.6; }.battle-medals { display:flex; justify-content:center; gap:13px; }.battle-medals .medal { width:70px; border-radius:8px; padding:5px; }.battle-medals .medal.selected { background:#ffc65a; }.battle-medals .medal canvas { width:55px; height:55px; }
.dialog-layer { position:fixed; inset:0; background:#243c598c; z-index:20; display:flex; align-items:center; justify-content:center; padding:18px; backdrop-filter:blur(3px); }.dialog { width:440px; max-width:100%; max-height:88dvh; overflow:auto; padding:25px; background:#fff9e7; border:3px solid #29435a; border-radius:20px; box-shadow:0 7px 0 #29435a80; }.dialog h2 { margin:0 0 12px; font-size:23px; line-height:1.5; }.dialog p { font-size:13px; line-height:1.9; }.dialog-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:21px; }.dialog-actions .button { flex:1; min-width:100px; font-size:12px; padding:11px 12px; }.portrait { display:block; margin:8px auto 14px; width:160px; height:160px; border-radius:50%; background:#e0ede0; }.menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }.menu-grid .button { font-size:12px; padding:11px 8px; }.save-status { color:#64818b; font-size:10px !important; white-space:pre-line; }.album-entry { display:flex; gap:13px; align-items:center; padding:13px 0; border-bottom:1px dashed #c3cbb0; }.album-entry canvas { width:74px; height:74px; flex:none; border-radius:50%; background:#e3ece0; }.album-entry h3 { font-size:14px; margin:0 0 4px; }.album-entry p { font-size:11px; margin:0; }.album-entry.locked canvas { filter:grayscale(1); opacity:.3; }.dialog .error { color:#b23940; }
@media(max-width:1000px) { .app { padding:20px; }.game-layout { gap:18px; grid-template-columns:minmax(0,1fr) 220px; }.title-screen { padding:32px 25px; }.title-copy>p:not(.edition) { max-width:260px; }.title-actions .button { font-size:12px; padding:11px 14px; }.mission h2 { font-size:21px; } }
@media(max-width:720px) { .app { padding:15px 12px max(20px,env(safe-area-inset-bottom)); }.masthead { margin-bottom:14px; gap:8px; }.brand { gap:7px; }.brand svg { width:41px; height:41px; }.brand strong { font-size:20px; }.brand span { font-size:9px; letter-spacing:2px; }nav { gap:6px; }.icon-button { font-size:10px; padding:9px 8px; }.game-layout { display:flex; flex-direction:column; gap:17px; }.play-column { width:100%; }.stage { border-width:4px; border-radius:16px; }.title-screen { padding:27px 21px; background:linear-gradient(180deg,#e7f6eaf0 0%,#e7f6eac7 44%,transparent 82%); }.edition { margin-bottom:12px; font-size:9px; }h1 { font-size:29px; line-height:1.45; letter-spacing:-1px; }.title-copy>p:not(.edition) { font-size:10px; max-width:none; margin-bottom:18px; }.title-actions { gap:8px; }.title-actions .button { padding:11px 12px; font-size:12px; }.title-note { font-size:9px; margin-top:13px; }.field-hud { inset:12px 10px auto; }.place-tag,.lens-status { font-size:9px; padding:7px 9px; }.action-area { margin-top:13px; }.field-controls { grid-template-columns:112px 1fr; gap:5px 10px; }.field-buttons { gap:8px; }.field-buttons .button { padding:10px; font-size:12px; min-width:0; flex:1; }.watch-button svg { width:22px; height:22px; }.watch-button small,.field-buttons small { display:none; }.key-help { font-size:8px; }.dpad { grid-template:repeat(3,31px)/repeat(3,33px); }.journal { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:13px 17px; border-top:1px dashed #9bbfc8; padding-top:17px; }.mission { grid-column:1; grid-row:1; }.mission h2 { font-size:18px; margin:7px 0; }.mission h2 br { display:none; }.mission p { font-size:10px; line-height:1.7; }.journal-label { font-size:9px; }.mission-progress { margin:10px 0 0; }.radar-section { grid-column:2; grid-row:1; border:0; padding:0; }.radar-section p { font-size:10px; }.friends-section { grid-column:1/-1; padding-top:13px; }.section-title h3 { font-size:11px; }.medal-list { margin:10px 0 8px; gap:7px; }.medal { width:57px; }.medal canvas { width:49px; height:49px; }.medal span { font-size:7px; }.pocket { grid-column:1/-1; margin:0; padding:10px 0; }.journal-footer { display:none; }.footer { font-size:8px; margin-top:12px; }.battle-actions { gap:7px; }.battle-actions .button { font-size:11px; padding:11px 5px; }.battle-actions small { display:none; }.battle-log { font-size:10px; min-height:20px; }.battle-medals { gap:5px; }.battle-medals .medal { width:58px; }.battle-medals .medal canvas { width:45px; height:45px; }.enemy-info,.team-info { font-size:11px; width:53%; }.enemy-info { top:16px; }.team-info { bottom:16px; }.warning { font-size:11px; padding:9px 11px; }.timing { width:84%; left:8%; font-size:10px; }.dialog { padding:21px; }.dialog h2 { font-size:21px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }
@media(max-width:720px) { .field-controls { grid-template-columns:138px 1fr; }.dpad { grid-template:repeat(3,44px)/repeat(3,44px); }.field-buttons .button { font-size:11px; padding:9px 7px; }.watch-button svg { width:20px; height:20px; } }