:root {
  --blue: #1e3c96;
  --red: #b9222a;
  --line: #222;
  --bg: #f4f4f6;
  --l1: #d8d8d8;
  --l2: #bfe8f5;
  --l3: #70c5df;
  --l4: #78aad5;
  --l5: #f5f19a;
  --l6: #d7e6a8;
  --l7: #9ac781;
  --l8: #e8a8c6;
  --l9: #f29a45;
  --l10: #df5962;
  --l11: #b58bd7;
  --l12: #7f8de3;
  --l13: #4fb7a8
}

* {
  box-sizing: border-box
}

html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  margin: 0;
  background: #111;
  font-family: Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  color: #111;
  touch-action: manipulation;
  overscroll-behavior: none;
}

button,
input,
select,
textarea,
[onclick] {
  touch-action: manipulation;
}

.wrap {
  padding: 14px;
  max-width: 1280px;
  margin: auto
}

.sheet {
  background: white;
  aspect-ratio: 1.42/1;
  width: 100%;
  min-height: 720px;
  position: relative;
  padding: 22px;
  border: 1px solid #ddd;
  box-shadow: 0 12px 36px #0008
}

.header {
  display: grid;
  grid-template-columns: 430px 1fr 170px;
  gap: 26px;
  align-items: start
}

.brand {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-left: 10px solid #111;
  padding-left: 14px;
  min-height: 112px
}

.brandMark {
  width: 86px;
  height: 86px;
  border: 5px solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 28px;
  line-height: .9;
  background: white
}

.title small {
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .02em
}

.title .year {
  color: #c3302d
}

.title h1 {
  font-size: 42px;
  line-height: .88;
  margin: 4px 0 0;
  font-weight: 900;
  letter-spacing: -1px
}

.title .subTitle {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 9px;
  background: #111;
  color: white;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em
}

.clearTop {
  margin-top: 10px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 14px;
  cursor: pointer
}

.info {
  border: 3px solid var(--line);
  font-size: 14px;
  background: #fff
}

.infoTop {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0;
  border-bottom: 2px solid var(--line)
}

.field {
  display: flex;
  flex-direction: column;
  font-weight: 900
}

.field span {
  padding: 4px 7px;
  border-bottom: 1px solid #999;
  font-size: 12px;
  letter-spacing: .03em
}

.field input {
  border: 0;
  font-size: 18px;
  padding: 7px 9px;
  min-width: 0
}

.infoTop .field:first-child {
  border-right: 2px solid var(--line)
}

.nameField {
  border-bottom: 2px solid var(--line)
}

.emailPair {
  display: grid;
  grid-template-columns: 1fr 1fr
}

.emailPair .field:first-child {
  border-right: 2px solid var(--line)
}

.emailError {
  color: #c62828;
  font-size: 12px;
  font-weight: 800;
  padding: 0 7px 5px;
  min-height: 18px
}

.groupSelect {
  padding: 7px 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.groupSelect label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px solid #222;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  background: #fff
}

.groupSelect input {
  accent-color: #111;
  width: 16px;
  height: 16px
}

.groupSelect label:has(input:checked) {
  background: #111;
  color: #fff
}

.scoreBox {
  border: 5px solid var(--red);
  height: 118px;
  text-align: center;
  color: var(--red);
  font-weight: 900;
  font-size: 18px;
  padding-top: 10px
}

.scoreBox .num {
  display: block;
  font-size: 54px;
  line-height: 1;
  color: #aaa;
  margin-top: 8px
}

.tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 8px
}

.roundTitle {
  color: var(--blue);
  font-size: 24px;
  font-weight: 900;
  margin: 0 0 5px 0
}

.round {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed
}

.round th,
.round td {
  border: 2px solid var(--line)
}

.round th {
  height: 28px;
  font-size: 16px
}

.no {
  width: 26px;
  text-align: center;
  font-size: 15px;
  font-weight: 500
}

.trick {
  width: 58%;
  height: 68px;
  cursor: pointer;
  background: #fafafa;
  position: relative;
  vertical-align: middle;
  text-align: left;
  padding: 6px 8px 6px 54px;
  overflow: hidden
}

.trick.empty {
  color: #999
}

.trick:hover {
  outline: 4px solid #409cff;
  outline-offset: -4px
}

.check {
  width: 17%;
  background: white;
  text-align: center
}

.judgeBox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 3px
}

.judgeSelect {
  width: 100%;
  max-width: 92px;
  border: 2px solid #222;
  border-radius: 9px;
  background: white;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 3px;
  text-align: center;
  text-align-last: center
}

.judgeSelect.success {
  background: #dff7df;
  color: #0b7a28;
  border-color: #0b7a28
}

.judgeSelect.fail {
  background: #ffe1e1;
  color: #d01818;
  border-color: #d01818
}

.judgeSelect.pending {
  background: #f5f5f5;
  color: #777
}

.judgeSelect option[value="success"] {
  color: #137333;
  font-weight: 900
}

.judgeSelect option[value="fail"] {
  color: #c62828;
  font-weight: 900
}

.btn:disabled {
  background: #999;
  cursor: not-allowed;
  opacity: .65
}

.pts {
  width: 8%;
  text-align: center;
  font-size: 22px;
  color: #bbb;
  font-weight: 900
}

.slotId {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: white;
  font-weight: 900;
  text-shadow: 0 1px 2px #0005
}

.slotText {
  font-size: 13px;
  line-height: 1.18;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.slotSub {
  font-size: 11px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px
}

.emailLine {
  display: none
}

.subtotal {
  border: 3px solid #111;
  height: 70px;
  font-weight: 800;
  padding: 6px
}

.actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px 0 24px
}

.btn {
  border: 0;
  border-radius: 10px;
  background: #0a84ff;
  color: white;
  font-weight: 800;
  padding: 12px 18px;
  font-size: 16px
}

.btn.secondary {
  background: #444
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: #0009;
  z-index: 10;
  align-items: end
}

.modal.open {
  display: flex
}

.panel {
  background: #f7f7f8;
  width: 100%;
  max-height: 92vh;
  border-radius: 24px 24px 0 0;
  overflow: hidden
}

.panelTop {
  background: #2b2b30;
  color: white;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 16px
}

.panelTop h2 {
  font-size: 21px;
  margin: 0 auto
}

.close {
  font-size: 36px;
  background: #444;
  border: 0;
  color: white;
  border-radius: 50%;
  width: 48px;
  height: 48px
}

.search {
  padding: 14px;
  background: white;
  border-bottom: 1px solid #ddd
}

.search input {
  width: 100%;
  font-size: 18px;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 12px
}

.levelNav {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 10px 14px;
  background: white
}

.levelNav button {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 900
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 1px;
  padding: 10px;
  overflow: auto;
  max-height: 62vh
}

.card {
  min-height: 96px;
  border: 1px solid #777;
  padding: 8px 8px 8px 58px;
  text-align: left;
  position: relative;
  cursor: pointer;
  overflow: hidden
}

.card.selected {
  filter: grayscale(.5);
  opacity: .55
}

.card .id {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 28px;
  font-weight: 900;
  text-shadow: 0 1px 2px #0005
}

