/* ================================================================
   tombraid.css -- Tombraid mini game styles
   Inherits global base (body, .container, h1, .back-link, footer)
   from cryptic.css loaded via /partials/head.html.
   ================================================================ */

/* ----------------------------------------------------------------
   Page layout wrapper
   ---------------------------------------------------------------- */

.container {
  padding-bottom: 2em;
}

.back-link {
  display: block;
  width: fit-content;
  margin: 0 auto 1.2em;
}

.mobile-only-notice {
  display: none;
  max-width: 620px;
  margin: 20px auto;
  padding: 14px 18px;
  border: 1px solid #00cccc;
  border-radius: 8px;
  background: rgba(15, 15, 15, 0.9);
  color: #e0e0e0;
  line-height: 1.55;
}

.desktop-game {
  display: block;
}

/* ================================================================
   HOW TO PLAY PANEL
   ================================================================ */

.game-info {
  box-sizing:    border-box;
  display:       table;
  width:         auto;
  max-width:     min(94vw, 78ch);
  margin:        0 auto 1.2em;
  padding:       14px clamp(18px, 3vw, 34px);
  border:        1px solid #00cccc;
  border-radius: 8px;
  background:    rgba(15, 15, 15, 0.9);
  text-align:    center;
  box-shadow:    0 0 10px rgba(0, 204, 204, 0.25);
}

.game-info h3 {
  margin:     0 0 6px;
  color:      #00cccc;
  font-size:  1.3em;
  text-align: center;
}

.game-info ul {
  box-sizing:          border-box;
  list-style:          disc inside;
  width:               fit-content;
  max-width:           min(100%, 72ch);
  margin:              0 auto;
  padding:             0 0 0 1.2em;
  line-height:         1.55;
  font-size:           0.9em;
  text-align:          left;
  list-style-position: outside;
}

.game-info li { margin-bottom: 4px; }

@media (max-width: 700px) {
  .game-info {
    display:   block;
    max-width: 95vw;
    padding:   14px;
  }
  .game-info ul { width: 100%; max-width: 100%; }
}

/* ================================================================
   CHARACTER SELECT (above the canvas, menu state only)
   ================================================================ */

#tombraid-select {
  max-width: 640px;
  margin:    0 auto 1em;
}

/* Name input row */
.ts-name-row {
  text-align:    center;
  margin-bottom: 0.8em;
}

#player-name {
  background:     rgba(0,0,0,0.75);
  border:         2px solid #00cccc;
  border-radius:  4px;
  color:          #e6e6e6;
  font-family:    'Cinzel', serif;
  font-size:      0.95em;
  line-height:    1.2;
  padding:        0.35em 0.8em;
  text-align:     center;
  outline:        none;
  width:          220px;
  letter-spacing: 0.05em;
  box-shadow:     0 0 6px rgba(0,204,204,0.4);
  transition:     box-shadow 0.2s, border-color 0.2s;
}
#player-name::placeholder { color: rgba(0, 204, 204, 0.4); }
#player-name:focus        { box-shadow: 0 0 12px #00cccc; border-color: #00ffff; }

/* Shake when name is missing */
@keyframes ts-name-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
#player-name.ts-name-required {
  border-color: #ff4444;
  box-shadow:   0 0 10px #ff4444;
  animation:    ts-name-shake 0.5s ease;
}

/* Four character cards */
.ts-chars {
  display:         flex;
  justify-content: center;
  gap:             0.6em;
  flex-wrap:       wrap;
}

.ts-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          136px;
  padding:        0.75em 0.5em 0.6em;
  border:         2px solid #333;
  border-radius:  6px;
  background:     rgba(5,5,5,0.85);
  transition:     border-color 0.15s, background 0.15s;
  user-select:    none;
}
.ts-card:hover,
.ts-card:focus  { outline: none; border-color: #00cccc; background: rgba(0,30,30,0.9); }

/* character color accents */
#ts-warrior  { border-color: #552; }
#ts-valkyrie { border-color: #225; }
#ts-wizard   { border-color: #552200; }
#ts-elf      { border-color: #253; }

#ts-warrior:hover  { border-color: #F90503; }
#ts-valkyrie:hover { border-color: #08B4F0; }
#ts-wizard:hover   { border-color: #F5FC00; }
#ts-elf:hover      { border-color: #00FF03; }

#ts-warrior  .ts-key { color: #F90503; }
#ts-valkyrie .ts-key { color: #08B4F0; }
#ts-wizard   .ts-key { color: #F5FC00; }
#ts-elf      .ts-key { color: #00FF03; }

/* Portrait canvas -- pixel-perfect scale-up */
.ts-portrait {
  display:         block;
  width:           96px;
  height:          96px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  margin-bottom:   0.5em;
  border:          1px solid #333;
  background:      #000;
}

.ts-char-name {
  font-family:   'Cinzel', serif;
  font-size:     0.82em;
  font-weight:   700;
  color:         #e0e0e0;
  text-align:    center;
  margin-bottom: 0.2em;
}

.ts-char-stat {
  font-size:     0.68em;
  color:         #777;
  text-align:    center;
  margin-bottom: 0.4em;
  line-height:   1.3;
}

.ts-char-press {
  font-size:  0.72em;
  color:      #888;
  text-align: center;
  animation:  ts-press-blink 1s step-end infinite;
}

.ts-key { font-weight: bold; }

@keyframes ts-press-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ================================================================
   GAME BLOCK (#tombraid)
   ================================================================ */

#tombraid {
  display:     block;
  margin:      0 auto;
  position:    relative;
  background:  #000;
  line-height: 1;
}

/* Canvas and scoreboard sit side by side during play */
#canvas     { display: inline-block; vertical-align: top; box-sizing: border-box; }
#scoreboard { display: inline-block; vertical-align: top; box-sizing: border-box; text-align: center; background: #000; color: #ccc; line-height: 1.2; }

/* Splash sits over the canvas slot during menu */
#splash { position: absolute; display: none; top: 0; left: 0; }

/* Help overlay */
#help {
  position: absolute; z-index: 20; display: none;
  width: 33%; left: 22%; top: 30%;
  text-align: center; font-size: 1.4em; font-weight: bold;
  background: rgba(255,255,255,0.8); border: 5px solid #000;
  color: #000; padding: 1em; border-radius: 6px;
  box-sizing: border-box; line-height: 1.4;
}

