/* ============================================================
   お弁当総選挙 — stylesheet v0.3
   暗い背景 + 動く宝石（js/backdrop.js）+ 明るい青
   ============================================================ */

:root{
  /* 面 */
  --bg:#050B1C;
  --bg-2:#0A1734;
  --surface:rgba(11,23,51,.80);
  --surface-2:rgba(8,17,40,.66);
  --line:rgba(126,178,255,.17);
  --line-2:rgba(126,178,255,.30);

  /* 文字（すべて暗面の上で 4.5:1 以上を実測確認済み） */
  --ink:#EAF1FF;      /* 15.64 : 1 */
  --ink-2:#A9BEDD;    /*  9.37 : 1 */
  --ink-3:#8199BE;    /*  6.11 : 1 */

  /* 青 */
  --blue:#1668FF;          /* 塗り。白文字 4.71 : 1 */
  --blue-hover:#2E7BFF;
  --blue-press:#0A4FD0;
  --blue-text:#7FB2FF;     /* 暗面の上の青文字 8.20 : 1 */
  --gem:#66D0FF;           /* 10.16 : 1 */
  --blue-soft:rgba(22,104,255,.14);
  --blue-glow:rgba(22,104,255,.40);

  /* 状態 */
  --ok:#6EE7B7;      --ok-soft:rgba(110,231,183,.12);   --ok-line:rgba(110,231,183,.30);
  --warn:#FCD34D;    --warn-soft:rgba(252,211,77,.12);  --warn-line:rgba(252,211,77,.30);
  --err:#FCA5A5;     --err-soft:rgba(252,165,165,.12);  --err-line:rgba(252,165,165,.30);

  /* 形 */
  --r-pill:999px;
  --r-lg:22px;
  --r-md:14px;

  --sh-2:0 26px 60px -26px rgba(0,0,0,.80);

  --font:"Poppins","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --head-h:66px;
}

*,*::before,*::after{box-sizing:border-box;}
*{-webkit-tap-highlight-color:rgba(102,208,255,.16);}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  min-height:100vh;
  font-family:var(--font);
  font-feature-settings:"palt" 1;
  font-size:15px;
  line-height:1.8;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 背景 ---------- */
/* 一番下：深い青のにじみ。この上を canvas の宝石が流れる */
.bg-deep{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 820px at 78% -10%, rgba(28,96,220,.42), transparent 62%),
    radial-gradient(900px 700px at 4% 14%,  rgba(60,150,255,.20), transparent 60%),
    radial-gradient(1100px 900px at 52% 112%, rgba(12,60,150,.42), transparent 66%),
    linear-gradient(176deg,#081436 0%,#050B1C 55%,#04091A 100%);
}
/* ビネットは宝石より下に敷く。上に重ねると宝石が沈んで見えなくなる */
.bg-vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(140% 100% at 50% 38%, transparent 52%, rgba(2,6,18,.62) 100%);
}
#gem-canvas{position:fixed;inset:0;z-index:2;pointer-events:none;display:block;}

/* キャラクターは「背景の宝石」と「フォーム」のあいだの層。
   ・position:fixed なので、フォームをスクロールしても動かない（背景の一部として振る舞う）
   ・画面内に必ず収まる寸法にして、どの辺でも切れないようにする
   ・マスクは下方向だけ。顔はそのまま見せ、体は下へ溶けてフォームの下に潜る */
.character{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden;}
.character img{
  position:absolute;
  top:5vh;
  right:max(14px,calc((100vw - 1180px) / 2));
  height:min(76vh,720px);
  width:auto;max-width:none;display:block;
  filter:saturate(.98) brightness(.96) drop-shadow(0 22px 60px rgba(0,0,0,.55));
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0%, #000 44%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.26) 80%, transparent 95%);
  mask-image:linear-gradient(to bottom,
    #000 0%, #000 44%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.26) 80%, transparent 95%);
}
.character--quiet img{opacity:.62;}

body > .shell,
body > #gate-screen,
body > #admin-screen{position:relative;z-index:4;}

/* ---------- ページ上部の行（固定ヘッダーは置かない） ---------- */
.page-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:30px;
}
.head-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}

