/* ===== SCENE CANVAS ===== */
#throne-scene {
  width: 100%;
  flex: 1;
  background: #0d0a06;
  border-bottom: 3px solid var(--panel-border);
  line-height: 0;
  min-height: 0;
  overflow: hidden;
}

#scene-canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: block;
}

/* ===== HUD TOP ===== */
#hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel-bg);
  border-bottom: 3px solid var(--panel-border);
  padding: 6px 10px;
  gap: 8px;
}

.hud-title {
  font-size: 7px;
  color: var(--gold);
  letter-spacing: 1px;
  text-align: center;
  flex: 1;
  text-shadow: 2px 2px 0 #000;
}

.hud-panel {
  display: flex;
  gap: 10px;
}

.resource {
  display: flex;
  align-items: center;
  gap: 4px;
}

.res-icon {
  font-size: 10px;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000;
}

.res-val {
  font-size: 8px;
  color: var(--ink);
  min-width: 18px;
  text-shadow: 1px 1px 0 #000;
}

/* ===== FACTION BARS ===== */
#faction-bars {
  background: var(--panel-bg);
  padding: 6px 12px;
  border-bottom: 3px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faction-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.faction-name {
  font-size: 6px;
  width: 52px;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 0 #000;
}

.bar-track {
  flex: 1;
  height: 8px;
  background: #0a0806;
  border: 2px solid var(--panel-border);
  position: relative;
  image-rendering: pixelated;
}

.bar-fill {
  height: 100%;
  transition: width 0.4s steps(20);
  position: relative;
}

/* Pixel dither effect via repeating pattern */
.clergy-bar {
  background: repeating-linear-gradient(
    90deg,
    var(--clergy) 0px, var(--clergy) 2px,
    #6040a0 2px, #6040a0 4px
  );
}
.noble-bar {
  background: repeating-linear-gradient(
    90deg,
    var(--noble) 0px, var(--noble) 2px,
    #2060a0 2px, #2060a0 4px
  );
}
.people-bar {
  background: repeating-linear-gradient(
    90deg,
    var(--people) 0px, var(--people) 2px,
    #208040 2px, #208040 4px
  );
}

/* ===== SPEECH AREA ===== */
#speech-area {
  padding: 8px 12px 4px;
  background: var(--bg-mid);
  border-bottom: 2px solid var(--panel-border);
  min-height: 56px;
}

#speaker-name {
  font-size: 7px;
  color: var(--gold);
  margin-bottom: 4px;
  text-shadow: 1px 1px 0 #000;
}

#speech-bubble {
  background: #0d0a06;
  border: 2px solid var(--panel-border);
  padding: 6px 8px;
  position: relative;
}

#speech-bubble::before {
  content: '';
  position: absolute;
  top: -6px; left: 16px;
  width: 6px; height: 6px;
  background: var(--panel-border);
}
#speech-bubble::after {
  content: '';
  position: absolute;
  top: -4px; left: 17px;
  width: 4px; height: 4px;
  background: #0d0a06;
}

#speech-text {
  font-size: 7px;
  color: var(--ink2);
  line-height: 1.8;
  text-shadow: 1px 1px 0 #000;
}

/* ===== CARD ===== */
#card-area {
  padding: 8px 12px;
  background: var(--bg-dark);
  display: flex;
  justify-content: center;
}

#card-wrapper {
  position: relative;
  width: 100%;
  max-width: 440px;
}

.pixel-card {
  background: var(--panel-bg);
  border: 3px solid var(--panel-border);
  padding: 10px 12px;
  position: relative;
  cursor: grab;
  user-select: none;
  /* Pixel corner decoration */
  outline: 1px solid #000;
  outline-offset: 2px;
}

/* Pixel corners */
.pixel-card::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(90,64,32,0.3);
  pointer-events: none;
}

#card-faction-tag {
  font-size: 6px;
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-shadow: 1px 1px 0 #000;
}

#card-event-text {
  font-size: 7px;
  color: var(--ink2);
  line-height: 2;
  min-height: 42px;
  text-shadow: 1px 1px 0 #000;
}

#card-choices {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 2px solid var(--panel-border);
}

#choice-l { font-size: 6px; color: #e06060; text-shadow: 1px 1px 0 #000; }
#choice-r { font-size: 6px; color: #60e080; text-shadow: 1px 1px 0 #000; }

