html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background-color: #111;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.bg-start { background-image: url('../images/bg01.jpg'); }
body.bg-highscores { background-image: url('../images/bg08.jpg'); }
body.bg-instruction { background-image: url('../images/bg09.jpg'); }
body.bg-info { background-image: url('../images/bg10.jpg'); }
body.bg-imprint { background-image: url('../images/bg11.jpg'); }
body.bg-privacy { background-image: url('../images/bg12.jpg'); }
body[data-screen="setup"] { background-image: url('../images/bg01.jpg'); }
body[data-screen="joining"] { background-image: url('../images/bg02.jpg'); }
body[data-screen="duration"] { background-image: url('../images/bg03.jpg'); }
body[data-screen="countdown"] { background-image: url('../images/bg04.jpg'); }
body[data-screen="running"] { background-image: url('../images/bg05.jpg'); }
body[data-screen="finished"] { background-image: url('../images/bg06.jpg'); }
body[data-screen="unavailable"] { background-image: url('../images/bg07.jpg'); }

body.controller-mode {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 100dvh;
  background-image: url('../images/controller/bg_controller_01.jpg');
}

.navbar-dark.bg-dark {
  backdrop-filter: blur(10px);
  background: rgba(10, 10, 10, .82) !important;
}

.navbar.fixed-top {
  top: 0;
  right: 0;
  left: 0;
  margin-top: 0 !important;
}

.navbar .nav-link.active,
.navbar .nav-link.show,
.navbar .nav-link[aria-current="page"] {
  color: #E412DE !important;
}

.navbar .nav-link.active::after {
  background-color: #E412DE;
}

.tapsprint-page-main {
  min-height: calc(100dvh - 130px);
}

.tapsprint-page-panel {
  max-height: 100%;
  min-height: 0;
  background-color: rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(2px);
}

.tapsprint-page-scroll {
  min-height: 0;
  overflow-y: auto;
}

.tapsprint-start-logo,
.tapsprint-start-content {
  width: 75vw;
  max-width: 75vw;
}

.tapsprint-start-logo {
  height: auto;
  display: block;
}

.tapsprint-start-content {
  max-width: min(75vw, 900px);
}

.tapsprint-start-content .btn {
  width: 100%;
}

.tapsprint-start-text {
  text-wrap: balance;
}

