@charset "utf-8";
/* 2025.css — Cassiopea grid/game */

/* Base */
html, body { margin:0; padding:0; }
body {
	font-family: Arial, sans-serif;
	font-size: 15px;
	background-color: #E4E4E4;
	color: #000;
}
td._steps {
	color:#000;
	font-size: 12px;
}

.TitleSub { font-size:16px; text-align:center; font-weight:bold; color:#096; }
.TitrePetit { font-weight:bold; color:#096; }
.TitrePetitBlack { font-weight:bold; font-size: 18px; }

.cell-GoLD {
	width: 100px;
	height: 90px;
	text-align: center;
	vertical-align: middle;
	background: transparent;
	color: #fff;
	border: 1px solid #666;
}

.cell-Go {
	width: 90px;
	height: 90px;
	text-align: center;
	vertical-align: middle;
	background: transparent;
	color: #fff;
	border: 1px solid #666;
}

.cell-Go a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.butte { font-family:Arial,sans-serif; font-size:24px; color:#009; font-weight:bold; }

td._Easy { 	color:#0C0; font-weight:bold; background:#CCC; }

td._EasyHint {
	color:#0C0;
	font-weight:bold;
	background-color: #AFA;
}
td._Medium { color:#FF0; font-weight:bold; background:#CCC; }
td._Intermediate { color:#F60; font-weight:bold; background:#CCC; }
td._Hard { color:#F00; font-weight:bold; background:#CCC; }
td._Hard2 { color:#820000; font-weight:bold; background:#CCC; }
td._Link { font-weight:bold; background:#CCC; font-size: 24px; color: #F00; text-align: center; }

/* ---------- Grid (base 100×100) ---------- */
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;
}

/* 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; }
/* FINISH cell — highlight as DONE */


/* FINISH cell — highlight only when game is done */
.cell-finish {
	background: #ffe0b2;
	font-weight: bold;
	position: relative;
	border: 2px solid #999; /* neutral until success */
}
.cell_red {
	font-weight: bold;
	position: relative;
	border: 2px solid #999; /* neutral until success */
	background-color: #FFAC2F;
}


/* Inline "DONE" overlay used only when finish cell success */
.done-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	background: rgba(40,167,69,0.65);
	text-shadow: 0 0 3px #000;
	pointer-events: none;
	z-index: 10;
	border: 3px solid #28a745;
}


/* Shown only when the grid has .game-done */
.game-done .cell-finish {
	border: 3px solid #28a745 !important;
}

.game-done .cell-finish::after {
	content: "DONE";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	background: rgba(40,167,69,0.65);
	text-shadow: 0 0 3px #000;
	pointer-events: none;
	z-index: 10;
}


.cell-copy    { background:#e7e7ff; font-size:12px; }

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

/* Two panels inside a 100×100 cell */
table.grid .panels { display:flex; flex-direction:row; width:100px; height:100px; margin:0 auto; }
table.grid .panel { width:50px; height:100px; display:flex; align-items:center; justify-content:center; font-size:12px; }

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

/* 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: 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 ---------- */
.grid .door.success { box-shadow: inset 0 0 0 4px #28a745; }

/* Uniform darker gray for stored doors */
.grid .door.stored {
    filter: grayscale(100%);
    opacity: 0.7; /* darker look, not transparent */
}

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.35); /* stronger veil */
    pointer-events: none;
    z-index: 1;
}

.mirrored { -webkit-transform:scaleX(-1); transform:scaleX(-1); }
.mirrored { transform: scaleX(-1); }

/* HINT */
.grid .door.hint { position:relative; }
.grid .door.hint::after {
	content:""; position:absolute; inset:0; pointer-events:none;
	background:rgba(255,152,0,.22);
	box-shadow: inset 0 0 0 6px rgba(255,152,0,.75);
	z-index:2;
}
.grid .door.hint img { opacity:0.9; }

/* Overlays anchors */
table.grid td .door { position:relative; }

/* SUCCESS overlay */
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;
}

/* Flat images (no rounding) */
table.grid .door .panel img {
	padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important;
}

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

.TexteRed  { font-size:14px; color:#C30; }
.TextNew   { font-size:14px; color:#090; }
.TextGood {
	font-size:14px;
	color:#090;
}

.TextOK    { font-size:14px; color:#00F; }

/* ---------- FULL-WIDTH rules removed / disabled ---------- */
/* All the responsive calc() rules are disabled for fixed 100×100 layout */
table.grid { width:auto; max-width:none; }
table.grid td,
table.grid .panels,
table.grid .panel,
table.grid .clickable,
table.grid .door .panel img,
table.grid .cell-start img,
table.grid .cell-finish img,
table.grid .cell-copy img,
table.grid .cell-neutral img {
	width:100px !important;
	height:100px !important;
}

/* ---------- Thumbnail overlay ---------- */
.door .thumb {
	position:absolute;
	top:4px;
	left:4px;
	width:100px;
	height:100px;
	pointer-events:none;
}
.door .panels { position:relative; }

.copyright {
	font-weight: bolder;
	font-size: 12px;
	text-align: center;
}

/* --- FIXED SIZE for selector doors in 510_babelGame --- */
.cell-Go {
  width: 100px !important;
  height: 100px !important;
  padding: 0;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #666;
  background: transparent;
}
.cell-Go a {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
  body {
    margin: 0;
    padding: 0;
    font-size: 16px;
  }

  .body, .container, .game-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  button, .btn, .game-button {
    font-size: 1.1em;
    padding: 10px 14px;
    min-width: 60px;
    min-height: 40px;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px;
  }
}