/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

* {
    margin: 0;
    padding: auto;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@font-face {
    font-family: 'AmpleSoft';
    src: url('fonts/AmpleSoft.ttf') format('truetype');
    font-weight: thin;
    font-style: normal;
}

body {
    font-family: AmpleSoft;
    text-align: center;
    background-color: #FFEEEE;
    color: #5a5a5a;
    padding: 20px;
}

h1 {
    font-size: 38px;
    font-weight: bold;
    color: #ff9f43;
    text-transform: uppercase;
    margin-bottom: 10px;
	padding-top: 2.5vw;
	font-family: AmpleSoft;
}

.points {
    width: 80vw;
    max-width: 800px;
    background: #fff3cd;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    margin: 0 auto;
    display: block;
}


/* Bố cục danh sách game */
.game-list {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); */
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 15px;
    max-width: 900px;
    margin: 20px auto;
    padding: 10px;
}

.game-item {
    background: #fff8e7;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 15vw;
    width: 15vw;
    cursor: pointer;
}

.game-item:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.game-item img {
    max-width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
	margin-top: -30px;
}

.game-item .game-name {
    font-size: 16px;
    font-weight: bold;
    color: #5a5a5a;
	margin-bottom: -30px;
}

.game-item.big-embed { width: 30vw; height: 30vw; margin: auto; margin-top: -10px; margin-bottom: -10px; padding: 0; }
.game-item.big-embed iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: 1vw;}
.game-item.big-embed:hover {
  transform: none;
  box-shadow: none;
}

.game-item.scored{
	position:relative;
	border-radius:20px;
	box-shadow:0 0 0 1px #ea4236 inset,0 5px 10px rgba(234,66,54,.25);
}
.game-item.scored .game-name{
	color:#ea4236;
}
.game-item.scored::after{
	content:"TÍNH ĐIỂM";
	position:absolute;
	top:10px;
	left:10px;
	background:#ea4236;
	color:#fff;
	font-weight:700;
	font-size:12px;
	line-height:1;
	padding:6px 10px;
	border-radius:999px;
	letter-spacing:.3px;
	white-space:nowrap;
}

.page-title {
	margin-top: 2.5vw;
	font-size: 24px;
	font-weight: bold;
	color: #d35400;
}

.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: none;
}

.game-page {
  display: none;
  width: 100%;
  justify-content: center;
}

.game-page.active {
  display: flex;
}

.nav-dots {
  display: flex;
  justify-content: center;
  margin-top: 2vw;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.dot.active {
  background-color: #ff9f43;
  transform: scale(1.4);
}

.carousel-wrapper {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.nav-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.11);
	border: none;
	cursor: pointer;
	padding: 0;
	border-radius: 50%;
	width: 2.5vw;
	height: 2.5vw;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.nav-button img {
	width: 100%;
	height: auto;
}

.next img {
	transform: scaleX(-1);
}

.prev { left: 25vw; }
.next { right: 25vw; }

.game-list.grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  justify-content: center;
  align-items: center;
  max-width: 80%;
  margin: 0 auto;
}


/* Login Modal */
#login-modal {
    background: #fff8e7;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 400px;
    margin: 40px auto;
}

#login-modal h2 {
    color: #ff9f43;
    font-size: 24px;
    margin-bottom: 15px;
}

#login-modal input {
    width: 90%;
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #ffcc80;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
}

#play-without-login {
	font-family: AmpleSoft;
    background: #6c757d;
    color: white;
    font-size: 16px;
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    width: 100%;
    margin-top: 10px;
}

#play-without-login:hover {
    background: #495057;
}

#start-button {
	font-family: AmpleSoft;
    background: #ff9f43;
    color: white;
    font-size: 18px;
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    width: 100%;
    margin-top: 10px;
}

#start-button:hover {
    background: #ff7043;
}

.points {
    font-size: 20px;
    color: #d35400;
    font-weight: bold;
    margin-bottom: 15px;
    background: #ffefc1;
    padding: 10px;
    border-radius: 8px;
    display: inline-block;
}

