@charset "utf-8";
/* CSS Document */

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

* {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	background-color: #1C003F;
	color: #FF97F9;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	font-size: clamp(16px, 2.6vw, 32px);
	cursor: url('icons/pawprint.cur'), auto;
	overflow: auto;
}

:focus {
	outline: 2px solid magenta;
	outline-offset: 2px;
}

h1 {
	color: #D774E9;
	font-size: 1.5em;
	margin: 0px;
	line-height: 0.9;
}

a {
	display: inline-block;
	width: auto;
	margin: 4px;
	text-align: center;
	border: 3px solid #303;
	border-radius: 32px;
	background-color: #505;
	padding: 8px 16px;
	color: magenta;
	font-weight: 900;
	font-size: 2em;
	text-decoration: none;
}

a:hover {
	color: white;
	background-color: #808;
}

.block {
	display: block;
	margin: clamp(12px, 3vw, 32px);
	text-align: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.3);
	border: 10px solid #A30B84;
	border-radius: 32px;
	padding: clamp(14px, 3vw, 32px);
	overflow: hidden;
}

.band{
	position: relative;
	left: -32px;
	top: -32px;
	width: 140%;
	height: 50px;
	background-color: rgba(43,100,100,0.40);
	overflow: hidden;
}

/* Keep your title logo, but let it behave better on small screens */
#titleLogo{
	display: block;
	position: relative;
	top: 0;
	width: min(200px, 60vw);
	height: calc(min(200px, 60vw) * 0.51);
	margin: 0 auto 24px auto;
	background-image: url("images/title.webp");
	background-size: cover;
	background-position: center;
}

/* Layout container for buttons */
.flexBlock {
	display: block;
}

.iconGrid{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/* ---- Paw-icon buttons (ALL use pawprint.svg) ----
   We draw the icon on ::before so the label text isn't masked.
*/
.button{
	--paw-color: #FF97F9; /* fallback */
	display: inline-block;
	position: relative;
	width: clamp(72px, 18vw, 120px);
	height: clamp(72px, 18vw, 120px);
	border-radius: 18px;
	text-decoration: none;
	overflow: hidden;

	/* a subtle “pad” background so the icon pops */
	background-color: rgba(255, 151, 249, 0.10);
	border: 2px solid rgba(255, 0, 255, 0.55);
}

.button::before{
	content: "";
	position: absolute;
	inset: 10px;
	background-color: var(--paw-color);

	-webkit-mask-image: url("icons/pawprint.svg");
	mask-image: url("icons/pawprint.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;

	pointer-events: none;
	
	transform-origin: 50% 65%;
	transition: transform 0.2s ease;

}

.button:hover::before {
	animation: paw-wiggle 0.45s ease-in-out;
}


.button:hover{
	background-color: rgba(255, 151, 249, 0.20);
	border-color: rgba(255, 0, 255, 0.9);
}

/* Button label */
.link-text {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.6);
	text-align: center;
	padding: 6px 0;
	font-weight: bold;
	font-size: 0.35em;
}

/* Text input unchanged */
.textInput{
	display: inline-block;
	font-size: 1em;
	color: cyan;
	padding: 8px;
	margin: 16px;
	background-color: black;
	border: 2px solid magenta;
	border-radius: 16px;
}

/* Small buttons (login/logout) – also use pawprint.svg */
.buttonSmall{
	--paw-color: #FFFFFF;
	display: inline-block;
	background-color: #550055;
	border: 2px solid magenta;
	border-radius: 12px;
	width: 4.5em;
	height: 4.5em;
	position: relative;
	overflow: hidden;
	vertical-align: middle;
}

.buttonSmall::before{
	content: "";
	position: absolute;
	inset: 10px;
	background-color: var(--paw-color);

	-webkit-mask-image: url("icons/pawprint.svg");
	mask-image: url("icons/pawprint.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;

	pointer-events: none;
}

.buttonSmall:hover{
	background-color: magenta;
}

/* File button unchanged */
.fileButton{
	display: inline-block;
	width: 2em;
	height: 2em;
	background-image: url('icons/kitty_file.png');
	background-size: contain;
	background-position: center;
	text-decoration: none;
	position: relative;
	overflow: visible;
}



.fileListWrap{
	max-width: 900px;
	margin: 0 auto;
}

.fileSearch{
	width: min(720px, 90%);
	max-width: 100%;
}

.fileTable{
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
	background: rgba(0,0,0,0.25);
	border: 2px solid rgba(255, 0, 255, 0.35);
	border-radius: 18px;
	overflow: hidden;
}

.fileTable th,
.fileTable td{
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(255, 151, 249, 0.18);
	font-size: 0.7em;
}

.fileTable th{
	color: #D774E9;
	background: rgba(255, 151, 249, 0.08);
	text-align: left;
}

.fileTable tr:hover td{
	background: rgba(255, 151, 249, 0.08);
}

.fileLink{
	display: inline;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	font-size: 1em;
	color: #FF97F9;
	text-decoration: underline;
	border-radius: 0;
}

.colSize{ width: 140px; white-space: nowrap; }
.colDate{ width: 200px; white-space: nowrap; }

.iconButton{
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.buttonSmallLabel{
	font-size: 0.65em;
	color: #FF97F9; /* match your neon pink */
	opacity: 0.95;
	line-height: 1;
	user-select: none;
}

/* Optional: a little hover polish */
.iconButton:hover .buttonSmallLabel{
	opacity: 1;
	text-shadow: 0 0 10px rgba(255, 151, 249, 0.35);
}

.loginError{
	margin-top: 8px;
	font-size: 0.65em;
	color: #FF6A6A;
	text-align: center;
	opacity: 0.95;
	text-shadow: 0 0 8px rgba(255, 106, 106, 0.4);
	user-select: none;
}

/* Boot sound consent overlay */
.kitty-overlay[hidden] { display: none; }

.kitty-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  /* Let your site’s base font/colors shine through */
  font: inherit;
  color: inherit;

  /* Dim backdrop */
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(2px);
}

.kitty-overlay__panel {
  width: min(520px, calc(100vw - 32px));
  padding: 18px 18px 16px;

  border-radius: 14px;
  border: 2px solid rgba(200, 100, 255, 0.35);

  background: rgba(0, 0, 0, 0.88);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.65),
    0 0 24px rgba(200, 100, 255, 0.18);
}

/* Optional scanlines vibe */
.kitty-overlay__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.10;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.06) 1px,
    transparent 1px,
    transparent 4px
  );
}

