/* Cathedral — HTML/JS port of the 2001 Flash original (780x500 stage). */

html, body {
  height: 100%;
  margin: 0;
  background: #ffffff;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

#scaler {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
}

#stage {
  position: relative;
  width: 780px;
  height: 500px;
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#game {
  position: absolute;
  inset: 0;
}

/* ---------- intro screen (normal responsive flow, not in the stage) ---------- */

#intro {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  touch-action: pan-y;
  display: flex;
  background: #fff;
  font-family: Garamond, 'Times New Roman', serif;
  color: #000;
}
#intro[hidden] { display: none; }

.introcol {
  margin: auto;          /* centers; degrades to scrollable when cramped */
  padding: max(20px, env(safe-area-inset-top)) 24px
           max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

#introphoto { width: min(55vw, 230px); height: auto; }

#introtitle {
  font-size: clamp(52px, 14vw, 75px);
  line-height: 1;
}

#introsub { font-size: clamp(18px, 5vw, 25px); line-height: 1; }

#introlinks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
#howto    { font-size: 17px; font-weight: bold; color: #191970; }
#wikilink { font-size: 14px; color: #191970; }

.introform {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.introrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
}
.introrow span { width: 82px; text-align: right; }
.introrow input {
  flex: 1;
  min-width: 0;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  font: 17px Garamond, 'Times New Roman', serif;
  padding: 5px 8px;
  outline: none;
}

#nethelp.warn { color: #D55E00; }

#intromodes {
  display: flex;
  align-items: stretch;
  width: min(100%, 560px);
  margin-top: 8px;
}
.mode {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 4px 18px;
  min-width: 0;
}
.modesep {
  flex: none;
  width: 1px;
  background: #ccc;
}
#nethelp {
  margin: 0;
  max-width: 250px;
  font: 12px Helvetica, Arial, sans-serif;
  color: #666;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 560px) {
  #intromodes { flex-direction: column; }
  .modesep { width: auto; height: 1px; margin: 14px 0; }
}
#playbtn, #aibtn {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#playbtn .dot, #aibtn .dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #333333;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#playbtn .dot svg { margin-left: 3px; }
#playbtn:hover .dot, #playbtn:focus-visible .dot,
#aibtn:hover .dot, #aibtn:focus-visible .dot { background: #ff9900; }
#playbtn .lbl, #aibtn .lbl {
  margin-left: 8px;
  font: 16px Helvetica, Arial, sans-serif;
  color: #000;
}

/* ---------- game screen ---------- */

#credits {
  position: absolute;
  left: 0;
  right: 0;
  top: 27px;
  text-align: center;
  pointer-events: none;
}
#credits span { display: block; }
#credits .l1 { font-size: 20px; line-height: 21px; }
#credits .l2 { font-size: 10px; line-height: 13.5px; }
#credits .l3 { font-size: 12px; margin-top: 15px; }

#board {
  position: absolute;
  left: 249.5px;
  top: 124.5px;
  width: 251px;
  height: 251px;
  pointer-events: none;
}

#pieces {
  position: absolute;
  inset: 0;
}

#territory {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#territory .cell {
  position: absolute;
  width: 25px;
  height: 25px;
}
#territory .cell.t1 { background: rgba(0, 114, 178, 0.22); }
#territory .cell.t2 { background: rgba(213, 94, 0, 0.25); }

.piece {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  touch-action: none;
}
.piece path {
  pointer-events: visiblepainted;
  cursor: grab;
}
.piece.dragging path { cursor: grabbing; }
.piece.locked path { cursor: default; }
.piece.sel:not(.locked) path { stroke: #F0E442; stroke-width: 2.5; }
.piece.moving {
  transition: left 0.35s ease, top 0.35s ease, transform 0.35s ease;
}
.piece.gone { display: none; }

#gamemsg {
  position: absolute;
  left: 0;
  width: 540px;
  top: 483px;
  text-align: center;
  font: bold 12px Arial, sans-serif;
  color: #191970;
  pointer-events: none;
  white-space: nowrap;
}

