:root {
  --main: #00ff9d;
  --accent: #7b61ff;
  --bg: #05080b;
  --panel: rgba(9, 15, 20, .94);
  --panel-2: rgba(14, 24, 31, .94);
  --text: #e8fff6;
  --muted: #8da39b;
  --danger: #ff4d6d;
  --line: color-mix(in srgb, var(--main) 32%, transparent);
  --shadow: 0 0 28px color-mix(in srgb, var(--main) 12%, transparent);
  --chat-text-scale: 1;
  --chat-name-scale: 1;
  --chat-meta-scale: 1;
  --header-height: 68px;
  --bottom-height: 70px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--text);
  background: radial-gradient(circle at top, #0b1820, var(--bg) 48%);
  font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 24px 24px;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.danger { color: var(--danger) !important; }

.terminal-panel {
  background: linear-gradient(145deg, rgba(8,13,18,.97), rgba(13,25,31,.93));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.02);
}

.tab-btn, .nav-btn, .ghost, .primary, .icon-btn, .cu-counter, .drawer-group-toggle, .bottom-nav-btn, .control-key {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(255,255,255,.025);
  border-radius: 9px;
  transition: transform .14s ease, filter .14s ease, border-color .14s ease, background .14s ease;
}
.tab-btn, .nav-btn, .ghost, .primary { padding: 10px 14px; }
.primary, .tab-btn.active, .nav-btn.active, .bottom-nav-btn.active {
  color: var(--main);
  border-color: var(--main);
  background: color-mix(in srgb, var(--main) 14%, #07100d);
  box-shadow: 0 0 16px color-mix(in srgb, var(--main) 18%, transparent);
}
.primary:hover, .tab-btn:hover, .nav-btn:hover, .ghost:hover, .icon-btn:hover, .bottom-nav-btn:hover { filter: brightness(1.15); }

label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
input, textarea, select {
  width: 100%;
  color: var(--text);
  background: #05090d;
  border: 1px solid color-mix(in srgb, var(--main) 25%, #23303a);
  border-radius: 8px;
  padding: 12px;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 10%, transparent); }
textarea { resize: vertical; min-height: 62px; }

/* Authentication */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; }
.scanlines { position: fixed; inset: 0; pointer-events: none; opacity: .1; background: repeating-linear-gradient(to bottom, transparent 0 3px, #000 4px); }
.auth-card { width: min(540px, 100%); padding: 28px; position: relative; overflow: hidden; }
.auth-card::after { content: "ACCESS_NODE_01"; position: absolute; right: 18px; top: 12px; color: var(--muted); font-size: 11px; }
.brand-code { color: var(--main); font-size: 13px; }
.auth-card h1 { margin: 12px 0 5px; font-size: clamp(30px, 8vw, 54px); letter-spacing: 2px; text-shadow: 0 0 18px color-mix(in srgb, var(--main) 45%, transparent); }
.auth-tabs, .game-tabs, .board-tabs, .profile-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 14px; }
.auth-form, .settings-form { display: grid; gap: 14px; }

/* App shell / fixed navigation */
.app-shell { min-height: 100dvh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  min-height: var(--header-height);
  height: auto;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  background: rgba(5,8,11,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 30px rgba(0,0,0,.34);
}
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; font-size: 23px; padding: 0; }
.top-identity { min-width: 0; overflow: hidden; }
.top-profile { min-width: 0; overflow: hidden; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 9px; align-items: center; }
.top-profile .identity { min-width: 0; overflow: hidden; }
.top-profile .identity-name { min-width: 0; white-space: nowrap; overflow: hidden; line-height: 1.05; }
.top-profile .name-effect { max-width: min(42vw, 360px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 1.1; transform-origin: left center; }
.cu-counter { height: 42px; padding: 0 11px; display: flex; align-items: center; gap: 5px; color: var(--muted); }
.cu-counter strong { color: var(--main); }

.main-area { width: min(1500px, 100%); min-height: calc(100dvh - var(--header-height)); margin: 0 auto; padding: 14px 14px calc(var(--bottom-height) + env(safe-area-inset-bottom) + 20px); }
.view { display: none; min-width: 0; }
.active-view { display: block; }
.view-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin: 5px 2px 14px; }
.view-header h2 { margin: 0; color: var(--main); }
.view-header p { margin: 5px 0 0; color: var(--muted); }
.level-chip { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--accent); white-space: nowrap; }

.sidebar {
  position: fixed;
  z-index: 90;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(340px, 88vw);
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: rgba(5,8,11,.985);
  border-right: 1px solid var(--line);
  box-shadow: 20px 0 60px rgba(0,0,0,.55);
  transform: translateX(-105%);
  transition: transform .24s ease;
  display: flex;
  flex-direction: column;
}
body.drawer-open .sidebar { transform: translateX(0); }
.drawer-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.64); backdrop-filter: blur(3px); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.brand-small { color: var(--main); letter-spacing: 2px; }
.drawer-nav { display: grid; gap: 8px; margin-top: 16px; overflow-y: auto; }
.drawer-group-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; font-weight: 800; text-align: left; }
.drawer-group-toggle .chevron { transition: transform .18s ease; }
.drawer-group-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.drawer-submenu { display: grid; gap: 7px; padding: 0 0 6px 14px; }
.drawer-submenu.collapsed { display: none; }
.game-nav-btn { padding-left: 18px; }
.game-view-header { position: relative; z-index: 1; }
.nav-btn { width: 100%; text-align: left; }
.drawer-main { padding: 13px 14px; }
.drawer-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.drawer-footer button { width: 100%; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; float: right; }