#help .help-level {
  margin-bottom: 0.45em;
  color: #6b1200;
  font-family: 'Cinzel', serif;
  font-size: 1.1em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#help .help-copy {
  font-size: 0.9em;
  line-height: 1.4;
}

/* Loading spinner */
#booting { position: absolute; width: 6%; left: 30%; top: 40%; z-index: 5; }

/* ----------------------------------------------------------------
   MENU STATE
   ---------------------------------------------------------------- */

#tombraid.menu #canvas     { display: none; }
#tombraid.menu #scoreboard { display: none; }
#tombraid.menu #booting    { display: none; }

#tombraid.menu #splash {
  display:  block;
  position: relative;
  width:    100%;
  height:   auto;
  top:      auto; left: auto;
}

#tombraid.help #canvas,
#tombraid.help #scoreboard,
#tombraid.level-help #canvas,
#tombraid.level-help #scoreboard {
  opacity: 0.55;
}

/* ----------------------------------------------------------------
   BOOTING STATE
   ---------------------------------------------------------------- */
#tombraid.booting #canvas     { display: none; }
#tombraid.booting #scoreboard { display: none; }
#tombraid.booting #splash     { display: none; }

/* ================================================================
   NAME OVERLAY -- pinned to bottom black bar of splash image
   ================================================================ */

#name-overlay {
  display:         none;
  position:        absolute;
  left:            0;
  right:           0;
  top:             auto;
  bottom:          46px;
  z-index:         10;
  align-items:     flex-end;
  justify-content: center;
  pointer-events:  none;
}

#tombraid.menu #name-overlay { display: flex; }

#name-center {
  text-align:     center;
  pointer-events: all;
  padding:        0;
}

/* Blinking prompt text */
#name-prompt {
  display:        block;
  color:          #ffd700;
  font-family:    'Cinzel', serif;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-shadow:    0 0 10px rgba(255, 215, 0, 0.7), 0 0 18px rgba(184, 134, 11, 0.75);
  animation:      name-blink 0.9s step-end infinite;
  line-height:    0.95;
}

@keyframes name-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ================================================================
   IN-GAME SCOREBOARD SIDEBAR
   ================================================================ */

/* High score hidden -- external leaderboard handles this */
#scoreboard .high { display: none; }
#scoreboard hr    { display: none; }

#scoreboard .level { margin: 0; color: #00cccc; font-size: 80%; font-family: 'Cinzel', serif; padding: 0.4em 0; }

#scoreboard .player           { height: 6em; border: 2px solid #222; margin: 1em 0.5em; padding: 0.5em 0; opacity: 0.5; box-sizing: border-box; }
#scoreboard .player .name     { font-weight: bold; font-family: 'Cinzel', serif; font-size: 90%; line-height: 1.15; }
#scoreboard .player .score    { display: none; }
#scoreboard .player .health   { display: none; }
#scoreboard .player .treasure { display: none; }
#scoreboard .player .press    { color: #999; margin-top: 1em; font-size: 85%; }
#scoreboard .player .press b  { color: #ccc; }
#scoreboard .player .multi    { color: #666; font-style: italic; margin-top: 1em; font-size: 76%; line-height: 1.15; }

/* Active player -- match the original compact HUD layout */
#scoreboard .player.active             { opacity: 1; }
#scoreboard .player.active .score      { display: inline-block; text-align: right; margin-right: 1em; vertical-align: top; }
#scoreboard .player.active .health     { display: inline-block; text-align: left; margin-left: 1em; vertical-align: top; }
#scoreboard .player.active .treasure   { display: block; text-align: left; margin: 0.25em 0.5em 0; }
#scoreboard .player.active .label      { opacity: 0.65; font-size: smaller; display: block; line-height: 1.1; }
#scoreboard .player.active .value      { font-weight: bold; display: block; line-height: 1.1; }
#scoreboard .player .treasure img.key    { margin-right: 2px; width: 1em; height: 1em; }
#scoreboard .player .treasure img.potion { margin-left: 0; float: right; width: 1em; height: 1em; }

