/* Μια νύχτα στον Λόφο: layout around the pixel canvas. Colours are the site's. */
:root {
	--paper: #EEEADF;
	--ink: #121512;
	--forest: #1B4A2A;
	--forest-deep: #0F2E1A;
	--leaf: #A9D65A;
	--marker: #C8321E;
	--amber: #F2C96B;
	--font: 'Fira Sans Extra Condensed', 'Arial Narrow', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { height: 100dvh; } /* phones: the visible height, without the browser bars */
body {
	background: var(--forest-deep);
	color: var(--paper);
	font-family: var(--font);
	font-weight: 500;
	display: grid;
	place-items: center;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}
button { font: inherit; color: inherit; cursor: pointer; }

#game {
	position: relative;
	width: min(100vw, 177.78vh);
	width: min(100vw, 177.78dvh);
	aspect-ratio: 16 / 9;
	container-type: size;
	background: #000;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	font-size: 2.1cqw;
	line-height: 1.25;
	--u: 1cqw; /* every size below is in this unit */
}
#game:fullscreen { width: min(100vw, 177.78vh); }
#screen {
	display: block;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.play-only, .touch-only { display: none !important; }
.is-playing .play-only { display: flex !important; }
.is-playing.is-touch .touch-only { display: flex !important; }

/* ---------------------------------------------------------------- HUD */
#hud {
	position: absolute; top: calc(1.2 * var(--u)); right: calc(1.2 * var(--u));
	align-items: center; gap: calc(1 * var(--u));
}
#hud-clock {
	font-weight: 800; font-size: calc(3.4 * var(--u)); letter-spacing: .05em;
	background: var(--ink); color: var(--amber);
	padding: .1em .45em; border: calc(.3 * var(--u)) solid var(--amber);
	box-shadow: calc(.4 * var(--u)) calc(.4 * var(--u)) 0 rgba(0,0,0,.5);
}
#hud-clock.is-late { color: #ffb08a; border-color: var(--marker); animation: pulse 1s steps(2) infinite; }
@keyframes pulse { 50% { background: var(--marker); color: var(--paper); } }
#hud-status:empty { display: none; }
#hud-status {
	font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
	padding: .15em .5em; background: var(--forest); border: calc(.25 * var(--u)) solid var(--leaf);
}
#hud-status.is-seen { background: var(--marker); border-color: var(--paper); animation: pulse 0.4s steps(2) infinite; }
#hud-buttons { display: flex; gap: calc(.5 * var(--u)); }
#hud-buttons button {
	width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); padding: 0; font-size: calc(2.2 * var(--u));
	background: rgba(18,21,18,.8); border: calc(.25 * var(--u)) solid rgba(238,234,223,.5);
}
#hud-buttons button:hover, #hud-buttons button:focus-visible { border-color: var(--leaf); outline: none; }

#tasks {
	position: absolute; top: calc(1.2 * var(--u)); left: calc(1.2 * var(--u));
	flex-direction: column; align-items: flex-start;
	max-width: calc(31 * var(--u));
}
#tasks-toggle {
	font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
	background: var(--paper); color: var(--ink); border: 0;
	padding: .2em .6em; box-shadow: calc(.4 * var(--u)) calc(.4 * var(--u)) 0 rgba(0,0,0,.5);
}
#tasks-count { color: var(--marker); margin-left: .3em; }
#task-list {
	list-style: none; margin: calc(.6 * var(--u)) 0 0; padding: calc(.6 * var(--u)) calc(.8 * var(--u));
	background: rgba(15,46,26,.86); border: calc(.25 * var(--u)) solid rgba(169,214,90,.5);
	font-size: calc(1.25 * var(--u)); line-height: 1.15;
	max-height: calc(100cqh - 13 * var(--u)); overflow-y: auto; /* never down onto the inventory */
}
#tasks.is-closed #task-list { display: none; }
#task-list li { display: flex; gap: .5em; padding: .1em 0; }
#task-list b { font-weight: 800; display: block; }
#task-list em { font-style: normal; color: var(--amber); }
#task-list small { display: block; opacity: .75; font-size: .85em; }
#task-list .tick {
	flex: none; width: 1.1em; height: 1.1em; margin-top: .1em;
	border: calc(.2 * var(--u)) solid var(--paper); display: grid; place-items: center;
	font-weight: 800; color: var(--ink); font-size: .9em;
}
#task-list .is-done { opacity: .55; }
#task-list .is-done .tick { background: var(--leaf); border-color: var(--leaf); }
#task-list .is-done b { text-decoration: line-through; text-decoration-thickness: .15em; }

