/* コメントでことば当て（配信画面） */
html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
  font-family: "Yu Gothic UI", "Meiryo", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hint {
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  padding: 10px 14px; background: rgba(20, 24, 33, 0.92); color: #fff;
  font-size: 14px; line-height: 1.6; border-radius: 10px; z-index: 10;
}
.hint a { color: #8fd3ff; }
.notice {
  position: fixed; left: 12px; top: 12px; padding: 10px 14px;
  background: rgba(160, 30, 40, 0.92); color: #fff; font-size: 14px; border-radius: 10px; z-index: 11;
}

.ka {
  --base: 26px;
  --rh: 1;
  /*
   * マスの色（緑・黄・灰）。緑・灰は白い字との明るさの差が 3.8 以上になる濃さ。
   * 黄は明るい黄にして、字と下の線を濃い色（--tyt）にする（赤緑の色覚の見え方でも、緑と黄の明るさがはっきり違うように）。
   * 灰は緑より暗くする（同じ明るさだと、赤緑の色覚の見え方で緑と見分けにくいため）
   */
  --tg: #348c4c; --ty: #e8b923; --tyt: #1a1a1a; --tx: #5b5f68; --tn: #e5e0ee; --tt: #fff;
  /* 緑と黄のマスの下の線の太さ（720p に縮めても 2px 以上に見える太さ） */
  --bar: max(3px, calc(var(--base) * 0.15));
  --bar2: max(3px, calc(var(--base) * 0.12));
  width: calc(var(--base) * 29.5);
  max-width: calc(100vw - var(--base));
  margin: calc(var(--base) * 0.5);
  padding: calc(var(--base) * 0.55) calc(var(--base) * 0.7) calc(var(--base) * 0.5);
  border-radius: calc(var(--base) * 0.7);
  box-sizing: border-box;
}
.ka.size-S { --base: 19px; }
.ka.size-M { --base: 26px; }
.ka.size-L { --base: 36px; }

.head {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--base) * 0.4);
  min-height: calc(var(--base) * 1.1);
}
.head.no-title { justify-content: flex-end; }
.title {
  flex: 1 1 auto; min-width: 0;
  font-size: calc(var(--base) * 0.8); font-weight: 900; line-height: 1.25; letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.head.no-title .title { display: none; }
.state {
  flex: 0 0 auto; white-space: nowrap;
  padding: calc(var(--base) * 0.08) calc(var(--base) * 0.42); border-radius: 999px;
  font-size: calc(var(--base) * 0.48); font-weight: 800;
}
.state[hidden] { display: none; }
.rule {
  margin: calc(var(--base) * 0.12) 0 calc(var(--base) * 0.3);
  font-size: calc(var(--base) * 0.52); font-weight: 800; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.body {
  position: relative;
  display: flex; gap: calc(var(--base) * 0.45);
  min-height: calc(var(--base) * 10.4);
}
.left {
  flex: 0 0 calc(var(--base) * 11.6); min-width: 0;
  display: flex; flex-direction: column; gap: calc(var(--base) * 0.2);
  padding: calc(var(--base) * 0.4) calc(var(--base) * 0.4);
  border-radius: calc(var(--base) * 0.45); box-sizing: border-box;
}
.ka.no-kb .left { flex-basis: calc(var(--base) * 8.6); align-self: flex-start; }
.left[hidden], .right[hidden] { display: none; }
.ans-label { font-size: calc(var(--base) * 0.46); font-weight: 800; opacity: 0.8; }
.count { margin-top: calc(var(--base) * 0.05); font-size: calc(var(--base) * 0.62); font-weight: 900; font-variant-numeric: tabular-nums; align-self: flex-start; }
.count.bump { animation: ka-bump 0.45s ease-out; }
@keyframes ka-bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* マス */
.tiles { display: flex; gap: calc(var(--base) * 0.08); min-width: 0; }
.tile {
  position: relative; box-sizing: border-box; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  padding-bottom: calc(var(--bar) * 0.8);
  border-radius: calc(var(--base) * 0.16);
  font-weight: 900; line-height: 1;
  background: var(--tn);
}
.tile.t-g { background: var(--tg); color: var(--tt); }
.tile.t-y { background: var(--ty); color: var(--tyt); }
.tile.t-x { background: var(--tx); color: var(--tt); }
/*
 * 色の見分けが苦手な人のための形の印：緑＝マスの下に幅いっぱいの白い太い線、黄＝マスの下のまん中に濃い色の短い線。灰は線なし
 * （字の印は小さくて読めないため、形で分ける。凡例・使った文字の表・手元の画面も同じ形）
 */
.tile.t-g::after, .tile.t-y::after, .kc.k-g::after, .kc.k-y::after {
  content: ''; position: absolute; bottom: 0; height: var(--bar); background: #fff;
}
.tile.t-g::after, .kc.k-g::after { left: 0; right: 0; }
.tile.t-y::after, .kc.k-y::after { left: 30%; right: 30%; border-radius: var(--bar) var(--bar) 0 0; background: var(--tyt); }
.ans { gap: calc(var(--base) * 0.14); }
.ans .tile { flex: 1 1 0; min-width: 0; height: calc(var(--base) * 1.7); font-size: calc(var(--base) * 1.1); border-radius: calc(var(--base) * 0.28); }

/* 使った文字の表 */
.kb { display: flex; gap: calc(var(--base) * 0.06); margin-top: calc(var(--base) * 0.05); }
.kb[hidden] { display: none; }
.kcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--base) * 0.06); }
.kc {
  position: relative; overflow: hidden; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  height: calc(var(--base) * 0.8); border-radius: calc(var(--base) * 0.1);
  padding-bottom: calc(var(--bar2) * 0.7);
  font-size: calc(var(--base) * 0.52); font-weight: 800; line-height: 1;
  background: var(--tn);
}
.kc.k-g::after, .kc.k-y::after { height: var(--bar2); }
.kc.blank { background: transparent; }
.kc.k-x { opacity: 0.22; }
.kc.k-y { background: var(--ty); color: var(--tyt); }
.kc.k-g { background: var(--tg); color: var(--tt); }

