@font-face { font-family: 'Friz'; src: url(fonts/frizqt.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'Morpheus'; src: url(fonts/morpheus.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'ArialN'; src: url(fonts/arialn.ttf) format('truetype'); font-display: swap; }

:root {
  --bg: #050403;
  --gold: #ffd100;       /* NORMAL_FONT_COLOR */
  --white: #ffffff;      /* HIGHLIGHT_FONT_COLOR */
  --dim: #b0a58c;
  --say: #ffffff;
  --system: #ffff00;
  --guild: #40ff40;
  --party: #aaaaff;
  --whisper: #ff80ff;
  --warning: #ff4800;
  --bad: #ff2020;
  --xp: #9400cc;
  --cur: url(cursors/point.png) 1 1, auto;
  --cur-btn: url(cursors/point.png) 1 1, pointer;
  --cur-draw: url(cursors/draw.png) 6 4, crosshair;
  --cur-no: url(cursors/unable.png) 1 1, not-allowed;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  /* the loading screen is a widescreen picture stored square: stretch it to the window like the game does */
  background: #000 url(art/loginBg.png) center / 100% 100% fixed no-repeat;
  color: var(--white);
  font: 14px/1.35 'Friz', 'Alegreya Sans', sans-serif;
  cursor: var(--cur);
  overflow-x: hidden;
}
body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.25), rgba(0,0,0,.8)); z-index: -1; }
button, select, label, .avatar, .choice, a { cursor: var(--cur-btn); }
button:disabled { cursor: var(--cur-no); }
input { cursor: text; }
.hidden { display: none !important; }

/* Dialog frame: the client's own border and tiled background */
.frame {
  background: url(art/dialogBg.png) repeat rgba(6,5,4,.86);
  background-size: 64px 64px;
  border: 22px solid transparent;
  border-image: url(art/dialogBorder9.png) 32 / 22px / 0 stretch;
  background-clip: padding-box;
  box-shadow: 0 8px 30px rgba(0,0,0,.7);
}
.frame.gold { border-image-source: url(art/dialogGold9.png); }
.tip {
  background: rgba(0,0,0,.85);
  border: 12px solid transparent;
  border-image: url(art/tooltipBorder9.png) 16 / 12px / 0 stretch;
  background-clip: padding-box;
}

h1, .round, .ov-title { font-family: 'Morpheus', serif; font-weight: normal; }