#hud-inv {
	position: absolute; left: calc(1.2 * var(--u)); bottom: calc(1.2 * var(--u));
	flex-wrap: wrap; gap: calc(.5 * var(--u)); max-width: calc(55 * var(--u));
	font-size: calc(1.5 * var(--u));
}
#hud-inv span {
	background: rgba(18,21,18,.8); border: calc(.2 * var(--u)) solid rgba(238,234,223,.4);
	padding: .1em .45em;
}

#area {
	position: absolute; top: calc(6 * var(--u)); left: 50%;
	transform: translate(-50%, calc(-1 * var(--u))); opacity: 0; transition: opacity .3s, transform .3s;
	font-weight: 800; font-size: calc(3 * var(--u)); text-transform: uppercase; letter-spacing: .08em;
	color: var(--paper); text-shadow: calc(.3 * var(--u)) calc(.3 * var(--u)) 0 var(--ink);
	pointer-events: none; white-space: nowrap;
}
#area.is-on { opacity: 1; transform: translate(-50%, 0); }

#toast {
	position: absolute; left: 50%; top: calc(12 * var(--u)); max-width: calc(60 * var(--u)); text-align: center;
	transform: translateX(-50%); opacity: 0; transition: opacity .25s;
	background: var(--paper); color: var(--ink); font-weight: 800;
	padding: .35em .8em; box-shadow: calc(.4 * var(--u)) calc(.4 * var(--u)) 0 rgba(0,0,0,.55);
	pointer-events: none;
}
#toast.is-on { opacity: 1; }

#prompt {
	position: absolute; left: 50%; bottom: calc(7 * var(--u)); transform: translateX(-50%);
	background: var(--ink); border: calc(.3 * var(--u)) solid var(--leaf); color: var(--paper);
	font-weight: 800; padding: .3em .8em; white-space: nowrap; pointer-events: none;
}
#prompt.is-hint { border-color: #8f927f; font-weight: 500; opacity: .9; white-space: normal; max-width: calc(60 * var(--u)); text-align: center; }
/* Bubbles over people (main.js sets left/top in % of the view, and --dx): Ρένα's thoughts,
   and the speech bubbles of the chant at the end. */
.bubble {
	position: absolute; transform: translate(-50%, calc(-100% - 2.2 * var(--u)));
	width: max-content; max-width: calc(40 * var(--u));
	background: var(--paper); color: var(--ink); font-style: italic; font-size: calc(1.7 * var(--u)); line-height: 1.2;
	padding: .45em .8em; border: calc(.3 * var(--u)) solid var(--ink); border-radius: 1.2em;
	box-shadow: calc(.4 * var(--u)) calc(.4 * var(--u)) 0 rgba(0,0,0,.5);
	pointer-events: none; text-align: center;
}
.bubble[hidden] { display: none; }
.bubble::before, .bubble::after {
	content: ''; position: absolute; background: var(--paper); border: calc(.3 * var(--u)) solid var(--ink); border-radius: 50%;
	left: calc(50% + var(--dx, 0) * 1cqw);
}
.bubble::before { width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); bottom: calc(-1.6 * var(--u)); transform: translateX(-80%); }
.bubble::after { width: calc(.8 * var(--u)); height: calc(.8 * var(--u)); bottom: calc(-2.6 * var(--u)); transform: translateX(-50%); }
/* Speech: square-ish, bold, with a pointed tail. */
.bubble.is-speech {
	font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
	font-size: calc(2 * var(--u)); border-radius: .4em; transform: translate(-50%, calc(-100% - 1.6 * var(--u)));
	animation: shout .25s steps(2) both;
}
.bubble.is-speech::before {
	width: 0; height: 0; border-radius: 0; background: none; transform: translateX(-50%);
	border: calc(.9 * var(--u)) solid transparent; border-top: calc(1.2 * var(--u)) solid var(--ink); border-bottom: 0;
	bottom: calc(-1.4 * var(--u));
}
.bubble.is-speech::after { display: none; }
.bubble.is-big { font-size: calc(2.6 * var(--u)); background: var(--marker); color: var(--paper); max-width: calc(50 * var(--u)); }
@keyframes shout { from { scale: .6; } to { scale: 1; } }
.is-portrait .bubble { max-width: 70%; font-size: calc(2.2 * var(--u)); }
.is-portrait .bubble.is-speech { font-size: calc(2.6 * var(--u)); }
.is-portrait .bubble.is-big { font-size: calc(3 * var(--u)); max-width: 80%; }

