`;
- if (hasImage) {
- const btn = card.querySelector(".card-visual");
- setupCardVisualHover(btn, s.screenshotUrl);
- btn.addEventListener("click", () => openLightbox(s.screenshotUrl, s.name));
- }
- if (allowEdit) {
- const editBtn = card.querySelector("[data-edit]");
- editBtn?.addEventListener("click", () => openEditModal(s));
- }
- if (allowDelete) {
- const del = card.querySelector("[data-delete]");
- del.addEventListener("click", async () => {
- try {
- await api.deleteSuggestion(s.id);
- toast(t("toast.suggestionDeleted"));
- await loadSuggestData();
- } catch (err) {
- toast(err.message, true);
- }
- });
- }
- return card;
+ if (hasImage) {
+ const btn = card.querySelector(".card-visual");
+ setupCardVisualHover(btn, s.screenshotUrl);
+ btn.addEventListener("click", () =>
+ openLightbox(s.screenshotUrl, s.name),
+ );
+ }
+ if (allowEdit) {
+ const editBtn = card.querySelector("[data-edit]");
+ editBtn?.addEventListener("click", () => openEditModal(s));
+ }
+ if (allowDelete) {
+ const del = card.querySelector("[data-delete]");
+ del.addEventListener("click", async () => {
+ try {
+ await api.deleteSuggestion(s.id);
+ toast(t("toast.suggestionDeleted"));
+ await loadSuggestData();
+ } catch (err) {
+ toast(err.message, true);
+ }
+ });
+ }
+ return card;
}
function openEditModal(s) {
- const overlay = document.createElement("div");
- overlay.className = "edit-modal";
- overlay.innerHTML = `
+ const overlay = document.createElement("div");
+ overlay.className = "edit-modal";
+ overlay.innerHTML = `
`;
- const close = () => overlay.remove();
- overlay.addEventListener("click", (e) => {
- if (e.target.classList.contains("edit-modal") || e.target.classList.contains("lightbox-close")) close();
- });
+ const close = () => overlay.remove();
+ overlay.addEventListener("click", (e) => {
+ if (
+ e.target.classList.contains("edit-modal") ||
+ e.target.classList.contains("lightbox-close")
+ )
+ close();
+ });
- const cancelBtn = overlay.querySelector("#edit-cancel");
- cancelBtn?.addEventListener("click", close);
+ const cancelBtn = overlay.querySelector("#edit-cancel");
+ cancelBtn?.addEventListener("click", close);
- const form = overlay.querySelector("#edit-form");
- form?.addEventListener("submit", async (e) => {
- e.preventDefault();
- const data = normalizeSuggestionForm(new FormData(form));
- if (data.screenshotUrl && !isValidImageUrl(data.screenshotUrl)) {
- return toast(t("toast.invalidImageUrl"), true);
- }
- if (!data.name?.trim()) return toast(t("toast.nameRequired"), true);
- try {
- await api.updateSuggestion(s.id, data);
- toast(t("toast.savedChanges"));
- close();
- await refreshPhaseData();
- } catch (err) {
- if (handleAuthError(err)) return;
- toast(err.message, true);
- }
- });
+ const form = overlay.querySelector("#edit-form");
+ form?.addEventListener("submit", async (e) => {
+ e.preventDefault();
+ const data = normalizeSuggestionForm(new FormData(form));
+ if (data.screenshotUrl && !isValidImageUrl(data.screenshotUrl)) {
+ return toast(t("toast.invalidImageUrl"), true);
+ }
+ if (!data.name?.trim()) return toast(t("toast.nameRequired"), true);
+ try {
+ await api.updateSuggestion(s.id, data);
+ toast(t("toast.savedChanges"));
+ close();
+ await refreshPhaseData();
+ } catch (err) {
+ if (handleAuthError(err)) return;
+ toast(err.message, true);
+ }
+ });
- document.body.appendChild(overlay);
+ document.body.appendChild(overlay);
}
function openLightbox(url, title) {
- const overlay = document.createElement("div");
- overlay.className = "lightbox";
- overlay.innerHTML = `
+ const overlay = document.createElement("div");
+ overlay.className = "lightbox";
+ overlay.innerHTML = `
${title || ""}
`;
- overlay.addEventListener("click", (e) => {
- if (e.target.classList.contains("lightbox") || e.target.classList.contains("lightbox-close")) {
- overlay.remove();
- }
- });
- document.body.appendChild(overlay);
+ overlay.addEventListener("click", (e) => {
+ if (
+ e.target.classList.contains("lightbox") ||
+ e.target.classList.contains("lightbox-close")
+ ) {
+ overlay.remove();
+ }
+ });
+ document.body.appendChild(overlay);
}
function setupCardVisualHover(el, url) {
- if (!el || !url) return;
- const img = new Image();
- let naturalW = 0;
- let naturalH = 0;
- let loaded = false;
- img.src = url;
- img.onload = () => {
- naturalW = img.naturalWidth;
- naturalH = img.naturalHeight;
- loaded = true;
- };
+ if (!el || !url) return;
+ const img = new Image();
+ let naturalW = 0;
+ let naturalH = 0;
+ let loaded = false;
+ img.src = url;
+ img.onload = () => {
+ naturalW = img.naturalWidth;
+ naturalH = img.naturalHeight;
+ loaded = true;
+ };
- const reset = () => {
- el.classList.remove("hovering");
- el.style.backgroundSize = "";
- el.style.backgroundPosition = "";
- el.style.backgroundRepeat = "";
- };
+ const reset = () => {
+ el.classList.remove("hovering");
+ el.style.backgroundSize = "";
+ el.style.backgroundPosition = "";
+ el.style.backgroundRepeat = "";
+ };
- el.addEventListener("mouseenter", () => {
- el.classList.add("hovering");
- el.style.backgroundSize = "auto";
- el.style.backgroundRepeat = "no-repeat";
- el.style.backgroundPosition = "center";
- });
+ el.addEventListener("mouseenter", () => {
+ el.classList.add("hovering");
+ el.style.backgroundSize = "auto";
+ el.style.backgroundRepeat = "no-repeat";
+ el.style.backgroundPosition = "center";
+ });
- el.addEventListener("mousemove", (e) => {
- if (!loaded) return;
- const rect = el.getBoundingClientRect();
- const overW = naturalW - rect.width;
- const overH = naturalH - rect.height;
- if (overW <= 0 && overH <= 0) {
- el.style.backgroundPosition = "center";
- return;
- }
- const xRatio = (e.clientX - rect.left) / rect.width;
- const yRatio = (e.clientY - rect.top) / rect.height;
- const xPercent = overW > 0 ? xRatio * 100 : 50;
- const yPercent = overH > 0 ? yRatio * 100 : 50;
- el.style.backgroundPosition = `${xPercent}% ${yPercent}%`;
- });
+ el.addEventListener("mousemove", (e) => {
+ if (!loaded) return;
+ const rect = el.getBoundingClientRect();
+ const overW = naturalW - rect.width;
+ const overH = naturalH - rect.height;
+ if (overW <= 0 && overH <= 0) {
+ el.style.backgroundPosition = "center";
+ return;
+ }
+ const xRatio = (e.clientX - rect.left) / rect.width;
+ const yRatio = (e.clientY - rect.top) / rect.height;
+ const xPercent = overW > 0 ? xRatio * 100 : 50;
+ const yPercent = overH > 0 ? yRatio * 100 : 50;
+ el.style.backgroundPosition = `${xPercent}% ${yPercent}%`;
+ });
- ["mouseleave", "blur"].forEach(evt => el.addEventListener(evt, reset));
+ ["mouseleave", "blur"].forEach((evt) => el.addEventListener(evt, reset));
}
async function main() {
- setupHandlers();
- try {
- await refreshPhaseData();
- } catch (err) {
- toast(err.message, true);
- }
- setInterval(() => {
- refreshPhaseData().catch(err => {
- if (!handleAuthError(err)) toast(err.message, true);
- });
- }, 4000);
+ setupHandlers();
+ try {
+ await refreshPhaseData();
+ } catch (err) {
+ toast(err.message, true);
+ }
+ setInterval(() => {
+ refreshPhaseData().catch((err) => {
+ if (!handleAuthError(err)) toast(err.message, true);
+ });
+ }, 4000);
}
main();
function isValidImageUrl(url) {
- if (!url) return true;
- try {
- const u = new URL(url);
- const allowed = ["http:", "https:"];
- if (!allowed.includes(u.protocol)) return false;
- const path = u.pathname.toLowerCase();
- return [".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif"].some(ext => path.endsWith(ext));
- } catch {
- return false;
- }
+ if (!url) return true;
+ try {
+ const u = new URL(url);
+ const allowed = ["http:", "https:"];
+ if (!allowed.includes(u.protocol)) return false;
+ const path = u.pathname.toLowerCase();
+ return [".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif"].some((ext) =>
+ path.endsWith(ext),
+ );
+ } catch {
+ return false;
+ }
}
function normalizeSuggestionForm(formData) {
- const obj = Object.fromEntries(formData.entries());
- const parseNum = (v) => {
- if (v === undefined || v === null || v === "") return null;
- const n = Number(v);
- return Number.isFinite(n) ? n : null;
- };
- return {
- name: obj.name?.trim(),
- genre: obj.genre?.trim() || null,
- description: obj.description?.trim() || null,
- screenshotUrl: obj.screenshotUrl?.trim() || null,
- youtubeUrl: obj.youtubeUrl?.trim() || null,
- gameUrl: obj.gameUrl?.trim() || null,
- minPlayers: parseNum(obj.minPlayers),
- maxPlayers: parseNum(obj.maxPlayers),
- };
+ const obj = Object.fromEntries(formData.entries());
+ const parseNum = (v) => {
+ if (v === undefined || v === null || v === "") return null;
+ const n = Number(v);
+ return Number.isFinite(n) ? n : null;
+ };
+ return {
+ name: obj.name?.trim(),
+ genre: obj.genre?.trim() || null,
+ description: obj.description?.trim() || null,
+ screenshotUrl: obj.screenshotUrl?.trim() || null,
+ youtubeUrl: obj.youtubeUrl?.trim() || null,
+ gameUrl: obj.gameUrl?.trim() || null,
+ minPlayers: parseNum(obj.minPlayers),
+ maxPlayers: parseNum(obj.maxPlayers),
+ };
}
function scoreToEmoji(score) {
- if (score == null || Number.isNaN(score)) return neutralEmoji();
- if (score < 1) return "😡";
- if (score <= 3) return "😠";
- if (score <= 6) return "😐";
- if (score <= 8) return "🙂";
- if (score <= 9) return "😃";
- return "🤩";
+ if (score == null || Number.isNaN(score)) return neutralEmoji();
+ if (score < 1) return "😡";
+ if (score <= 3) return "😠";
+ if (score <= 6) return "😐";
+ if (score <= 8) return "🙂";
+ if (score <= 9) return "😃";
+ return "🤩";
}
function neutralEmoji() {
- return "😐";
+ return "⬅️";
}
function signatureSuggestions(list) {
- return JSON.stringify(
- list.map((s) => [
- s.id,
- s.name,
- s.genre,
- s.description,
- s.screenshotUrl,
- s.youtubeUrl,
- s.gameUrl,
- s.minPlayers,
- s.maxPlayers
- ])
- );
+ return JSON.stringify(
+ list.map((s) => [
+ s.id,
+ s.name,
+ s.genre,
+ s.description,
+ s.screenshotUrl,
+ s.youtubeUrl,
+ s.gameUrl,
+ s.minPlayers,
+ s.maxPlayers,
+ ]),
+ );
}
diff --git a/wwwroot/index.html b/wwwroot/index.html
index 5d331ae..780add1 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -58,7 +58,7 @@
diff --git a/wwwroot/styles.css b/wwwroot/styles.css
index 42f5c45..9a14df8 100644
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -1,372 +1,606 @@
:root {
- font-family: "Baloo 2", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
- background: #f6e9d6;
- color: #2c1c0d;
+ font-family:
+ "Baloo 2",
+ "Nunito",
+ "Segoe UI",
+ system-ui,
+ -apple-system,
+ sans-serif;
+ background: #f6e9d6;
+ color: #2c1c0d;
}
*,
*::before,
*::after {
- box-sizing: border-box;
+ box-sizing: border-box;
}
.page {
- margin: 0;
- padding: 20px;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 16px;
- min-height: 100vh;
- background: url("background.png") center/cover no-repeat fixed, #f6e9d6;
+ margin: 0;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ min-height: 100vh;
+ background:
+ url("background.png") center/cover no-repeat fixed,
+ #f6e9d6;
}
-.lang-field { margin-top: 8px; }
-.lang-field select { min-width: 160px; }
-.compact-select { min-width: 120px; }
+.lang-field {
+ margin-top: 8px;
+}
+.lang-field select {
+ min-width: 160px;
+}
+.compact-select {
+ min-width: 120px;
+}
.status-bar {
- display: flex;
- width: 100%;
- justify-content: space-between;
- gap: 30px;
- background: rgba(255, 255, 255, 0.9);
- border: 1px solid #e3d4bd;
- border-radius: 12px;
- box-shadow: 0 10px 30px rgba(0,0,0,0.12);
- padding: 10px 14px;
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ gap: 30px;
+ background: rgba(255, 255, 255, 0.9);
+ border: 1px solid #e3d4bd;
+ border-radius: 12px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+ padding: 10px 14px;
+}
+.status-left,
+.status-center,
+.status-right {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+.inline-link {
+ font-size: 14px;
+ margin-left: 5px;
}
-.status-left, .status-center, .status-right { display: flex; align-items: center; gap: 10px; }
-.inline-link { font-size: 14px; margin-left: 5px; }
.logo-mark {
- height: 65px;
- margin: -10px;
- width: auto;
+ height: 65px;
+ margin: -10px;
+ width: auto;
}
.counts {
- color: #5f513b;
- font-size: 13px;
+ color: #5f513b;
+ font-size: 13px;
}
-.phase-bar { display: none; }
+.phase-bar {
+ display: none;
+}
.grid {
- display: grid;
- grid-template-columns: 1fr;
- gap: 16px;
- width: 100%;
- max-width: 1280px;
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 16px;
+ width: 100%;
+ max-width: 1280px;
}
.suggest-grid {
- display: grid;
- grid-template-columns: 1.1fr 1fr;
- gap: 16px;
- align-items: start;
+ display: grid;
+ grid-template-columns: 1.1fr 1fr;
+ gap: 16px;
+ align-items: start;
}
.suggest-grid .card-grid {
- grid-template-columns: 1fr;
+ grid-template-columns: 1fr;
}
.phase-header {
- background: rgba(255, 255, 255, 0.9);
- border: 1px solid #e3d4bd;
- border-radius: 12px;
- padding: 12px 16px;
- box-shadow: 0 10px 24px rgba(0,0,0,0.1);
- margin-bottom: 12px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 12px;
+ background: rgba(255, 255, 255, 0.9);
+ border: 1px solid #e3d4bd;
+ border-radius: 12px;
+ padding: 12px 16px;
+ box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
+ margin-bottom: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+}
+.phase-header h2 {
+ margin: 0;
+}
+.phase-header .hint {
+ margin: 0;
}
-.phase-header h2 { margin: 0; }
-.phase-header .hint { margin: 0; }
.card {
- background: rgba(255, 255, 255, 0.9);
- border: 1px solid #e3d4bd;
- border-radius: 14px;
- padding: 16px;
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
- margin-bottom: 16px;
+ background: rgba(255, 255, 255, 0.9);
+ border: 1px solid #e3d4bd;
+ border-radius: 14px;
+ padding: 16px;
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+ margin-bottom: 16px;
}
-.card h2 { margin-top: 0; margin-bottom: 8px; }
-
-.split { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
-
-.stack { display: flex; flex-direction: column; gap: 8px; }
-.stack.horizontal { flex-direction: row; flex-wrap: wrap; }
-
-input, textarea, select, button {
- font: inherit;
- border-radius: 8px;
- border: 1px solid #d5c7b5;
- background: #fffaf3;
- color: #2c1c0d;
- padding: 10px 12px;
- min-width: 0;
+.card h2 {
+ margin-top: 0;
+ margin-bottom: 8px;
}
-textarea { min-height: 80px; resize: vertical; }
+.split {
+ display: flex;
+ justify-content: space-between;
+ gap: 16px;
+ align-items: flex-start;
+ flex-wrap: wrap;
+}
+
+.stack {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+.stack.horizontal {
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+input,
+textarea,
+select,
+button {
+ font: inherit;
+ border-radius: 8px;
+ border: 1px solid #d5c7b5;
+ background: #fffaf3;
+ color: #2c1c0d;
+ padding: 10px 12px;
+ min-width: 0;
+}
+
+textarea {
+ min-height: 80px;
+ resize: vertical;
+}
button {
- cursor: pointer;
- background: linear-gradient(-5deg, #30afea, #80e2ff);
- border-color: #124b88;
- font-weight: 700;
- color: #2c1c0d;
+ cursor: pointer;
+ background: linear-gradient(-5deg, #30afea, #80e2ff);
+ border-color: #124b88;
+ font-weight: 700;
+ color: #2c1c0d;
}
-button:hover { background: linear-gradient(-5deg, #40e2ff, #e0f0ff ); }
-button.danger { background: #e0564f; border-color: #c54740; color: #fffaf3; }
+button:hover {
+ background: linear-gradient(-5deg, #40e2ff, #e0f0ff);
+}
-button.ghost { background: transparent; border-color: #d5c7b5; color: #2c1c0d; }
+button.danger {
+ background: #e0564f;
+ border-color: #c54740;
+ color: #fffaf3;
+}
-.label { color: #6c5a42; font-size: 14px; }
-.hint { color: #8c7a63; font-size: 12px; margin: 8px 0 12px 0; }
-.hint.warning { color: #c26c1a; }
-.disabled-form { opacity: 0.5; pointer-events: none; }
+button.ghost {
+ background: transparent;
+ border-color: #d5c7b5;
+ color: #2c1c0d;
+}
+
+.label {
+ color: #6c5a42;
+ font-size: 14px;
+}
+.hint {
+ color: #8c7a63;
+ font-size: 12px;
+ margin: 8px 0 12px 0;
+}
+.hint.warning {
+ color: #c26c1a;
+}
+.disabled-form {
+ opacity: 0.5;
+ pointer-events: none;
+}
.card-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
- gap: 12px;
- margin-top: 12px;
- width: 100%;
- max-width: 1280px;
- margin-inline: auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+ gap: 12px;
+ margin-top: 12px;
+ width: 100%;
+ max-width: 1280px;
+ margin-inline: auto;
+}
+.results-grid {
+ max-width: none;
}
-.results-grid { max-width: none; }
.game-card {
- background: #fffaf3;
- border: 1px solid #e5d6c2;
- border-radius: 12px;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- min-height: 220px;
+ background: #fffaf3;
+ border: 1px solid #e5d6c2;
+ border-radius: 12px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ min-height: 220px;
}
@media (max-width: 1200px) {
- .grid { min-width: auto; width: 100%; }
- .suggest-grid { grid-template-columns: 1fr; }
+ .grid {
+ min-width: auto;
+ width: 100%;
+ }
+ .suggest-grid {
+ grid-template-columns: 1fr;
+ }
}
.card-visual {
- height: 200px;
- background: linear-gradient(135deg, #f0d9b5, #f6b24f);
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- background-color: #f6b24f;
- cursor: pointer;
- border: none;
- width: 100%;
- display: block;
- padding: 0;
+ height: 200px;
+ background: linear-gradient(135deg, #f0d9b5, #f6b24f);
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-color: #f6b24f;
+ cursor: pointer;
+ border: none;
+ width: 100%;
+ display: block;
+ padding: 0;
+}
+.card-visual.hovering {
+ cursor: zoom-in;
}
-.card-visual.hovering { cursor: zoom-in; }
-.card-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
+.card-body {
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ flex: 1;
+}
-h3 { margin: 0; font-size: 18px; }
+h3 {
+ margin: 0;
+ font-size: 18px;
+}
-.card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
-.card-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.title-meta { display: flex; align-items: center; gap: 8px; }
-.title-meta .chip { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-p { margin: 0; }
-.muted { color: #7a6a53; margin: 0; }
-.link { color: #30afea; text-decoration: none; font-weight: 700; }
-.link:hover { text-decoration: underline; }
-.link.compact { font-size: 14px; }
-.auth-toggle-link { text-align: center; display: inline-block; }
-.chip { background: #c5dff1; color: #2c1c0d; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
-.chip.danger-chip { background: #e0564f; border: 1px solid #c54740; color: #fffaf3; }
+.card-title-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+ min-width: 0;
+}
+.card-title {
+ flex: 1;
+ min-width: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.title-meta {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+.title-meta .chip {
+ max-width: 140px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+p {
+ margin: 0;
+}
+.muted {
+ color: #7a6a53;
+ margin: 0;
+}
+.link {
+ color: #30afea;
+ text-decoration: none;
+ font-weight: 700;
+}
+.link:hover {
+ text-decoration: underline;
+}
+.link.compact {
+ font-size: 14px;
+}
+.auth-toggle-link {
+ text-align: center;
+ display: inline-block;
+ margin-top: 10px;
+}
+.chip {
+ background: #c5dff1;
+ color: #2c1c0d;
+ padding: 4px 8px;
+ border-radius: 999px;
+ font-size: 12px;
+}
+.chip.danger-chip {
+ background: #e0564f;
+ border: 1px solid #c54740;
+ color: #fffaf3;
+}
-.vote-controls { display: flex; gap: 10px; align-items: center; margin-top: auto; padding-top: 6px; }
-.score { font-weight: 700; min-width: 36px; text-align: center; }
-.score-emoji { font-size: 24px; text-align: center; }
+.vote-controls {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ margin-top: auto;
+ padding-top: 6px;
+}
+.score {
+ font-weight: 700;
+ min-width: 36px;
+ text-align: center;
+}
+.score-emoji {
+ font-size: 24px;
+ text-align: center;
+}
-.results-grid .game-card { border-color: #f0c56b; }
+.results-grid .game-card {
+ border-color: #f0c56b;
+}
.results-frame {
- background: rgba(255, 255, 255, 0.92);
- border: 1px solid #e3d4bd;
- border-radius: 14px;
- padding: 12px;
- box-shadow: 0 10px 28px rgba(0,0,0,0.12);
+ background: rgba(255, 255, 255, 0.92);
+ border: 1px solid #e3d4bd;
+ border-radius: 14px;
+ padding: 12px;
+ box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
/* Slider */
input[type="range"].full-slider {
- -webkit-appearance: none;
- width: 100%;
- height: 20px;
- border-radius: 999px;
- background: linear-gradient(90deg, #c52222, #d5c522, #22c55e);
- outline: none;
- box-shadow: inset 0 0 0 1px #e3d4bd, 0 4px 12px rgba(0,0,0,0.18);
+ -webkit-appearance: none;
+ width: 100%;
+ height: 20px;
+ border-radius: 999px;
+ background: linear-gradient(90deg, #c52222, #d5c522, #22c55e);
+ outline: none;
+ box-shadow:
+ inset 0 0 0 1px #e3d4bd,
+ 0 4px 12px rgba(0, 0, 0, 0.18);
}
input[type="range"].full-slider::-webkit-slider-thumb {
- -webkit-appearance: none;
- appearance: none;
- width: 28px;
- height: 28px;
- border-radius: 50%;
- background: #fffaf3;
- border: 2px solid #d5c7b5;
- box-shadow: 0 4px 10px rgba(0,0,0,0.25);
+ -webkit-appearance: none;
+ appearance: none;
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ background: #fffaf3;
+ border: 2px solid #d5c7b5;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
input[type="range"].full-slider::-moz-range-thumb {
- width: 28px;
- height: 28px;
- border-radius: 50%;
- background: #fffaf3;
- border: 2px solid #d5c7b5;
- box-shadow: 0 4px 10px rgba(0,0,0,0.25);
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ background: #fffaf3;
+ border: 2px solid #d5c7b5;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
input[type="range"].full-slider::-moz-range-track {
- height: 14px;
- border-radius: 999px;
- background: linear-gradient(90deg, #f28b3c, #f2c94c, #2ca25f);
- border: 1px solid #e3d4bd;
+ height: 14px;
+ border-radius: 999px;
+ background: linear-gradient(90deg, #f28b3c, #f2c94c, #2ca25f);
+ border: 1px solid #e3d4bd;
}
-.score { font-weight: 700; min-width: 36px; font-size: 24px; text-align: center; }
+.score {
+ font-weight: 700;
+ min-width: 36px;
+ font-size: 24px;
+ text-align: center;
+}
-.hidden { display: none !important; }
+.hidden {
+ display: none !important;
+}
.toast {
- position: fixed;
- bottom: 16px;
- right: 16px;
- background: #1db4ac;
- color: #0f2f2d;
- padding: 10px 14px;
- border-radius: 8px;
- box-shadow: 0 10px 24px rgba(0,0,0,0.2);
- max-width: 320px;
+ position: fixed;
+ bottom: 16px;
+ right: 16px;
+ background: #1db4ac;
+ color: #0f2f2d;
+ padding: 10px 14px;
+ border-radius: 8px;
+ box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
+ max-width: 320px;
+}
+.toast.error {
+ background: #e0564f;
+ color: #fffaf3;
}
-.toast.error { background: #e0564f; color: #fffaf3; }
-.auth-card .active { font-weight: 700; }
-.auth-form { margin-top: 8px; }
+.auth-card .active {
+ font-weight: 700;
+}
+.auth-form {
+ margin-top: 8px;
+}
.auth-logo {
- display: flex;
- justify-content: center;
- margin-bottom: 12px;
+ display: flex;
+ justify-content: center;
+ margin-bottom: 12px;
}
.auth-logo img {
- max-width: 200px;
- width: 100%;
- height: auto;
- filter: drop-shadow(0 6px 16px rgba(0,0,0,0.25));
+ max-width: 200px;
+ width: 100%;
+ height: auto;
+ filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
}
.admin-toggle {
- position: fixed;
- bottom: 18px;
- right: 18px;
- width: 44px;
- height: 44px;
- border-radius: 50%;
- border: 1px solid #e3d4bd;
- background: rgba(255,255,255,0.9);
- color: #6c5a42;
- font-weight: 700;
- box-shadow: 0 8px 20px rgba(0,0,0,0.18);
- z-index: 30;
+ position: fixed;
+ bottom: 18px;
+ right: 18px;
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ border: 1px solid #e3d4bd;
+ background: rgba(255, 255, 255, 0.9);
+ color: #6c5a42;
+ font-weight: 700;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
+ z-index: 30;
}
.admin-panel {
- position: fixed;
- bottom: 70px;
- right: 18px;
- width: 320px;
- z-index: 40;
- display: flex;
- flex-direction: column;
- gap: 10px;
+ position: fixed;
+ bottom: 70px;
+ right: 18px;
+ width: 320px;
+ z-index: 40;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
}
.lightbox {
- position: fixed;
- inset: 0;
- background: rgba(0,0,0,0.7);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 100;
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.7);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 100;
}
.lightbox-content {
- position: relative;
- max-width: 90vw;
- max-height: 90vh;
- background: #fffaf3;
- padding: 12px;
- border-radius: 12px;
- box-shadow: 0 20px 50px rgba(0,0,0,0.35);
+ position: relative;
+ max-width: 90vw;
+ max-height: 90vh;
+ background: #fffaf3;
+ padding: 12px;
+ border-radius: 12px;
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.lightbox-content img {
- max-width: 100%;
- max-height: 80vh;
- display: block;
- border-radius: 8px;
+ max-width: 100%;
+ max-height: 80vh;
+ display: block;
+ border-radius: 8px;
}
.lightbox-close {
- position: absolute;
- top: 8px;
- right: 8px;
- background: #1db4ac;
- color: #0f2f2d;
- border: 1px solid #128b88;
- border-radius: 999px;
- width: 32px;
- height: 32px;
- font-size: 16px;
- padding: 0;
- cursor: pointer;
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ background: #1db4ac;
+ color: #0f2f2d;
+ border: 1px solid #128b88;
+ border-radius: 999px;
+ width: 32px;
+ height: 32px;
+ font-size: 16px;
+ padding: 0;
+ cursor: pointer;
}
.edit-modal {
- position: fixed;
- inset: 0;
- background: rgba(0,0,0,0.55);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 110;
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.55);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 110;
}
.edit-modal .edit-panel {
- background: #fffaf3;
- border: 1px solid #e3d4bd;
- border-radius: 12px;
- width: min(960px, 94vw);
- max-height: 92vh;
- padding: 16px;
- display: flex;
- flex-direction: column;
- gap: 12px;
- box-shadow: 0 20px 48px rgba(0,0,0,0.25);
+ background: #fffaf3;
+ border: 1px solid #e3d4bd;
+ border-radius: 12px;
+ width: min(960px, 94vw);
+ max-height: 92vh;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
+}
+.edit-modal .edit-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+}
+.edit-modal .edit-body {
+ overflow: auto;
+ max-height: 70vh;
}
-.edit-modal .edit-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-.edit-modal .edit-body { overflow: auto; max-height: 70vh; }
-.panel-header { display: flex; justify-content: space-between; align-items: center; }
+.panel-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
-.results-table { width: 100%; border-collapse: collapse; }
-.results-table th, .results-table td { padding: 10px; }
-.results-table tr { border-bottom: 1px solid #e3d4bd; }
-.results-table th { text-align: left; color: #7a6a53; font-size: 12px; letter-spacing: 0.3px; }
-.results-table .game-cell { display: flex; gap: 10px; align-items: center; min-width: 0; }
-.results-table .thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #e3d4bd; cursor: pointer; }
-.results-table .game-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
-.results-table .title-line { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.results-table .author-cell { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.results-table .muted.small { font-size: 12px; color: #7a6a53; }
-.thumb-open { background: #fffaf3; border: 1px solid #e3d4bd; color: #2c1c0d; border-radius: 6px; padding: 4px 8px; cursor: pointer; }
+.results-table {
+ width: 100%;
+ border-collapse: collapse;
+}
+.results-table th,
+.results-table td {
+ padding: 10px;
+}
+.results-table tr {
+ border-bottom: 1px solid #e3d4bd;
+}
+.results-table th {
+ text-align: left;
+ color: #7a6a53;
+ font-size: 12px;
+ letter-spacing: 0.3px;
+}
+.results-table .game-cell {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ min-width: 0;
+}
+.results-table .thumb {
+ width: 72px;
+ height: 48px;
+ object-fit: cover;
+ border-radius: 6px;
+ border: 1px solid #e3d4bd;
+ cursor: pointer;
+}
+.results-table .game-meta {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ flex: 1;
+ min-width: 0;
+}
+.results-table .title-line {
+ font-weight: 700;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.results-table .author-cell {
+ max-width: 160px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.results-table .muted.small {
+ font-size: 12px;
+ color: #7a6a53;
+}
+.thumb-open {
+ background: #fffaf3;
+ border: 1px solid #e3d4bd;
+ color: #2c1c0d;
+ border-radius: 6px;
+ padding: 4px 8px;
+ cursor: pointer;
+}