*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#f4f5f8;color:#222}.wrap{max-width:920px;margin:auto;padding:14px}h1{text-align:center}.card{background:#fff;border-radius:18px;padding:18px;margin:14px 0;box-shadow:0 3px 14px #0001}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px}.person{display:block;border:2px solid #e2e4ea;border-radius:16px;padding:10px;text-align:center;cursor:pointer;background:#fff}.person:has(input:checked){border-color:#222;transform:scale(1.02)}.person input{display:none}.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#eee;display:block;margin:0 auto 8px}.name{font-weight:800;font-size:18px}.full,.btn{display:block;width:100%;padding:14px;border:0;border-radius:12px;background:#222;color:#fff;text-align:center;text-decoration:none;font-size:17px;font-weight:800;cursor:pointer}.sub{background:#667085}.danger{background:#b42318}.notice{padding:12px;border-radius:10px;background:#fff1d6;margin:10px 0}.meta{color:#667085}.big{font-size:28px;font-weight:900}.qr{text-align:center}.qr img{max-width:260px;width:100%}input[type=text],select,input[type=file]{width:100%;padding:13px;border:1px solid #ccd0d8;border-radius:10px;font-size:16px}.mode{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mode label{border:2px solid #ddd;border-radius:14px;padding:16px}.rank{display:flex;align-items:center;gap:14px;padding:12px;border-bottom:1px solid #eee}.rank .avatar{margin:0;width:72px;height:72px}.medal{font-size:28px;width:45px}.winner{text-align:center}.winner .avatar{width:180px;height:180px}.search{margin-bottom:12px}@media(max-width:520px){.grid{grid-template-columns:repeat(3,1fr)}.avatar{width:78px;height:78px}.name{font-size:14px}.mode{grid-template-columns:1fr}}