/* Red panel button (UI-Panel-Button-Up, visible part is 80x22 of the 128x32 file) */
.btn {
  position: relative; min-height: 26px; padding: 4px 16px; border: 0; border-radius: 0;
  font: 13px 'Friz', sans-serif; color: var(--gold); text-shadow: 1px 1px 0 #000;
  background: url(art/button.png) 0 0 / 160% 145.45% no-repeat;
}
.btn:hover:not(:disabled)::after { content: ''; position: absolute; inset: 0; background: url(art/buttonLit.png) 0 0 / 160% 145.45% no-repeat; mix-blend-mode: screen; pointer-events: none; }
.btn:active:not(:disabled) { background-image: url(art/buttonDown.png); }
.btn:disabled { background-image: url(art/buttonOff.png); color: #808080; }
.btn.big { min-height: 36px; font-size: 16px; }
.btn.tiny { min-height: 20px; padding: 2px 10px; font-size: 11px; }

/* ---------- front ---------- */
.screen { min-height: 100%; }
#front { display: grid; place-items: center; padding: 16px; }
.front-card { width: min(580px, 100%); padding: 18px 20px 14px; text-align: center; }
.logo { margin: 0; font-size: clamp(44px, 10vw, 72px); color: var(--gold); letter-spacing: 1px;
  text-shadow: 0 3px 0 #000, 0 0 24px rgba(255,209,0,.35); }
.logo span { color: var(--white); }
.tag { color: var(--dim); margin: 2px 0 14px; }
.field { display: block; text-align: left; margin: 12px 0; color: var(--gold); }
.field input { display: block; width: 100%; margin-top: 6px; }
.wowinput {
  height: 32px; padding: 0 12px; font: 14px 'Friz', sans-serif; color: var(--white); outline: none;
  border: 0; background: url(art/inputLeft.png) left center / auto 100% no-repeat, url(art/inputRight.png) right center / auto 100% no-repeat, #000;
  background-size: 50% 100%, 50% 100%;
}
.wowinput:focus { filter: brightness(1.35); }
.avatars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.avatar { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 4px; border: 1px solid transparent; border-radius: 4px;
  font: 11px 'Friz', sans-serif; color: var(--dim); background: none; }
.avatar.on { border-color: var(--gold); background: rgba(255,209,0,.08); color: var(--gold); }
.avatar:hover .crest { filter: brightness(1.3); }
.crest { width: 48px; height: 48px; display: block; border-radius: 50%; background-image: url(art/raceIcons.png); background-repeat: no-repeat; box-shadow: 0 0 0 2px #000, 0 0 0 3px #6b5a2a; }
.modes { display: flex; gap: 6px; justify-content: center; margin: 14px 0 8px; flex-wrap: wrap; }
.modes button { flex: 1; min-width: 120px; padding: 8px 6px; color: var(--gold); border: 1px solid #4a3d1d; background: rgba(0,0,0,.55); font: 15px 'Friz', sans-serif; }
.modes button.on { border-color: var(--gold); box-shadow: inset 0 0 14px rgba(255,209,0,.25); color: var(--white); }
.modes button small { display: block; color: var(--dim); font-size: 11px; }
.front-buttons { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 12px; }
.front-buttons .wide { grid-column: 1 / -1; }
.join-row { margin-top: 10px; display: grid; }
.error { color: var(--bad); min-height: 1.4em; margin: 10px 0 0; }
.how { text-align: left; color: var(--dim); font-size: 13px; padding-left: 18px; margin: 10px 0 0; }
.how b { color: var(--gold); font-weight: normal; }

/* ---------- game ---------- */
#game { display: grid; gap: 6px; padding: 6px; height: 100vh; height: 100dvh;
  grid-template-columns: 240px minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top top" "players stage chat"; }
.topbar { grid-area: top; position: relative; display: grid; grid-template-columns: 170px 1fr 170px; align-items: center; padding: 0 6px 10px; }
.round { color: var(--gold); font-size: 22px; }
.word-wrap { text-align: center; min-width: 0; }
.cat { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 3px; min-height: 1em; }
.word { font: clamp(18px, 3vw, 28px) 'Friz', sans-serif; letter-spacing: 6px; color: var(--white); white-space: pre-wrap; overflow-wrap: anywhere; text-shadow: 1px 1px 0 #000; }
.word.known { color: var(--guild); letter-spacing: 2px; }
.clock { justify-self: end; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #8c7230; background: #000; font: 20px 'Friz', sans-serif; color: var(--gold); }
.clock.idle { visibility: hidden; }
.round .short { display: none; }
.clock.hurry { color: var(--bad); animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }
.xpbar { position: absolute; left: 0; right: 0; bottom: -4px; height: 9px; border: 1px solid #000; background: #10061a; overflow: hidden; }
#xpfill { height: 100%; width: 0; background: linear-gradient(180deg, #c45cff, var(--xp) 45%, #4b0068); transition: width .25s linear; }
.xpticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), rgba(0,0,0,.85) calc(5% - 1px) 5%); }

.players { grid-area: players; overflow-y: auto; overflow-x: hidden; padding: 0; }
.player { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; padding: 5px 4px; position: relative; }
.player + .player { border-top: 1px solid rgba(140,114,48,.35); }
.player .crest { width: 34px; height: 34px; }
.player > div { min-width: 0; }
.player .pname { display: flex; align-items: center; color: var(--white); white-space: nowrap; }
.player .pname .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.player .pname::after, .host-badge { flex-shrink: 0; }
.player .pscore { font-size: 12px; color: var(--gold); }
.player .rank { font: 16px 'Morpheus', serif; color: var(--gold); }
.player.me .pname { color: var(--gold); }
.player.guessed { background: rgba(64,255,64,.12); }
.player.guessed .pname::after { content: ' \2713'; color: var(--guild); }
.player.drawing { background: rgba(255,209,0,.12); }
.player.drawing .pname::after { content: ' \270E'; color: var(--gold); }
.player.off { opacity: .45; }
.player .pmenu { position: absolute; right: 2px; top: 2px; display: none; gap: 3px; }
.player:hover .pmenu { display: flex; }
.host-badge { font-size: 10px; color: var(--gold); border: 1px solid #6b5a2a; padding: 0 3px; margin-left: 4px; vertical-align: middle; }

.stage { grid-area: stage; display: flex; flex-direction: column; gap: 6px; min-height: 0; align-items: center; }
.canvas-wrap { position: relative; width: 100%; max-width: calc((100dvh - 310px) * 4 / 3 + 44px); }
.canvas-inner { position: relative; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
#board { width: 100%; height: 100%; display: block; background: #fff; touch-action: none; }
#board.can { cursor: var(--cur-draw); }
.ring { position: absolute; pointer-events: none; border: 1px solid rgba(0,0,0,.6); outline: 1px solid rgba(255,255,255,.7); border-radius: 50%; transform: translate(-50%, -50%); }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.72); padding: 16px; text-align: center; overflow: auto; }
.overlay.solid { background: url(art/dialogBgDark.png) repeat #0b0907; }
.ov-title { font-size: clamp(24px, 4vw, 38px); color: var(--gold); margin: 0 0 6px; text-shadow: 0 2px 0 #000; }
.ov-sub { color: var(--dim); margin: 0 0 14px; }
.choices { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.choice { padding: 12px 16px; min-width: 160px; color: var(--white); font: 17px 'Friz', sans-serif; }
.choice small { display: block; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 2px; }
.choice:hover { filter: brightness(1.3); }
.gains { list-style: none; padding: 0; margin: 10px auto 0; min-width: 260px; text-align: left; }
.gains li { display: flex; justify-content: space-between; gap: 20px; padding: 3px 0; border-bottom: 1px solid rgba(140,114,48,.35); }
.gains .plus { color: var(--guild); }
.gains .zero { color: #808080; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-top: 10px; }
.podium .step { width: 120px; text-align: center; }
.podium .crest { margin: 0 auto 4px; }
.podium .block { margin-top: 6px; display: grid; place-items: center; font: 30px 'Morpheus', serif; color: var(--gold); border: 1px solid #6b5a2a; border-bottom: 0;
  background: linear-gradient(180deg, rgba(120,90,20,.6), rgba(0,0,0,.6)); }
.settings { display: grid; grid-template-columns: auto auto; gap: 10px 14px; align-items: center; justify-content: center; margin: 12px 0; text-align: left; color: var(--gold); }
.settings select { font: 13px 'Friz', sans-serif; padding: 4px 8px; background: #000; color: var(--white); border: 1px solid #6b5a2a; }
.share { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.share code { background: #000; padding: 5px 10px; border: 1px solid #6b5a2a; color: var(--gold); user-select: all; font: 13px 'ArialN', sans-serif; }

.tools { width: 100%; max-width: calc((100dvh - 310px) * 4 / 3 + 44px); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 0; }
.palette { display: grid; grid-template-columns: repeat(13, 22px); gap: 3px; }
.swatch { width: 22px; height: 22px; border: 1px solid #000; padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.swatch.on { outline: 2px solid var(--gold); outline-offset: 1px; }
.sizes { display: flex; gap: 4px; }
.size { width: 32px; height: 32px; display: grid; place-items: center; background: #000; border: 1px solid #6b5a2a; }
.size i { display: block; background: var(--white); border-radius: 50%; }
.size.on { border-color: var(--gold); box-shadow: inset 0 0 8px rgba(255,209,0,.4); }
.tool-buttons { display: flex; gap: 2px; flex-wrap: wrap; }
.tool-buttons .btn.on { color: var(--white); }

/* ---------- chat: the client's chat frame ---------- */
.chat { grid-area: chat; display: flex; flex-direction: column; min-height: 0; }
.chat-tabs { display: flex; align-items: flex-end; height: 26px; padding-left: 4px; gap: 1px; }
.chat-tab { position: relative; height: 26px; padding: 6px 14px 0; font: 12px 'Friz', sans-serif; color: var(--gold); text-shadow: 1px 1px 0 #000; border: 0;
  background: url(art/tabLeft.png) left top / 12px 100% no-repeat, url(art/tabRight.png) right top / 12px 100% no-repeat, url(art/tabMid.png) center top / calc(100% - 24px) 100% no-repeat; }
.chat-tab.on { color: var(--white);
  background: url(art/tabSelLeft.png) left top / 12px 100% no-repeat, url(art/tabSelRight.png) right top / 12px 100% no-repeat, url(art/tabSelMid.png) center top / calc(100% - 24px) 100% no-repeat,
  url(art/tabLeft.png) left top / 12px 100% no-repeat, url(art/tabRight.png) right top / 12px 100% no-repeat, url(art/tabMid.png) center top / calc(100% - 24px) 100% no-repeat; }
.room-line { margin-left: auto; display: flex; gap: 2px; align-items: center; padding-bottom: 2px; font: 11px 'Friz', sans-serif; color: var(--dim); }
.room-line b { color: var(--gold); letter-spacing: 1px; font-weight: normal; margin-right: 4px; }
.chat-body { flex: 1; min-height: 0; display: flex; background: rgba(0,0,0,.66); }
.log { flex: 1; overflow-y: auto; padding: 6px 10px; font: 15px/1.45 'Friz', sans-serif; letter-spacing: .2px; color: var(--say); text-shadow: 1px 1px 0 #000; overflow-wrap: anywhere; scrollbar-width: none; }
.log::-webkit-scrollbar { display: none; }
.log p { margin: 2px 0; }
.log .from { color: inherit; }
.log .from::before { content: '['; } .log .from::after { content: ']'; }
.log .k-sys, .log .k-word { color: var(--system); }
.log .k-big { color: var(--warning); }
.log .k-hit { color: var(--guild); }
.log .k-close { color: var(--whisper); }
.log .k-quiet { color: var(--party); }
.scrollbtns { display: flex; flex-direction: column; justify-content: flex-end; gap: 0; padding: 2px; }
.scrollbtns button { width: 26px; height: 26px; border: 0; padding: 0; background: center / 100% 100% no-repeat; }
#scrollUp { background-image: url(art/scrollUp.png); } #scrollUp:active { background-image: url(art/scrollUpDown.png); }
#scrollDown { background-image: url(art/scrollDown.png); } #scrollDown:active { background-image: url(art/scrollDownDown.png); }
#scrollEnd { background-image: url(art/scrollEnd.png); } #scrollEnd:active { background-image: url(art/scrollEndDown.png); }
.chat-form { display: flex; align-items: center; padding: 4px 0 0; }
.chat-form .say { font: 14px 'Friz', sans-serif; color: var(--say); padding: 0 4px 0 14px; white-space: nowrap; }
.chat-edit { position: relative; flex: 1; height: 32px; display: flex; align-items: center;
  background: url(art/inputLeft.png) left center / auto 100% no-repeat, url(art/inputRight.png) right center / auto 100% no-repeat; background-size: 50.5% 100%, 50.5% 100%; }
.chat-edit input { width: 100%; height: 100%; padding: 0 12px; border: 0; outline: none; background: transparent; color: var(--say); font: 15px 'Friz', sans-serif; }
.chat-toggle { display: none; }

.toast { position: fixed; left: 50%; top: 24%; transform: translateX(-50%); z-index: 9; pointer-events: none; text-align: center;
  font: clamp(30px, 6vw, 54px) 'Morpheus', serif; color: var(--gold); text-shadow: 0 3px 0 #000, 0 0 24px rgba(255,209,0,.6); animation: rise 1.9s ease-out forwards; }
.toast small { display: block; font: .45em 'Friz', sans-serif; color: var(--guild); }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -30px); } }

@media (max-aspect-ratio: 1/1) { body { background-size: cover; } }

@media (max-width: 1000px) {
  #game { grid-template-columns: 1fr; grid-template-rows: auto auto auto minmax(200px, 1fr); grid-template-areas: "top" "stage" "players" "chat"; height: auto; min-height: 100dvh; padding: 4px; }
  .topbar { grid-template-columns: 80px 1fr 56px; }
  .round { font-size: 18px; white-space: nowrap; }
  .round .long { display: none; }
  .round .short { display: inline; }
  .canvas-wrap, .tools { max-width: 100%; }
  .frame { border-width: 14px; border-image-width: 14px; }
  .players { display: flex; gap: 4px; overflow-x: auto; }
  .player { grid-template-columns: 26px minmax(0, 1fr); flex: 1 1 0; min-width: 96px; border: 0 !important; }
  .player .rank, .player .pmenu { display: none !important; }
  .player .crest { width: 26px; height: 26px; }
  .palette { grid-template-columns: repeat(13, 20px); }
  .swatch { width: 20px; height: 20px; }
  .chat { max-height: 55dvh; }
}
@media (max-width: 440px) {
  .front-card { padding: 10px 8px; }
  .front-buttons { grid-template-columns: 1fr; }
  .crest { width: 40px; height: 40px; }
  .palette { grid-template-columns: repeat(9, 22px); }
}