.bottom-nav {
  position: fixed;
  z-index: 65;
  inset: auto 0 0 0;
  min-height: var(--bottom-height);
  padding: 7px max(8px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  background: rgba(5,8,11,.97);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.bottom-nav-btn { min-width: 0; padding: 6px 3px; display: grid; place-items: center; gap: 1px; }
.bottom-nav-btn span { font-size: 20px; line-height: 1; }
.bottom-nav-btn small { font-size: 9px; letter-spacing: .5px; }

/* Identities / effects */
.avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: #0b1217; }
.avatar.large { width: 96px; height: 96px; }
.avatar-fallback { display: grid; place-items: center; font-weight: 800; color: var(--main); }
.identity { min-width: 0; }
.identity-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.compact-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.username { color: var(--muted); font-size: 11px; }
.role-badge { flex: 0 0 auto; font-size: 9px; padding: 2px 5px; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); text-transform: uppercase; }
.online-text { color: var(--main); font-size: 10px; text-shadow: 0 0 8px var(--main); }
.name-effect { display: inline-block; font-weight: 800; color: var(--main); }
.effect-neon { color: var(--effect-color, var(--main)); text-shadow: 0 0 5px var(--effect-color, var(--main)), 0 0 14px var(--effect-color, var(--main)); }
.effect-8bit { font-family: "Courier New", monospace; letter-spacing: 1px; text-shadow: 2px 0 0 var(--accent); image-rendering: pixelated; }
.effect-pulse { color: var(--effect-color, var(--main)); animation: pulse-name 1.7s ease-in-out infinite; }
.effect-wave span { display: inline-block; animation: wave-name 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * .07s); color: color-mix(in srgb, var(--main) 70%, var(--accent)); }
.effect-zoom { animation: zoom-name 2.1s ease-in-out infinite; transform-origin: left center; }
.effect-glitch { color: var(--effect-color, var(--main)); position: relative; text-shadow: 2px 0 var(--accent), -2px 0 #ff2e88; animation: glitch-name 1.2s steps(2,end) infinite; }
.effect-rainbow { background: linear-gradient(90deg, #ff005d, #ffbd00, #00ff9d, #00b7ff, #9d4edd, #ff005d); background-size: 300% 100%; color: transparent; -webkit-background-clip: text; background-clip: text; animation: rainbow-name var(--rainbow-speed, 12s) linear infinite; }
.animations-off .name-effect, .animations-off .name-effect span { animation: none !important; }
@keyframes pulse-name { 0%,100% { opacity: .55; filter: brightness(.8); } 50% { opacity: 1; filter: brightness(1.5); text-shadow: 0 0 10px currentColor; } }
@keyframes wave-name { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes zoom-name { 0%,100% { transform: scale(.88); } 50% { transform: scale(1.08); } }
@keyframes glitch-name { 0%,90%,100% { transform: translate(0); } 92% { transform: translate(-2px,1px); } 94% { transform: translate(3px,-1px); } 96% { transform: translate(-1px,2px); } 98% { transform: translate(1px,-2px); } }
@keyframes rainbow-name { from { background-position: 0 0; } to { background-position: 300% 0; } }

/* Chat */
.messages { height: calc(100vh - 265px); min-height: 420px; padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.message { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; padding: 10px; border: 1px solid transparent; border-radius: 10px; }
.message:hover { background: rgba(255,255,255,.025); border-color: var(--line); }
.message-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: calc(1rem * var(--chat-meta-scale)); }
.message-meta .name-effect { font-size: calc(1rem * var(--chat-name-scale)); }
.message-meta time, .message-meta .username { color: var(--muted); font-size: calc(11px * var(--chat-meta-scale)); }
.message-body { margin-top: 5px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; font-size: calc(1rem * var(--chat-text-scale)); }
.message-actions { margin-top: 7px; display: flex; gap: 10px; opacity: 0; }
.message:hover .message-actions { opacity: 1; }
.message-actions button { border: 0; background: transparent; color: var(--muted); padding: 2px 0; font-size: 11px; }
.mention { color: var(--accent); font-weight: 800; }
.mention-me { padding: 1px 3px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 24%, transparent); }
.deleted-message { color: var(--muted); font-style: italic; }
.composer { margin-top: 12px; padding: 10px; display: grid; gap: 9px; }
.composer textarea { min-height: 54px; max-height: 170px; }
.composer-tools { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.media-picker { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--accent); cursor: pointer; white-space: nowrap; }
.media-picker:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.media-picker input, .file-action input { display: none; }
.media-status { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.message-attachment { margin-top: 9px; display: grid; gap: 6px; max-width: 620px; }
.message-attachment img, .message-attachment video { display: block; max-width: min(100%,560px); max-height: 430px; border-radius: 10px; border: 1px solid var(--line); object-fit: contain; background: #020405; }
.message-attachment audio { width: min(100%,520px); }
.message-attachment a { color: var(--accent); font-size: 11px; overflow-wrap: anywhere; }

.private-layout { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 12px; }
.search-panel { padding: 12px; min-height: 600px; }
.search-results { margin-top: 12px; display: grid; gap: 8px; }
.search-user { padding: 10px; border: 1px solid var(--line); border-radius: 8px; display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; }
.search-user:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.section-label { margin: 14px 0 6px; font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.conversation-last { color: var(--muted); font-size: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 210px; margin-top: 4px; }
.private-chat { min-width: 0; padding: 12px; }
.private-chat .messages { height: calc(100vh - 330px); min-height: 470px; padding: 4px; }
.private-header { min-height: 50px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 4px 4px 10px; }
.private-person { display: flex; align-items: center; gap: 9px; min-width: 0; flex-wrap: wrap; }

.channel-layout { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 12px; }
.channel-sidebar, .channel-chat { min-width: 0; padding: 12px; }
.channel-create { display: grid; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.channel-create h3, .channel-list-head h3 { margin: 0; font-size: 12px; color: var(--main); }
.channel-list-head { margin: 14px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.channel-list { display: grid; gap: 8px; max-height: calc(100vh - 510px); min-height: 210px; overflow-y: auto; }
.channel-card { width: 100%; display: grid; gap: 4px; text-align: left; padding: 11px; color: var(--text); background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 9px; }
.channel-card strong { color: var(--main); }
.channel-card span, .channel-card small { color: var(--muted); font-size: 10px; }
.channel-card:hover, .channel-card.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.channel-card.closed { opacity: .65; }
.channel-chat .messages { height: calc(100vh - 345px); min-height: 450px; padding: 5px; }
.channel-header-info { display: grid; gap: 3px; min-width: 0; }
.channel-header-info strong { color: var(--main); }
.channel-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.closed-label { color: var(--danger); font-size: 11px; border: 1px solid var(--danger); padding: 6px 8px; border-radius: 6px; }
.empty-chat { margin: auto; text-align: center; max-width: 420px; }

/* Games */
.games-world { position: relative; }
.games-world::before { content: "ARCADE_MODE"; position: absolute; right: 10px; top: 78px; color: color-mix(in srgb, var(--accent) 22%, transparent); font-size: clamp(28px, 8vw, 90px); font-weight: 900; pointer-events: none; z-index: -1; }
.segmented { margin-top: 0; }
.game-panel, .leaderboard-wrap, .settings-form, #adminUsers, #adminReports { padding: 18px; }
.game-toolbar { display: flex; gap: 10px; flex-wrap: wrap; }
.game-toolbar select { max-width: 190px; }
.quiz-area { margin-top: 18px; display: grid; gap: 18px; }
.quiz-question { padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.quiz-question h3 { margin-top: 0; }
.answers { display: grid; gap: 8px; }
.answer-button { width: 100%; border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.025); padding: 12px; border-radius: 8px; text-align: left; }
.answer-button:hover:not(:disabled) { border-color: var(--main); transform: translateX(2px); }
.answer-button:disabled { cursor: default; opacity: .78; }
.selected-answer { border-color: var(--accent); }
.correct-answer { border-color: var(--main) !important; background: color-mix(in srgb, var(--main) 14%, transparent) !important; }
.wrong-answer { border-color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 13%, transparent) !important; }
.learning-explanation { padding: 14px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.025); line-height: 1.55; }
.quiz-progress { color: var(--accent); font-size: 12px; margin-bottom: 10px; }
.big-xp { color: var(--main); font-size: 28px; text-shadow: 0 0 14px color-mix(in srgb, var(--main) 45%, transparent); }
.result-list { display: grid; gap: 8px; margin: 14px 0; max-height: 430px; overflow: auto; }
.result-item { padding: 9px; border-left: 3px solid var(--muted); background: rgba(255,255,255,.02); }
.result-item.ok { border-color: var(--main); }
.result-item.bad { border-color: var(--danger); }

.blockfall-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; max-width: 720px; margin: 0 auto 14px; }
.stat-card { border: 1px solid var(--line); padding: 10px; display: flex; justify-content: space-between; gap: 8px; border-radius: 8px; }
.stat-card span { color: var(--muted); }
.stat-card strong { color: var(--main); }
.handheld-console {
  max-width: 980px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(120px,1fr) minmax(220px,340px) minmax(120px,1fr);
  align-items: center;
  gap: clamp(12px,3vw,34px);
  padding: clamp(14px,3vw,30px);
  border-radius: 38px;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: linear-gradient(145deg, #192028, #0a0f13 48%, #20242c);
  box-shadow: inset 0 0 32px rgba(255,255,255,.045), 0 24px 50px rgba(0,0,0,.42);
}
.screen-frame { padding: 10px; border-radius: 18px; background: #020405; border: 3px solid #303a41; box-shadow: inset 0 0 0 2px #000, 0 0 26px color-mix(in srgb, var(--main) 20%, transparent); }
#tetrisCanvas { display: block; width: 100%; height: auto; aspect-ratio: 1 / 2; background: #020405; border: 1px solid var(--main); image-rendering: pixelated; }
.handheld-controls { display: grid; place-items: center; gap: clamp(14px,3vw,30px); }
.left-controls { grid-template-columns: repeat(2, minmax(54px,80px)); }
.right-controls { grid-template-columns: repeat(2, minmax(58px,86px)); transform: rotate(-8deg); }
.control-key { touch-action: manipulation; user-select: none; -webkit-user-select: none; min-width: 64px; min-height: 64px; font-size: 25px; font-weight: 900; box-shadow: inset 0 -6px 0 rgba(0,0,0,.28), 0 8px 16px rgba(0,0,0,.34); }
.control-key:active { transform: translateY(4px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); }
.dpad-key { border-radius: 12px; background: linear-gradient(#293039,#11161a); }
.action-key { border-radius: 50%; min-width: 76px; min-height: 76px; color: var(--text); border: 2px solid var(--accent); background: linear-gradient(145deg, color-mix(in srgb,var(--accent) 45%,#17151d), #15121a); }
.action-key small { font-size: 7px; color: var(--muted); }
.blockfall-footer { margin-top: 14px; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.soft-drop-key { touch-action: manipulation; }

/* Leaderboards */
.leaderboard-table { width: 100%; border-collapse: collapse; }
.leaderboard-table th, .leaderboard-table td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.leaderboard-table th { color: var(--muted); font-size: 12px; }
.leaderboard-user { display: flex; align-items: center; gap: 9px; }
.rank-1, .rank-2, .rank-3 { font-weight: 900; }
.rank-1 { color: #ffd166; }
.rank-2 { color: #c8d3dc; }
.rank-3 { color: #c77d4b; }
.own-rank { margin-top: 14px; color: var(--accent); }

/* Profile */
.profile-tab { display: none; }
.active-profile-tab { display: block; }
#settingsForm > .profile-tab.active-profile-tab { display: grid; }
.profile-showcase { padding: 0; overflow: hidden; }
.profile-preview-shell { position: relative; min-height: 270px; background: #080d11; }
.profile-banner { width: 100%; background: linear-gradient(135deg, color-mix(in srgb,var(--main) 25%,#07100d), color-mix(in srgb,var(--accent) 28%,#070912)); background-size: cover; background-position: center; }
.profile-banner.landscape { aspect-ratio: 4 / 3; max-height: 410px; }
.profile-banner.portrait { width: min(62%, 430px); aspect-ratio: 3 / 4; min-height: 440px; }
.profile-overlay { position: absolute; inset: auto 0 0; padding: 55px 20px 20px; display: flex; align-items: end; gap: 16px; background: linear-gradient(transparent, rgba(3,5,7,.96)); }
.profile-banner.portrait + .profile-overlay { left: min(52%, 360px); padding-left: 24px; }
.profile-overlay .avatar.large { width: 104px; height: 104px; border-width: 3px; border-color: var(--main); }
.profile-stats { color: var(--muted); font-size: 11px; line-height: 1.65; }
.profile-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.upload-card { padding: 16px; display: grid; gap: 12px; align-content: start; }
.upload-card h3 { margin: 0; color: var(--main); }
.upload-card p { margin: 0; line-height: 1.5; }
.upload-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.file-action { display: inline-flex; place-items: center; cursor: pointer; color: var(--accent); }
.file-status { min-height: 16px; font-size: 11px; overflow-wrap: anywhere; }
.orientation-choice { display: grid; gap: 8px; }
.orientation-choice label { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; }
.orientation-choice input { width: auto; }
.color-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toggle { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.toggle input { width: auto; }
.profile-save { margin: 14px 0 0; width: 100%; }
.text-preview { border-color: var(--line); background: rgba(255,255,255,.02); }

/* Moderation */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-row, .report-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; overflow-wrap: anywhere; }
.reports-channel { padding: 16px; }
.report-filter-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.report-card { border: 1px solid var(--line); padding: 14px; border-radius: 10px; margin-bottom: 10px; }
.report-card h3 { margin: 0 0 10px; color: var(--danger); }
.report-snapshot { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px; background: rgba(255,255,255,.025); border-left: 3px solid var(--accent); }
.inline-badge { float: none; display: inline-grid; margin-top: 5px; }

/* Modal / notifications */
.toast { position: fixed; right: 12px; top: calc(var(--header-height) + 10px); z-index: 120; max-width: min(360px, calc(100vw - 24px)); padding: 12px 16px; border: 1px solid var(--main); background: #07100d; color: var(--text); border-radius: 9px; box-shadow: var(--shadow); }
.toast-error { border-color: var(--danger); background: #18070c; }
.modal-dialog { width: min(520px, calc(100vw - 24px)); color: var(--text); padding: 0; background: #081016; }
.modal-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.modal-dialog form { padding: 20px; }
.modal-dialog h3 { color: var(--danger); margin-top: 0; }
.character-counter { text-align: right; color: var(--muted); font-size: 11px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

@media (hover: none) { .message-actions { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

@media (min-width: 1100px) {
  .bottom-nav { left: 50%; transform: translateX(-50%); width: min(620px, 100%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 14px 14px 0 0; }
}

@media (max-width: 900px) {
  .private-layout, .channel-layout, .profile-media-grid, .admin-grid { grid-template-columns: 1fr; }
  .search-panel { min-height: auto; }
  .messages, .private-chat .messages, .channel-chat .messages { height: 56vh; min-height: 380px; }
  .channel-list { max-height: 310px; }
  .profile-banner.portrait + .profile-overlay { left: 35%; }
}

@media (max-width: 680px) {
  :root { --header-height: 64px; --bottom-height: 66px; }
  .topbar { grid-template-columns: 44px minmax(0,1fr) auto; padding-left: 7px; padding-right: 7px; }
  .top-profile { grid-template-columns: 36px minmax(0,1fr); gap: 7px; }
  .top-profile .avatar { width: 36px; height: 36px; }
  .top-profile .username { font-size: 9px; }
  .top-profile .role-badge { display: none; }
  .cu-counter { padding: 0 7px; font-size: 11px; }
  .main-area { padding-left: 8px; padding-right: 8px; }
  .view-header { display: block; }
  .level-chip { display: inline-block; margin-top: 8px; }
  .message { grid-template-columns: 34px minmax(0,1fr); padding: 8px 5px; }
  .avatar { width: 34px; height: 34px; }
  .composer-tools { justify-content: stretch; }
  .composer-tools .primary { margin-left: auto; }
  .game-panel, .leaderboard-wrap, .settings-form, #adminUsers, #adminReports { padding: 12px; }
  .handheld-console { grid-template-columns: minmax(62px, .75fr) minmax(150px, 1.9fr) minmax(62px, .75fr); gap: 7px; padding: 10px 6px; border-radius: 24px; }
  .left-controls, .right-controls { grid-template-columns: 1fr; gap: 14px; }
  .right-controls { transform: none; }
  .control-key { min-width: 52px; min-height: 58px; font-size: 20px; padding: 3px; }
  .action-key { min-width: 58px; min-height: 58px; }
  .screen-frame { padding: 5px; border-radius: 10px; }
  .blockfall-stats { font-size: 10px; }
  .stat-card { display: grid; place-items: center; padding: 7px 3px; }
  .profile-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .profile-tabs .tab-btn { white-space: nowrap; }
  .profile-banner.landscape { aspect-ratio: 4 / 3; max-height: none; }
  .profile-banner.portrait { width: 100%; min-height: 0; max-height: 570px; }
  .profile-banner.portrait + .profile-overlay { left: 0; }
  .profile-overlay { padding: 42px 12px 12px; gap: 10px; }
  .profile-overlay .avatar.large { width: 78px; height: 78px; }
  .color-row { grid-template-columns: 1fr; }
  .auth-card { padding: 20px; }
  .leaderboard-wrap { overflow-x: auto; }
  .leaderboard-table { min-width: 540px; }

  /* Mobile layout hotfix 1.2.1 */
  .topbar {
    grid-template-columns: 40px minmax(0,1fr) 52px;
    gap: 5px;
    min-height: 58px;
    padding: 6px max(6px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left));
  }
  .icon-btn { width: 40px; height: 40px; font-size: 22px; }
  .top-profile { grid-template-columns: 32px minmax(0,1fr); gap: 6px; }
  .top-profile .avatar { width: 32px; height: 32px; }
  .top-profile .name-effect { max-width: 100%; font-size: clamp(13px, 4vw, 16px); }
  .top-profile .username { font-size: 9px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cu-counter { width: 52px; height: 40px; justify-content: center; padding: 0 4px; font-size: 10px; }
  .main-area { padding-top: 10px; padding-left: 7px; padding-right: 7px; }
  .view-header { margin: 2px 4px 12px; }
  .view-header h2 { font-size: clamp(21px, 6vw, 28px); line-height: 1.1; overflow-wrap: anywhere; }
  .view-header p { font-size: 14px; line-height: 1.4; }
  .games-world::before { display: none; }
  .game-toolbar { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
  .game-toolbar select { max-width: none; min-width: 0; padding: 11px 8px; }
  .game-toolbar .primary { grid-column: 1 / -1; width: 100%; }
  .game-panel { border-radius: 12px; }
  .blockfall-footer .primary, .blockfall-footer .soft-drop-key { flex: 1 1 140px; min-height: 48px; }
}


.moderation-report { padding: 14px; border: 1px solid var(--line); border-left: 4px solid var(--danger); border-radius: 10px; background: rgba(255,255,255,.018); margin-bottom: 10px; }
.moderation-report.resolved { border-left-color: var(--main); opacity: .82; }
.moderation-report-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.moderation-report-head strong { color: var(--text); }
.report-reason { margin-top: 10px; color: var(--danger); font-weight: 800; }
.reported-content { margin: 10px 0; padding: 12px; border-left: 3px solid var(--accent); background: #05090d; white-space: pre-wrap; overflow-wrap: anywhere; }
.moderation-report-footer { display: flex; justify-content: flex-end; margin-top: 10px; }
.admin-actions { display: flex; gap: 7px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 680px) { .admin-actions { justify-content: flex-start; } }

/* v1.2.2 — user interaction menu, @Finn exclusive effect and Worldeater */
.user-trigger {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}
.user-trigger:hover, .user-trigger:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--main) 55%, transparent);
  outline-offset: 3px;
  filter: brightness(1.12);
}
.avatar-trigger { align-self: start; line-height: 0; }
.name-trigger { min-width: 0; max-width: 100%; }

.effect-finn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .24em;
  padding-top: .48em;
  overflow: visible !important;
  text-overflow: clip !important;
}
.effect-finn::before {
  content: "";
  position: absolute;
  left: .14em;
  top: -.22em;
  width: min(4.7em, 76%);
  height: .72em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--finn-iro-color, #ff334f) 80%, white), var(--finn-iro-color, #ff334f));
  clip-path: polygon(0 100%, 7% 38%, 14% 100%, 23% 10%, 31% 100%, 42% 0, 50% 100%, 62% 8%, 70% 100%, 82% 24%, 89% 100%, 100% 52%, 100% 100%);
  filter: drop-shadow(0 0 4px var(--finn-iro-color, #ff334f));
  pointer-events: none;
}
.finn-a {
  display: inline-block;
  font-weight: 1000;
  color: #ff253f;
  text-shadow: 0 0 4px #ff253f;
  animation: finn-a-pulse 1.45s ease-in-out infinite;
}
@keyframes finn-a-pulse {
  0%, 100% { color: #ff253f; text-shadow: 0 0 4px #ff253f, 0 0 10px rgba(255,37,63,.55); transform: scale(.96); }
  50% { color: #080808; text-shadow: 0 0 2px #ff253f, 0 0 7px #ff253f; transform: scale(1.08); }
}

.user-action-dialog, .public-profile-dialog { padding: 18px; }
.user-action-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.user-action-head .identity { flex: 1; }
.user-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.user-action-grid button { min-height: 46px; }
.public-profile-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #05090d; }
.public-profile-card .profile-preview-shell { min-height: 260px; }
.public-profile-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.public-profile-summary .stat-card { min-width: 0; }

.worldeater-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.worldeater-console { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-content: center; gap: 18px; max-width: 760px; margin: 0 auto; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 26px; background: radial-gradient(circle at center, rgba(15,27,38,.92), rgba(4,7,10,.98)); box-shadow: inset 0 0 35px rgba(0,0,0,.72), 0 0 24px color-mix(in srgb, var(--accent) 13%, transparent); }
.worldeater-screen-frame { width: min(100%, 520px); aspect-ratio: 1; padding: 7px; border: 2px solid var(--line); border-radius: 14px; background: #010305; box-shadow: inset 0 0 25px #000, 0 0 16px color-mix(in srgb, var(--main) 18%, transparent); }
#worldeaterCanvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; }
.worldeater-dpad { display: grid; grid-template-columns: repeat(3, 66px); grid-template-rows: repeat(3, 66px); gap: 5px; align-items: center; justify-items: center; }
.world-key { width: 64px; height: 64px; min-width: 64px; min-height: 64px; border-radius: 16px; font-size: 24px; touch-action: manipulation; user-select: none; }
.world-key.up { grid-column: 2; grid-row: 1; }
.world-key.left { grid-column: 1; grid-row: 2; }
.world-key.center { grid-column: 2; grid-row: 2; opacity: .35; pointer-events: none; }
.world-key.right { grid-column: 3; grid-row: 2; }
.world-key.down { grid-column: 2; grid-row: 3; }
.worldeater-footer { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.worldeater-footer .primary { min-height: 48px; }

@media (max-width: 680px) {
  .effect-finn { padding-top: .38em; }
  .user-action-grid { grid-template-columns: 1fr; }
  .public-profile-summary { grid-template-columns: 1fr; }
  .worldeater-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .worldeater-console { grid-template-columns: 1fr; gap: 10px; padding: 8px; border-radius: 18px; }
  .worldeater-screen-frame { width: min(100%, 430px); margin: 0 auto; padding: 5px; }
  .worldeater-dpad { grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 58px); justify-self: center; }
  .world-key { width: 56px; height: 56px; min-width: 56px; min-height: 56px; border-radius: 14px; }
  .worldeater-footer .primary { width: 100%; }
}

/* v1.3.0 // Security, Pong, Tools and global Halloween override */
body.theme-halloween {
  --main: #ff1a1a;
  --accent: #8b0000;
  --bg: #000000;
  --panel: rgba(3, 0, 0, .98);
  --panel-2: rgba(10, 0, 0, .96);
  --text: #f5eaea;
  --muted: #a78080;
  --danger: #ff1a1a;
  --line: rgba(255, 26, 26, .42);
  --shadow: 0 0 28px rgba(255, 0, 0, .17);
  background: radial-gradient(circle at top, #180000, #000 52%);
}
body.theme-halloween .topbar,
body.theme-halloween .bottom-nav,
body.theme-halloween .sidebar { background: rgba(0,0,0,.985); }
body.theme-halloween .terminal-panel,
body.theme-halloween input,
body.theme-halloween textarea,
body.theme-halloween select,
body.theme-halloween .message,
body.theme-halloween .channel-card,
body.theme-halloween .search-user { background-color: #030000; }
body.theme-halloween .effect-rainbow,
body.theme-halloween .effect-neon,
body.theme-halloween .effect-pulse,
body.theme-halloween .effect-glitch,
body.theme-halloween .effect-finn,
body.theme-halloween .name-effect { color: #ff1a1a; background: none; -webkit-text-fill-color: currentColor; text-shadow: 0 0 8px #8b0000; }

.security-stack { gap: 18px; }
.security-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}
.security-card h3 { margin: 0; color: var(--main); }
.twofactor-qr { display: grid; gap: 12px; justify-items: start; }
.twofactor-qr img { width: min(260px, 100%); background: #fff; padding: 9px; border-radius: 8px; image-rendering: pixelated; }
.twofactor-qr code { max-width: 100%; overflow-wrap: anywhere; color: var(--accent); }
.recovery-codes, .owner-output {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 13px;
  border: 1px solid var(--line);
  background: #020303;
  color: var(--text);
  border-radius: 8px;
}
.owner-console { border-color: color-mix(in srgb, var(--danger) 52%, var(--line)); }

.pong-toolbar, .pong-online-controls, .pong-footer {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pong-toolbar label, .pong-online-controls label { min-width: min(230px, 100%); }
.pong-online-controls { padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.pong-scoreboard { display: flex; justify-content: center; gap: 18px; align-items: center; color: var(--main); font-size: clamp(25px, 8vw, 44px); margin: 8px 0; }
.pong-console { width: min(100%, 900px); margin: 0 auto 12px; padding: 8px; border: 2px solid var(--line); border-radius: 14px; background: #010102; }
#pongCanvas { display: block; width: 100%; height: auto; aspect-ratio: 900 / 520; background: #020203; border: 1px solid var(--main); touch-action: none; image-rendering: pixelated; }
.pong-touch-hint { display: flex; justify-content: space-between; padding: 7px 5px 0; color: var(--muted); font-size: 10px; }

.randomizer-panel { padding: 16px; }
.randomizer-config { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, .7fr); gap: 16px; margin-bottom: 16px; }
.randomizer-config h3 { margin-top: 0; color: var(--main); }
.randomizer-inputs { display: grid; gap: 7px; margin-bottom: 9px; }
.randomizer-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 7px; }
.randomizer-input-row button { padding: 0; }
.randomizer-options { display: grid; align-content: start; gap: 12px; }
.pixel-poker-table {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  padding: 34px 112px 34px 24px;
  border: 6px solid #3a200e;
  box-shadow: inset 0 0 0 4px #111, inset 0 0 55px rgba(0,0,0,.72);
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    #073b22;
  background-size: 8px 8px;
  image-rendering: pixelated;
}
.pixel-deck {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 104px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 5px solid #151515;
  outline: 3px solid #755c80;
  background: repeating-linear-gradient(45deg, #28222c 0 5px, #15131a 5px 10px);
  color: #b682ce;
  box-shadow: 8px 8px 0 #0b0b0b, 13px 13px 0 #75404a;
}
.pixel-deck span { font-weight: 900; font-size: 20px; }
.pixel-deck small { font-size: 8px; letter-spacing: 1px; }
.randomizer-cards { min-height: 270px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: center; }
.pixel-card { min-width: 0; aspect-ratio: 2 / 3; perspective: 900px; }
.pixel-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .72s steps(12, end); }
.pixel-card.revealed .pixel-card-inner { transform: rotateY(180deg); }
.pixel-card-face { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; backface-visibility: hidden; border: 6px solid #111; outline: 3px solid var(--card-edge, #7b61ff); box-shadow: 7px 7px 0 rgba(0,0,0,.55); overflow-wrap: anywhere; }
.pixel-card-back { color: var(--card-light, #c8a7ff); background: repeating-linear-gradient(45deg, var(--card-dark, #2d1e45) 0 8px, var(--card-mid, #563b78) 8px 16px); }
.pixel-card-back span { display: block; font-size: clamp(17px, 4vw, 30px); font-weight: 900; }
.pixel-card-back small { font-size: 8px; letter-spacing: 2px; }
.pixel-card-front { transform: rotateY(180deg); background: #e8e3d5; color: #111; font-weight: 900; font-size: clamp(11px, 2.8vw, 18px); }
.card-purple { --card-edge:#80549c; --card-dark:#241630; --card-mid:#4f2d64; --card-light:#c6a0df; }
.card-blue { --card-edge:#3a79a8; --card-dark:#092c42; --card-mid:#1d5c83; --card-light:#97d6ff; }
.card-red { --card-edge:#b35050; --card-dark:#4a0d0d; --card-mid:#852626; --card-light:#ff9f9f; }
.card-green { --card-edge:#4e9a50; --card-dark:#153a16; --card-mid:#2c6e2e; --card-light:#adf0ae; }
.coin-panel { min-height: 430px; display: grid; place-items: center; align-content: center; gap: 25px; padding: 25px; }
.pixel-coin { width: 160px; height: 160px; display: grid; place-items: center; border-radius: 50%; border: 10px solid #6e4b12; outline: 5px solid #d5a42d; background: repeating-linear-gradient(90deg,#d5a42d 0 8px,#f5ce61 8px 16px); color: #231702; font-size: 22px; font-weight: 900; image-rendering: pixelated; }
.coin-flipping { animation: coin-flip .9s steps(12,end); }
@keyframes coin-flip { 0%{transform:rotateY(0) translateY(0)} 45%{transform:rotateY(720deg) translateY(-90px)} 100%{transform:rotateY(1440deg) translateY(0)} }

@media (max-width: 760px) {
  .randomizer-config { grid-template-columns: 1fr; }
  .pixel-poker-table { min-height: 300px; padding: 26px 72px 26px 12px; }
  .pixel-deck { right: 10px; width: 53px; height: 78px; border-width: 3px; outline-width: 2px; box-shadow: 5px 5px 0 #0b0b0b, 8px 8px 0 #75404a; }
  .pixel-deck span { font-size: 14px; }
  .randomizer-cards { gap: 7px; min-height: 220px; }
  .pixel-card-face { border-width: 3px; outline-width: 2px; padding: 5px; box-shadow: 4px 4px 0 rgba(0,0,0,.55); }
  .pong-toolbar, .pong-online-controls, .pong-footer { align-items: stretch; }
  .pong-toolbar > *, .pong-online-controls > *, .pong-footer > * { flex: 1 1 100%; }
  .pong-scoreboard { margin-top: 2px; }
}

/* v1.4.0 // Owner drawer, Connect Four and branded decision tools */
.owner-menu-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--line));
  border-radius: 9px;
  background: rgba(255, 40, 60, .08);
  color: var(--danger);
  font-size: 20px;
}
.topbar { grid-template-columns: 48px minmax(0, 1fr) auto auto; }
.owner-drawer-backdrop { position: fixed; inset: 0; z-index: 92; background: rgba(0,0,0,.68); backdrop-filter: blur(3px); }
.owner-drawer {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 96vw);
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: rgba(3,5,7,.992);
  border-left: 1px solid color-mix(in srgb, var(--danger) 58%, var(--line));
  box-shadow: -24px 0 70px rgba(0,0,0,.7);
  transform: translateX(105%);
  transition: transform .24s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.owner-drawer-open .owner-drawer { transform: translateX(0); }
.owner-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--danger); }
.owner-drawer-head > div { display: grid; gap: 3px; }
.owner-drawer-head small { color: var(--muted); font-size: 10px; }
.owner-drawer-tabs { margin: 0; }
.owner-tab { display: none; min-height: 0; flex: 1; overflow: hidden; }
.owner-tab.active-owner-tab { display: flex; flex-direction: column; }
.owner-audit-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 7px; align-items: center; margin-bottom: 10px; }
.owner-audit-log { min-height: 0; flex: 1; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #010203; padding: 8px; font-size: 11px; }
.audit-entry { display: grid; grid-template-columns: 68px minmax(95px,.6fr) minmax(0,1fr); gap: 8px; padding: 8px 5px; border-bottom: 1px solid rgba(255,255,255,.06); }
.audit-entry:last-child { border-bottom: 0; }
.audit-entry time { color: var(--muted); }
.audit-action { color: var(--main); font-weight: 800; overflow-wrap: anywhere; }
.audit-detail { min-width: 0; overflow-wrap: anywhere; }
.audit-actor { color: var(--accent); }
.audit-critical .audit-action { color: var(--danger); text-shadow: 0 0 8px color-mix(in srgb, var(--danger) 45%, transparent); }
.owner-console, .discord-bridge-card { display: grid; gap: 11px; min-height: 0; overflow-y: auto; padding: 13px; border: 1px solid color-mix(in srgb, var(--danger) 52%, var(--line)); border-radius: 11px; background: rgba(255,255,255,.018); }
.owner-command-chips, .discord-bridge-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.owner-command-chips button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #05080b; color: var(--text); font-size: 10px; }

.connect4-toolbar, .connect4-footer { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.connect4-toolbar label { min-width: min(220px, 100%); }
.connect4-matchline { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 10px; align-items: center; margin: 8px auto 14px; max-width: 720px; }
.connect4-matchline > div { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.connect4-matchline > div:last-child { justify-content: end; }
.connect4-matchline img { width: 48px; height: 48px; object-fit: contain; }
#connect4Status { color: var(--main); text-align: center; font-size: 12px; }
.connect4-board {
  width: min(100%, 760px);
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: clamp(4px, 1vw, 9px);
  padding: clamp(8px, 2vw, 18px);
  border: 3px solid color-mix(in srgb, var(--main) 52%, #111);
  border-radius: 18px;
  background: linear-gradient(145deg, #101820, #05080b);
  box-shadow: inset 0 0 30px rgba(0,0,0,.7);
}
.connect4-cell { aspect-ratio: 1; border: 0; border-radius: 50%; padding: 4px; background: #010203; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); touch-action: manipulation; }
.connect4-cell img { width: 100%; height: 100%; display: block; object-fit: contain; opacity: 0; transform: translateY(-180%); }
.connect4-cell.filled img { opacity: 1; transform: translateY(0); animation: chip-drop .3s cubic-bezier(.2,.9,.25,1.2); }
.connect4-cell.winner { box-shadow: 0 0 18px var(--main), inset 0 0 0 3px var(--main); }
@keyframes chip-drop { from { transform: translateY(-180%) rotate(-18deg); } to { transform: translateY(0) rotate(0); } }

/* Branded card backs generated from the provided qMp design */
.pixel-card-back { background-position: center; background-size: cover; color: transparent; }
.pixel-card-back span, .pixel-card-back small { display: none; }
.card-purple .pixel-card-back { background-image: url('/static/assets/card_back_purple.png'); }
.card-blue .pixel-card-back { background-image: url('/static/assets/card_back_blue.png'); }
.card-red .pixel-card-back { background-image: url('/static/assets/card_back_red.png'); }
.card-green .pixel-card-back { background-image: url('/static/assets/card_back_green.png'); }
.pixel-deck { background: #1a111d url('/static/assets/card_back_purple.png') center/cover no-repeat; color: transparent; }
.pixel-deck span, .pixel-deck small { visibility: hidden; }

.poker-coin { width: 190px; height: 190px; perspective: 1000px; }
.poker-coin-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.poker-coin .coin-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden; filter: drop-shadow(0 14px 12px rgba(0,0,0,.48)); }
.poker-coin .coin-back { transform: rotateY(180deg); }
.poker-coin.coin-result-back .poker-coin-inner { transform: rotateY(180deg); }
.poker-coin.coin-flipping .poker-coin-inner { animation: poker-chip-flip 1.15s cubic-bezier(.18,.72,.2,1); }
@keyframes poker-chip-flip {
  0% { transform: rotateY(0) translateY(0) scale(1); }
  48% { transform: rotateY(900deg) translateY(-100px) scale(1.12); }
  100% { transform: rotateY(1800deg) translateY(0) scale(1); }
}

body.theme-halloween .owner-drawer { background: rgba(0,0,0,.995); border-color: #a00000; }

@media (max-width: 760px) {
  .topbar { grid-template-columns: 44px minmax(0,1fr) 40px auto; gap: 6px; }
  .owner-menu-btn { width: 38px; height: 38px; }
  .owner-audit-toolbar { grid-template-columns: 1fr auto auto; }
  .owner-audit-toolbar .toggle { grid-column: 1 / -1; }
  .audit-entry { grid-template-columns: 58px minmax(82px,.55fr) minmax(0,1fr); gap: 5px; font-size: 9px; }
  .connect4-toolbar, .connect4-footer { align-items: stretch; }
  .connect4-toolbar > *, .connect4-footer > * { flex: 1 1 100%; }
  .connect4-matchline img { width: 38px; height: 38px; }
  .connect4-board { padding: 7px; gap: 4px; border-radius: 12px; }
  .connect4-cell { padding: 2px; }
  .poker-coin { width: 160px; height: 160px; }
}