/* ---------- ロゴ ---------- */
.brandmark{display:block;margin:0 0 26px;text-decoration:none;}
.brandmark img{
  /* 支給 PNG は周囲に透明な余白を含む（中身 2089x549 / 全体 2172x724）。
     画像は加工しないので、見た目の大きさは実質 96% になる。
     デスクトップは .hero の 560px が上限なのでそのまま、狭い幅だけ少し足す。 */
  width:min(560px,100%);height:auto;display:block;
  filter:drop-shadow(0 14px 42px rgba(0,0,0,.55));
}
.brandmark--sm{margin:0;}
.brandmark--sm img{width:min(230px,54vw);}

/* ---------- レイアウト ---------- */
.shell{width:min(1100px,100% - 48px);margin:0 auto;padding:56px 0 96px;}
.shell--narrow{width:min(920px,100% - 48px);}

/* ---------- ヒーロー ---------- */
.hero{margin-bottom:56px;max-width:560px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--blue-text);
  background:var(--blue-soft);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:6px 15px;
}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%;background:var(--gem);
  animation:pulse 2.6s ease-out infinite;
}
.eyebrow--closed{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line);}
.eyebrow--closed .dot{background:var(--warn);animation:none;}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(102,208,255,.55);}
  70%{box-shadow:0 0 0 8px rgba(102,208,255,0);}
  100%{box-shadow:0 0 0 0 rgba(102,208,255,0);}
}
.tagline{
  margin:0;
  font-size:clamp(23px,3.1vw,34px);
  font-weight:800;line-height:1.3;letter-spacing:-.02em;color:#fff;
  text-shadow:0 2px 30px rgba(4,10,26,.7);
}
.tagline em{
  font-style:normal;color:#8FC6FF;
  background:linear-gradient(100deg,#8FC6FF 0%,#66D0FF 48%,#4C9BFF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.lead{
  margin:0 0 32px;max-width:36em;
  font-size:16px;line-height:1.9;color:var(--ink-2);
}

/* 見出しの後ろだけ、宝石が透けすぎないように暗さの溜まりを作る */
.hero{position:relative;z-index:0;}
.hero::before{
  content:"";position:absolute;inset:-40px -90px -30px -60px;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 100% at 26% 48%,
    rgba(5,11,28,.80) 0%, rgba(5,11,28,.46) 56%, rgba(5,11,28,0) 82%);
}

/* パネル見出しの下に置く「対象週 / 締切」 */
.panel-meta{display:flex;flex-wrap:wrap;gap:0;margin:0;}
.panel-meta > div{padding:0 26px 0 0;margin-right:26px;border-right:1px solid var(--line);}
.panel-meta > div:last-child{border-right:none;margin-right:0;padding-right:0;}
.panel-meta dt{margin:0 0 2px;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-3);}
.panel-meta dd{margin:0;font-size:15px;font-weight:700;color:var(--ink);}

/* ---------- 面 ---------- */
.panel{
  position:relative;
  background:var(--surface);
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  padding:34px 36px;
  overflow:hidden;
}
/* 上端の細いハイライトで面のふちを立てる */
.panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(150,205,255,.55),transparent);
}
.panel + .panel{margin-top:20px;}
.panel-head{margin-bottom:22px;}
.panel-head h2{margin:0 0 6px;font-size:21px;font-weight:800;letter-spacing:-.01em;color:#fff;}
.panel-head p{margin:0;font-size:13.5px;color:var(--ink-2);}

.section-label{
  display:block;margin:0 0 10px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);
}

/* ---------- 枠線を光が一周するモーション ----------
   仕組み: パネルと同じ大きさの要素を重ね、内側をマスクで抜いて「枠だけ」にする。
   その中で円錐グラデーションを回すので、光が枠線に沿って流れて見える。
   回転は transform なので合成側で処理され、毎フレームの再描画が要らない。   */