.card .en {
  font-size: 14px;
  line-height: 1.22;
  font-weight: 800;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.card .jp {
  font-size: 13px;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.hint {
  color: white;
  margin-left: auto;
  font-size: 13px
}

.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: white;
  padding: 12px 18px;
  border-radius: 12px;
  display: none;
  z-index: 20
}

.toast.show {
  display: block
}

@media(max-width:900px) {
  .sheet {
    min-height: auto;
    padding: 10px;
    aspect-ratio: auto
  }

  .header {
    grid-template-columns: 1fr
  }

  .title h1 {
    font-size: 36px
  }

  .brand {
    min-height: 0
  }

  .brandMark {
    width: 72px;
    height: 72px;
    font-size: 24px
  }

  .tables {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .grid {
    grid-template-columns: repeat(2, minmax(145px, 1fr))
  }

  .check {
    width: 18%
  }

  .judgeBox {
    font-size: 14px;
    gap: 4px
  }

  .judgeBox input {
    width: 18px;
    height: 18px
  }

  .trick {
    height: 66px;
    padding-left: 48px
  }

  .pts {
    font-size: 22px
  }

  .round th {
    font-size: 14px
  }

  .no {
    font-size: 14px;
    width: 24px
  }

  .slotId {
    font-size: 20px
  }

  .slotText {
    font-size: 12px
  }

  .slotSub {
    font-size: 10px
  }

  .judgeSelect {
    font-size: 11px;
    max-width: 86px;
    padding: 5px 2px
  }

  .footer {
    justify-content: flex-end
  }

  .emailPair .field input {
    font-size: 15px;
    padding: 8px 6px
  }
}

/* Tablet landscape overflow fix */
@media (min-width: 901px) and (max-width: 1240px) {
  .header {
    grid-template-columns: 360px minmax(0, 1fr) 150px;
    gap: 16px;
  }

  .brand,
  .info {
    min-width: 0;
  }

  .title h1 {
    font-size: 38px;
  }

  .scoreBox {
    height: 112px;
    font-size: 16px;
  }

  .scoreBox .num {
    font-size: 50px;
  }

  .tables {
    gap: 28px;
  }

  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Mobile overflow fix */
@media (max-width: 600px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .wrap {
    padding: 0;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .sheet {
    width: 100%;
    max-width: 100vw;
    padding: 8px;
    border-left: 0;
    border-right: 0;
    overflow: hidden;
  }

  .header {
    gap: 14px;
  }

  .scoreBox {
    height: 104px;
    padding-top: 9px;
  }

  .scoreBox .num {
    font-size: 48px;
  }

  .roundTitle {
    font-size: 24px;
    margin-left: 0;
    text-align: center;
  }

  .tables {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    gap: 18px;
  }

  .round {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
  }

  .round th:first-child {
    width: 28px;
  }

  .round th:nth-child(2) {
    width: auto;
  }

  .round th:nth-child(3) {
    width: 84px;
  }

  .round th:nth-child(4) {
    width: 52px;
  }

  .round th {
    font-size: 12px;
    line-height: 1.15;
    height: 34px;
    padding: 2px;
    word-break: keep-all;
  }

  .round th:nth-child(3) {
    font-size: 11px;
  }

  .round th:nth-child(4) {
    font-size: 11px;
  }

  .no {
    width: 28px !important;
    font-size: 13px !important;
    font-weight: 500;
  }

  .trick {
    height: 64px;
    padding: 5px 5px 5px 38px;
  }

  .trick.empty {
    padding: 0 5px !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
  }

  .slotId {
    left: 4px;
    font-size: 17px;
  }

  .slotText {
    font-size: 11px;
    line-height: 1.12;
    -webkit-line-clamp: 2;
  }

  .slotSub {
    font-size: 9px;
    margin-top: 1px;
  }

  .check {
    width: 84px !important;
  }

  .judgeBox {
    padding: 2px;
  }

  .judgeSelect {
    max-width: 76px;
    width: 76px;
    font-size: 10px;
    line-height: 1.1;
    padding: 4px 1px;
    border-radius: 8px;
    border-width: 2px;
  }

  .pts {
    width: 52px !important;
    font-size: 16px !important;
  }

  .subtotal {
    height: 52px;
    font-size: 12px;
  }

  .footer {
    margin-top: 6px;
  }
}


/* mobile clean-up overrides */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.wrap {
  overflow-x: hidden;
}

.sheet {
  overflow: hidden;
}

.clearTop {
  display: none !important;
}

.search {
  display: none !important;
}

.round {
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.round th:first-child,
.round td.no {
  width: 32px;
}

.round th:nth-child(3),
.round td.check {
  width: 105px;
}

.round th:nth-child(4),
.round td.pts {
  width: 58px;
}

.round th:nth-child(2),
.round td.trick {
  width: auto;
}

.trick {
  padding: 6px 7px;
  text-align: center;
  vertical-align: middle;
}

.trick:not(.empty) {
  text-align: left;
  padding: 6px 7px 6px 48px;
}

.trick.empty {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 0 6px;
  color: #aaa;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  white-space: normal;
  overflow: hidden;
}

.judgeSelect {
  white-space: nowrap;
}

@media(max-width:600px) {
  .wrap {
    padding: 0;
    max-width: 100vw;
    background: #fff;
  }

  .sheet {
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    padding: 8px;
    border: 0;
    box-shadow: none;
  }

  .header {
    gap: 10px;
  }

  .brand {
    gap: 8px;
    border-left: 8px solid #111;
    padding-left: 8px;
    min-width: 0;
  }

  .brandMark {
    width: 58px;
    height: 58px;
    font-size: 21px;
    border-width: 4px;
    flex: 0 0 auto;
  }

  .title {
    min-width: 0;
  }

  .title small {
    font-size: 13px;
    line-height: 1.1;
    display: block;
  }

  .title h1 {
    font-size: 32px;
    line-height: .9;
    letter-spacing: -1px;
    white-space: nowrap;
  }

  .title .subTitle {
    font-size: 12px;
    padding: 4px 7px;
    letter-spacing: .06em;
    white-space: nowrap;
  }

  .info {
    border-width: 2px;
  }

  .infoTop {
    grid-template-columns: 76px 1fr;
  }

  .field span {
    font-size: 11px;
    padding: 4px 5px;
  }

  .field input {
    font-size: 15px;
    padding: 7px 6px;
  }

  .groupSelect {
    gap: 6px;
    padding: 7px 6px;
  }

  .groupSelect label {
    font-size: 13px;
    padding: 5px 9px;
  }

  .emailPair {
    grid-template-columns: 1fr;
  }

  .emailPair .field:first-child {
    border-right: 0;
    border-bottom: 2px solid var(--line);
  }

  .scoreBox {
    height: 92px;
    border-width: 4px;
    font-size: 17px;
    padding-top: 9px;
    margin-top: 10px;
  }

  .scoreBox .num {
    font-size: 46px;
    margin-top: 3px;
  }

  .roundTitle {
    font-size: 28px;
    margin: 12px 0 2px;
    text-align: center;
  }

  .round th:first-child,
  .round td.no {
    width: 28px !important;
  }

  .round th:nth-child(3),
  .round td.check {
    width: 96px !important;
  }

  .round th:nth-child(4),
  .round td.pts {
    width: 44px !important;
  }

  .round th {
    font-size: 12px;
    line-height: 1.05;
    height: 32px;
    padding: 2px;
    white-space: normal;
  }

  .round th:nth-child(3) {
    font-size: 11px;
  }

  .round th:nth-child(4) {
    font-size: 11px;
  }

  .no {
    font-size: 13px !important;
  }

  .trick {
    height: 62px !important;
  }

  .trick.empty {
    font-size: 13px !important;
    line-height: 1.15;
  }

  .trick:not(.empty) {
    padding-left: 42px;
  }

  .slotId {
    left: 5px;
    font-size: 18px;
  }

  .slotText {
    font-size: 11px;
    line-height: 1.12;
    -webkit-line-clamp: 2;
  }

  .slotSub {
    font-size: 9px;
  }

  .judgeBox {
    padding: 2px;
  }

  .judgeSelect {
    max-width: 90px;
    font-size: 11px;
    border-radius: 8px;
    padding: 5px 1px;
  }

  .pts {
    font-size: 18px !important;
  }

  .subtotal {
    height: 58px;
    width: 82px;
    font-size: 13px;
    padding: 5px;
  }

  .panelTop {
    height: 56px;
    padding: 0 10px;
    gap: 8px;
  }

  .panelTop h2 {
    font-size: 16px;
  }

  .panelTop .btn {
    font-size: 12px;
    padding: 9px 10px;
  }

  .close {
    width: 42px;
    height: 42px;
    font-size: 30px;
  }

  .levelNav {
    padding: 8px 10px;
    gap: 6px;
  }

  .levelNav button {
    padding: 8px 11px;
    font-size: 12px;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
    max-height: 68vh;
  }

  .card {
    min-height: 86px;
    padding: 7px 6px 7px 46px;
  }

  .card .id {
    font-size: 22px;
    left: 6px;
  }

  .card .en {
    font-size: 12px;
    line-height: 1.15;
  }

  .card .jp {
    font-size: 11px;
  }
}

@media(max-width:380px) {

  .round th:first-child,
  .round td.no {
    width: 26px !important;
  }

  .round th:nth-child(3),
  .round td.check {
    width: 90px !important;
  }

  .round th:nth-child(4),
  .round td.pts {
    width: 40px !important;
  }

  .judgeSelect {
    font-size: 10px;
    max-width: 84px;
  }

  .title h1 {
    font-size: 29px;
  }

  .title .subTitle {
    font-size: 11px;
  }
}



/* Production UI final polish */
.actions {
  display: none !important;
}

.productionSubmit {
  margin: 22px auto 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  clear: both;
}

.submitMain {
  background: #111;
  color: #fff;
  border: 3px solid #111;
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 18px;
  letter-spacing: .02em;
  min-width: 260px;
  box-shadow: none;
}

.submitMain:disabled {
  background: #e7e7e7;
  color: #888;
  border-color: #bbb;
  opacity: 1;
}

.submitNote {
  font-size: 12px;
  font-weight: 800;
  color: #777;
  text-align: center;
}

.emptyText {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #aaa;
  font-weight: 800;
  line-height: 1.1;
  white-space: normal;
  overflow: hidden;
}

.trick.empty {
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.round th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.mainHead {
  display: inline-block
}

.jpHead {
  display: inline-block
}

@media(max-width:600px) {
  body {
    background: #fff;
  }

  .wrap {
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  .sheet {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    border: none !important;
    box-shadow: none !important;
  }

  .brand {
    gap: 9px;
    padding-left: 10px;
    border-left-width: 7px;
  }

  .brandMark {
    width: 58px !important;
    height: 58px !important;
    font-size: 19px !important;
    border-width: 4px;
  }

  .title small {
    font-size: 14px !important;
    line-height: 1.1;
    display: block;
  }

  .title h1 {
    font-size: 32px !important;
    line-height: .9;
    margin-top: 2px;
  }

  .title .subTitle {
    font-size: 11px !important;
    padding: 4px 7px;
    letter-spacing: .06em;
  }

  .info {
    border-width: 3px;
  }

  .infoTop {
    grid-template-columns: 86px 1fr;
  }

  .field span {
    font-size: 11px;
    padding: 4px 6px;
  }

  .field input {
    font-size: 16px;
    padding: 9px 7px;
  }

  .groupSelect {
    gap: 6px;
    padding: 7px 6px;
  }

  .groupSelect label {
    font-size: 13px;
    padding: 5px 9px;
  }

  .emailPair {
    grid-template-columns: 1fr;
  }

  .emailPair .field:first-child {
    border-right: 0;
    border-bottom: 2px solid var(--line);
  }

  .scoreBox {
    height: 94px;
    border-width: 4px;
    font-size: 17px;
    margin-top: 10px;
  }

  .scoreBox .num {
    font-size: 44px;
    margin-top: 5px;
  }

  .roundTitle {
    font-size: 26px !important;
    margin: 18px 0 4px !important;
    text-align: center;
  }

  .round {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  .round th,
  .round td {
    border-width: 2px !important;
  }

  .round th {
    height: 34px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    padding: 2px 1px !important;
  }

  .round th:first-child,
  .round td.no {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
  }

  .round th:nth-child(3),
  .round td.check {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }

  .round th:nth-child(4),
  .round td.pts {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  .round th:nth-child(2),
  .round td.trick {
    width: auto !important;
  }

  .jpHead {
    display: none !important;
  }

  .no {
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  .trick {
    height: 62px !important;
    min-height: 62px !important;
  }

  .trick:not(.empty) {
    padding: 5px 4px 5px 34px !important;
    text-align: left !important;
  }

  .emptyText {
    font-size: 12px !important;
    padding: 0 4px !important;
  }

  .slotId {
    left: 3px !important;
    font-size: 15px !important;
  }

  .slotText {
    font-size: 10.5px !important;
    line-height: 1.08 !important;
    -webkit-line-clamp: 2 !important;
  }

  .slotSub {
    font-size: 8.5px !important;
    line-height: 1.05 !important;
  }

  .judgeBox {
    padding: 1px !important;
  }

  .judgeSelect {
    width: 88px !important;
    max-width: 88px !important;
    font-size: 10.5px !important;
    border-radius: 8px !important;
    border-width: 2px !important;
    padding: 5px 0 !important;
  }

  .pts {
    font-size: 15px !important;
  }

  .subtotal {
    width: 78px !important;
    height: 50px !important;
    font-size: 12px !important;
  }

  .productionSubmit {
    margin: 22px auto 8px !important;
    padding: 0 8px;
  }

  .submitMain {
    width: 100%;
    max-width: 360px;
    min-width: 0;
    font-size: 16px;
    padding: 13px 18px;
  }

  .submitNote {
    font-size: 11px;
  }
}

@media(max-width:380px) {

  .round th:nth-child(3),
  .round td.check {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
  }

  .round th:nth-child(4),
  .round td.pts {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }

  .judgeSelect {
    width: 82px !important;
    max-width: 82px !important;
    font-size: 10px !important;
  }

  .emptyText {
    font-size: 11px !important;
  }
}


/* Final polish: connected email divider + centered subtotal */
.emailPair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.emailPair .field {
  min-height: 76px;
}

.emailPair .field:first-child {
  border-right: 2px solid var(--line) !important;
}

.emailPair .field span {
  height: 28px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #999;
}

.emailPair .field input {
  height: 48px;
  display: block;
}

.subtotal {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px !important;
  line-height: 1.15;
}

.subtotal span {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}

@media(max-width:900px) {
  .emailPair {
    grid-template-columns: 1fr;
  }

  .emailPair .field:first-child {
    border-right: 0 !important;
    border-bottom: 2px solid var(--line) !important;
  }

  .emailPair .field {
    min-height: 70px;
  }

  .emailPair .field input {
    height: 42px;
  }

  .subtotal span {
    font-size: 18px;
  }
}


/* Layout cleanup: email line, safer trick ID layout, wider result/points */
.emailPair {
  border-bottom: 2px solid var(--line) !important;
}

.emailConfirmNote {
  font-size: 12px;
  font-weight: 800;
  color: #666;
  padding: 5px 8px 6px;
  line-height: 1.25;
}

.emailError:not(:empty) {
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

.round th:first-child,
.round td.no {
  width: 32px !important;
}

.round th:nth-child(2),
.round td.trick {
  width: auto !important;
}

.round th:nth-child(3),
.round td.check {
  width: 104px !important;
}

.round th:nth-child(4),
.round td.pts {
  width: 60px !important;
}

.round th {
  font-size: 14px !important;
  line-height: 1.05 !important;
}

.round th:nth-child(3),
.round th:nth-child(4) {
  white-space: nowrap !important;
}

.trick:not(.empty) {
  padding: 6px 8px !important;
  text-align: left !important;
}

.slotId {
  position: static !important;
  transform: none !important;
  text-shadow: none !important;
}

.slotContent {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.slotIdInline {
  flex: 0 0 44px;
  max-width: 44px;
  color: white;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #0005;
  white-space: nowrap;
}

.slotNames {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.slotText,
.slotSub {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

.slotText {
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 800;
}

.slotSub {
  font-size: 10px !important;
  line-height: 1.1 !important;
  margin-top: 2px !important;
}

@media(max-width:900px) {
  .emailConfirmNote {
    font-size: 11px;
    padding: 5px 6px;
  }

  .round th:first-child,
  .round td.no {
    width: 28px !important;
  }

  .round th:nth-child(3),
  .round td.check {
    width: 94px !important;
  }

  .round th:nth-child(4),
  .round td.pts {
    width: 50px !important;
  }

  .pointsHead {
    font-size: 11px !important;
  }

  .slotIdInline {
    flex-basis: 38px;
    max-width: 38px;
    font-size: 18px;
  }

  .slotText {
    font-size: 10.5px !important;
  }

  .slotSub {
    font-size: 8.5px !important;
  }
}

@media(max-width:600px) {

  .round th:nth-child(3),
  .round td.check {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }

  .round th:nth-child(4),
  .round td.pts {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }

  .round th {
    font-size: 11px !important;
  }

  .trick:not(.empty) {
    padding: 5px 6px !important;
  }

  .slotContent {
    gap: 5px;
  }

  .slotIdInline {
    flex-basis: 34px;
    max-width: 34px;
    font-size: 16px;
  }
}

@media(max-width:380px) {

  .round th:nth-child(3),
  .round td.check {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
  }

  .round th:nth-child(4),
  .round td.pts {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  .slotIdInline {
    flex-basis: 32px;
    max-width: 32px;
    font-size: 15px;
  }
}


/* Update: prevent 2-digit trick IDs from overlapping and show email match */
.trick {
  padding-left: 96px !important;
}


.slotId {
  left: 10px !important;
  width: 76px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.slotContent {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.slotIdInline {
  flex: 0 0 76px;
  text-align: center;
  white-space: nowrap;
  font-size: 22px;
  font-weight: 900;
  color: white;
  text-shadow: 0 1px 2px #0007;
  padding: 0 8px;
}

.slotNames {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.slotText,
.slotSub {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emailError.match {
  color: #137333;
}

@media(max-width:900px) {
  .trick {
    padding-left: 86px !important;
  }

  .slotId {
    width: 66px !important;
  }

  .slotIdInline {
    flex-basis: 66px;
    font-size: 20px;
    padding: 0 6px;
  }

  .slotText {
    font-size: 12px
  }

  .slotSub {
    font-size: 10px
  }
}



/* Modal full-name update: keep sheet compact, but show full trick names while selecting */
.grid {
  grid-template-columns: repeat(5, minmax(210px, 1fr)) !important;
  gap: 6px !important;
  padding: 12px !important;
  max-height: 70vh !important;
}

.card {
  min-height: auto !important;
  height: auto !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  overflow: visible !important;
  text-align: left !important;
  border: 1px solid #777 !important;
}

.card .id {
  position: static !important;
  transform: none !important;
  align-self: start !important;
  justify-self: center !important;
  color: white !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px #0007 !important;
  white-space: nowrap !important;
}

.card .cardText {
  min-width: 0 !important;
  overflow: visible !important;
}

.card .en {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.card .jp {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  margin-top: 6px !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.usedNote {
  margin-top: 8px;
  display: inline-block;
  padding: 3px 7px;
  border-radius: 999px;
  background: #0008;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

@media(max-width:900px) {
  .grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
    max-height: 68vh !important;
  }

  .card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  .card .id {
    font-size: 24px !important;
  }

  .card .en {
    font-size: 13px !important;
  }

  .card .jp {
    font-size: 12px !important;
  }
}

@media(max-width:520px) {
  .grid {
    grid-template-columns: 1fr !important;
    max-height: 70vh !important;
  }

  .card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  .card .id {
    font-size: 26px !important;
  }
}



/* FINAL FIX: points header, selected trick cells, and modal card overlap */
.round {
  table-layout: fixed !important;
}

.round th:first-child,
.round td.no {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
}

.round th:nth-child(2),
.round td.trick {
  width: auto !important;
}

.round th:nth-child(3),
.round td.check {
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
}

.round th:nth-child(4),
.round td.pts {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
}

.round th {
  font-size: 13px !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-align: center !important;
  padding: 2px 3px !important;
}

.round th:nth-child(4) .mainHead,
.round th:nth-child(4) .jpHead {
  display: inline !important;
  white-space: nowrap !important;
}

.round th:nth-child(4) {
  font-size: 12px !important;
}

.round td.pts {
  text-align: center !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  padding: 0 !important;
}

.round td.trick:not(.empty) {
  padding: 6px 8px !important;
  text-align: left !important;
  overflow: hidden !important;
}

.slotContent {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.slotIdInline {
  display: block !important;
  width: 76px !important;
  max-width: 76px !important;
  min-width: 76px !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: white !important;
  text-shadow: 0 1px 2px #0008 !important;
}

.slotNames {
  min-width: 0 !important;
  overflow: hidden !important;
}

.slotText,
.slotSub {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

.slotText {
  font-size: 12px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
}

.slotSub {
  font-size: 10px !important;
  line-height: 1.1 !important;
  margin-top: 2px !important;
}

/* Modal: full names, no overlap, more vertical room */
.grid {
  grid-template-columns: repeat(5, minmax(250px, 1fr)) !important;
  gap: 6px !important;
  padding: 12px !important;
  max-height: 70vh !important;
}

.card {
  min-height: 126px !important;
  height: auto !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: start !important;
  overflow: visible !important;
}

.card .id {
  position: static !important;
  transform: none !important;
  width: 92px !important;
  max-width: 92px !important;
  min-width: 92px !important;
  text-align: center !important;
  align-self: center !important;
  color: white !important;
  font-size: 32px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px #0008 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.card .cardText {
  min-width: 0 !important;
  overflow: visible !important;
}

.card .en,
.card .jp {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.card .en {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.card .jp {
  font-size: 13px !important;
  line-height: 1.25 !important;
  margin-top: 6px !important;
}

.usedNote {
  display: inline-block !important;
  margin-top: 8px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: #0005 !important;
  color: white !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}


@media (min-width:901px) and (max-width:1240px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media(max-width:900px) {

  .round th:first-child,
  .round td.no {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
  }

  .round th:nth-child(3),
  .round td.check {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }

  .round th:nth-child(4),
  .round td.pts {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }

  .round th:nth-child(4) .mainHead {
    font-size: 11px !important;
  }

  .round th:nth-child(4) .jpHead {
    display: none !important;
  }

  .round td.pts {
    font-size: 19px !important;
  }

  .slotContent {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    column-gap: 7px !important;
  }

  .slotIdInline {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    font-size: 19px !important;
  }

  .slotText {
    font-size: 10.5px !important;
  }

  .slotSub {
    font-size: 8.5px !important;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }

  .card {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    min-height: 128px !important;
  }

  .card .id {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    font-size: 28px !important;
  }
}

@media(max-width:600px) {

  .round th:nth-child(3),
  .round td.check {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }

  .round th:nth-child(4),
  .round td.pts {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }

  .slotContent {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    column-gap: 6px !important;
  }

  .slotIdInline {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    font-size: 17px !important;
  }

  .grid {
    grid-template-columns: 1fr !important;
  }

  .card {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    min-height: 120px !important;
  }

  .card .id {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    font-size: 26px !important;
  }
}



/* Validation + completion popup update */
.sheet {
  padding-bottom: 42px !important;
}

.productionSubmit {
  margin: 18px auto 18px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  clear: both;
}

.validationBox {
  width: min(540px, 100%);
  border: 2px solid #222;
  background: #fff;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
}

.validationBox.ready {
  border-color: #0b7a28;
  background: #ecfdf1;
  color: #0b7a28;
  text-align: center;
}

.validationBox .title {
  font-weight: 900;
  margin-bottom: 4px;
}

.validationBox ul {
  margin: 4px 0 0 18px;
  padding: 0;
}

.validationBox li {
  margin: 2px 0;
}

.submitNote {
  line-height: 1.35;
}

.successOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #0008;
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.successOverlay.open {
  display: flex;
}

.successCard {
  background: #fff;
  border: 4px solid #111;
  max-width: 460px;
  width: 100%;
  padding: 26px 22px;
  text-align: center;
  box-shadow: 0 16px 40px #0008;
}

.successCard h2 {
  font-size: 28px;
  margin: 0 0 8px;
  font-weight: 900;
}

.successCard p {
  font-size: 15px;
  line-height: 1.55;
  margin: 8px 0;
  color: #333;
  font-weight: 700;
}

.successCard .okBtn {
  margin-top: 16px;
  background: #111;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

@media(max-width:600px) {
  .sheet {
    padding-bottom: 34px !important;
  }

  .validationBox {
    font-size: 12px;
    padding: 9px 11px;
  }

  .successCard h2 {
    font-size: 24px;
  }

  .successCard {
    padding: 22px 18px;
  }
}



/* Compact validation area so Submit stays visible inside the white sheet */
.productionSubmit {
  margin: 12px auto 6px !important;
  gap: 6px !important;
  max-width: 620px;
}

.submitMain {
  order: 1;
  margin: 0 auto !important;
  padding: 12px 28px !important;
  font-size: 17px !important;
  min-width: 250px !important;
}

.validationBox {
  order: 2;
  width: 100% !important;
  max-height: 48px;
  overflow: auto;
  border: 0 !important;
  background: transparent !important;
  padding: 0 8px !important;
  color: #666;
  font-size: 11px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

.validationBox.ready {
  display: none !important;
}

.validationBox .title {
  display: none !important;
}

.validationBox #validationText>div {
  display: inline;
  font-weight: 900;
}

.validationBox ul {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
}

.validationBox li {
  display: inline;
  margin: 0 !important;
}

.validationBox li:not(:last-child)::after {
  content: " / ";
}

.submitNote {
  display: none !important;
}

.sheet {
  padding-bottom: 24px !important;
}

@media(max-width:600px) {
  .productionSubmit {
    margin: 14px auto 8px !important;
    padding: 0 6px !important;
  }

  .submitMain {
    width: 100% !important;
    max-width: 360px !important;
    min-width: 0 !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
  }

  .validationBox {
    font-size: 10.5px !important;
    max-height: 54px;
  }
}



/* Final design fix: compact required text, visible submit, bilingual labels */
.sheet {
  aspect-ratio: auto !important;
  min-height: 820px !important;
  overflow: visible !important;
  padding-bottom: 34px !important;
}

.productionSubmit {
  margin: 12px auto 4px !important;
  max-width: 760px !important;
  gap: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.validationBox {
  order: 1 !important;
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 12px !important;
  color: #666 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.validationBox.ready {
  display: none !important;
}

.validationBox .title {
  display: none !important;
}

.validationBox #validationText>div {
  display: inline !important;
  font-weight: 900 !important;
}

.validationBox ul {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

.validationBox li {
  display: inline !important;
  margin: 0 !important;
  white-space: normal !important;
}

.validationBox li:not(:last-child)::after {
  content: " / ";
}

.submitMain {
  order: 2 !important;
  margin: 0 auto !important;
  padding: 12px 30px !important;
  min-width: 270px !important;
  border-radius: 999px !important;
}

.submitNote {
  display: none !important;
}

.successCard p.jpLine {
  margin-bottom: 4px !important;
}

.successCard p.enLine {
  margin-top: 4px !important;
  color: #555 !important;
}

@media(max-width:600px) {
  .sheet {
    min-height: auto !important;
    padding-bottom: 28px !important;
    overflow: hidden !important;
  }

  .productionSubmit {
    margin: 14px auto 8px !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }

  .validationBox {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  .submitMain {
    width: 100% !important;
    max-width: 360px !important;
    min-width: 0 !important;
  }
}


/* Player No dropdown + bilingual validation polish */
.field select {
  border: 0;
  font-size: 18px;
  padding: 7px 9px;
  min-width: 0;
  background: white;
  font-weight: 800;
  height: 42px;
}

.hpField {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.validationBox {
  color: #c62828 !important;
}

.validationBox li {
  color: #c62828 !important;
  font-weight: 900 !important;
}

.validationBox #validationText>div {
  color: #c62828 !important;
}

.emailConfirmNote {
  font-size: 12px;
  font-weight: 800;
  color: #555;
  padding: 6px 8px 7px;
  line-height: 1.35;
}

@media(max-width:600px) {
  .field select {
    font-size: 16px;
    padding: 9px 7px;
    height: 42px;
  }

  .emailConfirmNote {
    font-size: 11px;
  }
}


/* Player No dropdown + confirm label polish */
.infoTop {
  grid-template-columns: 112px 1fr !important;
}

.playerSelect {
  width: 96px !important;
  max-width: 96px !important;
  height: 38px !important;
  margin: auto !important;
  border: 2px solid #222 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
  text-align-last: center !important;
  padding: 5px 4px !important;
}

.playerSelect:valid {
  background: #fff !important;
}

.emailPair .field span {
  font-size: 12px !important;
  line-height: 1.15 !important;
}

@media(max-width:600px) {
  .infoTop {
    grid-template-columns: 96px 1fr !important;
  }

  .playerSelect {
    width: 82px !important;
    max-width: 82px !important;
    height: 36px !important;
    margin: 5px 6px !important;
    font-size: 12px !important;
    padding: 4px 2px !important;
  }

  .emailPair .field span {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }
}


/* Required Fields layout update */
.validationBox {
  color: #c62828 !important;
  text-align: center !important;
  padding: 6px 12px 10px !important;
}

.validationBox #validationText>div.requiredTitle {
  display: block !important;
  color: #c62828 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  margin-bottom: 5px !important;
}

.validationBox ul.requiredItems {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 3px 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.validationBox ul.requiredItems li {
  display: inline-block !important;
  color: #c62828 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  margin: 0 !important;
  white-space: normal !important;
}

.validationBox ul.requiredItems li:not(:last-child)::after {
  content: "" !important;
}

@media(max-width:600px) {
  .validationBox #validationText>div.requiredTitle {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }

  .validationBox ul.requiredItems {
    gap: 2px 8px !important;
  }

  .validationBox ul.requiredItems li {
    font-size: 11px !important;
  }
}

/* Tablet email label wrapping */
@media (min-width:901px) and (max-width:1240px) {
  .emailPair .field span {
    height: auto !important;
    min-height: 40px !important;
    align-items: flex-start !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }
}

/* Email fields must not push the center panel wider than its grid column */
.info,
.emailPair,
.emailPair .field {
  min-width: 0 !important;
}

.emailPair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.emailPair .field span {
  max-width: 100% !important;
  height: auto !important;
  min-height: 28px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

@media (min-width:901px) and (max-width:1120px) {
  .emailPair {
    grid-template-columns: 1fr !important;
  }

  .emailPair .field:first-child {
    border-right: 0 !important;
    border-bottom: 2px solid var(--line) !important;
  }

  .emailPair .field {
    min-height: 64px !important;
  }

  .emailPair .field span {
    min-height: 24px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .emailPair .field input {
    height: 40px !important;
  }
}

/* Portrait layout: stack email fields cleanly */
@media (max-width:900px) {
  .emailPair {
    grid-template-columns: 1fr !important;
    border-bottom: 2px solid var(--line) !important;
  }

  .emailPair .field {
    min-width: 0 !important;
    min-height: 64px !important;
  }

  .emailPair .field:first-child {
    border-right: 0 !important;
    border-bottom: 2px solid var(--line) !important;
  }

  .emailPair .field span {
    min-height: 24px !important;
    height: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .emailPair .field input {
    height: 40px !important;
  }
}

/* Tablet landscape composition polish */
@media (min-width:901px) and (max-width:1240px) and (orientation:landscape) {
  .wrap {
    padding: 10px 14px !important;
  }

  .sheet {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    padding: 18px 22px 20px !important;
  }

  .header {
    grid-template-columns: 340px minmax(0, 1fr) 150px !important;
    gap: 16px !important;
    align-items: start !important;
  }

  .brand {
    min-height: 0 !important;
    gap: 12px !important;
  }

  .brandMark {
    width: 82px !important;
    height: 82px !important;
  }

  .title h1 {
    font-size: 40px !important;
  }

  .title .subTitle {
    margin-top: 6px !important;
  }

  .info {
    align-self: start !important;
  }

  .groupSelect {
    padding: 7px 8px !important;
    gap: 8px !important;
  }

  .emailConfirmNote {
    padding: 8px !important;
  }

  .scoreBox {
    width: 150px !important;
    height: 112px !important;
    padding-top: 12px !important;
    align-self: start !important;
  }

  .scoreBox .num {
    font-size: 50px !important;
    margin-top: 5px !important;
  }

  .tables {
    gap: 30px !important;
    margin-top: 12px !important;
  }

  .roundTitle {
    margin-top: 0 !important;
  }

  .subtotal {
    height: 68px !important;
  }

  .productionSubmit {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }
}

/* Tablet landscape: place score under the brand and give the form more room */
@media (min-width:901px) and (max-width:1240px) and (orientation:landscape) {
  .header {
    grid-template-columns: 360px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 12px 18px !important;
    align-items: start !important;
  }

  .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .info {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
  }

  .scoreBox {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 86px !important;
    padding-top: 8px !important;
    align-self: start !important;
  }

  .scoreBox .num {
    font-size: 42px !important;
    margin-top: 2px !important;
  }

  .emailConfirmNote {
    padding: 8px 10px !important;
  }

  .tables {
    margin-top: 14px !important;
  }
}

/* Landscape layout: score lives under the brand, form gets the right side */
@media (min-width:901px) and (orientation:landscape) {
  .header {
    grid-template-columns: clamp(340px, 34vw, 430px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 12px 20px !important;
    align-items: start !important;
  }

  .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
  }

  .info {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    align-self: start !important;
  }

  .scoreBox {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 86px !important;
    padding-top: 8px !important;
    align-self: start !important;
  }

  .scoreBox .num {
    font-size: 42px !important;
    margin-top: 2px !important;
  }

  .tables {
    margin-top: 14px !important;
  }
}

/* Keep SCORE SHEET on one line in landscape layouts */
@media (min-width:901px) and (orientation:landscape) {
  .title h1 {
    white-space: nowrap !important;
    font-size: clamp(38px, 4.2vw, 42px) !important;
    letter-spacing: -1px !important;
  }
}

/* Tablet landscape: let title and subtitle wrap instead of clipping */
@media (min-width:901px) and (max-width:1100px) and (orientation:landscape) {
  .brand {
    align-items: flex-start !important;
  }

  .title {
    min-width: 0 !important;
    overflow: visible !important;
  }

  .title small {
    display: block !important;
    line-height: 1.15 !important;
  }

  .title h1 {
    white-space: normal !important;
    font-size: 40px !important;
    line-height: .9 !important;
    max-width: 100% !important;
  }

  .title .subTitle {
    white-space: normal !important;
    max-width: 100% !important;
    line-height: 1.15 !important;
  }
}

/* Final responsive text safety: wrap instead of clipping at every width */
.brand,
.title,
.info,
.field,
.emailPair,
.groupSelect,
.scoreBox {
  min-width: 0 !important;
}

.title {
  max-width: 100% !important;
  overflow: visible !important;
}

.title small,
.title h1,
.title .subTitle,
.field span,
.validationBox,
.requiredItems li {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.title h1 {
  line-height: .9 !important;
}

.title .subTitle {
  display: inline-block !important;
  line-height: 1.15 !important;
}

@media (min-width:901px) and (orientation:landscape) {
  .title h1 {
    font-size: clamp(36px, 3.7vw, 42px) !important;
  }
}

/* Landscape alignment: score box bottom aligns with the form bottom */
@media (min-width:901px) and (orientation:landscape) {
  .header {
    align-items: stretch !important;
  }

  .brand {
    align-self: start !important;
  }

  .scoreBox {
    align-self: end !important;
    margin-top: 0 !important;
  }

  .info {
    align-self: stretch !important;
  }
}

/* Landscape score spacing refinement */
@media (min-width:901px) and (orientation:landscape) {
  .header {
    gap: 8px 20px !important;
  }

  .scoreBox {
    min-height: 104px !important;
    height: auto !important;
    padding: 12px 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.05 !important;
  }

  .scoreBox .num {
    font-size: 44px !important;
    line-height: 1 !important;
    margin-top: 8px !important;
  }
}

@media (min-width:901px) and (max-width:1100px) and (orientation:landscape) {
  .header {
    gap: 6px 18px !important;
  }

  .scoreBox {
    min-height: 96px !important;
    padding: 10px 10px 12px !important;
  }

  .scoreBox .num {
    font-size: 42px !important;
    margin-top: 6px !important;
  }
}

/* Wide/tablet layout: keep score under brand even when orientation media queries miss */
@media (min-width:901px) {
  .header {
    grid-template-columns: clamp(340px, 34vw, 430px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 8px 20px !important;
    align-items: stretch !important;
  }

  .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    min-height: 0 !important;
  }

  .info {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }

  .scoreBox {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-height: 104px !important;
    height: auto !important;
    padding: 12px 12px 14px !important;
    margin-top: 0 !important;
    align-self: end !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.05 !important;
  }

  .scoreBox .num {
    font-size: 44px !important;
    line-height: 1 !important;
    margin-top: 8px !important;
  }
}

@media (min-width:901px) and (max-width:1100px) {
  .header {
    gap: 6px 18px !important;
  }

  .scoreBox {
    min-height: 96px !important;
    padding: 10px 10px 12px !important;
  }

  .scoreBox .num {
    font-size: 42px !important;
    margin-top: 6px !important;
  }
}

/* Wide layout: give the score box a little more vertical presence */
@media (min-width:901px) {
  .scoreBox {
    min-height: 118px !important;
    padding-top: 14px !important;
    padding-bottom: 16px !important;
  }

  .scoreBox .num {
    font-size: 48px !important;
    margin-top: 10px !important;
  }
}

@media (min-width:901px) and (max-width:1100px) {
  .scoreBox {
    min-height: 110px !important;
  }

  .scoreBox .num {
    font-size: 46px !important;
    margin-top: 8px !important;
  }
}

/* Wide score growth: keep the logo gap, extend the box downward */
@media (min-width:901px) {
  .scoreBox {
    align-self: start !important;
    min-height: 126px !important;
    padding: 16px 12px 18px !important;
  }

  .scoreBox .num {
    font-size: 50px !important;
    margin-top: 12px !important;
  }
}

@media (min-width:901px) and (max-width:1100px) {
  .scoreBox {
    min-height: 116px !important;
    padding: 14px 10px 16px !important;
  }

  .scoreBox .num {
    font-size: 46px !important;
    margin-top: 10px !important;
  }
}

/* Wide layout: keep score top gap and stretch its bottom to the form bottom */
@media (min-width:901px) {
  .header {
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .info {
    grid-row: 1 / 3 !important;
    align-self: stretch !important;
  }

  .scoreBox {
    grid-row: 2 !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 14px 12px 16px !important;
    justify-content: center !important;
  }

  .scoreBox .num {
    font-size: clamp(46px, 4.2vw, 54px) !important;
    margin-top: 10px !important;
  }
}

/* Landscape table spacing: give Points header breathing room */
@media (min-width:901px) {

  .round th:nth-child(4),
  .round td.pts {
    width: 82px !important;
    min-width: 82px !important;
  }

  .round th:nth-child(4) {
    padding-left: 8px !important;
    padding-right: 8px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
}

@media (min-width:901px) and (max-width:1100px) {

  .round th:nth-child(4),
  .round td.pts {
    width: 76px !important;
    min-width: 76px !important;
  }

  .round th:nth-child(4) {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 12px !important;
  }
}

/* Landscape table columns: keep Points on one line with padding */
@media (min-width:901px) {

  .round th:first-child,
  .round td.no {
    width: 32px !important;
    min-width: 32px !important;
  }

  .round th:nth-child(3),
  .round td.check {
    width: 106px !important;
    min-width: 106px !important;
  }

  .round th:nth-child(4),
  .round td.pts {
    width: 104px !important;
    min-width: 104px !important;
  }

  .round th:nth-child(2),
  .round td.trick {
    width: auto !important;
  }

  .round th:nth-child(4) {
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    font-size: 12px !important;
  }
}

@media (min-width:901px) and (max-width:1100px) {

  .round th:nth-child(3),
  .round td.check {
    width: 100px !important;
    min-width: 100px !important;
  }

  .round th:nth-child(4),
  .round td.pts {
    width: 98px !important;
    min-width: 98px !important;
  }

  .round th:nth-child(4) {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 11.5px !important;
  }
}

/* Landscape info header: keep Player No label on one line */
@media (min-width:901px) {
  .infoTop {
    grid-template-columns: 150px minmax(0, 1fr) !important;
  }

  .infoTop .field:first-child span {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }

  .playerSelect {
    width: 112px !important;
    max-width: 112px !important;
  }

  .groupSelect {
    gap: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .groupSelect label {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

@media (min-width:901px) and (max-width:1100px) {
  .infoTop {
    grid-template-columns: 142px minmax(0, 1fr) !important;
  }

  .infoTop .field:first-child span {
    font-size: 10.5px !important;
  }

  .playerSelect {
    width: 106px !important;
    max-width: 106px !important;
  }

  .groupSelect {
    gap: 5px !important;
  }

  .groupSelect label {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Portrait input area: stack every field vertically */
@media (max-width:900px) {
  .infoTop {
    display: grid !important;
    grid-template-columns: 1fr !important;
    border-bottom: 2px solid var(--line) !important;
  }

  .infoTop .field:first-child {
    border-right: 0 !important;
    border-bottom: 2px solid var(--line) !important;
  }

  .infoTop .field,
  .nameField,
  .emailPair .field {
    min-width: 0 !important;
  }

  .infoTop .field span,
  .nameField span,
  .emailPair .field span {
    min-height: 24px !important;
    height: auto !important;
    white-space: normal !important;
  }

  .playerSelect {
    width: min(180px, calc(100% - 16px)) !important;
    max-width: none !important;
    margin: 7px 8px !important;
  }

  .groupSelect {
    padding: 8px !important;
    gap: 8px !important;
  }

  .groupSelect label {
    padding: 6px 12px !important;
  }
}

/* KWC image logo */
.brandMark {
  overflow: hidden !important;
  background: #fff !important;
}

.brandMark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* KWC logo should stand alone, not inside a square frame */
.brandMark {
  border: 0 !important;
  background: transparent !important;
  width: 96px !important;
  height: 96px !important;
  flex: 0 0 96px !important;
}

.brandMark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

@media (max-width:900px) {
  .brandMark {
    width: 86px !important;
    height: 86px !important;
    flex-basis: 86px !important;
  }
}

@media (max-width:600px) {
  .brandMark {
    width: 68px !important;
    height: 68px !important;
    flex-basis: 68px !important;
  }
}

/* Align standalone KWC logo with the title block height */
.brandMark {
  width: 120px !important;
  height: 120px !important;
  flex: 0 0 120px !important;
}

.brandMark img {
  object-fit: contain !important;
}

@media (min-width:901px) {
  .brandMark {
    width: 128px !important;
    height: 128px !important;
    flex-basis: 128px !important;
  }
}


@media (min-width:901px) and (max-width:1100px) {
  .brandMark {
    width: 118px !important;
    height: 118px !important;
    flex-basis: 118px !important;
  }
}

@media (max-width:900px) {
  .brandMark {
    width: 104px !important;
    height: 104px !important;
    flex-basis: 104px !important;
  }
}

@media (max-width:600px) {
  .brandMark {
    width: 76px !important;
    height: 76px !important;
    flex-basis: 76px !important;
  }
}

/* Image logo no longer needs the left brand rule */
.brand {
  border-left: 0 !important;
  padding-left: 0 !important;
}

/* Make the KWC logo match the full title/subtitle height */
@media (min-width:901px) {
  .brand {
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .brandMark {
    width: 160px !important;
    height: 160px !important;
    flex-basis: 160px !important;
  }
}

@media (min-width:901px) and (max-width:1100px) {
  .brandMark {
    width: 145px !important;
    height: 145px !important;
    flex-basis: 145px !important;
  }

  .brand {
    gap: 14px !important;
  }
}

@media (max-width:900px) {
  .brandMark {
    width: 118px !important;
    height: 118px !important;
    flex-basis: 118px !important;
  }
}

@media (max-width:600px) {
  .brandMark {
    width: 86px !important;
    height: 86px !important;
    flex-basis: 86px !important;
  }
}

/* Logo/title lockup balance */
@media (min-width:901px) {
  .brand {
    align-items: center !important;
    gap: 18px !important;
  }

  .brandMark {
    width: 172px !important;
    height: 172px !important;
    flex-basis: 172px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
}

@media (min-width:901px) and (max-width:1100px) {
  .brandMark {
    width: 156px !important;
    height: 156px !important;
    flex-basis: 156px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  .brand {
    gap: 16px !important;
  }
}

@media (max-width:900px) {
  .brand {
    align-items: center !important;
  }

  .brandMark {
    width: 126px !important;
    height: 126px !important;
    flex-basis: 126px !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
  }
}

@media (max-width:600px) {
  .brandMark {
    width: 92px !important;
    height: 92px !important;
    flex-basis: 92px !important;
  }
}

/* Optical logo alignment: the artwork reads top-heavy, nudge it down */
.brandMark img {
  transform: translateY(8px) !important;
}

@media (max-width:900px) {
  .brandMark img {
    transform: translateY(6px) !important;
  }
}

@media (max-width:600px) {
  .brandMark img {
    transform: translateY(4px) !important;
  }
}

/* Let the shifted logo artwork render fully */
.brandMark {
  overflow: visible !important;
}

/* Final logo lockup: fit logo between title top and subtitle bottom */
.brand {
  align-items: flex-start !important;
}

.brandMark {
  width: 132px !important;
  height: 132px !important;
  flex: 0 0 132px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

.brandMark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}

@media (min-width:901px) and (max-width:1100px) {
  .brandMark {
    width: 124px !important;
    height: 124px !important;
    flex-basis: 124px !important;
  }
}

@media (max-width:900px) {
  .brandMark {
    width: 112px !important;
    height: 112px !important;
    flex-basis: 112px !important;
  }
}

@media (max-width:600px) {
  .brandMark {
    width: 84px !important;
    height: 84px !important;
    flex-basis: 84px !important;
  }
}

/* Manual logo tuning */
.brandMark {
  margin-top: 30px !important;
}

.brandMark img {
  transform: scale(1.15) !important;
  transform-origin: center center !important;
}

@media (max-width:600px) {
  .brandMark {
    margin-top: 16px !important;
  }

  .brandMark img {
    transform: scale(1.1) !important;
  }
}

/* Logo manual correction: keep lockup aligned, scale artwork only */
.brand {
  align-items: flex-start !important;
}

.brandMark {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.brandMark img {
  transform: scale(1.15) !important;
  transform-origin: center center !important;
}

@media (max-width:600px) {
  .brandMark img {
    transform: scale(1.1) !important;
  }
}

/* Logo overflow correction: keep the enlarged artwork visually inside the title height */
.brandMark {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

.brandMark img {
  transform: translateY(12px) scale(1.15) !important;
  transform-origin: center center !important;
}

@media (min-width:901px) and (max-width:1100px) {
  .brandMark img {
    transform: translateY(10px) scale(1.12) !important;
  }
}

@media (max-width:900px) {
  .brandMark img {
    transform: translateY(7px) scale(1.08) !important;
  }
}

@media (max-width:600px) {
  .brandMark img {
    transform: translateY(5px) scale(1.05) !important;
  }
}

/* Align round titles to the left edge of each table */
.roundTitle {
  text-align: left !important;
  padding-left: 0 !important;
}

@media (max-width:600px) {
  .roundTitle {
    padding-left: 0 !important;
  }
}

/* Mobile modal scroll: allow horizontal level scroll and vertical trick scroll */
.modal.open {
  touch-action: auto !important;
  overscroll-behavior: contain !important;
}

.modal.open .panel {
  touch-action: auto !important;
  overscroll-behavior: contain !important;
}

.modal.open .levelNav {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
}

.modal.open .grid {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}

/* Keep the score sheet from scrolling behind the trick picker on mobile */
.modal.open {
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  touch-action: none !important;
}

.modal.open .panel {
  touch-action: auto !important;
  overscroll-behavior: contain !important;
}

.modal.open .grid,
.modal.open .levelNav {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

/* Final mobile modal fix: level selector must scroll sideways */
.modal.open {
  touch-action: auto !important;
}

.modal.open .levelNav {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none;
}

.modal.open .levelNav::-webkit-scrollbar {
  display: none;
}

.modal.open .levelNav button {
  flex: 0 0 auto !important;
  min-width: 52px !important;
}

.modal.open .grid {
  touch-action: pan-y !important;
}

/* Body is locked by JavaScript; keep modal gestures available */
.modal.open {
  touch-action: auto !important;
}

/* Hint that more level buttons are available off-screen */
.modal.open .levelNav {
  position: relative !important;
  padding-right: 34px !important;
}

.modal.open .levelNav::after {
  content: "›";
  position: sticky;
  right: 0;
  flex: 0 0 28px;
  width: 28px;
  height: 44px;
  margin-left: -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 55%);
  pointer-events: none;
  z-index: 2;
}

@media (max-width:600px) and (orientation:portrait) {
  .modal.open .levelNav {
    padding-right: 14px !important;
  }

  .modal.open .levelNav::after {
    display: none !important;
  }
}

/* Replace the arrow with a non-blocking edge fade on phones */
@media (max-width:600px) and (orientation:portrait) {
  .modal.open .panel {
    position: relative !important;
  }

  .modal.open .panel::before {
    content: "";
    position: absolute;
    top: 64px;
    right: 0;
    width: 48px;
    height: 52px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 34%, #fff);
    pointer-events: none;
    z-index: 3;
  }

  .modal.open .panel::after {
    content: "›";
    position: absolute;
    top: 72px;
    right: 0;
    width: 48px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    background: transparent !important;
    text-shadow: 0 1px 0 #fff;
    pointer-events: none;
    z-index: 4;
  }

  .modal.open .levelNav {
    padding-right: 52px !important;
  }
}

/* No scroll hint on wider layouts where every level is visible */
@media (min-width:601px) {
  .modal.open .levelNav::after {
    display: none !important;
  }
}

/* Better mobile portrait layout: show L1-L10 without horizontal scrolling */
@media (max-width:600px) and (orientation:portrait) {

  .modal.open .panel::before,
  .modal.open .panel::after,
  .modal.open .levelNav::after {
    display: none !important;
    content: none !important;
  }

  .modal.open .levelNav {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    overflow: visible !important;
    touch-action: auto !important;
  }

  .modal.open .levelNav button {
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px 0 !important;
    font-size: 11px !important;
  }

  .modal.open .grid {
    max-height: calc(92vh - 136px) !important;
  }
}

/* Keep the modal header below the phone safe area after the two-row level picker */
@media (max-width:600px) and (orientation:portrait) {
  .modal.open {
    align-items: flex-end !important;
  }

  .modal.open .panel {
    max-height: calc(100dvh - 76px) !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .modal.open .grid {
    max-height: calc(100dvh - 238px) !important;
  }
}

/* Vertical modal layout: L1-L13 wraps cleanly without making the modal too tall */
@media (max-width:900px) and (orientation:portrait) {
  .modal.open {
    align-items: flex-end !important;
  }

  .modal.open .panel {
    max-height: calc(100dvh - 64px) !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .modal.open .panel::before,
  .modal.open .panel::after,
  .modal.open .levelNav::after {
    display: none !important;
    content: none !important;
  }

  .modal.open .levelNav {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    overflow: visible !important;
    touch-action: auto !important;
  }

  .modal.open .levelNav button {
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .modal.open .grid {
    max-height: calc(100dvh - 226px) !important;
  }
}

@media (max-width:420px) and (orientation:portrait) {
  .modal.open .levelNav {
    gap: 5px !important;
    padding: 7px 8px !important;
  }

  .modal.open .levelNav button {
    font-size: 10px !important;
    padding: 7px 0 !important;
  }

  .modal.open .grid {
    max-height: calc(100dvh - 216px) !important;
  }
}

/* Portrait layout: place total score just above required fields */
@media (max-width:900px) {
  .sheet>.scoreBox {
    width: 100% !important;
    height: 96px !important;
    margin: 18px 0 12px !important;
    padding-top: 10px !important;
  }

  .sheet>.scoreBox .num {
    font-size: 44px !important;
    margin-top: 4px !important;
  }

  .productionSubmit {
    margin-top: 0 !important;
  }
}

/* Portrait layout: keep subtotal boxes from touching the moved total score */
@media (max-width:900px) {
  .tables {
    row-gap: 34px !important;
  }

  .tables>div {
    margin-bottom: 18px !important;
  }

  .tables>div:last-child {
    margin-bottom: 26px !important;
  }
}

/* Desktop: app.js scales the full sheet to fit the visible height */
@media (min-width:901px) {
  .wrap {
    overflow: visible !important;
  }

  .sheet {
    flex: 0 0 auto !important;
  }
}

/* Phone portrait: show L1-L13 as 5 / 5 / 3, with readable black labels */
@media (max-width:900px) and (orientation:portrait) {
  .modal.open .levelNav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 9px 10px !important;
  }

  .modal.open .levelNav button {
    color: #111 !important;
    min-height: 34px !important;
    padding: 9px 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .modal.open .grid {
    max-height: calc(100dvh - 260px) !important;
  }
}

@media (max-width:420px) and (orientation:portrait) {
  .modal.open .levelNav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px 9px !important;
  }

  .modal.open .levelNav button {
    min-height: 32px !important;
    padding: 8px 0 !important;
    font-size: 11px !important;
  }

  .modal.open .grid {
    max-height: calc(100dvh - 252px) !important;
  }
}

/* Mobile/iframe safety: keep submit controls visible at the bottom */
@media (max-width:900px) {
  body {
    padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .sheet {
    padding-bottom: 172px !important;
  }

  .productionSubmit {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255, 255, 255, .96) !important;
    border-top: 2px solid #ddd !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .16) !important;
    gap: 7px !important;
  }

  .productionSubmit .validationBox {
    width: 100% !important;
    max-width: 620px !important;
    max-height: 62px !important;
    overflow: auto !important;
    padding: 5px 8px !important;
    border-width: 0 !important;
    background: transparent !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .productionSubmit .validationBox #validationText>div.requiredTitle {
    font-size: 13px !important;
    margin-bottom: 2px !important;
  }

  .productionSubmit .validationBox ul.requiredItems {
    gap: 1px 7px !important;
  }

  .productionSubmit .validationBox ul.requiredItems li {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .productionSubmit .submitMain {
    width: min(320px, 82vw) !important;
    min-height: 46px !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    font-size: 16px !important;
  }

  .productionSubmit .submitNote {
    display: none !important;
  }
}

@media (max-width:420px) {
  body {
    padding-bottom: calc(138px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .sheet {
    padding-bottom: 160px !important;
  }

  .productionSubmit {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .productionSubmit .validationBox {
    max-height: 56px !important;
  }

  .productionSubmit .submitMain {
    min-height: 44px !important;
    font-size: 15px !important;
  }
}

/* Studio iframe on mobile: lift fixed submit controls above browser/preview chrome */
@media (max-width:900px) {
  body.embeddedFrame {
    padding-bottom: calc(238px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.embeddedFrame .sheet {
    padding-bottom: 252px !important;
  }

  body.embeddedFrame .productionSubmit {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width:420px) {
  body.embeddedFrame {
    padding-bottom: calc(224px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.embeddedFrame .sheet {
    padding-bottom: 238px !important;
  }

  body.embeddedFrame .productionSubmit {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Mobile embed refinements: avoid browser chrome, keep validation readable, reduce dead space */
@media (max-width:900px) {
  body.embeddedFrame {
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.embeddedFrame .sheet {
    padding-bottom: 138px !important;
  }

  body.embeddedFrame .productionSubmit {
    bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 6px 10px 8px !important;
    gap: 4px !important;
  }

  body.embeddedFrame .productionSubmit .validationBox {
    max-height: none !important;
    overflow: visible !important;
    padding: 2px 6px !important;
  }

  body.embeddedFrame .productionSubmit .validationBox #validationText>div.requiredTitle {
    font-size: 12px !important;
    line-height: 1.08 !important;
    margin-bottom: 2px !important;
  }

  body.embeddedFrame .productionSubmit .validationBox ul.requiredItems {
    gap: 0 6px !important;
    line-height: 1.05 !important;
  }

  body.embeddedFrame .productionSubmit .validationBox ul.requiredItems li {
    font-size: 9.2px !important;
    line-height: 1.12 !important;
  }

  body.embeddedFrame .productionSubmit .submitMain {
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
  }

  .modal.open .grid {
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width:420px) {
  body.embeddedFrame {
    padding-bottom: calc(144px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.embeddedFrame .sheet {
    padding-bottom: 128px !important;
  }

  body.embeddedFrame .productionSubmit {
    bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.embeddedFrame .productionSubmit .validationBox #validationText>div.requiredTitle {
    font-size: 11.5px !important;
  }

  body.embeddedFrame .productionSubmit .validationBox ul.requiredItems li {
    font-size: 8.8px !important;
  }

  body.embeddedFrame .productionSubmit .submitMain {
    min-height: 38px !important;
    font-size: 13.5px !important;
  }

  .modal.open .grid {
    padding-bottom: calc(146px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(146px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Final mobile submit bar: pin the button; let required fields shrink upward */
@media (max-width:900px) {
  body.embeddedFrame {
    padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.embeddedFrame .sheet {
    padding-bottom: 118px !important;
  }

  body.embeddedFrame .productionSubmit {
    height: 106px !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 !important;
    display: block !important;
  }

  body.embeddedFrame .productionSubmit .submitMain {
    position: absolute !important;
    left: 50% !important;
    bottom: 7px !important;
    transform: translateX(-50%) !important;
    width: min(320px, 82vw) !important;
    min-height: 40px !important;
  }

  body.embeddedFrame .productionSubmit .validationBox {
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 53px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 48px !important;
    overflow: hidden !important;
    padding: 2px 4px !important;
  }

  body.embeddedFrame .productionSubmit .validationBox.ready {
    display: none !important;
  }

  body.embeddedFrame .productionSubmit .validationBox #validationText>div.requiredTitle {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    margin-bottom: 1px !important;
  }

  body.embeddedFrame .productionSubmit .validationBox ul.requiredItems {
    gap: 0 5px !important;
  }

  body.embeddedFrame .productionSubmit .validationBox ul.requiredItems li {
    font-size: 8.8px !important;
    line-height: 1.08 !important;
  }
}

@media (max-width:420px) {
  body.embeddedFrame {
    padding-bottom: calc(122px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.embeddedFrame .sheet {
    padding-bottom: 112px !important;
  }

  body.embeddedFrame .productionSubmit {
    height: 100px !important;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.embeddedFrame .productionSubmit .submitMain {
    bottom: 6px !important;
    min-height: 38px !important;
  }

  body.embeddedFrame .productionSubmit .validationBox {
    bottom: 50px !important;
    max-height: 45px !important;
  }

  body.embeddedFrame .productionSubmit .validationBox #validationText>div.requiredTitle {
    font-size: 11px !important;
  }

  body.embeddedFrame .productionSubmit .validationBox ul.requiredItems li {
    font-size: 8.4px !important;
  }
}

/* Revert mobile submit from sticky overlay to normal page flow */
@media (max-width:900px) {
  body,
  body.embeddedFrame {
    padding-bottom: 0 !important;
  }

  .sheet,
  body.embeddedFrame .sheet {
    padding-bottom: 28px !important;
  }

  .sheet > .scoreBox {
    margin: 18px 0 10px !important;
  }

  .productionSubmit,
  body.embeddedFrame .productionSubmit {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 14px !important;
    padding: 0 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }

  .productionSubmit .validationBox,
  body.embeddedFrame .productionSubmit .validationBox {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(560px, 100%) !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 6px 8px !important;
    border-width: 0 !important;
    background: transparent !important;
  }

  .productionSubmit .validationBox.ready,
  body.embeddedFrame .productionSubmit .validationBox.ready {
    display: block !important;
  }

  .productionSubmit .submitMain,
  body.embeddedFrame .productionSubmit .submitMain {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(260px, 72vw) !important;
    min-height: 42px !important;
    padding: 9px 16px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
  }

  .productionSubmit .submitNote {
    display: none !important;
  }
}

@media (max-width:420px) {
  .productionSubmit .validationBox,
  body.embeddedFrame .productionSubmit .validationBox {
    padding: 5px 4px !important;
  }

  .productionSubmit .validationBox #validationText>div.requiredTitle,
  body.embeddedFrame .productionSubmit .validationBox #validationText>div.requiredTitle {
    font-size: 13px !important;
    line-height: 1.12 !important;
    margin-bottom: 3px !important;
  }

  .productionSubmit .validationBox ul.requiredItems,
  body.embeddedFrame .productionSubmit .validationBox ul.requiredItems {
    gap: 1px 6px !important;
  }

  .productionSubmit .validationBox ul.requiredItems li,
  body.embeddedFrame .productionSubmit .validationBox ul.requiredItems li {
    font-size: 9.4px !important;
    line-height: 1.15 !important;
  }

  .productionSubmit .submitMain,
  body.embeddedFrame .productionSubmit .submitMain {
    width: min(220px, 66vw) !important;
    min-height: 40px !important;
    font-size: 14px !important;
  }
}

/* Give the in-page submit button room above mobile browser chrome */
@media (max-width:900px) {
  .productionSubmit,
  body.embeddedFrame .productionSubmit {
    margin-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width:420px) {
  .productionSubmit,
  body.embeddedFrame .productionSubmit {
    margin-bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Ready state should be visible on every layout, including desktop */
.validationBox.ready,
.productionSubmit .validationBox.ready,
body.embeddedFrame .productionSubmit .validationBox.ready {
  display: block !important;
  color: #0b7a28 !important;
  text-align: center !important;
  background: #ecfdf1 !important;
  border: 2px solid #0b7a28 !important;
  padding: 8px 12px !important;
}

.validationBox.ready #validationText,
.productionSubmit .validationBox.ready #validationText,
body.embeddedFrame .productionSubmit .validationBox.ready #validationText {
  color: #0b7a28 !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

/* Simple access gate for unpublished participant pages */
body.authLocked {
  overflow: hidden !important;
}

body.authLocked .wrap,
body.authLocked .modal,
body.authLocked .toast,
body.authLocked .successOverlay {
  display: none !important;
}

.accessGate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 20px;
}

.accessGate[hidden] {
  display: none !important;
}

.accessCard {
  width: min(360px, 100%);
  border: 3px solid #111;
  background: #fff;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.accessCard img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  margin-bottom: 10px;
}

.accessCard h1 {
  margin: 0 0 18px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 900;
}

.accessCard label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 900;
}

.accessCard input {
  width: 100%;
  height: 46px;
  border: 2px solid #111;
  border-radius: 0;
  padding: 8px 10px;
  font-size: 16px;
  text-align: center;
}

.accessCard button {
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 900;
}

#accessError {
  min-height: 20px;
  margin: 10px 0 0;
  color: #c62828;
  font-size: 13px;
  font-weight: 900;
}


/* iOS keyboard safety: prevent input zoom and keep modal anchored on phones */
@media (max-width:900px) {
  input,
  textarea,
  .field input,
  .emailPair .field input {
    font-size: 16px !important;
  }

  .modal.open {
    align-items: flex-end !important;
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
  }

  .modal.open .panel {
    max-height: calc(100dvh - max(18px, env(safe-area-inset-top, 0px))) !important;
    margin-top: auto !important;
  }
}

/* Phone Safari safety: keep the embedded page and trick modal clear of the host chrome. */
@media (max-width:900px) {
  body.embeddedFrame .wrap {
    padding-top: max(22px, calc(env(safe-area-inset-top, 0px) + 12px)) !important;
  }

  body.embeddedFrame .modal.open {
    padding-top: max(74px, calc(env(safe-area-inset-top, 0px) + 46px)) !important;
    align-items: flex-end !important;
  }

  body.embeddedFrame .modal.open .panel {
    max-height: calc(100svh - max(74px, calc(env(safe-area-inset-top, 0px) + 46px))) !important;
    margin-top: auto !important;
  }

  body.embeddedFrame .modal.open .grid {
    max-height: calc(100svh - max(300px, calc(env(safe-area-inset-top, 0px) + 272px))) !important;
  }
}

/* JS-measured modal height only inside Studio/iframe embeds. */
@media (max-width:900px) {
  body.embeddedFrame .modal.open {
    top: var(--modal-y, 0px) !important;
    bottom: auto !important;
    height: var(--modal-vh, 100svh) !important;
    min-height: 0 !important;
    padding-top: var(--modal-top-gap, 74px) !important;
  }

  body.embeddedFrame .modal.open .panel {
    height: calc(var(--modal-vh, 100svh) - var(--modal-top-gap, 74px)) !important;
    max-height: calc(var(--modal-vh, 100svh) - var(--modal-top-gap, 74px)) !important;
  }

  body.embeddedFrame .modal.open .grid {
    max-height: calc(var(--modal-vh, 100svh) - var(--modal-top-gap, 74px) - 226px) !important;
  }

  body:not(.embeddedFrame) .modal.open {
    padding-top: 0 !important;
    align-items: flex-end !important;
  }

  body:not(.embeddedFrame) .modal.open .panel {
    height: auto !important;
    max-height: calc(100dvh - 18px) !important;
    margin-top: auto !important;
  }

  body:not(.embeddedFrame) .modal.open .grid {
    max-height: calc(100dvh - 226px) !important;
  }
}

/* iPhone inside Studio iframe: use a normal page picker instead of a fixed modal. */
@media (max-width:900px) {
  body.embeddedFrame.inlinePicker {
    background: #fff !important;
    overflow: auto !important;
  }

  body.embeddedFrame.inlinePicker .wrap {
    display: none !important;
  }

  body.embeddedFrame.inlinePicker .modal.open {
    display: block !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 0 calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  body.embeddedFrame.inlinePicker .panel {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  body.embeddedFrame.inlinePicker .panelTop {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
  }

  body.embeddedFrame.inlinePicker .levelNav {
    position: sticky !important;
    top: 58px !important;
    z-index: 4 !important;
    background: #fff !important;
  }

  body.embeddedFrame.inlinePicker .grid {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Strongest zoom guard for the level picker on iPhone */
.levelNav,
.levelNav button,
.modal.open .levelNav,
.modal.open .levelNav button {
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}