/* TRANCEPORT の掲示板・お問い合わせ・ランキング一覧で共用する見た目（トップ public/index.html と同じ世界観） */
:root {
  --pink: #ff2bd6; --cyan: #00f0ff; --lime: #c6ff00; --ink: #0a0018;
  --jp: "Dela Gothic One", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --num: "Bungee", "Dela Gothic One", sans-serif;
  --text: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; color: #fff; }
body { background: #07000f; font-family: var(--jp); overflow-x: hidden; }
#bg { position: fixed; inset: -20%; background: conic-gradient(from 0deg, #2a0050, #ff2bd6, #00f0ff, #c6ff00, #ff5a00, #2a0050); filter: blur(60px) saturate(1.3); opacity: .35; animation: spin 24s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #bg { animation: none; } }
main { position: relative; max-width: 560px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px max(40px, env(safe-area-inset-bottom)); }
.back { display: inline-block; font-size: 13px; color: #fff; text-decoration: none; opacity: .85; padding: 6px 0; text-shadow: 2px 2px 0 var(--ink); }
h1 { font-family: var(--num); font-weight: normal; font-size: clamp(34px, 11vw, 56px); line-height: 1; text-align: center; margin: 6px 0 2px;
  background: linear-gradient(180deg, #fff 0%, #a8fbff 42%, #3b0a7a 50%, #ff9cf0 58%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(3px 3px 0 var(--ink)) drop-shadow(-2px -2px 0 var(--ink)) drop-shadow(0 0 18px rgba(255, 43, 214, .9)); }
.sub { text-align: center; font-size: 15px; margin-bottom: 16px; text-shadow: 2px 2px 0 var(--ink); }
.box { background: rgba(10, 0, 24, .74); border: 2px solid #fff; border-radius: 16px; padding: 14px; box-shadow: 4px 4px 0 var(--ink), 0 0 22px rgba(255, 43, 214, .3); margin-bottom: 16px; }
label.f { display: block; font-size: 13px; margin: 0 0 6px; }
label.f small { opacity: .75; font-size: 11px; }
input[type=text], input[type=email], textarea, select { width: 100%; font-family: var(--text); font-size: 16px; color: #fff; background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .7); border-radius: 10px; padding: 9px 11px; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--lime); background: rgba(255, 255, 255, .16); }
::placeholder { color: rgba(255, 255, 255, .5); }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 32px; }
select option { color: #000; }
textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
.field { margin-bottom: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn { font-family: var(--jp); font-size: 16px; color: var(--ink); background: var(--lime); border: 3px solid var(--ink); border-radius: 999px; padding: 9px 22px;
  box-shadow: 4px 4px 0 var(--ink); cursor: pointer; text-decoration: none; display: inline-block; }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.alt { background: #fff; }
.count { font-family: var(--num); font-size: 12px; opacity: .8; margin-left: auto; }
.count.over { color: var(--pink); opacity: 1; }
.msg { font-size: 13px; min-height: 1.4em; margin-top: 8px; color: #ffd0f4; }
.msg.ok { color: var(--lime); }
.note { font-size: 11px; opacity: .75; line-height: 1.7; }
.empty { text-align: center; font-size: 13px; opacity: .8; padding: 18px 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; font-size: 15px; padding: 7px 16px; border: 2px solid rgba(255, 255, 255, .75); border-radius: 999px; background: rgba(255, 255, 255, .08); }
.chip input:checked + span { color: var(--ink); background: var(--lime); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.foot { text-align: center; font-size: 11px; opacity: .7; margin-top: 18px; line-height: 1.8; }
.foot a { color: #fff; }