/* Swipe overlays */
#card-wrapper::before, #card-wrapper::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 2;
}
#card-wrapper::before { left: 0; background: linear-gradient(90deg, rgba(192,48,32,0.25), transparent); }
#card-wrapper::after  { right: 0; background: linear-gradient(-90deg, rgba(64,176,96,0.25), transparent); }
#card-wrapper.hint-left::before  { opacity: 1; }
#card-wrapper.hint-right::after  { opacity: 1; }

/* ===== BOTTOM NAV ===== */
#bottom-nav {
  display: flex;
  align-items: center;
  background: var(--panel-bg);
  border-top: 3px solid var(--panel-border);
  padding: 8px 10px;
  gap: 8px;
}

.nav-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: var(--ink);
  background: var(--bg-mid);
  border: 2px solid var(--panel-border);
  padding: 6px 10px;
  cursor: pointer;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  transition: background 0.1s;
  /* Pixel button shadow */
  box-shadow: 2px 2px 0 #000;
}
.nav-btn:hover { background: var(--bg-light); }
.nav-btn:active { box-shadow: none; transform: translate(2px,2px); }

#consequence-log {
  flex: 1;
  font-size: 6px;
  color: var(--ink3);
  text-align: center;
  text-shadow: 1px 1px 0 #000;
  line-height: 1.6;
}
#consequence-log.good   { color: #60e080; }
#consequence-log.danger { color: #e06060; }

/* ===== GAME OVER ===== */
#gameover {
  position: absolute;
  inset: 0;
  background: rgba(5,3,1,0.93);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

#go-panel {
  background: var(--panel-bg);
  border: 3px solid var(--panel-border);
  padding: 18px 20px;
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: 4px 4px 0 #000;
}

#go-title {
  font-size: 8px;
  color: var(--blood);
  margin-bottom: 12px;
  text-shadow: 2px 2px 0 #000;
  line-height: 1.8;
}

#go-ruler-portrait {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

#portrait-canvas {
  image-rendering: pixelated;
  border: 2px solid var(--panel-border);
}

#go-cause-text {
  font-size: 6px;
  color: var(--ink2);
  line-height: 2;
  margin-bottom: 8px;
  text-shadow: 1px 1px 0 #000;
}

#go-stats {
  font-size: 6px;
  color: var(--ink3);
  margin-bottom: 10px;
  text-shadow: 1px 1px 0 #000;
}

#go-heritage {
  background: #0a0806;
  border: 2px solid var(--panel-border);
  padding: 8px;
  margin-bottom: 12px;
}

.heritage-title {
  font-size: 6px;
  color: var(--gold2);
  margin-bottom: 6px;
  text-shadow: 1px 1px 0 #000;
}

#heritage-text {
  font-size: 6px;
  color: var(--ink3);
  line-height: 2;
  text-shadow: 1px 1px 0 #000;
}

.pixel-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: var(--gold);
  background: var(--bg-mid);
  border: 2px solid var(--gold2);
  padding: 8px 12px;
  cursor: pointer;
  text-shadow: 1px 1px 0 #000;
  box-shadow: 3px 3px 0 #000;
  transition: background 0.1s;
  line-height: 1.8;
}
.pixel-btn:hover { background: var(--bg-light); }
.pixel-btn:active { box-shadow: none; transform: translate(3px,3px); }

/* Card animations */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card-in { animation: cardIn 0.2s steps(4) forwards; }

@keyframes logIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.log-in { animation: logIn 0.15s steps(3) forwards; }

/* ===== FULLSCREEN LAYOUT FIXES ===== */
#hud-top, #faction-bars, #speech-area, #card-area, #bottom-nav {
  flex-shrink: 0;
}

.hud-title { font-size: clamp(7px, 1vw, 13px); }
.res-val   { font-size: clamp(7px, 0.9vw, 12px); }
.res-icon  { font-size: clamp(9px, 1.1vw, 16px); }
.faction-name { font-size: clamp(5px, 0.7vw, 9px); }

#card-area {
  max-width: 100%;
  padding: 8px 20px;
}

#card-wrapper { max-width: 600px; }

#card-event-text { font-size: clamp(6px, 0.8vw, 10px); }
#speech-text     { font-size: clamp(6px, 0.8vw, 10px); }
#speaker-name    { font-size: clamp(6px, 0.8vw, 10px); }