.panel--beam{position:relative;}
.panel-beam{
  position:absolute;inset:0;z-index:1;
  border-radius:inherit;pointer-events:none;overflow:hidden;
  padding:2px;                         /* 光る枠線の太さ */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.panel-beam::before{
  content:"";position:absolute;left:50%;top:50%;
  width:max(150%,760px);aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,
    rgba(102,208,255,0) 0 42%,
    rgba(102,208,255,.28) 58%,
    rgba(102,208,255,.85) 74%,
    #DCF3FF 82%,
    rgba(60,150,255,.95) 88%,
    rgba(22,104,255,.35) 95%,
    rgba(102,208,255,0) 100%);
  filter:blur(.4px);
  animation:panelBeam 4.5s linear infinite;
}
@keyframes panelBeam{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* 枠のすぐ内側に、光が通るときだけ滲むやわらかい影を出す */
.panel--beam::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 34px -16px rgba(102,208,255,.75);
}

/* パネルの中身をビームより前に置く */
.panel--beam > *:not(.panel-beam){position:relative;z-index:2;}

@media (prefers-reduced-motion:reduce){
  .panel-beam::before{animation:none;}
}

/* ---------- フォーム ---------- */
.fields{border-top:1px solid var(--line);}
.field{padding:22px 0;border-bottom:1px solid var(--line);}
.field-label{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font-size:15.5px;font-weight:700;color:var(--ink);
}
.field-num{
  display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 7px;
  border-radius:var(--r-pill);background:var(--blue-soft);border:1px solid var(--line);
  font-size:11.5px;font-weight:700;color:var(--blue-text);font-variant-numeric:tabular-nums;
}
.field-label svg{width:18px;height:18px;color:var(--gem);}
.field-hint{font-size:12.5px;font-weight:500;color:var(--ink-3);}