.sidelabel {
  position: absolute;
  top: 5px;
  width: 240px;
  text-align: center;
  font: bold 12px Arial, sans-serif;
  pointer-events: none;
}
#youlabel  { left: 0;     color: #0072B2; }
#complabel { left: 540px; color: #D55E00; }

#failnotice {
  position: absolute;
  left: 0;
  right: 0;
  top: 107px;
  text-align: center;
  font: 12px Arial, sans-serif;
  color: #D55E00;
  display: none;
  pointer-events: none;
}

#endturn, #resetbtn, #rotatebtn, #mutebtn, #levelbtn {
  position: absolute;
  display: flex;
  align-items: center;
  cursor: pointer;
}
/* rotate gets the handy spot under the board; end turn (the irreversible
   confirm) lives far away, bottom-right, so it can't be hit by mistake */
#rotatebtn { left: 337px; top: 396px; }
#endturn   { left: 580px; top: 450px; }
#resetbtn  { left: 25px;  top: 450px; }
#mutebtn   { left: 120px; top: 450px; }
#levelbtn  { left: 215px; top: 450px; }

#endturn .dot, #resetbtn .dot, #rotatebtn .dot, #mutebtn .dot, #levelbtn .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #333333;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: bold 13px Arial, sans-serif;
}
#resetbtn .dot, #rotatebtn .dot { font-size: 15px; }
#endturn.confirm:not(.disabled) .dot { background: #ff9900; }
#endturn:hover .dot, #resetbtn:hover .dot, #rotatebtn:hover .dot, #mutebtn:hover .dot, #levelbtn:hover .dot { background: #ff9900; }
#endturn:active .dot, #resetbtn:active .dot, #rotatebtn:active .dot, #mutebtn:active .dot, #levelbtn:active .dot { background: #ff9900; }

#endturn .lbl, #resetbtn .lbl, #rotatebtn .lbl, #mutebtn .lbl, #levelbtn .lbl {
  margin-left: 6px;
  font: 14px Helvetica, Arial, sans-serif;
  color: #000;
}
#resetbtn .lbl, #mutebtn .lbl, #levelbtn .lbl { color: #cccccc; }
#resetbtn:hover .lbl, #mutebtn:hover .lbl, #levelbtn:hover .lbl { color: #000; }
#endturn:active .lbl, #resetbtn:active .lbl, #rotatebtn:active .lbl, #mutebtn:active .lbl, #levelbtn:active .lbl { color: #ff9900; }

#mutebtn.muted .dot { background: #aaaaaa; text-decoration: line-through; }

/* bigger tap targets on touch devices (invisible hit-area extension) */
@media (pointer: coarse) {
  #playbtn::after, #aibtn::after,
  #endturn::after, #resetbtn::after, #rotatebtn::after, #mutebtn::after, #levelbtn::after {
    content: '';
    position: absolute;
    inset: -10px;
  }
}

#endturn.dim { opacity: 0.05; }
#endturn.disabled { opacity: 0.35; cursor: default; }

#opstatus {
  position: absolute;
  left: 555px;
  top: 483px;
  width: 224px;
  text-align: center;
  font: 11px Arial, sans-serif;
  color: #000;
}

#netscore {
  position: absolute;
  left: 0;
  right: 0;
  top: 105px;
  text-align: center;
  font: 11px Arial, sans-serif;
  color: #000;
}

/* ---------- moves list modal (desktop 'm') ---------- */
#movesmodal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
#movesmodal[hidden] { display: none; }
.movesbox {
  width: min(90vw, 420px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.moveshdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font: bold 14px Helvetica, Arial, sans-serif;
  border-bottom: 1px solid #ddd;
}
.movesbtns span {
  margin-left: 14px;
  cursor: pointer;
  color: #0072B2;
  font-weight: normal;
}
.movesbtns span:hover { color: #ff9900; }
#movestext {
  flex: 1;
  min-height: 220px;
  border: 0;
  padding: 10px 12px;
  resize: none;
  font: 13px/1.5 'SF Mono', Menlo, Consolas, monospace;
  color: #000;
  outline: none;
  white-space: pre;
}