.set-head{display:flex;align-items:center;gap:14px;padding:16px 18px 0}
.set-tab{padding:12px 16px;font-weight:700;border-bottom:3px solid transparent;cursor:pointer}
.set-tab.active{color:#6c3bff;border-color:#6c3bff}
.set-body{padding:14px 18px 20px}
.tab-pane{display:block}
.tab-pane.hidden{display:none}

.pet-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px dashed #eee}

.switch{position:relative;display:inline-block;width:58px;height:32px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;border-radius:32px;background:#d9d9d9;transition:.2s}
.slider:before{content:"";position:absolute;height:24px;width:24px;left:4px;top:4px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked+.slider{background:#14a38b}
.switch input:checked+.slider:before{transform:translateX(26px)}

#stage{
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  width: auto !important;
  height: auto !important;
  pointer-events: none;
  z-index: 2147483646;
}

.pet{ position: fixed; pointer-events: auto; }

/* Scoreboard Buttons */
.scoreboard-container {
    margin: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
	font-family: AmpleSoft;
}

.scoreboard-container button {
    background: #ff9f43;
    color: white;
    font-size: 16px;
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.scoreboard-container button:hover {background: #ff7043;}

#logout-button {
    background-color: #ff4d4d;
    color: white;
    font-size: 16px;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    margin: 10px auto;
    transition: background-color 0.3s ease;
}

#logout-button:hover {background-color: #e60000;}


table {
    border-collapse: collapse;
    margin-top: 10px;
    width: 70%;
    margin: 1vw auto;
    background: #ffeeee;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

table, th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

th {
    background-color: #f4b400;
    color: white;
}

.leaderboard-container {
    width: 70%;
    margin: 20px auto;
    text-align: center;
}

/* Thanh tab */
.leaderboard-tabs {
    display: flex;
    justify-content: center;
    background: #f8f8f8;
    border-radius: 30px;
    padding: 5px;
    width: fit-content;
    margin: 0 auto 15px;
}

.tab-group-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px auto;
}

.tab-group {
    background: #f8f8f8;
    padding: 6px 10px;
    border-radius: 25px;
    display: flex;
    overflow: hidden;
    width: fit-content;
    max-width: 90vw;
}

.tab-page {display: none;gap: 6px;}

.tab-page.active {display: flex;}

.tab-btn {
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    transition: background 0.3s, color 0.3s;
}

.tab-btn.active {background: #3a2e25;color: #fff;
}

.tab-group-btn {
    background: none;
    border: none;
    font-size: 22px;
    color: #555;
    cursor: pointer;
    padding: 5px 10px;
}


#character-callout{
	position: fixed;
	right: 3vw;
	bottom: 4vh;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	z-index: 2147483647;
	margin: 0;
	padding: 0;
}

#callout-bubble {
    background: #ffffff;
    padding: 10px 15px;
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 250px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    border: 1px solid #7ab064;
    position: relative;
    transition: opacity 0.3s ease-in-out;
}

#callout-avatar {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 50%;
    border: 1px solid #7ab064;
    cursor: pointer;
}

#settings-btn-game {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
	background-color: #FFEEEE;
	padding-bottom: 1.5vw;
}

#settings-icon-game {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Nền overlay khi mở modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Làm mờ nền */
    backdrop-filter: blur(5px); /* Hiệu ứng mờ */
    z-index: 999;
}

/* Cấu hình modal chính */
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    min-width: 350px;
    text-align: center;
}

/* Nút đóng modal */
#close-settings {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #ff4d4d;
    transition: 0.2s;
}

#close-settings:hover {color: #d63031;}

/* 🌟 Canh chỉnh dropdown */
#character-select {
    width: 50%;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.green {
	font-family: AmpleSoft;
    background: #ff9f43;
    color: white;
    font-size: 14px;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    width: 50%;
	margin: 0 auto;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.green:hover {background: #ff7043;}

#quote-message {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    padding-top: 15px;
	margin: 0 auto;
}

#custom-quote-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    width: 100%;
}

#custom-quote {
    width: 80%;
    padding: 6px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}

#custom-quote:focus {outline: none;border-color: #4CAF50;}

#custom-quote-section button {margin-top: 10px;}

#custom-quote-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
}

#custom-quote-container input[type="text"].custom-quote {
    width: 80%;
    max-width: 300px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 15px;
    background: #ffffff;
    color: #333;
    text-align: center;
    transition: border-color 0.2s ease-in-out;
}

#custom-quote-container input[type="text"].custom-quote:focus {
    border-color: #888;
    outline: none;
}

