@charset "utf-8";
/* 2025.css — Cassiopea grid/game
   Layout: table grid with 100×100 cells.
   Each DOOR cell shows two panels side-by-side (LEFT | RIGHT), each 50×100.
   Specials/neutral use a single 100×100 image.
*/

/* Base */
body {
	font-family: Arial, sans-serif;
	font-size: 15px;
	background-color: #E4E4E4;
	color: #00F;
}


/* ---------- Grid: fixed 100×100 cells ---------- */
table.grid {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 10px auto;
}
table.grid tr {
  display: table-row;
}
table.grid td {
  display: table-cell;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  overflow: hidden; /* keep everything inside the tile */
}

/* Cell backgrounds / labels */
.cell-neutral { background: #f2f2f2; color: #666; font-size: 12px; }
.cell-size    { background: #fff9c4; font-size: 12px; }
.cell-start   { background: #d8fbd8; font-weight: bold; }
.cell-finish  { background: #ffe0b2; font-weight: bold; }
.cell-copy    { background: #e7e7ff; font-size: 12px; }

/* ---------- DOOR structure (LEFT | RIGHT) ---------- */
.door {
  display: block;
  width: 100%;
  height: 100%;
}

/* Two panels laid out horizontally inside a 100×100 cell */
table.grid .panels {
  display: flex;
  flex-direction: row;   /* LEFT | RIGHT */
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

table.grid .panel {
  width: 50px;
  height: 100px;         /* fill full cell height */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* LEFT clickable area matches its 50×100 panel */
table.grid .clickable {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100px;
  text-decoration: none;
  cursor: pointer;       /* feel clickable */
}

/* DOOR panel images: exactly 50×100 */
table.grid .door .panel img {
  display: block;
  width: 50px;
  height: 100px;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

/* Specials & neutral tiles: single image 100×100 */
table.grid .cell-start img,
table.grid .cell-finish img,
table.grid .cell-copy img,
table.grid .cell-neutral img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
}

/* ---------- States (drawn INSIDE the tile so nothing is clipped) ---------- */
.grid .door.success {
  box-shadow: inset 0 0 0 4px #28a745;     /* green inner border */
  transition: box-shadow .2s ease;
}

.grid .door.success { box-shadow: inset 0 0 0 4px #28a745; }

.grid .door.stored {
  filter: grayscale(100%);
  opacity: .55;
}

/* Optional: tiny hover feedback on the LEFT (anchor) */
table.grid .clickable:hover {
  outline: 2px solid rgba(0,0,0,0.15);
  outline-offset: -2px;                    /* keep inside area */
}

/* Mirror for LEFT panel image (visual only; game rule uses numbers) */
.mirrored {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

/* --- GRID status: HINT (single source in 2025.css) --- */
.grid .door.hint {
  position: relative; /* anchor the overlay */
}

.grid .door.hint::after {
  content: "";
  position: absolute;
  inset: 0;                           /* cover the whole 100×100 tile */
  pointer-events: none;               /* keep clicks working */
  background: rgba(255,152,0,.22);    /* soft tint */
  box-shadow: inset 0 0 0 6px rgba(255,152,0,.75); /* visible orange ring */
  z-index: 2;                         /* above the image */
}

/* slight dim so the hint reads even on bright images (optional) */
.grid .door.hint img { opacity: 0.9; }

/* --- overlays moved from 50_game.php (SUCCESS + STORED) --- */
table.grid td .door { position: relative; }  /* ensure overlay anchor for all */

/* SUCCESS: 20% green overlay in front of images */
table.grid td .door.success::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 9999px rgba(40,167,69,0.20);
  pointer-events: none;
  z-index: 3;
}

/* STORED: faint gray overlay (only when NOT success or hint) */
table.grid td .door.stored:not(.success):not(.hint)::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.12); /* ~12% overlay */
  pointer-events: none;
  z-index: 1;
}

/* POST click (no URL preview on hover) */
form.clickform { margin: 0; }
button.clickbtn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: block;
  line-height: 0;
}


.TexteRed {
	font-size: 14px;
	text-align: left;
	font-weight: normal;
	color: #C30;
}
.TextNew {
	font-size: 14px;
	text-align: left;
	font-weight: normal;
	color: #090;
}
.TextOK {
	font-size: 14px;
	text-align: left;
	font-weight: normal;
	color: #00F;
}



/* ---------- Responsive sizing by column count (cols-4 … cols-9) ---------- */
/* The grid keeps desktop size (100×100) by default. On small screens,
   tiles shrink so the full width fits. Only depends on number of columns. */
.grid { margin: 10px auto; max-width: 96vw; }

/* Phones (≤ 480px): tile = 96vw / columns */
@media (max-width: 480px) {
  /* ----- 4 columns ----- */
  table.grid.cols-4 td                 { width: calc(96vw / 4); height: calc(96vw / 4); }
  table.grid.cols-4 .panels            { width: calc(96vw / 4); height: calc(96vw / 4); }
  table.grid.cols-4 .panel             { width: calc(96vw / 8); height: calc(96vw / 4); }
  table.grid.cols-4 .clickable         { width: calc(96vw / 8); height: calc(96vw / 4); }
  table.grid.cols-4 .door .panel img   { width: calc(96vw / 8); height: calc(96vw / 4); }
  table.grid.cols-4 .cell-start img,
  table.grid.cols-4 .cell-finish img,
  table.grid.cols-4 .cell-copy img,
  table.grid.cols-4 .cell-neutral img  { width: calc(96vw / 4); height: calc(96vw / 4); }

  /* ----- 5 columns ----- */
  table.grid.cols-5 td                 { width: calc(96vw / 5); height: calc(96vw / 5); }
  table.grid.cols-5 .panels            { width: calc(96vw / 5); height: calc(96vw / 5); }
  table.grid.cols-5 .panel             { width: calc(96vw / 10); height: calc(96vw / 5); }
  table.grid.cols-5 .clickable         { width: calc(96vw / 10); height: calc(96vw / 5); }
  table.grid.cols-5 .door .panel img   { width: calc(96vw / 10); height: calc(96vw / 5); }
  table.grid.cols-5 .cell-start img,
  table.grid.cols-5 .cell-finish img,
  table.grid.cols-5 .cell-copy img,
  table.grid.cols-5 .cell-neutral img  { width: calc(96vw / 5); height: calc(96vw / 5); }

  /* ----- 6 columns ----- */
  table.grid.cols-6 td                 { width: calc(96vw / 6); height: calc(96vw / 6); }
  table.grid.cols-6 .panels            { width: calc(96vw / 6); height: calc(96vw / 6); }
  table.grid.cols-6 .panel             { width: calc(96vw / 12); height: calc(96vw / 6); }
  table.grid.cols-6 .clickable         { width: calc(96vw / 12); height: calc(96vw / 6); }
  table.grid.cols-6 .door .panel img   { width: calc(96vw / 12); height: calc(96vw / 6); }
  table.grid.cols-6 .cell-start img,
  table.grid.cols-6 .cell-finish img,
  table.grid.cols-6 .cell-copy img,
  table.grid.cols-6 .cell-neutral img  { width: calc(96vw / 6); height: calc(96vw / 6); }

  /* ----- 7 columns ----- */
  table.grid.cols-7 td                 { width: calc(96vw / 7); height: calc(96vw / 7); }
  table.grid.cols-7 .panels            { width: calc(96vw / 7); height: calc(96vw / 7); }
  table.grid.cols-7 .panel             { width: calc(96vw / 14); height: calc(96vw / 7); }
  table.grid.cols-7 .clickable         { width: calc(96vw / 14); height: calc(96vw / 7); }
  table.grid.cols-7 .door .panel img   { width: calc(96vw / 14); height: calc(96vw / 7); }
  table.grid.cols-7 .cell-start img,
  table.grid.cols-7 .cell-finish img,
  table.grid.cols-7 .cell-copy img,
  table.grid.cols-7 .cell-neutral img  { width: calc(96vw / 7); height: calc(96vw / 7); }

  /* ----- 8 columns ----- */
  table.grid.cols-8 td                 { width: calc(96vw / 8); height: calc(96vw / 8); }
  table.grid.cols-8 .panels            { width: calc(96vw / 8); height: calc(96vw / 8); }
  table.grid.cols-8 .panel             { width: calc(96vw / 16); height: calc(96vw / 8); }
  table.grid.cols-8 .clickable         { width: calc(96vw / 16); height: calc(96vw / 8); }
  table.grid.cols-8 .door .panel img   { width: calc(96vw / 16); height: calc(96vw / 8); }
  table.grid.cols-8 .cell-start img,
  table.grid.cols-8 .cell-finish img,
  table.grid.cols-8 .cell-copy img,
  table.grid.cols-8 .cell-neutral img  { width: calc(96vw / 8); height: calc(96vw / 8); }

  /* ----- 9 columns ----- */
  table.grid.cols-9 td                 { width: calc(96vw / 9); height: calc(96vw / 9); }
  table.grid.cols-9 .panels            { width: calc(96vw / 9); height: calc(96vw / 9); }
  table.grid.cols-9 .panel             { width: calc(96vw / 18); height: calc(96vw / 9); }
  table.grid.cols-9 .clickable         { width: calc(96vw / 18); height: calc(96vw / 9); }
  table.grid.cols-9 .door .panel img   { width: calc(96vw / 18); height: calc(96vw / 9); }
  table.grid.cols-9 .cell-start img,
  table.grid.cols-9 .cell-finish img,
  table.grid.cols-9 .cell-copy img,
  table.grid.cols-9 .cell-neutral img  { width: calc(96vw / 9); height: calc(96vw / 9); }
}

/* Small tablets (481–768px): same logic, a bit more room if needed */
@media (min-width: 481px) and (max-width: 768px) {
  table.grid[class*="cols-"] td                 { width: 72px; height: 72px; }
  table.grid[class*="cols-"] .panels            { width: 72px; height: 72px; }
  table.grid[class*="cols-"] .panel             { width: 36px; height: 72px; }
  table.grid[class*="cols-"] .clickable         { width: 36px; height: 72px; }
  table.grid[class*="cols-"] .door .panel img   { width: 36px; height: 72px; }
  table.grid[class*="cols-"] .cell-start img,
  table.grid[class*="cols-"] .cell-finish img,
  table.grid[class*="cols-"] .cell-copy img,
  table.grid[class*="cols-"] .cell-neutral img  { width: 72px; height: 72px; }
}


/* --- KISS overrides vs global main.css --- */
/* Prevent main.css `table{width:100%}` from stretching the game grid */
table.grid { width: auto; }

/* If too many columns on very small screens, allow horizontal scroll
   instead of clipping any tiles */
.grid { overflow-x: auto; }

/* Remove UA margins that can shift borders on phones */
@media (max-width: 768px) {
  html, body { margin: 0; padding: 0; }
}

/* === GLOBAL (single stylesheet: 2025.css) === */
html, body { margin:0; padding:0; }
body { overflow-x:auto; }

/* Grid: keep centered and do NOT stretch */
table.grid { width:auto !important; margin:10px auto; }

/* Homepage logo table + image-map (PC + S9 portrait/landscape) */
div[align="center"] > table {
  width:auto !important;
  margin:0 auto;
  border-collapse:collapse;
}
td[align="center"] > img[usemap] {
  display:block;
  width:360px;         /* matches your scaled coords */
  height:auto;
  max-width:none;
  margin:0 auto;
}