/* visitor画面のスタイル。CSP(style-src 'self')のため外部ファイルに切り出した。 */
/* 参加者アプリ（デザインカンプ準拠）。メーカー・事務局の機能はここには置かない。 */
:root {
  --pv-navy: #1b3a6b; --pv-red: #e2333c;
  /* 空のイメージ。上ほど青く、下は地平線の光でかすむ実際の空の見え方に合わせる */
  --sky-top:  #b4d4f2;
  --sky-mid:  #d3e6fa;
  --sky-haze: #eaf5ff;
}
body { min-height: 100dvh; }   /* 背景は style.css の body.sky（空のイメージ） */
.pv { max-width: 420px; margin: 0 auto; padding: 20px 20px 52px; }
/* ログインは縦に伸ばし、ボタン以下を下寄せにする（カンプのレイアウト） */
#login.pv-login { display: flex; flex-direction: column; min-height: calc(100dvh - 72px); }
#login .spacer { flex: 1 1 auto; min-height: 40px; }

.pv-card { background: #fff; border-radius: 14px; padding: 16px 18px 18px;
           box-shadow: 0 6px 18px rgba(18, 49, 95, .10); }
.pv-logo { height: 22px; display: block; }
.pv-brand { font-weight: 800; color: var(--pv-red); letter-spacing: .02em; font-size: 16px; }
.pv-brand span { color: var(--pv-navy); }
.pv-event { font-size: 12.5px; line-height: 1.8; color: #1b2a44; margin-top: 12px; }
.pv-label { font-size: 11.5px; color: #35455f; margin: 26px 0 8px; }
.pv-input { width: 100%; border: 2px solid var(--pv-navy); border-radius: 999px;
            height: 50px; padding: 0 20px; font-size: 16px; letter-spacing: .06em; background: #fff; }
.pv-input::placeholder { color: #c3cfdf; letter-spacing: .04em; }
.pv-btn { width: 100%; border: 0; border-radius: 999px; height: 54px; font-size: 16px;
          font-weight: 700; background: var(--pv-navy); color: #fff; cursor: pointer;
          letter-spacing: .04em; box-shadow: 0 6px 16px rgba(27, 58, 107, .25); }
.pv-btn:active { transform: translateY(1px); }
.pv-btn.light { background: #fff; color: var(--pv-navy); border: 1px solid #cfdcf0; box-shadow: none; }
.pv-btn.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }

.pv-agree { display: flex; gap: 10px; align-items: flex-start;
            background: rgba(255,255,255,.9); border: 1.5px solid rgba(255,255,255,.9);
            border-radius: 16px; padding: 11px 13px; margin-top: 16px; font-size: 12px;
            line-height: 1.55; color: #4c5666; cursor: pointer; }
.pv-agree a { color: var(--pv-navy); }
/* チェックは紺の塗り（カンプ） */
.pv-agree input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px;
                  flex: 0 0 20px; border: 2px solid var(--pv-navy); border-radius: 6px;
                  background: #fff; margin: 0; position: relative; cursor: pointer; }
.pv-agree input:checked { background: var(--pv-navy); }
.pv-agree input:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg);
}
.pv-link { display: block; text-align: center; margin-top: 16px; font-size: 11.5px;
           color: var(--pv-navy); text-decoration: underline; }

.pv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pv-chip { background: var(--pv-navy); color: #fff; font: 700 9px ui-monospace, Menlo, monospace;
           border-radius: 999px; padding: 3px 9px; letter-spacing: .04em; }
.pv-avatar { margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
             background: #fff; box-shadow: 0 2px 8px rgba(11,42,91,.12); }
.pv-count { font-size: 22px; font-weight: 700; color: #16233a; }
.pv-count small { font-size: 13px; font-weight: 700; color: #6b7a8d; }
.pv-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.75); overflow: hidden;
          margin: 10px 0 16px; }
.pv-bar > div { height: 100%; background: var(--pv-navy); transition: width .5s; }

.pv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
           /* 下のカード（応募案内・アンケート）とくっついて見えないよう画面幅に応じて空ける */
           margin-bottom: clamp(24px, 7vw, 36px); }
.pv-cell { aspect-ratio: 1/1; border-radius: 18px; display: flex; overflow: hidden;
           align-items: center; justify-content: center; padding: 6px;
           border: 2px dashed rgba(27,58,107,.35); background: rgba(255,255,255,.4);
           color: #6b7a8d; }
.pv-cell .no { font: 700 13px ui-monospace, Menlo, monospace; letter-spacing: .04em; }
.pv-cell.got { border: 3px solid var(--pv-red); background: rgba(255,255,255,.95);
               cursor: pointer; }
.pv-cell.got:active { transform: scale(.96); }
/* 朱肉スタンプ風の記号（丸・四角・三角）。画像アイコンがある場合はそれを使う */
.pv-cell .mk { width: 42%; height: 42%; }
.pv-cell .mk.circle { border: 3px solid var(--pv-red); border-radius: 50%; }
.pv-cell .mk.square { border: 3px solid var(--pv-red); border-radius: 4px; }
.pv-cell .mk.tri { width: 0; height: 0; border-left: 15px solid transparent;
                   border-right: 15px solid transparent; border-bottom: 26px solid var(--pv-red); }
/* ロゴは枠いっぱいに。小さい画面でも社名が読めるようにする */
.pv-cell img.ic { width: 100%; height: 100%; object-fit: contain; }

/* 背景が透過で白抜き（白い文字・白いシンボル）のロゴだけ、文字の輪郭を細く出す。
   判定は visitor.js の needsEdge()。背景が塗りつぶされたロゴに付けると
   四角い枠線になってしまうので、透過しているものだけを対象にする。 */
.ic-edge { filter: drop-shadow(0 1px 0 rgba(22,35,58,.55)) drop-shadow(0 -1px 0 rgba(22,35,58,.55))
                   drop-shadow(1px 0 0 rgba(22,35,58,.55)) drop-shadow(-1px 0 0 rgba(22,35,58,.55)); }

/* スタンプをタップしたときの拡大表示 */
.pv-modal { position: fixed; inset: 0; z-index: 60; display: none; overflow: auto;
            align-items: center; justify-content: center; padding: 24px;
            background: rgba(9, 26, 52, .55); }
.pv-modal.on { display: flex; animation: pvfade .2s ease-out; }
.pv-modal .card { width: min(340px, 100%); background: #fff; border-radius: 20px;
                  padding: 20px; text-align: center; max-height: calc(100dvh - 48px);
                  overflow: auto;
                  box-shadow: 0 20px 50px rgba(0,0,0,.35);
                  animation: pvpop .3s cubic-bezier(.2,1.4,.4,1); }
.pv-modal .plate { height: min(240px, 46vh); border-radius: 16px; padding: 14px;
                   border: 3px solid var(--pv-red); background: #fff;
                   display: flex; align-items: center; justify-content: center; }
/* SVGは幅指定が無いと小さいまま止まるので、枠いっぱいに広げてから contain で収める */
.pv-modal .plate img { width: 100%; height: 100%; object-fit: contain; }
.pv-modal .plate .mk { width: 96px; height: 96px; }
.pv-modal .nm { font-size: 17px; font-weight: 800; color: var(--pv-navy); margin-top: 16px;
                line-height: 1.5; }
.pv-modal .sub { font-size: 12px; color: #6b7a8d; margin: 6px 0 16px; }

/* 獲得の瞬間（濃紺のフルスクリーン） */
.pv-win { position: fixed; inset: 0; z-index: 50; display: none; flex-direction: column;
          align-items: center; justify-content: center; padding: 24px; text-align: center;
          background: radial-gradient(120% 90% at 50% 0%, #17427f 0%, var(--pv-navy) 55%, #071c3e 100%);
          color: #fff; }
.pv-win.on { display: flex; animation: pvfade .25s ease-out; }
@keyframes pvfade { from { opacity: 0 } to { opacity: 1 } }
.pv-win .disc { width: 190px; height: 190px; border-radius: 50%; background: #fff;
                border: 5px solid var(--pv-red); display: flex; flex-direction: column;
                overflow: hidden;      /* 何を入れても円からはみ出さない */
                align-items: center; justify-content: center; gap: 6px;
                box-shadow: 0 18px 50px rgba(0,0,0,.35); animation: pvpop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes pvpop { from { transform: scale(.5); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.pv-win .disc .ic { font-size: 62px; line-height: 1; }
/* 円の内側は直径180px。下に SPOT の文字が入るぶんを引くと、正方形のロゴが
   四隅まではみ出さない上限は約117px。余裕を見て100pxにする。 */
.pv-win .disc img.ic { width: 100px; height: 100px; object-fit: contain; }
.pv-win .disc .sp { font-size: 11px; letter-spacing: .12em; color: #6b7a93; font-weight: 700; }
.pv-win h2 { font-size: 26px; margin: 22px 0 6px; }
.pv-win .maker { font-size: 14px; opacity: .85; }
.pv-win .n { font-size: 34px; font-weight: 800; margin-top: 18px; }
.pv-win .n small { font-size: 16px; opacity: .7; }
.pv-win .wbar { width: min(320px, 82%); height: 6px; border-radius: 999px;
                background: rgba(255,255,255,.25); overflow: hidden; margin: 12px 0 26px; }
.pv-win .wbar > div { height: 100%; background: var(--pv-red); transition: width .6s; }
.pv-win .pv-btn { width: min(320px, 82%); background: #fff; color: var(--pv-navy); }
.pv-win .msg { margin-top: 14px; font-size: 13px; opacity: .9; }