kbd {
	font: inherit; font-weight: 800; font-size: .85em;
	background: var(--paper); color: var(--ink); padding: 0 .35em; margin-right: .2em;
	border-bottom: .25em solid #bdb7a6;
}

/* ------------------------------------------------------------ dialogue */
#dialog {
	position: absolute; z-index: 2; /* above the thumb stick, so it can be tapped */ left: calc(4 * var(--u)); right: calc(4 * var(--u)); bottom: calc(3 * var(--u));
	display: flex; gap: calc(1.6 * var(--u)); align-items: flex-start;
	background: var(--paper); color: var(--ink);
	border: calc(.5 * var(--u)) solid var(--ink); box-shadow: calc(.8 * var(--u)) calc(.8 * var(--u)) 0 rgba(0,0,0,.6);
	padding: calc(1.4 * var(--u)) calc(1.8 * var(--u)); font-size: calc(2.3 * var(--u)); cursor: pointer;
}
#dialog[hidden] { display: none; }
#dlg-face { width: calc(9 * var(--u)); height: auto; image-rendering: pixelated; background: var(--forest); border: calc(.3 * var(--u)) solid var(--ink); flex: none; }
#dlg-face[hidden] { display: none; }
#dlg-name { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--marker); }
#dlg-text { margin: .2em 0 0; min-height: 2.5em; }
#dialog.is-narrator { background: var(--forest); color: var(--paper); font-style: italic; }
#dlg-choices { display: flex; flex-wrap: wrap; gap: calc(.6 * var(--u)); margin: .4em 0; }
#dlg-choices[hidden] { display: none; }
#dlg-choices button {
	background: var(--paper); color: var(--ink); border: calc(.3 * var(--u)) solid var(--ink);
	font-weight: 800; padding: .2em .7em; font-size: .9em;
}
#dlg-choices button.is-sel, #dlg-choices button:hover { background: var(--forest); color: var(--paper); }
#win-stats { white-space: pre-line; }
.panel .chant { font-weight: 800; text-transform: uppercase; color: var(--marker); letter-spacing: .02em; }
.dlg-next { text-align: right; font-size: .75em; font-weight: 800; opacity: .6; animation: pulse-o 1s steps(2) infinite; }
@keyframes pulse-o { 50% { opacity: .15; } }

/* ------------------------------------------------------------- screens */
.screen {
	position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--u));
	background: rgba(6,14,10,.45);
}
.screen[hidden] { display: none; }
.panel {
	background: var(--paper); color: var(--ink);
	border: calc(.6 * var(--u)) solid var(--ink); box-shadow: calc(1.2 * var(--u)) calc(1.2 * var(--u)) 0 rgba(0,0,0,.6);
	padding: calc(2.4 * var(--u)) calc(3.2 * var(--u)); max-width: calc(58 * var(--u)); text-align: center;
}
.panel p { margin: .5em 0; }
.panel h1, .panel h2 {
	font-weight: 800; text-transform: uppercase; line-height: .95; margin: .1em 0 .3em;
	color: var(--forest); letter-spacing: .01em;
}
.panel h1 { font-size: calc(7 * var(--u)); }
.panel h2 { font-size: calc(5 * var(--u)); }
.kicker { font-weight: 800; text-transform: uppercase; letter-spacing: .2em; color: var(--marker); font-size: calc(1.8 * var(--u)); }
.small { font-size: .8em; opacity: .8; }
.keys { font-size: .75em; opacity: .85; }
.big, .big-link {
	display: inline-block; margin: .5em .2em 0;
	background: var(--forest); color: var(--paper); border: 0;
	font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: calc(2.6 * var(--u));
	padding: .35em 1.2em; box-shadow: calc(.5 * var(--u)) calc(.5 * var(--u)) 0 var(--ink); text-decoration: none;
}
.big:hover, .big:focus-visible, .big-link:hover, .big-link:focus-visible { background: var(--marker); outline: none; }
.big-link { background: var(--ink); }
.big-link[hidden] { display: none; }
#title-turtle { width: calc(9 * var(--u)); image-rendering: pixelated; }
#title-hero { width: calc(12 * var(--u)); image-rendering: pixelated; filter: drop-shadow(calc(.6 * var(--u)) calc(.6 * var(--u)) 0 rgba(0,0,0,.5)); animation: bob 1s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(calc(-.5 * var(--u))); } }
.screen--caught { background: rgba(120,20,10,.35); }
.screen--caught .panel { transform: rotate(-2deg); }
.screen--caught h2 { color: var(--marker); }
.screen--win { background: rgba(255,200,120,.12); align-items: flex-start; padding-top: calc(4 * var(--u)); }

