*{box-sizing:border-box}
body{margin:0;font-family:Arial,"Microsoft JhengHei",sans-serif;background:#252525;color:#f2f2f2}
.container{max-width:1120px;margin:0 auto;padding:22px}
.card{background:#343434;border:1px solid #444;border-radius:14px;padding:22px;margin:16px 0;box-shadow:0 2px 10px #0005}
input,select,button,textarea{font-size:18px;padding:11px 14px;margin:6px;border-radius:10px;border:1px solid #777}
input,select,textarea{background:#202020;color:white}
input[type="checkbox"]{
  accent-color:#22c55e;
}
.settings-locked{
  opacity:.8;
}
textarea{width:100%;min-height:140px;resize:vertical}
button{background:#eee;color:#111;border:0;cursor:pointer;font-weight:bold}
button:disabled{opacity:.45;cursor:not-allowed}
button.secondary{background:#888;color:white}
button.win{background:#16833a;color:white}
button.danger{background:#c92929;color:white}
.row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:20px;font-weight:bold;margin-left:6px}
.form-row{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.form-row select,.form-row input,.form-row button{height:48px;margin:0}
.table-range{display:flex;gap:12px}
.checkbox-row{height:48px;display:flex;align-items:center;gap:8px;font-weight:bold}
.checkbox-row input{width:20px;height:20px;margin:0;cursor:pointer;accent-color:#22c55e}
.checkbox-row input[type="checkbox"]:checked{filter:brightness(1.1);}
.checkbox-row:has(input:checked){color:#22c55e;}
.qr{width:180px;height:180px;border:1px solid #ddd;background:white}
.copy{word-break:break-all;color:#ddd}
table{width:100%;border-collapse:collapse;background:#2c2c2c}
th,td{border-bottom:1px solid #555;padding:12px;text-align:left}
.error{color:#ff8b8b;font-weight:bold}
.status-line{color:#bbb;font-size:14px}
.pairing-header{display:flex;align-items:center;gap:18px;margin-bottom:14px;flex-wrap:wrap}
.pairing-header h2{margin:0}
.pairing-time{font-size:22px;font-weight:bold}
.pairing-spacer{flex:1}
.settings-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:8px 0 18px}
.settings-row input,.settings-row select{height:44px;margin:0}
.mobile-list{display:none}
.mobile-card{background:#2c2c2c;border:1px solid #555;border-radius:12px;padding:14px;margin:12px 0}
.mobile-card-title{font-size:20px;font-weight:bold}
.report-lines{line-height:1.7;font-weight:bold}
.mobile-body{background:#f6f6f6;color:#111}
.mobile{max-width:440px;min-height:100vh;margin:0 auto;padding:18px 14px;background:white;color:#111}
.phone-top{text-align:center;margin-bottom:18px}
.player-name{font-size:32px;font-weight:900;text-align:center}
.player-token{font-size:16px;color:#666;letter-spacing:2px;margin-top:4px;text-align:center}
.mobile-title{text-align:center;font-size:24px;font-weight:900;margin:20px 0}
.status-text{text-align:center;font-weight:700;width:100%}
.info-card{border:1px solid #d4d4d4;border-radius:7px;padding:16px;margin:14px 0;text-align:center;background:white}
.info-label{font-size:18px;font-weight:800}
.info-value{font-size:36px;font-weight:900;margin-top:8px}
.info-small{font-size:22px;color:#444;margin-top:8px;font-weight:700}
.timer{text-align:center;font-size:36px;font-weight:bold;margin:12px 0}
.bottom-actions{background:white;padding:12px 0 4px;display:flex;gap:12px}
.bottom-actions button{flex:1;height:58px;border-radius:30px;font-size:19px}
.pink-btn{background:#f94e6a;color:white}
.light-btn{background:#f0eef7;color:#111}
.result-box{background:#f0eef7;padding:18px;border-radius:8px;text-align:center;margin:28px 0}
.result-btn{width:110px;}
.choice-row{display:flex;gap:20px;justify-content:center;margin-top:14px}
.choice-btn{
  width:130px;
  height:76px;
  border-radius:4px;
  border:2px solid #222;
  font-size:30px;
  font-weight:900;

  display:flex;
  align-items:center;
  justify-content:center;

  white-space:nowrap;
}
.bracket-scroll {
  overflow-x: auto;
  padding-bottom: 16px;
}

.bracket-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 16px;
}

.bracket-board {
  position: relative;
  min-width: max-content;
}

.bracket-svg {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 1;
}

.bracket-line {
  fill: none;
  stroke: #777;
  stroke-width: 3;
}

.bracket-title {
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  z-index: 2;
}

.bracket-match {
  position: absolute;
  background: #202020;
  border: 1px solid #555;
  border-radius: 10px;
  box-sizing: border-box;
  z-index: 2;
  overflow: hidden;
}

.bracket-player {
  height: 43px;
  line-height: 43px;
  padding: 0 16px;
  font-weight: bold;
  border-bottom: 1px solid #555;
}

.bracket-player:last-child {
  border-bottom: none;
}

.choice-btn.active-win{background:#c40000;color:white}
.choice-btn.active-lose{background:#98b4d3;color:#777}
.draw{
  background:#eab308;
  color:#111;
}
.choice-top-row{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:14px;
}

.choice-bottom-row{
  display:flex;
  justify-content:center;
  margin-top:14px;
}

.active-draw{
  background:#eab308;
  color:#111;
}
.confirm-area{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);width:min(410px,calc(100% - 28px));background:white;padding:10px}
.confirm-area button{width:100%;height:58px;border-radius:30px;font-size:20px}
.neutral{
  background:#d9d9d9;
  color:#111;
}
.settings-main-row{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.settings-checkbox-group{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:14px;
  flex-wrap:wrap;
}
.rank-hero{background:#f0eef7;border-radius:12px;padding:22px;text-align:center;margin:18px 0}
.rank-big{font-size:40px;font-weight:900}
.rank-list-row{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr .6fr;
  gap:4px;
  padding:10px 6px;
  border-bottom:1px solid #ddd;
  align-items:center;
  font-size:14px;
}

.rank-list-row > div{
  text-align:center;
  word-break:break-word;
}

.rank-list-row > div:first-child{
  text-align:left;
}
.rank-list-row.self{background:#fff2f5;font-weight:bold;border-radius:8px}
@media (max-width:768px){
  .container{padding:12px}
  .desktop-table{display:none}
  .mobile-list{display:block}
  .pairing-header{align-items:flex-start}
  .pairing-spacer{display:none}
  button{font-size:16px}
}
@media print{
  .no-print{display:none}
  body{background:white;color:black}
  .card{box-shadow:none;border:1px solid #ddd;background:white;color:black}
  .copy{color:black}
}

.drop-actions 

.drop-actions{
  padding:12px 0 4px;
}
.drop-actions .drop-btn{
  width:calc(100% - 12px);
  height:58px;
  border-radius:30px;
  margin:6px;
  font-size:19px;
}

.players-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 8px 16px;
}
.players-header h2{
  margin:0;
}
.generate-image-btn{
  padding:12px 20px;
  border-radius:14px;
}

a,
a:visited{
  color:#fff;
}