:root {
  color-scheme: dark;
  --ink: #f7fbff;
  --muted: #a9bad3;
  --navy: #061127;
  --panel: #0d2346;
  --panel-2: #112d55;
  --cyan: #43e4f2;
  --yellow: #ffe16a;
  --orange: #ff9d57;
  --pink: #ff6fae;
  --green: #6ce5aa;
  --danger: #ff7393;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--navy); }

body {
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, #24477c 0 1px, transparent 2px),
    radial-gradient(circle at 88% 27%, #58ddef 0 1px, transparent 2px),
    radial-gradient(circle at 73% 81%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 20% 74%, #ffdf83 0 1.5px, transparent 2.5px),
    linear-gradient(155deg, #07142f 0%, #071a39 48%, #061126 100%);
  background-size: 83px 91px, 131px 119px, 157px 149px, 113px 137px, auto;
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }
button { touch-action: manipulation; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.app-shell {
  width: min(100%, 1060px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  position: relative;
}

.topbar { height: 62px; display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; justify-content: center; gap: 9px; color: #bcecf3; letter-spacing: .16em; font-size: clamp(.7rem, 2.7vw, .88rem); }
.brand-lights { display: inline-flex; gap: 3px; }
.brand-lights i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.brand-lights i:nth-child(2) { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); }
.brand-lights i:nth-child(3) { background: var(--pink); box-shadow: 0 0 10px var(--pink); }

.icon-button, .pause-button, .replay-button, .text-button, .secondary-button, .dialog-close, .stat-button {
  border: 0;
  color: inherit;
  cursor: pointer;
}
.icon-button { width: 42px; height: 42px; border-radius: 14px; background: #16345d; box-shadow: inset 0 0 0 1px #3b638b; font-size: 1.35rem; font-weight: 900; }
.screen { animation: screen-in .28s ease-out; }
.screen[hidden] { display: none !important; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } }

.home-screen { padding: 10px 0 32px; display: grid; gap: 18px; justify-items: center; }
.space-window { width: min(88vw, 440px); aspect-ratio: 1.72; position: relative; overflow: hidden; border: 5px solid #244f79; border-radius: 48% 48% 28px 28px; background: radial-gradient(circle at 65% 34%, #547b9e 0 2px, transparent 3px), radial-gradient(circle at 19% 26%, #fff 0 1px, transparent 2px), linear-gradient(145deg, #081531, #183a67); box-shadow: inset 0 0 45px #020a1c, 0 18px 60px #0007; }
.space-window::after { content: ""; position: absolute; inset: 9px; border-radius: inherit; border: 1px solid #68a2c755; pointer-events: none; }
.planet { position: absolute; width: 134px; height: 134px; border-radius: 50%; left: -35px; bottom: -55px; background: radial-gradient(circle at 65% 27%, #d8f6ff 0 7%, #54cad8 8% 42%, #166291 44% 100%); box-shadow: 0 0 34px #46ddff66; }
.orbit { position: absolute; border: 1px solid #6cf1ff3b; border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: 300px; height: 92px; left: -58px; bottom: 7px; }
.orbit-two { width: 430px; height: 155px; right: -90px; top: 21px; }
.rescue-ship { position: absolute; width: 108px; height: 74px; left: 52%; top: 42%; transform: translate(-50%, -50%) rotate(-6deg); animation: ship-float 3s ease-in-out infinite; }
@keyframes ship-float { 50% { transform: translate(-50%, calc(-50% - 8px)) rotate(2deg); } }
.ship-body { display: grid; place-items: center; position: absolute; width: 78px; height: 50px; left: 16px; top: 19px; border-radius: 45% 52% 32% 38%; color: #102648; font-weight: 1000; font-size: 1.1rem; background: linear-gradient(#effcff, #8cdbea); border: 4px solid #2a7090; }
.ship-body::before { content: ""; position: absolute; width: 32px; height: 18px; border-radius: 50% 50% 3px 3px; left: 22px; top: -15px; background: #ffdd6a; border: 4px solid #965f54; }
.ship-dish { position: absolute; width: 34px; height: 18px; border-radius: 4px 4px 30px 30px; background: var(--pink); left: 52px; top: -1px; transform: rotate(19deg); box-shadow: 0 0 17px #ff6fae99; }
.ship-dish::after { content: ""; position: absolute; width: 5px; height: 15px; background: #80d5ec; left: 14px; top: 13px; }
.ship-flame { position: absolute; width: 28px; height: 13px; border-radius: 50%; left: -3px; top: 42px; background: linear-gradient(90deg, transparent, #ff6f61 35%, #ffe16a); filter: blur(1px); animation: flame .18s steps(2) infinite; }
@keyframes flame { 50% { width: 38px; left: -13px; } }
.signal-trail { position: absolute; right: 26px; top: 28px; display: flex; gap: 9px; align-items: center; color: var(--cyan); filter: drop-shadow(0 0 7px var(--cyan)); font-size: 1.55rem; animation: signal 1.4s ease-in-out infinite; }
@keyframes signal { 50% { opacity: .35; transform: translateX(5px); } }
.star { position: absolute; color: var(--yellow); text-shadow: 0 0 8px currentColor; }
.star-one { left: 30%; top: 22%; }.star-two { right: 18%; bottom: 18%; }.star-three { right: 37%; top: 19%; font-size: 1.6rem; }

.hero-copy { text-align: center; }
.eyebrow { margin: 0 0 7px; color: var(--cyan); font-weight: 900; letter-spacing: .17em; font-size: .73rem; }
h1 { margin: 0; font-size: clamp(2.25rem, 10.5vw, 4.65rem); line-height: .96; letter-spacing: -.07em; text-shadow: 0 5px 0 #071329, 0 0 27px #35d7ec35; }
h1 span { color: var(--yellow); font-size: .68em; letter-spacing: .02em; }
.lead { margin: 17px 0 0; color: #d6e2ef; font-weight: 700; line-height: 1.72; }

.start-card { width: min(100%, 560px); padding: 18px; border-radius: 22px; background: linear-gradient(145deg, #16365fdc, #0b2345ec); border: 1px solid #3a6288; box-shadow: 0 16px 45px #0005; }
.start-card label { display: block; margin-bottom: 8px; color: #dcebf4; font-size: .8rem; font-weight: 800; }
.start-card label small { color: var(--muted); font-weight: 500; }
.name-row { display: grid; grid-template-columns: minmax(0, .7fr) minmax(175px, 1.3fr); gap: 9px; }
input { min-width: 0; border: 1px solid #6280a0; border-radius: 14px; padding: 0 12px; color: #132845; background: #f6fbff; font-weight: 900; }
.primary-button { min-height: 54px; padding: 0 18px; border: 0; border-radius: 15px; cursor: pointer; color: #11213c; font-weight: 1000; background: linear-gradient(135deg, #fff078, #ffad59); box-shadow: 0 6px 0 #a85739, 0 12px 24px #0005; }
.primary-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #a85739, 0 5px 12px #0005; }
.home-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.home-stats > * { min-height: 56px; padding: 8px; border-radius: 13px; text-align: center; background: #07193288; border: 1px solid #33577a; }
.home-stats span { display: block; color: var(--muted); font-size: .7rem; }
.home-stats strong { display: block; margin-top: 2px; color: var(--yellow); font-size: 1.05rem; }
.stat-button { width: 100%; }
.save-note, .storage-note { margin: 11px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.55; text-align: center; }
.text-button { padding: 9px 14px; background: transparent; color: #baddf0; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

.game-screen { width: min(100%, 720px); margin: 0 auto; padding-bottom: 32px; }
.mission-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }
.mission-hud > div { padding: 8px 7px; text-align: center; border-radius: 13px; border: 1px solid #315a7f; background: #0d2547; }
.mission-hud span { display: block; color: #91afc9; letter-spacing: .13em; font-size: .6rem; font-weight: 900; }
.mission-hud strong { display: block; color: #fff; font: 900 clamp(1.1rem, 5vw, 1.5rem)/1.15 ui-monospace, Consolas, monospace; }
.radio-stage { min-height: 310px; padding: 16px; position: relative; overflow: hidden; text-align: center; border: 2px solid #2c6990; border-radius: 24px; background: radial-gradient(circle at 50% 39%, #1b668477, transparent 35%), linear-gradient(#102d53, #091a37); box-shadow: inset 0 0 45px #020b1eaa, 0 14px 35px #0004; }
.radio-stage::before { content: ""; position: absolute; inset: 0; opacity: .07; background: repeating-linear-gradient(0deg, transparent 0 5px, #fff 6px); pointer-events: none; }
.stage-header { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 3; }
.mode-badge { padding: 6px 10px; border-radius: 999px; color: #09213b; background: var(--cyan); font-size: .7rem; font-weight: 1000; letter-spacing: .06em; }
.mode-badge.send { background: var(--yellow); }
.pause-button { padding: 7px 10px; border-radius: 10px; background: #294967; color: #d3e3ee; font-size: .7rem; font-weight: 800; }
.beacon-wrap { width: 90px; height: 86px; margin: 5px auto -5px; position: relative; }
.beacon { width: 49px; height: 53px; position: absolute; left: 20px; top: 23px; z-index: 2; border-radius: 25px 25px 13px 13px; background: linear-gradient(90deg, #2e6a88, #a3e7ed 48%, #2b607b); border: 3px solid #76cbda; box-shadow: 0 0 14px #47e4f266; }
.beacon::before { content: ""; position: absolute; width: 37px; height: 8px; border-radius: 50%; left: 3px; top: -7px; background: #ff6fae; border: 3px solid #8d416c; }
.beacon::after { content: ""; position: absolute; width: 67px; height: 7px; border-radius: 10px; left: -12px; bottom: -7px; background: #476987; }
.beacon span { width: 17px; height: 17px; position: absolute; left: 13px; top: 14px; border-radius: 50%; background: #c8faff; box-shadow: 0 0 15px #3de9ff; }
.beacon.flash span { background: #fffbd0; box-shadow: 0 0 22px 8px var(--yellow); }
.beacon i { width: 3px; height: 19px; position: absolute; left: 20px; top: -24px; background: #7ecbdd; }
.signal-rings { position: absolute; inset: 0; }
.signal-rings i { position: absolute; inset: 8px; border: 2px solid #4de1ef; border-radius: 50%; opacity: 0; }
.beacon-wrap.transmitting .signal-rings i { animation: ring 1s ease-out infinite; }
.beacon-wrap.transmitting .signal-rings i:nth-child(2) { animation-delay: .25s; }.beacon-wrap.transmitting .signal-rings i:nth-child(3) { animation-delay: .5s; }
@keyframes ring { 0% { transform: scale(.38); opacity: .8; } 100% { transform: scale(1.2); opacity: 0; } }
.mission-prompt { margin: 4px 0; color: #b8ccdd; font-size: .84rem; font-weight: 800; }
.signal-display { min-height: 68px; display: grid; place-items: center; color: #fff; font: 1000 clamp(2.9rem, 15vw, 5rem)/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-shadow: 0 0 20px #4de4f2; }
.signal-display.target-letter { color: var(--yellow); letter-spacing: 0; text-shadow: 0 0 22px #ffd95b77; }
.replay-button { padding: 7px 13px; border-radius: 999px; background: #244a6d; color: #cde7f1; font-size: .72rem; font-weight: 800; }
.feedback { min-height: 23px; margin: 5px 0 -3px; color: var(--green); font-weight: 900; }
.feedback.bad { color: var(--danger); }

.receive-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 11px; }
.answer-button { min-height: 82px; border: 1px solid #52789b; border-radius: 18px; cursor: pointer; color: #fff; background: linear-gradient(#183d67, #102846); box-shadow: 0 6px 0 #061124, 0 11px 19px #0003; font-size: clamp(1.7rem, 8vw, 2.55rem); font-weight: 1000; }
.answer-button small { display: block; margin-top: 3px; color: #89abc5; font-size: .58rem; letter-spacing: .09em; }
.answer-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #061124; }
.answer-button.correct { color: #0a2e27; background: var(--green); }
.answer-button.wrong { background: #8a3451; }
.send-controls { margin-top: 10px; }
.compose-display { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 8px; padding: 7px; border-radius: 13px; background: #041227; border: 1px solid #2f577b; }
.compose-display i { width: 32px; height: 8px; display: inline-block; border-radius: 8px; background: #2b4966; }
.compose-display i.dot { width: 13px; height: 13px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 11px #43e4f288; }
.compose-display i.dash { width: 38px; background: var(--yellow); box-shadow: 0 0 11px #ffe16a66; }
.signal-buttons { display: grid; grid-template-columns: 1fr 1fr .55fr; gap: 8px; }
.signal-buttons button { min-height: 76px; border: 1px solid #52789b; border-radius: 17px; cursor: pointer; color: #fff; background: #16385e; box-shadow: 0 5px 0 #061124; }
.signal-buttons b { display: block; color: var(--yellow); font: 1000 2.1rem/1 ui-monospace, Consolas, monospace; }
.signal-buttons span { display: block; margin-top: 3px; color: #adcadc; font-size: .65rem; font-weight: 800; }
.signal-buttons .clear-signal b { color: #b4c8d8; }

.quick-chart { margin-top: 13px; border: 1px solid #2d5275; border-radius: 15px; background: #0b1e39c7; }
.quick-chart summary { padding: 11px 14px; cursor: pointer; color: #bcd5e4; font-size: .76rem; font-weight: 800; }
.chart-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 10px 11px; }
.chart-grid div { padding: 6px 4px; border-radius: 8px; text-align: center; background: #183753; }
.chart-grid b { display: block; color: var(--yellow); }
.chart-grid code { color: #bcecf3; font-size: .75rem; }

.result-screen { width: min(100%, 560px); margin: 0 auto; padding: 32px 0; text-align: center; }
.result-badge { width: 102px; height: 102px; display: grid; place-items: center; margin: 15px auto 12px; border: 5px solid #e7faff; border-radius: 50%; color: #13243d; background: linear-gradient(145deg, var(--yellow), var(--orange)); box-shadow: 0 0 0 8px #1a395d, 0 0 34px #ffd75a55; font-size: 3.9rem; font-weight: 1000; transform: rotate(-4deg); }
.result-screen h2 { margin: 7px 0; font-size: clamp(1.7rem, 7vw, 2.6rem); }
.result-score { margin: 20px 0 12px; }
.result-score span { display: block; color: var(--muted); letter-spacing: .2em; font-size: .7rem; font-weight: 900; }
.result-score strong { display: block; color: #fff; font: 1000 clamp(3.1rem, 15vw, 5.4rem)/1 ui-monospace, Consolas, monospace; }
.result-score em { display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 99px; color: #321b31; background: var(--pink); font-size: .72rem; font-style: normal; font-weight: 1000; }
.result-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 19px 0; }
.result-details div { padding: 10px 3px; border-radius: 12px; background: #102846; border: 1px solid #315778; }
.result-details span { display: block; color: var(--muted); font-size: .65rem; }
.result-details strong { display: block; margin-top: 3px; color: var(--yellow); font-size: 1.25rem; }
.result-message { min-height: 46px; color: #cee1eb; line-height: 1.65; }
.wide { width: 100%; }
.secondary-button { width: 100%; min-height: 48px; margin-top: 13px; border-radius: 14px; background: #173657; border: 1px solid #496f90; font-weight: 900; }

dialog { width: min(calc(100% - 24px), 620px); max-height: min(88dvh, 760px); padding: 0; overflow: auto; border: 1px solid #5680a1; border-radius: 22px; color: var(--ink); background: linear-gradient(#102d50, #081a35); box-shadow: 0 26px 80px #000b; }
dialog::backdrop { background: #020816d4; backdrop-filter: blur(5px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 20px 20px 7px; }
.dialog-head h2 { margin: 0; font-size: 1.45rem; }
.dialog-close { flex: 0 0 auto; width: 39px; height: 39px; border-radius: 12px; background: #284b6b; font-size: 1.5rem; }
.dialog-note { margin: 0; padding: 7px 20px 14px; color: #b8cbd9; font-size: .77rem; line-height: 1.65; }
.ranking-empty { margin: 8px 20px 16px; padding: 28px 14px; border-radius: 14px; text-align: center; color: var(--muted); background: #07172c; }
.ranking-list { margin: 5px 20px; padding: 0; list-style: none; counter-reset: rank; }
.ranking-list li { counter-increment: rank; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 7px; min-height: 51px; padding: 7px 10px; border-bottom: 1px solid #2b4b68; }
.ranking-list li::before { content: counter(rank); width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #9fb8ca; background: #0d2039; font-weight: 900; }
.ranking-list li:nth-child(1)::before { color: #42340c; background: #ffe269; }.ranking-list li:nth-child(2)::before { color: #243343; background: #d9e7ee; }.ranking-list li:nth-child(3)::before { color: #3e251b; background: #df966f; }
.rank-name { min-width: 0; }.rank-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.rank-name small { color: #819cb1; }
.rank-score { color: var(--yellow); font: 900 1.05rem ui-monospace, Consolas, monospace; }
.storage-note { padding: 8px 20px 19px; }
.howto-grid { display: grid; gap: 9px; padding: 8px 20px 15px; }
.howto-grid article { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; padding: 11px; border-radius: 13px; background: #0a1e3a; }
.howto-grid article > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #10223a; background: var(--yellow); font-weight: 1000; }
.howto-grid h3, .howto-grid p { margin: 0; }.howto-grid h3 { font-size: .93rem; }.howto-grid p { margin-top: 4px; color: #b9cfdd; font-size: .78rem; line-height: 1.55; }
.chart-title { margin: 6px 20px 11px; font-size: .9rem; }
.full-chart { grid-template-columns: repeat(4, 1fr); padding: 0 20px 10px; }
.pause-content { padding: 35px 24px; text-align: center; }.pause-content h2 { margin: 7px 0; }.pause-content p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.storage-warning { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 20; transform: translateX(-50%); width: min(calc(100% - 24px), 440px); padding: 10px 14px; border-radius: 12px; text-align: center; color: #351522; background: #ff9bb6; font-size: .75rem; font-weight: 900; }

body.thumbnail-mode { width: 1200px; height: 675px; min-height: 675px; overflow: hidden; background: linear-gradient(145deg, #07142f, #183e6d); }
.thumbnail-mode .screen, .thumbnail-mode .rescue-ship, .thumbnail-mode .ship-flame, .thumbnail-mode .signal-trail { animation: none; }
.thumbnail-mode .app-shell { width: 1200px; height: 675px; min-height: 675px; padding: 24px 52px; }
.thumbnail-mode .topbar { display: none; }
.thumbnail-mode .home-screen { height: 627px; padding: 0; grid-template-columns: 1.08fr .92fr; grid-template-rows: 1fr auto; align-items: center; gap: 16px 42px; }
.thumbnail-mode .home-screen::after { content: "・ トン　　－ ツー　　TOP10保存"; grid-column: 1; grid-row: 2; align-self: start; justify-self: start; padding: 15px 25px; border: 2px solid #48ddea; border-radius: 999px; color: #eafdff; background: #0c2c4f; box-shadow: 0 0 25px #43e4f244; font-size: 19px; font-weight: 900; letter-spacing: .06em; }
.thumbnail-mode .space-window { width: 500px; grid-column: 2; grid-row: 1 / 3; border-width: 8px; }
.thumbnail-mode .hero-copy { grid-column: 1; grid-row: 1; text-align: left; align-self: end; padding-bottom: 30px; }
.thumbnail-mode h1 { font-size: 72px; }.thumbnail-mode h1 span { font-size: 42px; }.thumbnail-mode .lead { font-size: 20px; }.thumbnail-mode .eyebrow { font-size: 15px; }
.thumbnail-mode .start-card { display: none; }.thumbnail-mode .how-to-button { display: none; }
.thumbnail-mode #howToButton { display: none; }

@media (min-width: 780px) and (max-height: 850px) {
  .home-screen { grid-template-columns: .9fr 1.1fr; grid-template-rows: auto auto; column-gap: 30px; align-items: center; }
  .space-window { grid-column: 1; grid-row: 1 / 3; }
  .hero-copy { grid-column: 2; align-self: end; }.start-card { grid-column: 2; align-self: start; }
  #howToButton { grid-column: 1 / 3; }
  h1 { font-size: 3.5rem; }
}

@media (max-width: 390px) {
  .app-shell { padding-left: 10px; padding-right: 10px; }
  .topbar { height: 56px; }
  .home-screen { gap: 13px; padding-top: 3px; }
  .space-window { width: min(82vw, 330px); }
  h1 { font-size: 2.3rem; }
  .lead { margin-top: 11px; font-size: .83rem; }
  .start-card { padding: 13px; }
  .name-row { grid-template-columns: .63fr 1.37fr; }.primary-button { padding: 0 10px; font-size: .84rem; }
  .radio-stage { min-height: 292px; padding: 12px; }.signal-display { min-height: 63px; }
  .answer-button { min-height: 72px; }.signal-buttons button { min-height: 69px; }
  .chart-grid { grid-template-columns: repeat(3, 1fr); }
  .full-chart { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}