.right { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(var(--base) * 0.14); }
.band {
  display: flex; align-items: center; gap: calc(var(--base) * 0.3); min-width: 0; flex: 0 0 auto;
  height: calc(var(--base) * 1.15); padding: 0 calc(var(--base) * 0.4);
  border-radius: calc(var(--base) * 0.32); box-sizing: border-box;
  font-size: calc(var(--base) * 0.56); font-weight: 900; white-space: nowrap; overflow: hidden;
}
.band[hidden] { display: none; }
.band-tag { flex: 0 0 auto; padding: 0 calc(var(--base) * 0.3); border-radius: 999px; font-size: calc(var(--base) * 0.44); }
.band-ans { flex: 0 0 auto; letter-spacing: 0.08em; }
.band-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.band-name[hidden] { display: none; }
.band-no { flex: 0 0 auto; font-size: calc(var(--base) * 0.46); opacity: 0.85; }
.band-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--base) * 0.1 * var(--rh)); }
.row {
  display: flex; align-items: center; gap: calc(var(--base) * 0.3);
  height: calc(var(--base) * 1.04 * var(--rh)); padding: 0 calc(var(--base) * 0.3);
  border-radius: calc(var(--base) * 0.28); box-sizing: border-box; min-width: 0; flex: 0 0 auto;
}
.row .g { flex: 0 0 auto; gap: calc(var(--base) * 0.07); }
.row .g .tile { width: calc(var(--base) * 1.02 * var(--rh)); height: calc(var(--base) * 0.96 * var(--rh)); font-size: calc(var(--base) * 0.66 * var(--rh)); }
.row .name { flex: 1 1 auto; min-width: 3em; font-weight: 700; font-size: calc(var(--base) * 0.44 * var(--rh)); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.row .mark {
  flex: 0 1 auto; min-width: 3em; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 calc(var(--base) * 0.26); border-radius: 999px;
  font-size: calc(var(--base) * 0.38 * var(--rh)); font-weight: 900; font-variant-numeric: tabular-nums;
}
.row.none { justify-content: center; font-size: calc(var(--base) * 0.5); font-weight: 700; opacity: 0.65; }
.row.in { animation: ka-in 0.45s ease-out; }
@keyframes ka-in { 0% { transform: translateX(calc(var(--base) * 0.6)); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.more { text-align: right; font-size: calc(var(--base) * 0.44); font-weight: 800; opacity: 0.8; }
.more[hidden] { display: none; }

.wait {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--base) * 0.45);
  font-size: calc(var(--base) * 0.9); font-weight: 900; letter-spacing: 0.04em;
}
.wait[hidden] { display: none; }

/* 色の見方（画面の下に1行） */
.legend {
  display: flex; align-items: center; gap: calc(var(--base) * 0.5);
  margin-top: calc(var(--base) * 0.3); min-width: 0; overflow: hidden; white-space: nowrap;
  font-size: calc(var(--base) * 0.48); font-weight: 700; line-height: 1.4;
}
.lg { display: inline-flex; align-items: center; gap: calc(var(--base) * 0.16); flex: 0 1 auto; min-width: 0; }
.lg-text { overflow: hidden; text-overflow: ellipsis; opacity: 0.9; }
.tile.mini { flex: 0 0 auto; width: calc(var(--base) * 0.9); height: calc(var(--base) * 0.7); padding: 0; border-radius: calc(var(--base) * 0.12); }

/* 正解の時に少しだけ大きく出す（数秒で消え、一覧の上の帯だけが残る） */
.win {
  position: absolute; left: 50%; top: 50%;
  width: 84%; box-sizing: border-box;
  padding: calc(var(--base) * 0.5) calc(var(--base) * 0.6);
  border-radius: calc(var(--base) * 0.55);
  display: none; flex-direction: column; align-items: center; gap: calc(var(--base) * 0.12);
  transform: translate(-50%, -50%);
  text-align: center; z-index: 3; pointer-events: none;
}
.win.show { display: flex; animation: ka-win 4.5s ease-out forwards; }
@keyframes ka-win {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  8% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
  14% { transform: translate(-50%, -50%) scale(1); }
  88% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0; }
}
.win-head { font-size: calc(var(--base) * 1.0); font-weight: 900; letter-spacing: 0.1em; }
.win-ans { width: 70%; gap: calc(var(--base) * 0.14); }
.win-ans .tile { flex: 1 1 0; min-width: 0; height: calc(var(--base) * 1.6); font-size: calc(var(--base) * 1.05); border-radius: calc(var(--base) * 0.26); }
.win-name { max-width: 100%; font-size: calc(var(--base) * 0.7); font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-name[hidden] { display: none; }
.win-no { font-size: calc(var(--base) * 0.56); font-weight: 800; }

/* pop（紫） */
.theme-pop { background: rgba(255, 255, 255, 0.95); color: #2a2433; box-shadow: 0 calc(var(--base) * 0.15) calc(var(--base) * 0.5) rgba(0, 0, 0, 0.25); }
.theme-pop .title { color: #7a3fc9; }
.theme-pop .rule { color: #5c4d6e; }
.theme-pop .state { background: #8a4fe0; color: #fff; }
.theme-pop .state.st-stop { background: #8a8296; }
.theme-pop .state.st-reveal { background: #5d6478; }
.theme-pop .state.st-win { background: var(--tg); }
.theme-pop .left { background: #f5effd; border: 2px solid #d3bdf5; }
.theme-pop .tile.hidden { background: #fff; color: #a58bd0; border: 2px dashed #b99be8; }
.theme-pop .ans.open .tile:not(.t-g) { background: #8a4fe0; color: #fff; }
.theme-pop .kc { color: #4a3d5c; }
.theme-pop .kc.k-g { color: #fff; }
.theme-pop .kc.k-y { color: var(--tyt); }
.theme-pop .count { color: #7a3fc9; }
.theme-pop .row { background: #f3f0f7; }
.theme-pop .row.solved { background: #e2f4e6; box-shadow: 0 0 0 2px var(--tg) inset; }
.theme-pop .mark { background: #ffd23f; color: #3a2600; }
.theme-pop .band.win-band { background: linear-gradient(90deg, #3f9e55, #6cc283); color: #fff; }
.theme-pop .band.win-band .band-tag { background: #fff; color: #2f8044; }
.theme-pop .band.reveal-band { background: #5d6478; color: #fff; }
.theme-pop .band.reveal-band .band-tag { background: #fff; color: #5d6478; }
.theme-pop .band.stop-band { background: #eeeaf3; color: #5c4d6e; justify-content: center; }
.theme-pop .wait { background: #f3f0f7; color: #5c4d6e; }
.theme-pop .legend { color: #5c4d6e; }
.theme-pop .win { background: linear-gradient(135deg, #7a3fc9, #a571f0); color: #fff; box-shadow: 0 calc(var(--base) * 0.2) calc(var(--base) * 0.6) rgba(0, 0, 0, 0.3); }

/* simple（暗い半透明） */
.theme-simple { --tg: #348c4c; --ty: #e8b923; --tx: #5b5f68; --tn: rgba(255, 255, 255, 0.1); background: rgba(16, 14, 20, 0.8); color: #fff; }
.theme-simple .title { color: #c9a6ff; }
.theme-simple .rule { color: rgba(255, 255, 255, 0.85); }
.theme-simple .state { background: rgba(201, 166, 255, 0.2); color: #c9a6ff; }
.theme-simple .state.st-stop, .theme-simple .state.st-reveal { background: rgba(255, 255, 255, 0.18); color: #fff; }
.theme-simple .state.st-win { background: var(--tg); color: #fff; }
.theme-simple .left { background: rgba(201, 166, 255, 0.08); border-left: calc(var(--base) * 0.16) solid #c9a6ff; }
.theme-simple .tile.hidden { color: rgba(255, 255, 255, 0.55); }
.theme-simple .ans.open .tile:not(.t-g) { background: #c9a6ff; color: #1a1024; }
.theme-simple .kc { color: rgba(255, 255, 255, 0.9); }
.theme-simple .kc.k-y { color: var(--tyt); }
.theme-simple .count { color: #c9a6ff; }
.theme-simple .row { background: rgba(255, 255, 255, 0.08); }
.theme-simple .row.solved { background: rgba(74, 168, 99, 0.3); }
.theme-simple .mark { background: #ffe066; color: #1a1a1a; }
.theme-simple .band.win-band { background: var(--tg); color: #fff; }
.theme-simple .band.win-band .band-tag { background: #fff; color: #2f8044; }
.theme-simple .band.reveal-band { background: rgba(255, 255, 255, 0.2); }
.theme-simple .band.reveal-band .band-tag { background: #fff; color: #1a1024; }
.theme-simple .band.stop-band { background: rgba(255, 255, 255, 0.1); justify-content: center; }
.theme-simple .wait { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.85); }
.theme-simple .legend { color: rgba(255, 255, 255, 0.9); }
.theme-simple .win { background: rgba(26, 16, 36, 0.94); border: 2px solid #c9a6ff; color: #fff; }
.theme-simple .win-head { color: #c9a6ff; }

/* neon（光る紫） */
.theme-neon { --tg: rgba(60, 200, 110, 0.6); --ty: #e8b923; --tx: rgba(255, 255, 255, 0.1); --tn: rgba(255, 255, 255, 0.06); background: rgba(12, 6, 18, 0.84); color: #fff; border: 2px solid #b57bff; box-shadow: 0 0 calc(var(--base) * 0.5) #b57bff; }
.theme-neon .title { color: #c792ff; text-shadow: 0 0 10px #b57bff; }
.theme-neon .rule { color: #e2ccff; }
.theme-neon .state { border: 2px solid #b57bff; color: #c792ff; text-shadow: 0 0 6px #b57bff; }
.theme-neon .state.st-stop, .theme-neon .state.st-reveal { border-color: #9fd8ff; color: #9fd8ff; text-shadow: 0 0 6px #4aa8ff; }
.theme-neon .state.st-win { border-color: #54f08a; color: #54f08a; text-shadow: 0 0 6px #54f08a; }
.theme-neon .left { background: rgba(181, 123, 255, 0.07); border: 1px solid rgba(181, 123, 255, 0.7); box-shadow: 0 0 12px rgba(181, 123, 255, 0.4) inset; }
.theme-neon .tile { border: 1px solid rgba(255, 255, 255, 0.3); }
.theme-neon .tile.t-g { border-color: #54f08a; box-shadow: 0 0 6px rgba(84, 240, 138, 0.6); }
.theme-neon .tile.t-y { border-color: #ffd84a; box-shadow: 0 0 6px rgba(255, 216, 74, 0.6); }
.theme-neon .tile.t-x { color: rgba(255, 255, 255, 0.7); }
.theme-neon .tile.hidden { border: 1px dashed #b57bff; color: rgba(226, 204, 255, 0.75); }
.theme-neon .ans.open .tile:not(.t-g) { background: rgba(181, 123, 255, 0.3); border-color: #b57bff; color: #fff; }
.theme-neon .kc { color: #e2ccff; border: 1px solid rgba(181, 123, 255, 0.35); box-sizing: border-box; }
.theme-neon .kc.blank { border: 0; }
.theme-neon .kc.k-g { border-color: #54f08a; color: #fff; }
.theme-neon .kc.k-y { border-color: #ffd84a; color: var(--tyt); }
.theme-neon .count { color: #c792ff; text-shadow: 0 0 6px #b57bff; }
.theme-neon .row { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(181, 123, 255, 0.35); }
.theme-neon .row.solved { border-color: #54f08a; box-shadow: 0 0 10px rgba(84, 240, 138, 0.6); }
.theme-neon .mark { background: transparent; border: 1px solid #ffe066; color: #ffe066; text-shadow: 0 0 6px #ffe066; }
.theme-neon .band.win-band { border: 1px solid #54f08a; color: #54f08a; text-shadow: 0 0 8px #54f08a; box-shadow: 0 0 10px rgba(84, 240, 138, 0.5); }
.theme-neon .band.win-band .band-tag { border: 1px solid #54f08a; }
.theme-neon .band.reveal-band { border: 1px solid #9fd8ff; color: #9fd8ff; }
.theme-neon .band.reveal-band .band-tag { border: 1px solid #9fd8ff; }
.theme-neon .band.stop-band { border: 1px solid rgba(159, 216, 255, 0.5); color: #9fd8ff; justify-content: center; }
.theme-neon .wait { border: 1px solid rgba(181, 123, 255, 0.4); color: #e2ccff; text-shadow: 0 0 6px #b57bff; }
.theme-neon .legend { color: #e2ccff; }
.theme-neon .win { background: rgba(12, 6, 18, 0.94); border: 2px solid #b57bff; box-shadow: 0 0 calc(var(--base) * 0.8) #b57bff; color: #fff; }
.theme-neon .win-head { color: #c792ff; text-shadow: 0 0 12px #b57bff; }