/* --------------------------------------------------------------- touch */
#stick { position: absolute; inset: 0; }
#btn-act {
	position: absolute; right: calc(3 * var(--u)); bottom: calc(16 * var(--u)); width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%;
	align-items: center; justify-content: center; font-size: calc(5 * var(--u));
	background: rgba(169,214,90,.85); border: calc(.5 * var(--u)) solid var(--ink);
}
.is-touch #hud-inv { bottom: auto; top: calc(7.5 * var(--u)); left: auto; right: calc(1.2 * var(--u)); justify-content: flex-end; max-width: calc(40 * var(--u)); }
.is-touch #prompt { bottom: calc(3 * var(--u)); }
.is-touch #dialog { right: calc(17 * var(--u)); }
.touch-note { display: none; }
.is-touch .keys { display: none; }
#btn-full[hidden] { display: none; }

.is-touch .touch-note { display: block; color: var(--marker); }

/* Embedded in the site: fill the iframe. */
.is-embed body { background: #000; }
.is-embed #game { width: 100vw; max-height: 100vh; }

/* ------------------------------------------------- phone held upright */
/* main.js makes the view 216 game-pixels wide and as tall as the screen (--ar = width/height). */
.is-portrait #game { width: min(100vw, calc(100dvh * var(--ar))); --u: 1.75cqw; font-size: 3.7vw; }
.is-portrait #tasks { max-width: calc(100% - 2.4 * var(--u)); }
.is-portrait #area { top: calc(26 * var(--u)); font-size: calc(4 * var(--u)); }
.is-portrait #toast { top: calc(34 * var(--u)); max-width: 88%; }
.is-portrait #prompt { bottom: 31%; max-width: 88%; white-space: normal; text-align: center; }
.is-portrait #dialog, .is-portrait.is-touch #dialog { left: calc(3 * var(--u)); right: calc(3 * var(--u)); }
.is-portrait #btn-act { bottom: 11%; right: calc(5 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.is-portrait .screen { flex-direction: column; }
.is-portrait .panel { max-width: 90%; padding: calc(3 * var(--u)); }
.is-portrait #title-hero { display: none; }
.is-portrait .screen--win { padding-top: calc(8 * var(--u)); }
#area .ord { text-transform: none; }

/* Penalty and the little games: the whole screen is the button, so no thumb stick. */
.is-mini #stick { display: none; }

/* Phone: the task list opens as a big panel in the middle (the game waits), tap it to close. */
.is-touch #tasks:not(.is-closed) #task-list {
	position: fixed; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); /* fixed = within #game (it has containment) */
	width: min(92%, calc(70 * var(--u))); max-height: 86%; margin: 0; overflow-y: auto;
	font-size: calc(2 * var(--u)); padding: calc(1.4 * var(--u)) calc(1.8 * var(--u));
	background: rgba(15,46,26,.97); box-shadow: 0 0 0 100vmax rgba(0,0,0,.55);
}
.is-touch #tasks:not(.is-closed) #task-list::after {
	content: 'Πάτα για να κλείσει'; display: block; text-align: center; opacity: .6; font-size: .8em; margin-top: .5em;
}
.is-touch #tasks { max-width: none; }
.is-portrait.is-touch #tasks:not(.is-closed) #task-list { font-size: calc(2.6 * var(--u)); }
#tasks.is-new #tasks-toggle { animation: nudge 1s steps(2) infinite; }
@keyframes nudge { 50% { background: var(--amber); } }

/* Title of the penalty / little games, over the canvas. */
#mini-title {
	position: absolute; left: 50%; top: calc(8 * var(--u)); transform: translateX(-50%); width: max-content; max-width: 90%;
	font-weight: 800; font-size: calc(2.8 * var(--u)); text-transform: uppercase; letter-spacing: .06em; text-align: center;
	color: var(--paper); text-shadow: calc(.3 * var(--u)) calc(.3 * var(--u)) 0 var(--ink); pointer-events: none;
}
#mini-title[hidden] { display: none; }
#mini-title { top: calc(1.6 * var(--u)); max-width: 52%; font-size: calc(2.4 * var(--u)); } /* sideways: up top, between «Λίστα» and the clock */
.is-portrait #mini-title { top: calc(30 * var(--u)); font-size: calc(3.6 * var(--u)); }
.is-portrait #mini-title { max-width: 90%; }

/* The little games use the whole screen: no ✋ button over them. */
.is-playing.is-touch.is-mini #btn-act { display: none !important; }
.is-portrait.is-mini #prompt { bottom: 10%; }