/* styles.css: how Fairytale Chess looks. Black panels outlined in gold over a
   dark fantasy map, a wooden board, and a parchment rules guide. Phones come
   first; wider screens put the players and controls beside the board. */

:root {
  --gold: #ffd21a;
  --gold-dim: #b8930c;
  --ink: #121212;
  --panel: linear-gradient(180deg, #1d1d1b, #050505);
  --parchment: #bdb88e;
  --hl: 255, 210, 26;          /* the highlight colour, as r, g, b */
  --files: 10;
  font-family: 'Alegreya', Georgia, serif;
  color: #f4ecd2;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #23221a; overflow: hidden; }
body { position: fixed; inset: 0; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

#map { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* ---------------------------------------------------------------- menus */

.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 5; overflow-y: auto; }
.screen.dim { background: rgba(0, 0, 0, 0.55); z-index: 30; }
.menu-card {
  width: min(440px, 100%); margin: auto; padding: 22px 20px 18px; text-align: center;
  background: var(--panel); border: 3px solid var(--gold); border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  animation: rise 0.25s ease-out;
}
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.logo { font-variant-ligatures: none; font-family: 'Cinzel Decorative', serif; color: var(--gold); font-size: clamp(30px, 9vw, 46px); line-height: 1.05; margin: 4px 0 6px; text-shadow: 0 3px 0 #000; }
.logo span { display: block; }
h2 { font-variant-ligatures: none; font-family: 'Cinzel Decorative', serif; color: var(--gold); font-size: 24px; margin: 4px 0 12px; }
.sub { margin: 0 0 6px; color: #e9dfbf; }
.who { margin: 0 0 14px; color: var(--gold); min-height: 1.3em; }
.small { font-size: 15px; color: #d9cfae; }
.label { margin: 10px 0 4px; color: var(--gold); font-weight: 700; }
.buttons { display: flex; flex-direction: column; gap: 10px; }
.buttons > button, .row button, .drawer-card button {
  padding: 12px 14px; font-size: 19px; border-radius: 3px;
  background: #0b0b0a; border: 2px solid var(--gold-dim);
  transition: transform 0.08s, background 0.15s;
}
.buttons > button:active, .drawer-card button:active { transform: scale(0.97); }
button.gold { border-color: var(--gold); color: var(--gold); font-weight: 700; font-size: 21px; }
button.ghost { border-color: #555; color: #cfc6a6; }
@media (hover: hover) { .buttons > button:hover, .drawer-card button:hover { background: #26241a; } }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg.three { grid-template-columns: repeat(3, 1fr); }
.seg.four { grid-template-columns: repeat(4, 1fr); }
.seg button { padding: 10px 4px; background: #0b0b0a; border: 2px solid #555; border-radius: 3px; font-size: 16px; }
.seg button.on { border-color: var(--gold); color: var(--gold); font-weight: 700; background: #262213; }
.row { display: flex; gap: 8px; }
.row input { flex: 1; min-width: 0; font: inherit; font-size: 22px; text-align: center; letter-spacing: 6px; text-transform: uppercase; padding: 8px; border-radius: 3px; border: 2px solid var(--gold-dim); background: #f3ead0; color: #111; }
.error { color: #ff9a8a; margin: 0; }
.code { font-variant-ligatures: none; font-family: 'Cinzel Decorative', serif; font-size: 40px; letter-spacing: 8px; color: var(--gold); margin: 6px 0; }
.links { margin: 18px 0 0; display: flex; gap: 18px; justify-content: center; }
.links a { color: #e5d79a; }

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

#game { position: fixed; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#side { display: contents; }
#top { order: 1; } #boardwrap { order: 2; } #status { order: 3; } #controls { order: 4; } #moves { order: 5; flex: 0 0 auto; }
#top { display: flex; align-items: stretch; }
#tools { flex: 0 0 auto; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 4px; }
.burger { width: 52px; height: 44px; background: none; border: 0; padding: 4px; display: flex; flex-direction: column; justify-content: space-between; }
.burger i { display: block; height: 9px; border-radius: 5px; background: var(--gold); box-shadow: 0 2px 0 rgba(0,0,0,0.5); }
.mode-icon svg { width: 52px; height: 52px; }
#panels { flex: 1; min-width: 0; }
.panel {
  display: flex; align-items: center; gap: 12px; height: 74px; padding: 6px 10px 6px 8px;
  background: var(--panel); border: 3px solid var(--gold); border-right-width: 0;
  transition: box-shadow 0.25s;
}
.panel + .panel { border-top-width: 0; }
.panel.turn { box-shadow: inset 0 0 0 2px rgba(var(--hl), 0.9), inset 0 0 22px rgba(var(--hl), 0.35); }
.avatar { width: 58px; height: 58px; flex: 0 0 auto; background-size: cover; border-radius: 2px; position: relative; }
.avatar svg { position: absolute; inset: 6%; width: 88%; height: 88%; }
.info { min-width: 0; flex: 1; }
.color { font-size: 15px; color: #e8e2cc; }
.name { font-weight: 700; color: var(--gold); font-size: clamp(22px, 6.6vw, 34px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.extra { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #cdbf8f; min-height: 16px; }
.caps { display: flex; flex-wrap: wrap; }
.caps svg { width: 16px; height: 16px; margin-right: -3px; }
.panel.turn .color::after { content: ' · to move'; color: var(--gold); }
.clock { font-variant-numeric: tabular-nums; font-size: 18px; color: var(--gold); padding-left: 6px; }
.clock.low { color: #ff7a6a; }

#status { min-height: 26px; padding: 3px 10px; text-align: center; font-size: 16px; color: var(--gold); text-shadow: 0 1px 2px #000; }
#controls { display: flex; gap: 6px; padding: 0 8px 6px; justify-content: center; flex-wrap: wrap; }
#controls button { flex: 1 1 0; min-width: 64px; max-width: 140px; padding: 8px 6px; font-size: 15px; background: rgba(5,5,5,0.85); border: 2px solid var(--gold-dim); border-radius: 3px; }
#controls button:disabled { opacity: 0.4; cursor: default; }
#controls #btn-emote { flex: 0 0 48px; min-width: 48px; font-size: 20px; }
#moves {
  list-style: none; margin: 0 8px 6px; padding: 4px 8px; display: flex; gap: 4px 10px; overflow-x: auto; white-space: nowrap;
  background: rgba(5,5,5,0.78); border: 1px solid #5b4c14; border-radius: 3px; min-height: 30px; font-size: 15px; scrollbar-width: thin;
}
#moves li { flex: 0 0 auto; }
#moves li b { color: #b5a46b; font-weight: 400; margin-right: 4px; }
#moves li span.cur { color: var(--gold); }

#boardwrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
#board { position: relative; touch-action: none; box-shadow: 0 6px 30px rgba(0,0,0,0.7); }
#board .grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--files), 1fr); grid-template-rows: repeat(8, 1fr); }
.sq { position: relative; background-size: 300% 300%; }
.sq.dark { background-size: 260% 260%; }
.coord { position: absolute; font-size: clamp(8px, 1.6vmin, 13px); font-weight: 700; pointer-events: none; opacity: 0.8; }
.sq.light .coord { color: #6e3a0b; }
.sq.dark .coord { color: #f2c27d; }
.coord.file { right: 3px; bottom: 1px; }
.coord.rank { left: 3px; top: 1px; }
.tile { position: absolute; left: 2%; top: 1%; width: 32%; pointer-events: none; }
.tile svg { width: 100%; display: block; }
.sq.last::before { content: ''; position: absolute; inset: 0; background: rgba(var(--hl), 0.32); }
.sq.sel::before { content: ''; position: absolute; inset: 0; background: rgba(var(--hl), 0.5); box-shadow: inset 0 0 0 3px rgba(var(--hl), 1); }
.sq.hint::after { content: ''; position: absolute; inset: 6%; border: 3px dashed rgba(var(--hl), 1); border-radius: 50%; animation: pulse 1s infinite alternate; }
.sq.check::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 40, 20, 0.95) 0%, rgba(255, 40, 20, 0.5) 45%, rgba(255, 40, 20, 0) 75%); }
@keyframes pulse { from { opacity: 0.5; } to { opacity: 1; } }
.dot { position: absolute; z-index: 3; pointer-events: none; }
.sq.quiet .dot { left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; background: rgba(var(--hl), 0.85); box-shadow: 0 0 0 2px rgba(0,0,0,0.45); }
.sq.capture .dot { inset: 4%; border-radius: 50%; border: 5px solid rgba(var(--hl), 0.9); box-shadow: 0 0 0 2px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(0,0,0,0.4); }
#board[data-highlight="green"] { --hl: 90, 220, 110; }
#board[data-highlight="blue"] { --hl: 90, 170, 255; }
#board[data-highlight="red"] { --hl: 255, 110, 90; }
.pieces { position: absolute; inset: 0; pointer-events: none; }
.piece { position: absolute; left: 0; top: 0; width: calc(100% / var(--files)); height: 12.5%; transition: transform 0.18s ease-out; will-change: transform; }
.piece svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 1px rgba(0,0,0,0.45)); }
.piece.dragging { transition: none; z-index: 10; }
.piece.dragging svg { transform: scale(1.15); }
.piece.taken { opacity: 0; transition: opacity 0.18s; }
#board.no-anim .piece { transition: none; }
.badge { position: absolute; right: 2%; top: 2%; width: 34%; }
.badge svg { width: 100%; height: auto; filter: none; }

/* ---------------------------------------------------------------- emotes */

#emotes { position: fixed; z-index: 20; left: 50%; bottom: 16px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; background: var(--panel); border: 2px solid var(--gold); }
#emotes button { background: #111; border: 1px solid #555; padding: 6px; font-size: 14px; }
#bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 19; }
.bubble { position: absolute; left: 50%; transform: translateX(-50%); padding: 8px 14px; background: #f6edd0; color: #111; border: 2px solid var(--gold-dim); border-radius: 16px; font-size: 18px; animation: rise 0.2s ease-out; }

/* ---------------------------------------------------------------- the menu drawer */

#drawer { position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,0.5); display: flex; }
.drawer-card { width: min(320px, 86vw); height: 100%; overflow-y: auto; padding: calc(16px + env(safe-area-inset-top)) 16px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--panel); border-right: 3px solid var(--gold); animation: slidein 0.2s ease-out; }
@keyframes slidein { from { transform: translateX(-100%); } to { transform: none; } }

/* ---------------------------------------------------------------- promotion */

#promo-pieces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; }
#promo-pieces button { aspect-ratio: 1; padding: 6px; border: 2px solid var(--gold-dim); background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 3px; }
#promo-pieces button svg { width: 70%; height: 70%; }
#promo-cancel { padding: 8px 18px; background: #0b0b0a; border: 2px solid #555; color: #cfc6a6; font-size: 17px; border-radius: 3px; }
#promo-pieces button span { font-size: 14px; color: #111; background: rgba(255,240,200,0.8); padding: 0 4px; border-radius: 3px; }

/* ---------------------------------------------------------------- guide and settings: parchment */

#guide, #settings { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--parchment); color: #1a1a14; }
#guide-scroll, #settings-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-color: var(--gold) #3d3a2c; padding-top: env(safe-area-inset-top); }
#guide-scroll::-webkit-scrollbar, #settings-scroll::-webkit-scrollbar { width: 12px; }
#guide-scroll::-webkit-scrollbar-track, #settings-scroll::-webkit-scrollbar-track { background: #3d3a2c; }
#guide-scroll::-webkit-scrollbar-thumb, #settings-scroll::-webkit-scrollbar-thumb { background: var(--gold); }
#guide-body, #settings-body { max-width: 680px; margin: 0 auto; padding: 16px 22px 40px; font-size: 19px; line-height: 1.35; user-select: text; -webkit-user-select: text; }
.okay { flex: 0 0 auto; height: calc(84px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: linear-gradient(180deg, #1b1b1b, #000); border: 0; border-top: 2px solid var(--gold); color: var(--gold); font-size: 36px; }
.entry { margin: 26px 0 34px; }
.entry h3 { text-align: center; margin: 0 0 6px; font-size: 22px; }
.entry.intro { text-align: center; }
.entry.intro p { text-align: left; }
.setup { width: min(230px, 60%); display: block; margin: 0 auto 4px; }
.row3 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.row3 .diagram, .tilepic { width: min(120px, 100%); justify-self: center; }
.pc { text-align: center; }
.pc svg { width: 96px; height: 96px; display: block; margin: 0 auto -4px; }
.pc h3 { margin: 0; }
.rules { margin-top: 14px; }
.rules .icons { display: flex; justify-content: space-around; }
.icon svg { width: 40px; height: 40px; display: block; }
.icon.big svg { width: 90px; height: 90px; }
.rules h4 { text-align: center; margin: 4px 0; font-size: 21px; }
.rules p { margin: 4px 0; }
.tilepic { aspect-ratio: 1; display: block; position: relative; background: linear-gradient(115deg, #eaa954, #c9822f 40%, #eaa954 60%, #d28c3a); }
.tilepic .tile { width: 40%; }
.sidepick { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; }
.sidepick button { padding: 6px 14px; border: 2px solid #514a2a; background: #e6e0bd; border-radius: 3px; font-size: 16px; color: #222; }
.sidepick button.on { background: #1a1a14; color: var(--gold); border-color: var(--gold-dim); }

/* settings */
#settings-body h2 { color: #1a1a14; text-align: center; }
#settings-body h3 { margin: 22px 0 6px; border-bottom: 2px solid #8d8659; }
.set { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(80, 70, 30, 0.25); }
.set label { flex: 1; }
.set small { display: block; font-size: 15px; color: #4c4630; }
.set select { font: inherit; font-size: 17px; padding: 4px 6px; background: #efe9cb; border: 2px solid #514a2a; border-radius: 3px; color: #111; }
.switch { position: relative; width: 58px; height: 32px; flex: 0 0 auto; border-radius: 16px; border: 2px solid #514a2a; background: #8a8465; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #f3eed6; transition: left 0.15s; }
.switch.on { background: #1a1a14; }
.switch.on::after { left: 28px; background: var(--gold); }
.note { font-size: 15px; color: #4c4630; }

#toast { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); z-index: 50; padding: 12px 18px; background: var(--panel); border: 2px solid var(--gold); color: var(--gold); font-size: 18px; text-align: center; max-width: 90vw; animation: rise 0.2s ease-out; }

/* ---------------------------------------------------------------- wide screens: the side column beside the board */

@media (min-width: 820px) and (min-aspect-ratio: 5/4) {
  #game { flex-direction: row; }
  #side { display: flex; flex-direction: column; width: 360px; height: 100%; padding: 10px 0; }
  #moves { flex: 1; flex-direction: row; flex-wrap: wrap; align-content: flex-start; white-space: normal; overflow-y: auto; }
  #moves li { width: calc(50% - 6px); }
  .panel { border-right-width: 3px; }
  #boardwrap { padding: 16px; }
}