.kitty-overlay__title {
  font-size: 18px;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-shadow: 0 0 12px rgba(0, 255, 120, 0.25);
}

.kitty-overlay__text {
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.9;
  margin-bottom: 14px;
}

.kitty-overlay__buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Buttons styled to feel “site-native” */
.kitty-btn {
  appearance: none;
  border: 1px solid rgba(0, 255, 120, 0.35);
  background: rgba(0, 0, 0, 0.75);
  color: inherit;

  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  cursor: pointer;

  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.kitty-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.9);
}

.kitty-btn:active {
  transform: translateY(0px);
}

.kitty-btn--primary {
  background: rgba(0, 255, 120, 0.10);
  border-color: rgba(0, 255, 120, 0.65);
}


/* ---- Per-button paw colours ---- */
#jellywormButton { --paw-color: #00FFD5; }  /* bright cyan */
#tomButton { --paw-color: #FF97F9; }       /* your pink */
#apButton { --paw-color: #FFE86B; }        /* warm yellow */
#wpButton { --paw-color: #7CFF6B; }        /* green */
#outlookButton { --paw-color: #6BC2FF; }   /* sky */
#amazonButton { --paw-color: #FFB86B; }    /* orange */
#temuButton { --paw-color: #FF6B6B; }      /* red */
#aliexpressButton { --paw-color: #B36BFF; }/* purple */
#ebayButton { --paw-color: #FFFFFF; }      /* white */
#etsyButton { --paw-color: #FF6BE8; }      /* hot pink */
#portfolioButton { --paw-color: #6BFFB8; } /* mint */
#adobeButton { --paw-color: #FF3B3B; }     /* adobe-ish red */
#adobeExpressButton { --paw-color: #FF8AD6; }
#bbcsoundsButton { --paw-color: #FFD36B; }
#tidalButton { --paw-color: #D6D6D6; }
#sacrillButton { --paw-color: #6BFFF2; }
#youtubeButton { --paw-color: #FF4D4D; }
#itvxButton { --paw-color: #86FF6B; }
#ucButton { --paw-color: #6B9BFF; }
#gpButton { --paw-color: #FF6BF0; }
#vetButton { --paw-color: #FFB1FF; }
#braveButton { --paw-color: #4DFF8A; }
#storyButton { --paw-color: #ECDD2C; }
#singingButton { --paw-color: #07D00F; }
#songButton { --paw-color: #DA6ADA; }
#hbButton { --paw-color: #4EAD8F; }


/* Login/logout colours */
#loginButton { --paw-color: #AA00AA; } /* dark purple paw */
#logoutButton { --paw-color: #FFDF31; }

/* Logout uses a PNG icon instead of the paw mask */
#logoutButton::before{
	content: none; /* disables the pawprint pseudo-element */
}

#logoutButton{
	background-image: url("icons/logout.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70% 70%;
}



@keyframes paw-wiggle {
	0%   { transform: rotate(0deg); }
	20%  { transform: rotate(-8deg); }
	40%  { transform: rotate(8deg); }
	60%  { transform: rotate(-6deg); }
	80%  { transform: rotate(6deg); }
	100% { transform: rotate(0deg); }
}