:root{
  --bg:#edf2f7;
  --card:#ffffff;
  --dark:#0f172a;
  --line:#d6dee8;
  --muted:#64748b;
  --blue:#2563eb;
  --green:#059669;
  --red:#dc2626;
  --orange:#f59e0b;
  --purple:#7c3aed;
  --gold:#facc15;
  --silver:#cbd5e1;
  --bronze:#d97706;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:#0f172a;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
header{
  background:var(--dark);
  color:#fff;
  padding:16px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
h1,h2,h3{margin:0 0 14px}
main.wrap{padding:18px;display:grid;gap:16px}
.card{background:var(--card);border-radius:14px;padding:18px;box-shadow:0 4px 18px rgba(15,23,42,.08)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.badge{background:#1e293b;border-radius:999px;padding:8px 12px;font-weight:800}
button{border:0;border-radius:9px;padding:11px 15px;font-weight:800;color:#fff;background:#475569;cursor:pointer}
button.blue{background:var(--blue)}
button.green{background:var(--green)}
button.red{background:var(--red)}
button.orange{background:var(--orange);color:#111827}
input,textarea,select{border:1px solid #cbd5e1;border-radius:8px;padding:10px;font-size:15px;background:white}
textarea{width:100%;min-height:80px}
label{font-weight:800;font-size:14px}
.muted{color:var(--muted);font-size:13px}
.images{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.images img{width:100%;max-height:55vh;object-fit:contain;border-radius:12px;border:1px solid var(--line);background:#f8fafc}
.answer{border:1px solid var(--line);border-radius:10px;padding:10px;margin:8px 0;background:#fff}
.participantCard{border:1px solid var(--line);border-radius:12px;padding:12px;background:#f8fafc;margin:10px 0}
.status-pending{border-left:7px solid #94a3b8}
.status-correct{border-left:7px solid #16a34a}
.status-wrong{border-left:7px solid #dc2626}
.status-partial{border-left:7px solid #f59e0b}
.rank{font-size:22px;font-weight:900;border-bottom:1px solid var(--line);padding:10px 0}
.questionTitle{font-size:28px;font-weight:900}
.timer{font-size:34px;font-weight:900;color:var(--blue)}
.big{font-size:24px;font-weight:800}
.hidden{display:none!important}

/* ===== Player ===== */
.player-page header{min-height:64px}
.player-wrap{padding:16px}
.player-login{max-width:100%}
.player-game{display:grid;gap:16px}
.player-question-card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 4px 18px rgba(15,23,42,.08)}
.player-topbar{display:grid;grid-template-columns:1fr auto 120px;align-items:center;gap:16px;margin-bottom:10px}
.player-qtitle{font-size:30px;font-weight:900}
.player-timer-wrap{text-align:center}
.player-timer{font-size:52px;line-height:1;font-weight:1000;color:var(--blue)}
.player-phase{justify-self:end;background:#2563eb;color:#fff;font-weight:900;border-radius:999px;padding:12px 18px;min-width:100px;text-align:center}
.phase-judging{background:#f59e0b;color:#111827}
.phase-result{background:#059669}
.phase-final{background:#7c3aed}
.phase-waiting{background:#475569}
.player-prompt{font-size:18px;font-weight:700;color:#334155;margin:0 0 12px}
.zoom-help{font-size:13px;color:var(--muted);font-weight:700;margin:0 0 10px}
.player-images{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
.player-images.single-answer-image{grid-template-columns:1fr}
.player-image-box{position:relative;background:#111;border-radius:14px;overflow:hidden;border:1px solid var(--line);min-height:62vh;display:flex;align-items:center;justify-content:center}
.player-image-box img{width:100%;height:72vh;object-fit:contain;display:block;transition:transform .08s linear;transform-origin:center center;will-change:transform}
.player-images.single-answer-image .player-image-box img{height:72vh}
.image-label{position:absolute;top:10px;left:10px;z-index:2;background:rgba(15,23,42,.9);color:white;font-weight:900;border-radius:8px;padding:7px 10px}
.player-answer-panel{background:#fff;border-radius:14px;padding:18px;box-shadow:0 4px 18px rgba(15,23,42,.08);display:grid;grid-template-columns:2fr 1fr;gap:18px}
.answer-row{display:grid;grid-template-columns:1fr 140px;gap:12px;align-items:stretch}
.answer-row input{width:100%;font-size:16px}
.answer-button{font-size:16px}
.my-answer-area{border:1px solid var(--line);border-radius:12px;padding:14px;background:#f8fafc;max-height:190px;overflow:auto}
.my-answer-area .answer{margin:6px 0}
.player-status-panel{background:#fff;border-radius:14px;padding:18px;box-shadow:0 4px 18px rgba(15,23,42,.08);display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px}
.status-legend{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.legend{font-weight:900;padding:6px 8px;border-radius:999px;background:#f1f5f9}
.legend.correct{color:#059669}
.legend.wrong{color:#dc2626}
.legend.partial{color:#f59e0b}
.legend.pending{color:#64748b}

/* ===== Zoom modal ===== */
.zoomable{cursor:grab;user-select:none}
.zoomable.dragging{cursor:grabbing}
.image-modal{position:fixed;inset:0;z-index:9999;background:rgba(2,6,23,.94);display:flex;align-items:center;justify-content:center;padding:34px}
.modal-inner{width:96vw;height:86vh;display:flex;align-items:center;justify-content:center}
.modal-image-box{width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#111;border:1px solid rgba(255,255,255,.2)}
.modal-image-box img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .08s linear;transform-origin:center center;will-change:transform}
.modal-close{position:absolute;top:18px;right:24px;z-index:10000;font-size:28px;width:52px;height:52px;border-radius:999px;background:#dc2626;color:#fff}
.modal-help{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:white;background:rgba(15,23,42,.9);padding:10px 16px;border-radius:999px;font-weight:800}

/* ===== Final results shared ===== */
.final-card{
  background:linear-gradient(135deg,#0f172a,#1e1b4b);
  color:#fff;
  border-radius:20px;
  padding:28px;
  box-shadow:0 12px 40px rgba(15,23,42,.25);
}
.final-title{
  text-align:center;
  font-size:42px;
  font-weight:1000;
  margin-bottom:18px;
}
.winner-box{
  text-align:center;
  background:rgba(250,204,21,.12);
  border:1px solid rgba(250,204,21,.45);
  border-radius:20px;
  padding:22px;
  margin-bottom:20px;
}
.winner-label{
  color:#facc15;
  font-size:24px;
  font-weight:1000;
}
.winner-name{
  font-size:48px;
  font-weight:1000;
}
.winner-score{
  color:#fde68a;
  font-size:22px;
  font-weight:900;
}
.final-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.final-table th{
  color:#cbd5e1;
  text-align:left;
  padding:8px 12px;
  font-size:14px;
}
.final-table td{
  background:rgba(255,255,255,.08);
  padding:14px 12px;
  font-size:20px;
  font-weight:900;
}
.final-table tr td:first-child{border-radius:12px 0 0 12px}
.final-table tr td:last-child{border-radius:0 12px 12px 0}
.final-rank-1 td{background:rgba(250,204,21,.20);color:#fef3c7}
.final-rank-2 td{background:rgba(203,213,225,.18)}
.final-rank-3 td{background:rgba(217,119,6,.20)}
.rate-bar{
  width:100%;
  height:10px;
  background:rgba(255,255,255,.14);
  border-radius:999px;
  overflow:hidden;
}
.rate-bar div{
  height:100%;
  background:#22c55e;
  border-radius:999px;
}

/* ===== OBS screen ===== */
.import-label{border:0;border-radius:9px;padding:11px 15px;font-weight:800;color:#fff;background:#475569;cursor:pointer;display:inline-block}
.screen-page{background:#0b1220;color:#fff;overflow:hidden}
.screen-page header{background:#060b16;border-bottom:1px solid rgba(255,255,255,.08)}
.screen-wrap{height:calc(100vh - 68px);padding:18px;display:grid;grid-template-columns:1fr 360px;gap:18px}
.screen-main{background:#0f172a;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;display:grid;grid-template-rows:auto auto 1fr;min-height:0}
.screen-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.screen-title{font-size:34px;font-weight:1000}
.screen-timer{color:#60a5fa;font-size:56px;font-weight:1000;line-height:1}
.screen-prompt{color:#cbd5e1;font-size:20px;font-weight:800;margin:8px 0 14px}
.screen-images{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:0}
.screen-images.single-answer-image{grid-template-columns:1fr}
.screen-images img{width:100%;height:100%;object-fit:contain;background:#111;border-radius:14px;border:1px solid rgba(255,255,255,.15)}
.screen-side{display:grid;grid-template-rows:auto 1fr;gap:18px;min-height:0}
.screen-card{background:#0f172a;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;overflow:hidden}
.screen-rank{display:grid;grid-template-columns:58px 1fr 74px;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:20px}
.screen-rank span{color:#93c5fd;font-weight:1000}
.screen-rank b{font-weight:1000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screen-rank strong{text-align:right;color:#facc15}
.screen-answer-row{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);padding:10px 0;color:#cbd5e1}
.screen-answer-row b{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screen-final{
  grid-column:1 / -1;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

@media(max-width:1100px){
  .grid2{grid-template-columns:1fr}
  .images{grid-template-columns:1fr}
  .player-images{grid-template-columns:1fr}
  .player-image-box img{height:52vh}
  .player-answer-panel,.player-status-panel{grid-template-columns:1fr}
  .player-topbar{grid-template-columns:1fr}
  .player-phase{justify-self:start}
  .screen-wrap{grid-template-columns:1fr;overflow:auto}
}


/* ===== 赤丸マーキング機能 ===== */
.mark-modal{position:fixed;inset:0;z-index:10000;background:rgba(2,6,23,.74);padding:24px;overflow:auto}
.mark-modal-card{background:white;border-radius:18px;padding:18px;max-width:1500px;margin:0 auto;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.mark-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.mark-modal-body{display:grid;grid-template-columns:1fr 330px;gap:16px}
.mark-image-wrap{position:relative;background:#111;border-radius:14px;min-height:65vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mark-image-wrap img{max-width:100%;max-height:75vh;object-fit:contain;display:block}
.mark-layer{position:absolute;inset:0;pointer-events:none}
.mark-circle{position:absolute;border:5px solid #ef2222;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;cursor:move;box-shadow:0 0 0 2px rgba(255,255,255,.8),0 0 12px rgba(239,34,34,.55)}
.mark-circle span{position:absolute;left:-10px;top:-10px;background:#ef2222;color:#fff;border-radius:999px;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-weight:1000;font-size:13px}
.mark-side{border:1px solid var(--line);border-radius:14px;padding:14px;background:#f8fafc}
.mark-list-item{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;margin:8px 0}
.result-mark-layer{position:absolute;inset:0;pointer-events:none;z-index:4}
.result-mark{position:absolute;border:6px solid #ef2222;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 18px rgba(239,34,34,.75)}
.result-mark span{position:absolute;left:-12px;top:-12px;background:#ef2222;color:#fff;border-radius:999px;min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:1000;font-size:14px}
.screen-image-box{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#111;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}
.screen-image-box img{width:100%;height:100%;object-fit:contain;border:0!important;border-radius:0!important}
.player-image-box{position:relative}
@media(max-width:1100px){.mark-modal-body{grid-template-columns:1fr}}


/* ===== 回答者入力マーキング ===== */
.answer-mark-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  margin:0 0 12px;
}
.answer-mark-tools select{
  padding:6px 8px;
}
.answer-mark-layer{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}
.answer-mark{
  position:absolute;
  border:5px solid #ef2222;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  cursor:move;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 14px rgba(239,34,34,.65);
}
.answer-mark span{
  position:absolute;
  left:-10px;
  top:-10px;
  background:#ef2222;
  color:#fff;
  border-radius:999px;
  min-width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:13px;
}
#imageBoxB{cursor:crosshair;} .answer-mark{pointer-events:auto;}
@media(max-width:1100px){
  .answer-mark-tools{align-items:flex-start;flex-direction:column;}
}


/* ===== 小サイズ固定赤丸・回答番号入力 ===== */
.numbered-answer-row{
  grid-template-columns:48px 1fr 140px!important;
}
.answer-no-badge{
  height:100%;
  min-height:42px;
  border:2px solid var(--blue);
  color:var(--blue);
  background:#eff6ff;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:1000;
}
.mark-size-control,
#markSize,
label:has(#markSize){
  display:none!important;
}
.participant-mark,
.result-mark,
.mark-circle{
  width:42px!important;
  height:42px!important;
  border-width:4px!important;
}
.participant-mark span,
.result-mark span,
.mark-circle span{
  min-width:22px!important;
  height:22px!important;
  font-size:12px!important;
  left:-9px!important;
  top:-9px!important;
}


/* ===== 最新反映：JS内蔵・赤丸小サイズ固定・回答番号 ===== */
.numbered-answer-row{
  grid-template-columns:48px 1fr 140px!important;
}
.answer-no-badge{
  height:100%;
  min-height:42px;
  border:2px solid var(--blue);
  color:var(--blue);
  background:#eff6ff;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:1000;
}
#answerMarkSize,
#markSize,
label:has(#answerMarkSize),
label:has(#markSize){
  display:none!important;
}
.answer-mark,
.result-mark,
.mark-circle,
.participant-mark{
  width:42px!important;
  height:42px!important;
  border-width:4px!important;
}
.answer-mark span,
.result-mark span,
.mark-circle span,
.participant-mark span{
  min-width:22px!important;
  height:22px!important;
  font-size:12px!important;
  left:-9px!important;
  top:-9px!important;
}
.answer-mark-tools .row{
  justify-content:flex-end;
}


/* ===== 判定中赤丸保持・管理者回答マーキングプレビュー ===== */
.answer-mark-tools.judging-view{
  background:#fff7ed;
  border-color:#fdba74;
}
.answer-mark-tools.judging-view button{
  display:none!important;
}
.answer-mark-tools.judging-view .muted::after{
  content:"　判定中は送信済み赤丸を表示します";
  color:#c2410c;
  font-weight:900;
}
.admin-answer-mark-preview{
  margin-top:10px;
  display:grid;
  grid-template-columns:minmax(260px,520px) 1fr;
  gap:10px;
  align-items:end;
}
.admin-preview-image-box{
  position:relative;
  background:#111;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.admin-preview-image-box img{
  width:100%;
  max-height:260px;
  object-fit:contain;
  display:block;
}
.admin-preview-mark-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.admin-preview-mark{
  position:absolute;
  width:34px;
  height:34px;
  border:4px solid #ef2222;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 12px rgba(239,34,34,.7);
}
.admin-preview-mark span{
  position:absolute;
  left:-9px;
  top:-9px;
  background:#ef2222;
  color:#fff;
  border-radius:999px;
  min-width:21px;
  height:21px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:12px;
}
@media(max-width:900px){
  .admin-answer-mark-preview{
    grid-template-columns:1fr;
  }
}


/* ===== 回答後マーキング保持・判定開始時プレビュー強化 ===== */
.answer-mark.saved-mark{
  opacity:.95;
}
.answer-mark.draft-mark{
  border-style:dashed!important;
}
.answer-mark-tools.judging-view{
  background:#fff7ed;
  border-color:#fdba74;
}
.answer-mark-tools.judging-view button{
  display:none!important;
}
.answer-mark-tools.judging-view .muted::after{
  content:"　判定中は送信済み赤丸を表示します";
  color:#c2410c;
  font-weight:900;
}
.admin-answer-mark-preview{
  margin-top:10px;
  display:grid;
  grid-template-columns:minmax(360px,680px) 1fr;
  gap:12px;
  align-items:end;
}
.admin-preview-image-box{
  position:relative;
  background:#111;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  min-height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.admin-preview-image-box img{
  width:100%;
  max-height:360px;
  object-fit:contain;
  display:block;
}
.admin-preview-mark-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.admin-preview-mark{
  position:absolute;
  width:42px;
  height:42px;
  border:4px solid #ef2222;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 12px rgba(239,34,34,.7);
}
.admin-preview-mark span{
  position:absolute;
  left:-9px;
  top:-9px;
  background:#ef2222;
  color:#fff;
  border-radius:999px;
  min-width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:12px;
}
@media(max-width:900px){
  .admin-answer-mark-preview{
    grid-template-columns:1fr;
  }
}


/* ===== 修正：赤丸番号固定・クリア対応・管理画面プレビュー表示 ===== */
.admin-answer-mark-preview{
  margin-top:10px!important;
  display:grid!important;
  grid-template-columns:minmax(360px,680px) 1fr!important;
  gap:12px!important;
  align-items:end!important;
}
.admin-preview-image-box{
  position:relative!important;
  background:#111!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  overflow:hidden!important;
  min-height:240px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.admin-preview-image-box img{
  width:100%!important;
  max-height:360px!important;
  object-fit:contain!important;
  display:block!important;
}
.admin-preview-mark-layer{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
}
.admin-preview-mark{
  position:absolute!important;
  width:42px!important;
  height:42px!important;
  border:4px solid #ef2222!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%)!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 12px rgba(239,34,34,.7)!important;
}
.admin-preview-mark span{
  position:absolute!important;
  left:-9px!important;
  top:-9px!important;
  background:#ef2222!important;
  color:#fff!important;
  border-radius:999px!important;
  min-width:22px!important;
  height:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-weight:1000!important;
  font-size:12px!important;
}
@media(max-width:900px){
  .admin-answer-mark-preview{
    grid-template-columns:1fr!important;
  }
}


/* ===== 修正：管理者プレビューは元画像・赤丸番号は通し番号 ===== */
.admin-answer-mark-preview .muted{
  font-weight:800;
}


/* ===== 修正：マーキング無し回答の表示・未マーキング送信防止前提 ===== */
.admin-no-mark{
  display:inline-block;
  margin-top:8px;
  padding:8px 10px;
  background:#fff7ed;
  border:1px solid #fdba74;
  color:#c2410c;
  border-radius:8px;
  font-weight:800;
  font-size:13px;
}


/* ===== まとめ回答・まとめマーキング・判定画像1枚表示 ===== */
.answer-row.numbered-answer-row{
  grid-template-columns:48px 1fr 140px!important;
  align-items:stretch;
}
.answer-row textarea#answerText{
  width:100%;
  min-height:88px;
  resize:vertical;
  font-size:16px;
  line-height:1.5;
}
.admin-combined-mark-preview{
  margin:10px 0 14px;
  display:grid;
  grid-template-columns:minmax(420px,760px) 1fr;
  gap:12px;
  align-items:end;
}
.admin-combined-mark-preview .admin-preview-image-box{
  min-height:300px!important;
}
.admin-combined-mark-preview .admin-preview-image-box img{
  max-height:460px!important;
}
@media(max-width:900px){
  .admin-combined-mark-preview{
    grid-template-columns:1fr;
  }
}


/* ===== 回答修正・判定画像1枚表示補正 ===== */
.my-answer-actions{
  margin-top:6px;
}
.my-answer-actions button{
  padding:6px 10px;
  font-size:12px;
  background:#2563eb;
}
#cancelEditAnswerBtn{
  background:#64748b;
}
.admin-combined-mark-preview .admin-preview-image-box,
.admin-answer-mark-preview .admin-preview-image-box{
  width:760px!important;
  max-width:100%!important;
  min-height:0!important;
  height:auto!important;
  display:block!important;
  background:transparent!important;
  border:0!important;
  overflow:visible!important;
}
.admin-combined-mark-preview .admin-preview-image-box img,
.admin-answer-mark-preview .admin-preview-image-box img{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  display:block!important;
  border-radius:12px!important;
  border:1px solid var(--line)!important;
  background:#111!important;
}
.admin-combined-mark-preview .admin-preview-mark-layer,
.admin-answer-mark-preview .admin-preview-mark-layer{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
}


/* ===== ズーム連動マーキング・管理画面画像整合性 ===== */
.answer-mark-layer{
  position:absolute!important;
  inset:auto!important;
  z-index:5!important;
  pointer-events:auto!important;
  transform:none!important;
}
.answer-mark{
  position:absolute!important;
  transform:translate(-50%,-50%)!important;
}
.player-image-box.zoomable{
  overflow:hidden!important;
}

/* 管理画面：画像の実寸表示領域にだけ赤丸を重ねる */
.admin-combined-mark-preview .admin-preview-image-box,
.admin-answer-mark-preview .admin-preview-image-box{
  background:#111!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  overflow:hidden!important;
  width:min(760px,100%)!important;
  max-width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
}
.admin-preview-image-inner{
  position:relative!important;
  display:block!important;
  width:100%!important;
  line-height:0!important;
  background:#111!important;
}
.admin-preview-image-inner img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:0!important;
}
.admin-preview-image-inner .admin-preview-mark-layer{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
}
.admin-preview-image-inner .admin-preview-mark{
  position:absolute!important;
  transform:translate(-50%,-50%)!important;
}


/* ===== 修正：回答マーキングクリック復旧 ===== */
#playerAnswerMarkLayerB{
  pointer-events:auto!important;
  background:transparent!important;
}
#playerAnswerMarkLayerB .answer-mark{
  pointer-events:auto!important;
  cursor:move!important;
}
.result-mark-layer,
.admin-preview-mark-layer{
  pointer-events:none!important;
}


/* ===== 回答マーキング直接クリック修正 ===== */
#imageBoxB{
  cursor:crosshair!important;
}
#playerAnswerMarkLayerB{
  position:absolute!important;
  z-index:20!important;
  pointer-events:auto!important;
  background:transparent!important;
}
#playerAnswerMarkLayerB .answer-mark{
  pointer-events:auto!important;
  cursor:move!important;
}
#imageBoxB img{
  pointer-events:auto!important;
}
#imageBoxB .image-label{
  pointer-events:none!important;
}


/* ===== 最終修正：赤丸マーキング pointerup 復旧 ===== */
#imageBoxB{
  cursor:crosshair!important;
  position:relative!important;
}
#playerAnswerMarkLayerB{
  position:absolute!important;
  z-index:999!important;
  pointer-events:auto!important;
  background:transparent!important;
}
#playerAnswerMarkLayerB .answer-mark{
  display:block!important;
  pointer-events:auto!important;
  cursor:move!important;
  border:4px solid #ef2222!important;
  border-radius:50%!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 14px rgba(239,34,34,.65)!important;
}
#playerAnswerMarkLayerB .answer-mark span{
  background:#ef2222!important;
  color:#fff!important;
}
#imageBoxB .image-label{
  pointer-events:none!important;
}


/* ===== 最終修正：document captureで赤丸追加 ===== */
#imageBoxB{
  cursor:crosshair!important;
  position:relative!important;
}
#playerAnswerMarkLayerB{
  position:absolute!important;
  z-index:999!important;
  pointer-events:none!important;
  background:transparent!important;
}
#playerAnswerMarkLayerB .answer-mark{
  display:block!important;
  pointer-events:auto!important;
  cursor:move!important;
  border:4px solid #ef2222!important;
  border-radius:50%!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 14px rgba(239,34,34,.65)!important;
}
#playerAnswerMarkLayerB .answer-mark span{
  background:#ef2222!important;
  color:#fff!important;
}
#imageBoxB .image-label{
  pointer-events:none!important;
}


/* ===== 調査後修正：マーキング最終安定版 ===== */
#imageBoxB{
  cursor:crosshair!important;
  position:relative!important;
}
#imageBoxB img{
  pointer-events:auto!important;
}
#imageBoxB .image-label{
  pointer-events:none!important;
}
#playerAnswerMarkLayerB{
  position:absolute!important;
  z-index:1000!important;
  pointer-events:none!important;
  background:transparent!important;
}
#playerAnswerMarkLayerB .answer-mark{
  position:absolute!important;
  display:block!important;
  width:42px!important;
  height:42px!important;
  pointer-events:auto!important;
  cursor:move!important;
  border:4px solid #ef2222!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%)!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 14px rgba(239,34,34,.65)!important;
}
#playerAnswerMarkLayerB .answer-mark span{
  position:absolute!important;
  left:-9px!important;
  top:-9px!important;
  min-width:22px!important;
  height:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#ef2222!important;
  color:#fff!important;
  border-radius:999px!important;
  font-weight:1000!important;
  font-size:12px!important;
}


/* ===== 修正：ID直接参照エラー対策後のマーキング安定化 ===== */
#imageBoxB{
  cursor:crosshair!important;
  position:relative!important;
}
#imageBoxB .image-label{
  pointer-events:none!important;
}
#playerAnswerMarkLayerB{
  position:absolute!important;
  z-index:1000!important;
  pointer-events:none!important;
  background:transparent!important;
}
#playerAnswerMarkLayerB .answer-mark{
  position:absolute!important;
  display:block!important;
  width:42px!important;
  height:42px!important;
  pointer-events:auto!important;
  cursor:move!important;
  border:4px solid #ef2222!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%)!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 14px rgba(239,34,34,.65)!important;
}




/* ===== B画像とマーキングの完全連動 ===== */
#imageBoxB {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

#imageFrameB.player-image-frame {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  transform-origin: center center !important;
  will-change: transform;
}

#imageFrameB > #imgB {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  transform: none !important;
}

#imageFrameB > #playerAnswerMarkLayerB {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transform-origin: center center !important;
}

/* ===== 回答入力・回答一覧を拡張 ===== */
.player-page .player-image-box {
  height: 500px !important;
  min-height: 500px !important;
}

.player-page .player-answer-panel {
  min-height: 390px !important;
  align-items: stretch;
}

.player-page .answer-input-area,
.player-page .my-answer-area {
  min-height: 350px;
}

.player-page .my-answer-area {
  display: flex;
  flex-direction: column;
}

.player-page #myAnswers {
  height: 310px !important;
  max-height: 310px !important;
  overflow-y: auto;
}

.player-page #answerText {
  min-height: 130px !important;
  resize: vertical;
}
/* ===== 回答エリア拡張 第2版 ===== */
body.player-page .player-answer-panel {
  height: 480px !important;
  min-height: 480px !important;
  max-height: none !important;
  overflow: visible !important;
}

body.player-page .answer-input-area,
body.player-page .my-answer-area {
  height: 430px !important;
  min-height: 430px !important;
  max-height: none !important;
}

body.player-page #myAnswers {
  height: 365px !important;
  min-height: 365px !important;
  max-height: 365px !important;
  overflow-y: auto !important;
}

body.player-page #answerText {
  height: 230px !important;
  min-height: 230px !important;
  max-height: none !important;
}
/* ===== 回答エリア 高さ500px固定 ===== */
body.player-page .player-answer-panel {
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  box-sizing: border-box !important;
}

body.player-page .answer-input-area,
body.player-page .my-answer-area {
  height: 450px !important;
  min-height: 450px !important;
  max-height: 450px !important;
}

body.player-page #myAnswers {
  height: 385px !important;
  min-height: 385px !important;
  max-height: 385px !important;
  overflow-y: auto !important;
}
/* ===== 回答入力欄そのものを500pxへ拡張 ===== */
html body.player-page #answerPanel.player-answer-panel {
  height: 620px !important;
  min-height: 620px !important;
  max-height: none !important;
}

html body.player-page #answerPanel .answer-input-area,
html body.player-page #answerPanel .my-answer-area {
  height: 570px !important;
  min-height: 570px !important;
  max-height: none !important;
}

html body.player-page #answerPanel textarea#answerText {
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  box-sizing: border-box !important;
}

html body.player-page #answerPanel #myAnswers {
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  overflow-y: auto !important;
}
/* ===== 回答入力欄 高さ1000px ===== */
html body.player-page #answerPanel.player-answer-panel {
  height: 1120px !important;
  min-height: 1120px !important;
  max-height: none !important;
}

html body.player-page #answerPanel .answer-input-area,
html body.player-page #answerPanel .my-answer-area {
  height: 1070px !important;
  min-height: 1070px !important;
  max-height: none !important;
}

html body.player-page #answerPanel textarea#answerText,
html body.player-page #answerPanel #myAnswers {
  height: 1000px !important;
  min-height: 1000px !important;
  max-height: 1000px !important;
  box-sizing: border-box !important;
}

html body.player-page #answerPanel #myAnswers {
  overflow-y: auto !important;
}
/* ===== 回答一覧を3件表示 ===== */
html body.player-page #answerPanel.player-answer-panel {
  height: 1750px !important;
  min-height: 1750px !important;
  max-height: none !important;
}

html body.player-page #answerPanel .my-answer-area {
  height: 1700px !important;
  min-height: 1700px !important;
  max-height: 1700px !important;
}

html body.player-page #answerPanel #myAnswers {
  height: 1600px !important;
  min-height: 1600px !important;
  max-height: 1600px !important;
  overflow-y: auto !important;
}
/* Dedicated game windows */
.app-window-close {
  display: none;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 10px;
  background: #b42318 !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 5px 14px rgba(180,35,24,.25);
}
.app-window-close:hover { background: #921b13 !important; }
.standalone-app-window .app-window-close { display: inline-flex; }
.standalone-app-window body { min-height: 100vh; }