@import url(fonts/fonts.css);

:root {
  --bg: #0b0e13; --panel: #141922; --panel2: #1b2230; --text: #dce3ee; --dim: #8b96a8;
  --accent: #9a5cff; --line: #262e3f;
  --pixel: 'VT323', 'Pixelify Sans', monospace;
  --gothic: 'Jacquard 12', 'VT323', serif;         /* display-size blackletter */
  --gothic-sm: 'Pirata One', 'VT323', serif;       /* readable blackletter for headings */
}
* { box-sizing: border-box; font-variant-ligatures: none; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 19px/1.4 var(--pixel); letter-spacing: .2px; }
#app { display: flex; gap: 14px; padding: 14px; height: 100%; }

#boardwrap { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
#board { max-width: 100%; max-height: 100%; border-radius: 10px; border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(0,0,0,.5); image-rendering: pixelated; cursor: pointer; }

#side { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }

#turncard { border-left: 4px solid var(--accent); }
#turnname { font-family: var(--gothic); font-size: 34px; font-weight: 400; line-height: 1;
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); }
#pips { margin-top: 4px; }
.pip { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #333c4e; margin-right: 5px; }
.pip.on { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
#stats { margin-top: 8px; }
.stat { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dashed #232b3b; cursor: help; }
.stat span { color: var(--dim); }

.ctxtitle { font-family: var(--gothic-sm); font-weight: 400; font-size: 25px; line-height: 1.05;
  margin: 4px 0 10px; color: #efe6c8; }
.ctxtitle small { color: var(--dim); font-family: var(--pixel); font-size: 15px; letter-spacing: .2px; }
.hint { color: var(--dim); font-size: 17px; margin-bottom: 8px; }
.btngrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
button.act { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; cursor: pointer; font: inherit; font-size: 17px;
  line-height: 1.15; text-align: left; transition: border-color .12s, transform .06s; }
button.act small { display: block; color: #e8c93e; font-size: 15px; }
button.act:hover:not(.off) { border-color: var(--accent); }
button.act:active:not(.off) { transform: scale(.97); }
button.act.off { opacity: .38; cursor: not-allowed; }

#buttons { display: flex; gap: 6px; }
#buttons button { flex: 1; background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 4px; cursor: pointer; font: inherit; font-size: 17px; }
#buttons button:hover { border-color: var(--accent); }
#endturn { background: #2a3550 !important; font-weight: 700; }

#log { max-height: 190px; overflow-y: auto; font-size: 16px; color: var(--dim); }
.logline { padding: 1.5px 0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

#tooltip { position: fixed; display: none; z-index: 50; max-width: 300px; pointer-events: none;
  background: #05070bee; border: 1px solid #3a4560; border-radius: 8px; padding: 8px 10px;
  font: 16px/1.4 var(--pixel); box-shadow: 0 6px 24px rgba(0,0,0,.6); }
#tooltip b:first-child { font-family: var(--gothic-sm); font-weight: 400; font-size: 22px; }
#tooltip small, #tooltip i { color: var(--dim); }

#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: #2b1518; border: 1px solid #7a2a35; color: #ffb9c2; padding: 9px 16px;
  border-radius: 8px; opacity: 0; transition: all .18s; z-index: 60; pointer-events: none; }
#toast.show { opacity: 1; transform: translateX(-50%); }

.overlay { position: fixed; inset: 0; background: rgba(5,8,12,.82); z-index: 40;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.overlay.hidden { display: none; }
.dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 30px; width: 400px; box-shadow: 0 20px 80px rgba(0,0,0,.7); }
.dialog h1 { margin: 0 0 2px; font-family: var(--gothic); font-weight: 400; font-size: 46px;
  line-height: 1; background: linear-gradient(135deg, #b98aff, #ff5d7a);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.dialog .sub { color: var(--dim); margin-bottom: 18px; font-size: 16px; }
#winbanner { font-size: 20px; }
.dialog fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 12px; padding: 8px 12px; }
.dialog legend { color: var(--dim); font-size: 15px; padding: 0 6px; }
.dialog label { display: block; padding: 4px 0; cursor: pointer; }
.dialog button.primary { width: 100%; padding: 11px; font: inherit; font-weight: 700;
  background: linear-gradient(135deg, #9a5cff, #5c7cff); color: #fff; border: 0;
  border-radius: 9px; cursor: pointer; margin-top: 6px; }
.dialog button.primary:hover { filter: brightness(1.1); }
#winbanner { font-size: 18px; margin-bottom: 14px; }

@media (max-width: 900px) {
  #app { flex-direction: column; overflow-y: auto; }
  #side { width: 100%; }
  /* let the board pan horizontally at a tappable size instead of shrinking to fit */
  #boardwrap { flex: none; overflow-x: auto; -webkit-overflow-scrolling: touch;
    justify-content: flex-start; }
  #board { max-width: none; height: 46vh; }
}