.screen {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.screen .card,
.screen .border.bg-light {
  background-color: rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(2px);
}

.slot { min-height: 64px; }
.counter { font-size: clamp(4rem, 18vw, 11rem); font-weight: 900; line-height: 1; }
.small-reset { font-size: .85rem; }
.qrbox { background: white; display: inline-block; padding: 18px; border-radius: 16px; }
.winner { font-size: clamp(1.8rem, 5vw, 4rem); font-weight: 800; }
.place2 { font-size: clamp(1.1rem, 3vw, 2rem); }
.player-result.mine { font-weight: 800; background: #fff3cd; border-radius: .5rem; }
.result-table { max-width: 720px; margin: 1.25rem auto 0; }
.controller-result { font-size: clamp(1.6rem, 6vw, 3.2rem); font-weight: 900; }
.pause-label { font-size: clamp(5rem, 22vw, 15rem); font-weight: 900; letter-spacing: .08em; line-height: 1; }
.controller-head { font-size: .9rem; color: #666; }
.controller-mode #qrWrap { display: none !important; }
.controller-mode .controller-head code { color: #111; background: rgba(255, 255, 255, .6); padding: .15rem .35rem; border-radius: .35rem; }

body.controller-mode:not(.play-mode) {
  overflow-x: hidden;
}

body.controller-mode:not(.play-mode) .container.screen {
  min-height: 100dvh;
  max-height: 100dvh;
  max-width: min(760px, 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(16px, 4vw, 40px)) clamp(16px, 5vw, 48px) calc(env(safe-area-inset-bottom, 0px) + clamp(16px, 4vw, 40px)) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.controller-mode:not(.play-mode) header { margin-bottom: clamp(18px, 3vw, 34px) !important; }
body.controller-mode:not(.play-mode) main#app { width: 100%; }
body.controller-mode:not(.play-mode) .card,
body.controller-mode:not(.play-mode) .border.bg-light {
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 28px;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28) !important;
}
body.controller-mode:not(.play-mode) .card-body { padding: clamp(24px, 5vw, 48px); }
body.controller-mode:not(.play-mode) .slot,
body.controller-mode:not(.play-mode) .btn-lg { min-height: 58px; font-size: clamp(1.05rem, 2.8vw, 1.35rem); }
body.controller-mode:not(.play-mode) .form-control,
body.controller-mode:not(.play-mode) .form-select { min-height: 54px; font-size: clamp(1rem, 2.3vw, 1.2rem); }
body.controller-mode:not(.play-mode) footer { margin-top: clamp(16px, 3vw, 34px) !important; }

body.play-mode {
  padding: 0 !important;
  background: #050505;
  color: #fff;
  overflow: hidden !important;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body.play-mode header,
body.play-mode footer,
body.play-mode .navbar-dark.bg-dark { display: none !important; }

body.play-mode .container.screen {
  max-width: none;
  width: 100vw;
  height: 100dvh;
  padding: 0 !important;
  margin: 0 !important;
}

.play-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: rgba(5, 5, 5, .68);
  color: #fff;
  cursor: pointer;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.play-hint { position: absolute; top: 1rem; left: 1rem; right: 1rem; font-size: clamp(.95rem, 2vw, 1.25rem); opacity: .65; }
.start-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(5rem, 22vw, 15rem); font-weight: 900; letter-spacing: .03em; pointer-events: none; opacity: 0; animation: startFade .55s ease-out; }
@keyframes startFade { 0% { opacity: 1; transform: scale(.94); } 80% { opacity: .9; } 100% { opacity: 0; transform: scale(1.05); } }
.tap-count { font-size: clamp(5rem, 22vw, 15rem); font-weight: 900; line-height: 1; }
.tap-meta { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; font-size: clamp(1rem, 2.4vw, 1.6rem); opacity: .75; }
.flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 9999; }
.flash.on { animation: tapFlash .11s ease-out; }
@keyframes tapFlash { 0% { opacity: .62; } 100% { opacity: 0; } }

@media (min-width: 992px) {
  .tapsprint-start-logo,
  .tapsprint-start-content {
    width: 50vw;
    max-width: 50vw;
  }
}

/* Admin/statistics ratio markers */
.ratio-low { background-color: #f8d7da !important; color: #842029 !important; font-weight: 600; }
.ratio-neutral { background-color: #fff3cd !important; color: #664d03 !important; font-weight: 600; }
.ratio-high { background-color: #d1e7dd !important; color: #0f5132 !important; font-weight: 600; }

/* F101H admin/public structure */
#content {
  background: #ffffff;
  margin-top: 40px;
  padding: 20px 40px 40px 40px;
  height: calc(100vh - 130px);
  overflow-y: auto;
}

.page-header {
  border-bottom: 1px solid #dddddd;
  margin-bottom: 30px !important;
  text-align: center;
}

body.admin-mode,
body.admin-login-mode {
  background-image: url('../images/bg01.jpg') !important;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.admin-mode {
  padding-bottom: 0;
}

body.admin-login-mode {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 100dvh;
}

.admin-main {
  min-height: 100dvh;
}

.admin-login-card {
  width: min(92vw, 380px);
  border-radius: 1rem;
}

.admin-login-logo {
  width: 100%;
  max-width: 220px;
  height: auto;
}

.ts-columns-menu {
  max-height: 70dvh;
  overflow-y: auto;
}

/* F101I admin data layout: Bootstrap-compatible tabs and scoped data table helpers. */
body.admin-mode .nav-tabs {
  border-bottom: 1px solid var(--bs-border-color);
}

body.admin-mode .nav-tabs .nav-link {
  margin-bottom: -1px;
  background: transparent;
  color: #212529;
  border: 1px solid transparent;
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
}

body.admin-mode .nav-tabs .nav-link:hover,
body.admin-mode .nav-tabs .nav-link:focus {
  border-color: var(--bs-secondary-border-subtle, #e9ecef) var(--bs-secondary-border-subtle, #e9ecef) var(--bs-border-color);
  color: #E412DE;
}

body.admin-mode .nav-tabs .nav-link.active,
body.admin-mode .nav-tabs .nav-item.show .nav-link {
  color: #E412DE !important;
  background-color: #ffffff !important;
  border-color: var(--bs-border-color) var(--bs-border-color) #ffffff;
  font-weight: 600;
}

body.admin-mode .admin-data-table {
  max-width: 100%;
}

body.admin-mode .admin-data-table .bootstrap-table,
body.admin-mode .admin-data-table .fixed-table-container {
  max-width: 100%;
}