#scoreboard #warrior  { color: #F90503; }
#scoreboard #valkyrie { color: #08B4F0; }
#scoreboard #wizard   { color: #F5FC00; }
#scoreboard #elf      { color: #00FF03; }

#scoreboard #warrior  .press b { color: #F90503; }
#scoreboard #valkyrie .press b { color: #08B4F0; }
#scoreboard #wizard   .press b { color: #F5FC00; }
#scoreboard #elf      .press b { color: #00FF03; }

#scoreboard #warrior.active  { border-color: #F90503; }
#scoreboard #valkyrie.active { border-color: #08B4F0; }
#scoreboard #wizard.active   { border-color: #F5FC00; }
#scoreboard #elf.active      { border-color: #00FF03; }

#scoreboard #warrior.weak  { background-color: #F90503; }
#scoreboard #valkyrie.weak { background-color: #08B4F0; }
#scoreboard #wizard.weak   { background-color: #F5FC00; }
#scoreboard #elf.weak      { background-color: #00FF03; }

/* press N hidden in sidebar (menu only) */
#scoreboard .player .press { display: none; }
#scoreboard .player .multi { display: block; }
#scoreboard .player.active .multi { display: none; }

/* mute button */
#sound     {
  width: 24px;
  height: 24px;
  background: url(../images/mute.png);
  display: inline-block;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
  position: absolute;
  right: 0.4em;
  bottom: 0.4em;
  z-index: 5;
}
#sound.on  { background-position:   0   0; }
#sound.off { background-position: -24px 0; }

/* ================================================================
   RESPONSIVE SIZES
   ================================================================ */

@media screen and (min-width: 0px) and (min-height: 0px) {
  #tombraid    { width: 512px; height: 384px; font-size: 7pt; }
  #canvas      { width: 384px; height: 384px; }
  #scoreboard  { width: 120px; height: 384px; }
  #name-prompt { font-size: 0.88em; }
}
@media screen and (min-width: 840px) and (min-height: 530px) {
  #tombraid    { width: 640px; height: 480px; font-size: 9pt; }
  #canvas      { width: 480px; height: 480px; }
  #scoreboard  { width: 152px; height: 480px; }
  #name-prompt { font-size: 1em; }
}
@media screen and (min-width: 968px) and (min-height: 626px) {
  #tombraid    { width: 768px; height: 576px; font-size: 11pt; }
  #canvas      { width: 576px; height: 576px; }
  #scoreboard  { width: 184px; height: 576px; }
  #name-prompt { font-size: 1.12em; }
}
@media screen and (min-width: 1096px) and (min-height: 722px) {
  #tombraid    { width: 896px; height: 672px; font-size: 13pt; }
  #canvas      { width: 672px; height: 672px; }
  #scoreboard  { width: 216px; height: 672px; }
  #name-prompt { font-size: 1.22em; }
}
@media screen and (min-width: 1224px) and (min-height: 818px) {
  #tombraid    { width: 1024px; height: 768px; font-size: 15pt; }
  #canvas      { width: 768px; height: 768px; }
  #scoreboard  { width: 248px; height: 768px; }
  #name-prompt { font-size: 1.3em; }
}

@media (max-width: 920px), (hover: none) and (pointer: coarse) {
  .mobile-only-notice { display: block; }
  .desktop-game { display: none; }
}

/* make select section match game block width */
@media screen and (min-width: 0px)    { #tombraid-select { max-width: 512px;  } }
@media screen and (min-width: 840px)  { #tombraid-select { max-width: 640px;  } }
@media screen and (min-width: 968px)  { #tombraid-select { max-width: 768px;  } }
@media screen and (min-width: 1096px) { #tombraid-select { max-width: 896px;  } }
@media screen and (min-width: 1224px) { #tombraid-select { max-width: 1024px; } }

/* ================================================================
   CONTROLS HINT
   ================================================================ */

.tr-controls {
  text-align: center;
  font-style: italic;
  color:      #888;
  font-size:  0.82em;
  margin:     0.6em auto 0;
  max-width:  640px;
}
.tr-controls b { color: #ccc; }

/* ================================================================
   LEADERBOARD -- matches site minigame pattern
   ================================================================ */

#lb-table {
  width:           100%;
  max-width:       520px;
  margin:          0.6em auto 2em;
  border-collapse: collapse;
  font-size:       0.88em;
  background:      rgba(17, 17, 17, 0.92);
  border:          1px solid #00cccc;
}

#lb-table th,
#lb-table td {
  padding: 0.35em 0.6em;
  border:  1px solid #0a2a2a;
}

#lb-table th {
  background:  #00cccc;
  color:       #000;
  font-weight: 700;
}

#lb-table tr:nth-child(even) { background: rgba(255,255,255,0.04); }
#lb-table td                  { color: #ccc; }

.lb-loading,
.lb-empty {
  display:    block;
  color:      #555;
  font-style: italic;
  padding:    0.8em 0;
  font-size:  0.88em;
  text-align: center;
}