.field textarea,.input{
  width:100%;display:block;
  font-family:var(--font);font-size:16px;line-height:1.7;color:var(--ink);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:12px 15px;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
  resize:vertical;
}
.field textarea{min-height:74px;}
.field textarea::placeholder,.input::placeholder{color:#66809F;}
.field textarea:hover,.input:hover{border-color:var(--line-2);}
.field textarea:focus,.input:focus{
  border-color:#4C9BFF;
  background:rgba(10,23,52,.85);
  box-shadow:0 0 0 3px rgba(22,104,255,.22);
}
.field-count{
  display:block;text-align:right;margin-top:6px;
  font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.field-count.is-over{color:var(--err);}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-weight:700;font-size:14.5px;line-height:1;
  border:1px solid transparent;border-radius:var(--r-pill);
  padding:12px 22px;min-height:42px;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease,
             box-shadow .18s ease,transform .12s ease;
}
.btn svg{width:17px;height:17px;}
.btn:disabled{opacity:.42;cursor:not-allowed;}
.btn:focus-visible,
.brand:focus-visible,
a:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible{outline:2px solid var(--gem);outline-offset:2px;}
.field textarea:focus-visible,.input:focus-visible{outline:none;}

.btn--primary{
  background:linear-gradient(180deg,#1668FF 0%,#0A4FD0 100%);
  color:#fff;
  box-shadow:0 12px 30px -12px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--primary:hover:not(:disabled){
  background:linear-gradient(180deg,#2E7BFF 0%,#0C5CF0 100%);
  box-shadow:0 18px 40px -12px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,.28);
  transform:translateY(-1px);
}
.btn--primary:active:not(:disabled){transform:translateY(0);background:var(--blue-press);}

.btn--quiet{background:var(--surface-2);color:var(--ink-2);border-color:var(--line);}
.btn--quiet:hover:not(:disabled){border-color:var(--line-2);color:var(--ink);}

.btn--plain{background:transparent;color:var(--ink-2);padding:10px 14px;}
.btn--plain:hover:not(:disabled){color:var(--ink);background:rgba(126,178,255,.12);}

.btn--block{width:100%;min-height:54px;font-size:16px;}

/* ---------- バッジ・通知 ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;
  border-radius:var(--r-pill);padding:5px 12px;
  background:var(--blue-soft);color:var(--blue-text);border:1px solid var(--line);
}
.badge svg{width:14px;height:14px;}

.notice{
  display:flex;gap:10px;align-items:flex-start;
  border-radius:var(--r-md);padding:13px 16px;
  font-size:13.5px;line-height:1.75;
  border:1px solid transparent;margin-bottom:18px;
}
.notice:last-child{margin-bottom:0;}
.notice svg{width:18px;height:18px;flex:0 0 18px;margin-top:3px;}
.notice--info{background:var(--blue-soft);color:var(--blue-text);border-color:var(--line);}
.notice--warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line);}
.notice--error{background:var(--err-soft);color:var(--err);border-color:var(--err-line);}
.notice--ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line);}

/* ---------- 投稿済み ---------- */
.done-head{
  display:flex;align-items:center;gap:14px;
  padding-bottom:24px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.done-mark{
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;
  display:grid;place-items:center;background:var(--ok-soft);color:var(--ok);
  border:1px solid var(--ok-line);
}
.done-mark svg{width:22px;height:22px;}
.done-mark--closed{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line);}
.done-head h2{margin:0 0 2px;font-size:20px;font-weight:800;letter-spacing:-.01em;color:#fff;}
.done-head p{margin:0;font-size:13.5px;color:var(--ink-2);}

.countdown{
  display:flex;align-items:baseline;gap:10px;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.countdown dt{font-size:12.5px;font-weight:700;color:var(--ink-3);}
.countdown dd{
  margin:0;font-size:27px;font-weight:800;letter-spacing:-.02em;
  color:var(--gem);font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px rgba(102,208,255,.45);
}

.recap{margin-top:4px;}
.recap-row{
  display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;
}
.recap-row:last-child{border-bottom:none;}
.recap-key{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;color:var(--ink-3);
}
.recap-key svg{width:16px;height:16px;color:var(--gem);}
.recap-val{color:var(--ink);white-space:pre-wrap;word-break:break-word;}

/* ---------- 管理画面 ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:26px;}
.toolbar .spacer{flex:1 1 auto;}
select.input{
  appearance:none;-webkit-appearance:none;width:auto;min-width:250px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366D0FF' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;
  padding-right:42px;cursor:pointer;font-weight:600;
}

.stats{
  display:flex;flex-wrap:wrap;margin:0 0 8px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stats > div{
  flex:1 1 150px;padding:18px 24px 18px 0;margin-right:24px;
  border-right:1px solid var(--line);
}
.stats > div:last-child{border-right:none;margin-right:0;}
.stats dt{margin:0 0 3px;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-3);}
.stats dd{
  margin:0;font-size:27px;font-weight:800;letter-spacing:-.02em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.stats dd small{font-size:12.5px;font-weight:600;color:var(--ink-3);margin-left:5px;}

.answers{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;}
.answer{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 20px;
  transition:border-color .18s ease,transform .18s ease;
}
.answer:hover{border-color:var(--line-2);transform:translateY(-2px);}
.answer-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.answer-no{font-size:12px;font-weight:700;color:var(--blue-text);font-variant-numeric:tabular-nums;}
.answer-time{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.answer .recap-row{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:11px 0;font-size:14px;}

.preview{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);}
.preview img{
  max-width:min(300px,100%);height:auto;display:block;
  border-radius:var(--r-md);border:1px solid var(--line);box-shadow:var(--sh-2);
}
.preview p{margin:10px 0 0;font-size:12px;color:var(--ink-3);}

/* ---------- ゲート ---------- */
.gate{max-width:410px;margin:7vh auto 0;}
.gate .brandmark--sm{margin:0 auto 22px;}
.gate .brandmark--sm img{margin:0 auto;}
.gate-mark{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--gem);border:1px solid var(--line);margin-bottom:18px;
}
.gate-mark svg{width:22px;height:22px;}
.gate h1{margin:0 0 8px;font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff;}
.gate p{margin:0 0 26px;font-size:14px;color:var(--ink-2);}
.gate form{display:flex;flex-direction:column;gap:12px;}

/* ---------- フッター ---------- */
.site-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:64px;padding:24px 0 0;
  font-size:12.5px;color:var(--ink-3);line-height:1.9;
}
.site-foot p{margin:0;}
.gate-foot{margin:22px 0 0;text-align:center;font-size:12.5px;color:var(--ink-3);}
.gate-foot a{color:var(--blue-text);text-decoration:none;}
.site-foot a{color:var(--blue-text);text-decoration:none;}
.site-foot a:hover{text-decoration:underline;}

/* ---------- ユーティリティ ---------- */
.hidden{display:none !important;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.fade-in{animation:fadeIn .38s ease both;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .fade-in{animation:none;}
  .eyebrow .dot{animation:none;}
  .btn,.answer{transition:none;}
}

/* ============================================================
   スマホ
   ============================================================ */
.form-actions{margin-top:26px;}

@media (max-width:960px){
  .hero{margin-bottom:44px;max-width:none;}
  /* 見出し後ろの暗さの溜まりが外へ出ると横スクロールになるので内側に収める */
  .hero::before{inset:-30px -24px -24px -24px;}
  .shell{padding:40px 0 80px;}
  .character img{top:4vh;right:14px;height:min(44vh,420px);opacity:.78;}
  .character--quiet img{opacity:.44;}
}

@media (max-width:640px){
  .shell,.shell--narrow{
    width:100%;
    padding-left:max(18px,env(safe-area-inset-left));
    padding-right:max(18px,env(safe-area-inset-right));
  }
  .shell{padding-top:30px;padding-bottom:calc(56px + env(safe-area-inset-bottom));}
  .brandmark{margin-bottom:20px;}
  .brandmark img{width:min(354px,90%);}
  .brandmark--sm img{width:min(170px,46vw);}
  .head-actions{gap:2px;}
  .page-top{margin-bottom:22px;gap:10px;}
  /* スマホでも切れないよう画面内に収める。顔を上に出し、体はフォームの下へ */
  .character img{top:3vh;right:8px;height:min(34vh,300px);opacity:.62;}
  .character--quiet img{opacity:.32;}
  .btn{min-height:44px;padding:11px 16px;font-size:13.5px;}
  .btn--plain{padding:11px 12px;}

  .hero{margin-bottom:32px;}
  .hero::before{inset:-24px 0 -20px 0;}
  .tagline{margin-bottom:0;}
  .lead{font-size:15px;line-height:1.85;margin-bottom:24px;}
  .panel-meta > div{flex:1 1 42%;padding:0 14px 0 0;margin-right:14px;}
  .panel-meta dd{font-size:14px;}

  .panel{padding:24px 20px;border-radius:18px;}
  .panel + .panel{margin-top:16px;}
  .panel-head{margin-bottom:20px;}
  .panel-head h2{font-size:19px;}

  .field{padding:20px 0;}
  .field-label{font-size:15px;flex-wrap:wrap;gap:8px;}

  /* 送信ボタンを画面下に貼り付ける */
  .form-actions{
    position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));z-index:6;margin-top:24px;
  }
  .form-actions::before{
    content:"";position:absolute;inset:-18px -20px -20px;z-index:-1;
    background:linear-gradient(to top,#0A1731 0%,#0A1731 62%,rgba(10,23,49,0) 100%);
  }

  .countdown dd{font-size:24px;}
  .recap-row{grid-template-columns:1fr;gap:2px;padding:12px 0;}
  .answer .recap-row{grid-template-columns:1fr;gap:2px;}
  .answer:hover{transform:none;}

  /* 管理画面の操作はボタンが3つあるため、スマホでは等幅3列に折り返す */
  #admin-screen .page-top{flex-direction:column;align-items:stretch;}
  #admin-screen .head-actions{
    width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  }
  #admin-screen .head-actions .btn{min-width:0;padding-left:6px;padding-right:6px;gap:6px;}
  .site-foot{flex-direction:column;align-items:flex-start;}

  .toolbar{flex-direction:column;align-items:stretch;gap:10px;}
  .toolbar .spacer{display:none;}
  .toolbar .btn{width:100%;min-height:50px;}
  select.input{width:100%;min-width:0;}
  .stats > div{
    flex:1 1 100%;border-right:none;margin-right:0;padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  .stats > div:last-child{border-bottom:none;}
  .answers{grid-template-columns:1fr;}
  .gate{margin-top:4vh;}
  .gate .btn{min-height:50px;}
  .site-foot{margin-top:44px;}
}

@media (max-width:400px){
  .brandmark img{width:92%;}
  .brandmark--sm img{width:150px;}
  #admin-screen .head-actions .btn svg{display:none;}
  #admin-screen .head-actions .btn{font-size:12px;}
  .btn{font-size:12.5px;padding:11px 13px;}
  .panel{padding:20px 16px;}
}

/* 横向きで画面が低いときは貼り付きを解除（キーボードで潰れるため） */
@media (max-width:900px) and (max-height:520px){
  .form-actions{position:static;}
}