/* v0.2 result display sizing */
.view-mode{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.view-mode label{border:2px solid #ddd;border-radius:14px;padding:16px;cursor:pointer}.view-mode label:has(input:checked){border-color:#222;background:#f8f8fa}
.result-screen{min-height:100dvh;overflow-x:hidden}.result-screen .result-wrap{max-width:1180px;min-height:100dvh;display:flex;flex-direction:column;padding:clamp(8px,1.4vh,16px)}.result-screen h1{font-size:clamp(24px,3.2vh,42px);margin:clamp(4px,1vh,12px) 0}.result-screen h2{font-size:clamp(19px,2.5vh,32px);margin:.35em 0}.result-screen .card{padding:clamp(10px,1.7vh,20px);margin:clamp(5px,.9vh,10px) 0}.result-layout{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(420px,1.15fr);gap:clamp(8px,1.4vw,18px);flex:1;min-height:0}.result-question,.result-ranking{margin:0!important}.result-ranking{overflow:auto}.result-screen .rank{padding:clamp(6px,1vh,12px);gap:clamp(8px,1vw,14px)}.result-screen .rank .avatar{width:clamp(54px,9vh,92px);height:clamp(54px,9vh,92px)}.result-screen .medal{font-size:clamp(24px,4vh,40px);width:clamp(38px,4vw,54px)}.result-screen .big{font-size:clamp(21px,3vh,34px)}.result-nav{display:flex;gap:10px;align-items:center}.result-nav .btn{margin:0}.result-nav br{display:none}.final-ranking{overflow:auto;flex:1;min-height:0}.final-ranking .rank .avatar{width:clamp(54px,8vh,86px);height:clamp(54px,8vh,86px)}
/* Forced PC */
.view-pc .result-wrap{max-width:1600px}.view-pc .result-layout{grid-template-columns:.75fr 1.25fr}.view-pc .result-nav{position:sticky;bottom:0}
/* Forced tablet */
.view-tablet .result-wrap{max-width:1000px}.view-tablet .result-layout{grid-template-columns:.9fr 1.1fr}.view-tablet .result-screen .rank .avatar{width:70px;height:70px}
/* Forced smartphone */
.view-smartphone .result-wrap{max-width:620px}.view-smartphone .result-layout{display:block}.view-smartphone .result-question{padding:10px}.view-smartphone .result-question p{margin:6px 0}.view-smartphone .result-ranking{max-height:48dvh}.view-smartphone .rank .avatar{width:54px;height:54px}.view-smartphone .rank{padding:6px}.view-smartphone .result-nav{position:sticky;bottom:0;background:#fff;padding:8px;z-index:5}.view-smartphone h1{font-size:25px;margin:5px 0}.view-smartphone h2{font-size:20px}.view-smartphone .big{font-size:21px}
/* Auto detection: height matters as much as width */
@media (max-width:760px){.view-auto .result-wrap{max-width:620px}.view-auto .result-layout{display:block}.view-auto .result-question{padding:10px}.view-auto .result-question p{margin:6px 0}.view-auto .result-ranking{max-height:48dvh}.view-auto .rank{padding:6px}.view-auto .rank .avatar{width:54px;height:54px}.view-auto .result-nav{position:sticky;bottom:0;background:#fff;padding:8px;z-index:5}.view-auto h1{font-size:25px;margin:5px 0}.view-auto h2{font-size:20px}.view-auto .big{font-size:21px}}
@media (min-width:761px) and (max-width:1180px){.view-auto .result-wrap{max-width:1000px}.view-auto .result-layout{grid-template-columns:.9fr 1.1fr}}
@media (max-height:760px) and (min-width:761px){.view-auto .result-screen h1,.view-auto h1{font-size:25px;margin:3px 0}.view-auto .card{padding:9px;margin:4px 0}.view-auto .rank{padding:5px}.view-auto .rank .avatar{width:52px;height:52px}.view-auto .big{font-size:20px}.view-auto h2{font-size:19px}.view-auto .result-nav{padding:6px}}
@media (max-width:520px){.view-mode{grid-template-columns:1fr}}
/* Final ranking uses available width to avoid unnecessary vertical scrolling */
.view-pc .final-ranking{display:grid;grid-template-columns:1fr 1fr;align-content:start;column-gap:18px}.view-tablet .final-ranking{display:grid;grid-template-columns:1fr 1fr;align-content:start;column-gap:12px}
@media (min-width:900px){.view-auto .final-ranking{display:grid;grid-template-columns:1fr 1fr;align-content:start;column-gap:14px}}
@media (min-width:1400px) and (min-height:850px){.view-auto .final-ranking,.view-pc .final-ranking{grid-template-columns:repeat(3,1fr)}}


/* v0.3 バラエティ風 結果発表 */
.show-wrap{max-width:1500px!important}.show-question{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:#fff;border-radius:16px;padding:10px 18px;box-shadow:0 3px 14px #0001}.show-question strong{text-align:center;font-size:clamp(20px,2.6vw,38px)}.show-question span{font-weight:800;color:#667085;white-space:nowrap}.reveal-ready{text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;min-height:0}.reveal-title{font-size:clamp(34px,6vw,76px);font-weight:1000}.reveal-sub{font-size:clamp(20px,3vw,38px);margin:10px 0 24px}.reveal-btn{max-width:720px;margin:auto;font-size:clamp(18px,2.3vw,30px);padding:clamp(14px,2vh,24px)}.reveal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.3vw,18px);align-items:stretch;flex:1;min-height:0;margin-top:10px}.reveal-card{background:#fff;border-radius:22px;padding:clamp(8px,1.4vh,18px);text-align:center;box-shadow:0 5px 18px #0002;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.reveal-card.champion{transform:scale(1.025);border:4px solid #f0c14b}.reveal-medal{font-size:clamp(22px,3.3vh,42px);font-weight:1000}.reveal-avatar{width:clamp(90px,20vh,220px);height:clamp(90px,20vh,220px);border-radius:50%;object-fit:cover;margin:clamp(5px,1vh,12px) auto}.champion .reveal-avatar{width:clamp(110px,24vh,260px);height:clamp(110px,24vh,260px)}.reveal-name{font-size:clamp(24px,4vh,48px);font-weight:1000;line-height:1.1}.reveal-votes{font-size:clamp(20px,3vh,36px);font-weight:900;margin-top:4px}.reveal-nav{display:flex;gap:10px;align-items:center;margin-top:8px;position:sticky;bottom:0}.small-action{max-width:220px}.voter-details{width:100%;margin-top:8px}.voter-details summary{cursor:pointer;font-weight:800;color:#667085}.voter-grid{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:7px;max-height:15vh;overflow:auto}.voter{font-size:12px;font-weight:700}.voter img{display:block;width:38px;height:38px;border-radius:50%;object-fit:cover;margin:auto}.today-star{text-align:center;margin-top:4px!important;padding:clamp(8px,1.3vh,16px)!important}.star-caption{font-size:clamp(22px,3vh,38px);font-weight:1000}.star-avatar{width:clamp(100px,18vh,190px);height:clamp(100px,18vh,190px);border-radius:50%;object-fit:cover;margin:5px auto}.star-name{font-size:clamp(28px,4.5vh,52px);font-weight:1000}.star-votes{font-size:clamp(18px,2.7vh,30px);font-weight:900}.compact-final{margin-top:6px!important}
@media(max-width:760px){.show-question{grid-template-columns:1fr;padding:7px;text-align:center;gap:2px}.show-question strong{order:-1}.reveal-grid{grid-template-columns:1fr;overflow:auto}.reveal-card{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;justify-content:start;text-align:left}.reveal-card .reveal-medal{font-size:20px}.reveal-avatar,.champion .reveal-avatar{width:58px;height:58px;margin:0}.reveal-name{font-size:22px}.reveal-votes{font-size:18px}.voter-details{grid-column:1/-1;text-align:center}.reveal-nav{background:#fff;padding:6px}.small-action{max-width:130px;font-size:12px;padding:10px}.star-avatar{width:100px;height:100px}}
@media(max-height:760px) and (min-width:761px){.reveal-avatar{width:110px;height:110px}.champion .reveal-avatar{width:135px;height:135px}.reveal-card{padding:7px}.reveal-medal{font-size:24px}.reveal-name{font-size:28px}.reveal-votes{font-size:22px}.voter-grid{max-height:10vh}.star-avatar{width:100px;height:100px}}


/* v0.3.1 写真軽量化・表示サイズ固定 */
.photo-preview-wrap{text-align:center;margin-top:10px}.photo-preview{width:120px;height:120px;object-fit:cover;border-radius:50%;display:block;margin:0 auto 6px}
.people .person{overflow:hidden}.people .person .avatar{width:84px!important;height:84px!important;max-width:84px!important;max-height:84px!important;object-fit:cover!important}
.result-screen img.reveal-avatar{width:140px!important;height:140px!important;max-width:140px!important;max-height:140px!important;object-fit:cover!important}
.result-screen .champion img.reveal-avatar{width:170px!important;height:170px!important;max-width:170px!important;max-height:170px!important}
.result-screen img.star-avatar{width:140px!important;height:140px!important;max-width:140px!important;max-height:140px!important;object-fit:cover!important}
.result-screen .rank img.avatar{width:64px!important;height:64px!important;max-width:64px!important;max-height:64px!important;object-fit:cover!important}
.result-screen .voter img{width:36px!important;height:36px!important;max-width:36px!important;max-height:36px!important;object-fit:cover!important}
@media(max-width:760px){
  .people .person .avatar{width:68px!important;height:68px!important}
  .result-screen img.reveal-avatar,.result-screen .champion img.reveal-avatar{width:64px!important;height:64px!important;max-width:64px!important;max-height:64px!important}
  .result-screen img.star-avatar{width:96px!important;height:96px!important;max-width:96px!important;max-height:96px!important}
}

/* v0.4 ジャンル・問題数選択 */
.category-grid,.count-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px;margin:10px 0 18px}
.category-grid label,.count-grid label,.category-all{display:block;background:#fff;border:2px solid #e5e7eb;border-radius:14px;padding:13px;cursor:pointer}
.category-grid label:has(input:checked),.count-grid label:has(input:checked),.category-all:has(input:checked){border-color:#667eea;background:#f4f3ff}
.category-grid label:has(input:disabled){opacity:.45;cursor:default}


/* v0.5 live status + colorful lightweight themes */
body{background:linear-gradient(135deg,#f7f8ff 0%,#fff7f2 45%,#f7fffb 100%);background-attachment:fixed}
.live-counts{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.live-pill{font-size:clamp(18px,2.4vw,27px);padding:10px 16px;border-radius:999px;background:#f2f4ff;border:2px solid #dfe3ff}.answered-pill{background:#effcf4;border-color:#ccefd8}
.question-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 30px rgba(31,41,55,.10)}
.question-card>*:not(.question-watermark){position:relative;z-index:1}.question-watermark{position:absolute;right:-8px;top:-18px;font-size:clamp(90px,20vw,180px);opacity:.09;filter:saturate(.8);pointer-events:none;line-height:1;z-index:0}
.question-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px}.category-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.78);font-size:13px;font-weight:900;box-shadow:0 2px 8px #0000000d}.question-title{font-size:clamp(21px,5vw,32px);line-height:1.35;margin:.45em 0 .7em}
.theme-fun .question-card,.question-card.theme-fun,.result-screen.theme-fun{background:linear-gradient(135deg,#fff3cf,#fff9ee 48%,#ffe9d4)}
.theme-personality .question-card,.question-card.theme-personality,.result-screen.theme-personality{background:linear-gradient(135deg,#ffeaf3,#fff7fb 52%,#f3eaff)}
.theme-if .question-card,.question-card.theme-if,.result-screen.theme-if{background:linear-gradient(135deg,#e9edff,#f8f8ff 48%,#e8f5ff)}
.theme-life .question-card,.question-card.theme-life,.result-screen.theme-life{background:linear-gradient(135deg,#e8faee,#f7fff8 50%,#e9f8f7)}
.theme-family .question-card,.question-card.theme-family,.result-screen.theme-family{background:linear-gradient(135deg,#fff0e5,#fff9f3 48%,#fff0f0)}
.result-screen{position:relative}.result-screen .result-watermark{position:fixed;right:2vw;top:5vh;font-size:min(25vw,260px);opacity:.055;z-index:0}.result-screen .result-wrap{position:relative;z-index:1}.answer-live{font-weight:1000;color:#16834b;background:#effcf4;padding:6px 11px;border-radius:999px;border:1px solid #ccefd8}
.result-screen .show-question{background:rgba(255,255,255,.88);backdrop-filter:blur(6px)}
.result-screen .reveal-card{background:rgba(255,255,255,.92)}
.final-celebration{background:linear-gradient(135deg,#fff7d6,#fff,#f0eaff)}.celebration-bg{position:fixed;inset:auto 3vw 2vh auto;font-size:min(28vw,280px);opacity:.06;pointer-events:none}
@media(max-width:600px){.question-watermark{font-size:110px}.question-head{align-items:flex-start}.category-badge{font-size:12px}.live-counts{display:grid;grid-template-columns:1fr}.show-question .category-badge{justify-self:center}.answer-live{font-size:12px}}


/* v0.5.1 写真登録：カメラ / ライブラリ選択 */
.photo-source-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:14px 0;
}
.photo-source-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  padding:12px 10px;
  border-radius:16px;
  font-size:17px;
  font-weight:900;
  text-align:center;
  cursor:pointer;
  border:2px solid rgba(80,90,120,.15);
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:transform .12s ease,box-shadow .12s ease;
}
.photo-source-btn:active{
  transform:scale(.98);
  box-shadow:0 2px 7px rgba(0,0,0,.08);
}
.camera-btn{background:linear-gradient(135deg,#fff7df,#fff);}
.library-btn{background:linear-gradient(135deg,#edf5ff,#fff);}
.photo-source-input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.photo-selected{
  margin-top:5px;
  font-weight:900;
  color:#267a3b;
}
@media(max-width:520px){
  .photo-source-buttons{grid-template-columns:1fr;}
  .photo-source-btn{min-height:58px;}
}

/* v0.5.2 結果発表：問題文を主役に */
.result-screen .show-question{padding:clamp(14px,2vh,24px) clamp(18px,2.5vw,34px);min-height:clamp(105px,16vh,175px)}
.result-screen .show-question strong{font-size:clamp(32px,4.4vw,68px)!important;line-height:1.18;font-weight:1000}
.result-screen .show-question span{font-size:clamp(14px,1.4vw,20px)}
.result-screen .compact-reveal-sub{font-size:clamp(16px,1.8vw,24px)!important;font-weight:700;color:#667085;margin:0 0 14px}
@media(max-width:760px){.result-screen .show-question{min-height:auto;padding:12px 10px}.result-screen .show-question strong{font-size:clamp(27px,8vw,42px)!important}.result-screen .compact-reveal-sub{font-size:16px!important;margin-bottom:10px}}
@media(max-height:760px) and (min-width:761px){.result-screen .show-question{min-height:90px;padding:8px 16px}.result-screen .show-question strong{font-size:clamp(30px,4vw,50px)!important}}


/* v0.5.3 同率順位・3秒自動発表 */
.auto-note{margin-top:12px}
.auto-reveal-area{margin-top:10px}
.auto-rank-group{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .45s ease,transform .45s ease;margin:10px 0}
.auto-rank-group.is-visible{opacity:1;transform:none}
.group-rank-title{text-align:center;font-size:clamp(25px,3.8vh,46px);font-weight:1000;margin:4px 0 8px}
.tie-label{display:inline-block;font-size:.48em;vertical-align:middle;padding:5px 10px;border-radius:999px;background:#fff;border:2px solid #e5e7eb;margin-left:8px}
.tie-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;max-width:1100px;margin:0 auto}
.tie-grid .reveal-card{min-height:0;padding:10px}
.tie-grid .reveal-card.champion{border:4px solid #f0c14b;box-shadow:0 7px 24px rgba(240,193,75,.35)}
.auto-finish-nav{margin-top:12px}
@keyframes winnerPop{0%{transform:scale(.7);opacity:0}65%{transform:scale(1.07);opacity:1}100%{transform:scale(1)}}
.rank-group-1.is-visible .reveal-card{animation:winnerPop .65s ease both}
@media(max-width:760px){
 .tie-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .group-rank-title{font-size:28px}
}


/* v0.5.4 PC結果画面を横並び・送信ボタン制御 */
@media(min-width:1000px){
  .result-screen .auto-reveal-area{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    align-items:stretch;
  }
  .result-screen .auto-rank-group{
    margin:0;
    min-width:0;
  }
  .result-screen .auto-rank-group .tie-grid{
    grid-template-columns:1fr;
    gap:8px;
  }
  .result-screen .group-rank-title{
    font-size:clamp(24px,2.5vw,36px);
    margin:0 0 6px;
  }
  .result-screen .reveal-card{
    padding:8px;
  }
  .result-screen img.reveal-avatar,
  .result-screen .champion img.reveal-avatar{
    width:clamp(90px,14vh,150px)!important;
    height:clamp(90px,14vh,150px)!important;
    max-width:150px!important;
    max-height:150px!important;
  }
  .result-screen .reveal-name{font-size:clamp(24px,3vh,36px)}
  .result-screen .reveal-votes{font-size:clamp(18px,2.3vh,28px)}
  .result-screen .auto-finish-nav{
    grid-column:1/-1;
  }
  .result-screen .show-wrap{
    height:100vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .result-screen .auto-reveal-area{
    flex:1;
    min-height:0;
    overflow:hidden;
  }
}
.submit-card{position:sticky;bottom:0;z-index:20}
#submitAnswers:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.25)}
.answer-progress{text-align:center;margin-top:8px;font-weight:800}


/* v0.5.5 PC表示モードは画面幅に関係なく必ず横並び */
.result-screen.view-pc .auto-reveal-area{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
  flex:1;
  min-height:0;
  overflow:hidden!important;
}
.result-screen.view-pc .auto-rank-group{
  margin:0!important;
  min-width:0!important;
}
.result-screen.view-pc .auto-rank-group .tie-grid{
  grid-template-columns:1fr!important;
  gap:8px!important;
}
.result-screen.view-pc .auto-finish-nav{
  grid-column:1/-1!important;
}
.result-screen.view-pc .show-wrap{
  height:100vh!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
.result-screen.view-pc img.reveal-avatar,
.result-screen.view-pc .champion img.reveal-avatar{
  width:clamp(90px,14vh,150px)!important;
  height:clamp(90px,14vh,150px)!important;
  max-width:150px!important;
  max-height:150px!important;
}

/* Autoでも一般的なPC幅では横並び */
@media(min-width:900px){
  .result-screen.view-auto .auto-reveal-area{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
    align-items:stretch!important;
  }
  .result-screen.view-auto .auto-rank-group .tie-grid{
    grid-template-columns:1fr!important;
  }
  .result-screen.view-auto .auto-finish-nav{grid-column:1/-1!important}
}