.head-banner{width:100%;max-width:100vw;margin:8px auto 12px;border-radius:12px;overflow:hidden}
.marquee-bar{display:flex;flex-direction:column;gap:6px;border:1px solid transparent;border-radius:12px}
.marquee-green{background:#eaf8ee;border-color:#a8e0b5}
.marquee-yellow{background:#fff7d6;border-color:#ffdc8b}

.marquee-label{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 12px 0;font-weight:700;color:#0f5132}
#dayPicker{
	padding:4px 12px;
	border-radius:999px;
	border:1px solid #a8e0b5;
	background:#fff;
	font-weight:600;
	color:#0f5132;
	cursor:pointer;
}

#dayTag:empty { display:none; }
.head-marquee{overflow:hidden;padding:8px 12px}
.marquee-track{display:inline-flex;gap:40px;white-space:nowrap;align-items:center;will-change:transform;animation:marq 36s linear infinite}
#headMarquee .marquee-track{animation-duration:70s}
#headMarquee2 .marquee-track{animation-duration:50s}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

#headMarquee .marquee-track{color:#7a4b00;font-size:14px;font-weight:600}
#headMarquee2 .marquee-track{color:#0f5132;font-size:16px;font-weight:600}
#headMarquee2 small{font-size:12px;opacity:.85}

.head-marquee:hover .marquee-track{animation-play-state:paused;cursor:pointer}

.marquee-label select {
	padding: 4px 8px;
	border-radius: 6px;
	border: 1px solid #a8e0b5;
	background: #fff;
	font-weight: 600;
	color: #0f5132;
}

#project-info-toggle{background:#ff9f43;color:#fff;font-weight:700;border:none;border-radius:10px;padding:10px 15px;cursor:pointer}
#project-info-toggle.active{background:#3a2e25}

#sheet-viewer{max-width:1100px;margin:16px auto;padding: 0 10px 10px;background:#fff5f5;border-radius:12px}
.sv-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:10px;padding-top:10px}
.sv-tab{background:#ff9f43;color:#fff;border:none;border-radius:999px;padding:8px 12px;font-weight:700;cursor:pointer}
.sv-tab.active{background:#3a2e25}
.sv-filters{display:flex;gap:10px;justify-content:center;align-items:center;margin:8px 0;flex-wrap:wrap}
.sv-input{min-width:280px;padding:8px 12px;border:1px solid #f0dede;border-radius:999px}
.sv-quick{display:flex;gap:6px}
.sv-quick button{border:1px solid #f0dede;background:#fff;border-radius:999px;padding:6px 10px;cursor:pointer}
.sv-quick button.active{background:#ffe9d6;border-color:#ffcf99}
#svContent{overflow:auto;max-height:65vh;border-radius:10px;background:#fff}
#svContent table{margin-top:0;border-spacing:0;width:100%;font-size:14px}
#svContent th,#svContent td{border-bottom:1px solid #f3e1e1;padding:8px 10px;text-align:left;vertical-align:top;word-break:break-word}
#svContent th{position:sticky;top:0;background:#fff7e0;color:#7a4b00;z-index:1}
#svContent tbody tr:nth-child(odd){background:#fffdf8}
#svContent tbody tr:hover{background:#fff3e0}

#svContent table{table-layout:fixed}

:root{
  --w-tag:12%;
  --w-theloai:10%;
  --w-bun:32%;
  --w-ca:8%;
  --w-nick:14%;
  --w-kchu:8%;
  --w-muc:10%;
  --w-link:6%;
}

#svContent th:nth-child(1),#svContent td:nth-child(1){width:var(--w-tag)}
#svContent th:nth-child(2),#svContent td:nth-child(2){width:var(--w-theloai)}
#svContent th:nth-child(3),#svContent td:nth-child(3){width:var(--w-bun);white-space:normal;word-break:break-word;line-height:1.4}
#svContent th:nth-child(4),#svContent td:nth-child(4){width:var(--w-ca);text-align:center}
#svContent th:nth-child(5),#svContent td:nth-child(5){width:var(--w-nick)}
#svContent th:nth-child(6),#svContent td:nth-child(6){width:var(--w-kchu);text-align:center}
#svContent th:nth-child(7),#svContent td:nth-child(7){width:var(--w-muc);text-align:center}
#svContent th:nth-child(8),#svContent td:nth-child(8){width:var(--w-link);text-align:center}

#svContent th,#svContent td{vertical-align:middle}

:root{--tl-cell-w:140px;--tl-rowhead-w:116px;--tl-gap:6px}
.tl-wrap{display:grid;grid-template-columns:1fr minmax(56px,320px);gap:12px;align-items:start}
.tl-wrap.is-collapsed{grid-template-columns:1fr 56px}
.tl-board{overflow:auto}
.tl-sidebar{position:sticky;top:12px;background:#fff7f2;border:2px solid #f0d8c3;border-radius:12px;padding:12px}

.tl-table{position:relative;display:grid;grid-template-columns:var(--tl-rowhead-w) repeat(var(--n,7),minmax(var(--tl-cell-w),1fr));width:max-content;align-items:stretch}

.tl-th{background:#fdebdc;border:1px solid #472b1d;border-radius:0;padding:6px 8px;font-weight:700;color:#6b4e3a;display:flex;flex-direction:column;gap:2px}

.tl-cell{min-height:50px;display:flex;flex-direction:column;background:#fff;border:1px solid #7a5740;justify-content:center;padding:6px 8px;border-radius:0}

.tl-item{background:#fffdf8;border:1px solid #472b1d;padding:5px 6px;font-size:13px;line-height:1.35;word-break:break-word;color:#333;box-shadow:0 1px 2px rgba(0,0,0,0.05);width:195px;white-space:normal;overflow-wrap:anywhere;text-align:center;align-content:center}

.tl-cell.tl-sec-312{background:#eef7eb}
.tl-cell.tl-sec-1218{background:#cbeabd}
.tl-cell.tl-sec-183{background:#b8dea6}

.tl-rowhead{background:#fff7f2;border:1px solid #472b1d;border-radius:0;padding:6px 8px;font-weight:700;color:#6b4e3a;position:sticky;left:0;z-index:1;display:flex;align-items:center}
.tl-rowhead.sec-0{background:#d9ebd3}
.tl-rowhead.sec-1{background:#b5d6a7}
.tl-rowhead.sec-2{background:#94c47e}

.tl-item.red{background:#f5cece!important;border:1px solid #e09a9a}
.tl-item.yellow{background:#ffe699!important;border:1px solid #e2c262}

.tl-legend{display:grid;gap:10px;background:#fff;border:1px solid #ead8c7;border-radius:12px;padding:12px}
.tl-legend .row{display:flex;align-items:center;gap:10px;font-weight:700;color:#2a2a2a}
.tl-legend .swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.12)}
.tl-legend .sw-red{background:#f5cece}
.tl-legend .sw-yellow{background:#ffe699}

.tl-sidebar .tl-row{display:flex;gap:10px;margin:10px 0}
.tl-sidebar .tl-field{display:grid;gap:6px;margin:10px 0}
.tl-sidebar button{display:flex;align-items:center;justify-content:center;line-height:40px;border-radius:12px}
.tl-sidebar select,.tl-sidebar input[type="date"]{height:40px;padding:0 10px;border-radius:10px;border:1px solid #e7d4c6}

.tl-ol{pointer-events:none;border-radius:6px}
.tl-ol-today{border:3px solid #ff3b30;background:transparent;z-index:3}
.tl-ol-past{background:rgba(0,0,0,.10);z-index:2}

.tl-items{
  display:grid;
  flex-grow:1;
  gap:4px;
  align-content:start;
}

.board-embed{
  max-width:1100px;
  margin:16px auto;
  background:#fff5f5;
  border-radius:12px;
  padding:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.05)
}
.board-embed .frame{
  height:70vh;
  overflow:auto;
  border:1px solid #f0dede;
  border-radius:10px;
  background:#fff
}
.board-embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block
}

.board-embed{
  margin-top:12px;
  background:#fff;
  border:1px solid #ead8c7;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.board-embed .frame{
  position:relative;
  width:100%;
  height:min(72vh, 720px);
  min-height:420px;
  overflow:auto;
}
.board-embed iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

.tl-bar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-bottom:8px;
}
.tl-bar .tl-today{
	height:40px;
	padding:0 14px;
	border-radius:12px;
}
#tlToggle{
	width:36px;
	height:36px;
	border:1px solid #e7d4c6;
	border-radius:10px;
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
}

.tl-sidebar.collapsed{
	width:56px;
	padding:10px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	gap:0;
}
.tl-sidebar.collapsed .tl-bar{
	width:100%;
	justify-content:center;
	margin-bottom:0;
}
.tl-sidebar.collapsed .tl-today{display:none}
.tl-sidebar.collapsed > :not(.tl-bar){display:none}

@media (max-width:750px){
	#sheet-viewer{
		margin:10px auto;
		padding:8px;
		border-radius:12px;
	}
	#svContent{
		overflow-x:auto;
		overflow-y:auto;
		max-height:64vh;
		border-radius:10px;
	}
	#svContent table{
		min-width:980px;
		font-size:13px;
		table-layout:auto;
	}
	#svContent th,
	#svContent td{
		padding:8px 10px;
		line-height:1.4;
		white-space:normal;
		word-break:break-word;
		vertical-align:middle;
	}
	#svContent th{top:0}
	#svContent th:nth-child(n),
	#svContent td:nth-child(n){display:table-cell}

	:root{
		--w-tag:18%;
		--w-theloai:7%;
		--w-bun:44%;
		--w-ca:10%;
		--w-nick:0%;
		--w-kchu:0%;
		--w-muc:7%;
		--w-link:5%;
	}

	#svContent th:nth-child(5),
	#svContent td:nth-child(5),
	#svContent th:nth-child(6),
	#svContent td:nth-child(6){
		display:none;
	}

	#svContent th:nth-child(7),
	#svContent th:nth-child(8),
	#svContent td:nth-child(8){
		white-space:nowrap;
	}
	
	.sv-tabs{
		gap:6px;
		margin-bottom:8px;
	}
	.sv-tab{
		padding:7px 10px;
		font-size:14px;
		border-radius:999px;
	}
	.sv-filters{
		flex-direction:column;
		align-items:stretch;
		gap:8px;
		margin:8px 0;
	}
	.sv-input{
		min-width:unset;
		width:100%;
		padding:10px 12px;
		border-radius:999px;
	}
	.sv-quick{
		justify-content:center;
		flex-wrap:wrap;
	}
	.sv-quick button{
		padding:6px 10px;
		font-size:13px;
	}

	.tl-wrap{
		grid-template-columns:1fr;
		gap:10px;
	}
	.tl-board{
		order:1;
		max-width:100%;
		overflow:auto;
	}
	.tl-sidebar{
		order:2;
		position:static;
		width:auto;
		padding:10px;
		display:flex;
		flex-wrap:wrap;
		gap:10px;
		align-items:center;
		justify-content:flex-start;
		border-radius:12px;
	}
	.tl-sidebar.collapsed{
		width:auto;
	}
	#tlToggle{
		position:static;
	}
	.tl-sidebar .tl-row{
		margin:0;
		gap:10px;
	}
	.tl-sidebar .tl-field{
		margin:0;
		display:grid;
		gap:6px;
		min-width:210px;
		flex:1 1 210px;
	}
	.tl-sidebar button{
		height:38px;
		line-height:38px;
		padding:0 12px;
		border-radius:10px;
	}
	.tl-sidebar select{
		height:38px;
		border-radius:10px;
	}
	.tl-legend{
		flex:1 1 160px;
		margin-left:auto;
	}
	.tl-legend .row{
		gap:8px;
	}

	.tl-table{
		grid-template-columns:var(--tl-rowhead-w) repeat(var(--n,7),minmax(120px,1fr));
	}
	.tl-th{
		padding:8px 10px;
	}
	.tl-rowhead{
		padding:8px 10px;
	}
	.tl-cell{
		padding:6px 8px;
		min-height:44px;
	}
	.tl-items{
		gap:6px;
	}
	.tl-item{
		width:auto;
		font-size:12px;
		padding:6px 8px;
		text-align:center;
	}

	.board-embed{
		margin:10px auto;
		border-radius:12px;
	}
	.board-embed .frame{
		height:min(65vh,600px);
		min-height:360px;
		border-radius:10px;
	}
}


@media (max-width: 750px) {
	h1 {
		padding-top: 5vw;
	}
	.game-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(10vw, 1fr));
		gap: 2px;
		max-width: 90%;
		margin: 10px auto;
		padding: 5px;
	}
	.game-item img {
		width: 100%;
		max-height: 80%;
		object-fit: cover;
		border-radius: 5px;
		margin-bottom: 5px;
		margin-top: -30px;
	}
	.game-item {
		background: #fff8e7;
		border-radius: 15px;
		padding: 15px;
		text-align: center;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		cursor: pointer;
	}
	.game-item.big-embed { width: 75vw; height: 40vh; margin: auto; margin-top: -10px; margin-bottom: -10px; padding: 0; }
    #settings-btn-game {
        width: 10vw;
        height: 10vw;
        top: 10px;
        right: 3vw;
    }
	.nav-button {
		width: 20px;
		height: 20px;
		padding: 0;
	}
	.prev { left: 2vw; }
	.next { right: 2vw; }
}