@charset "utf-8";
/* Penn Station Halloween Game (2026) — friendly scarecrow version of hangman26 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body {
	background: #000000;
	overflow: hidden;
}
ul, li{
	list-style:none;
}
#headImg{
	max-width:650px;
	width:100%;
	height:auto;
	display:block;
}
#game {
	background:#3a2d63 url(../images/scene_bg.jpg) left top no-repeat;
	background-size:650px 475px;
	width: 620px;
	height: 445px;
	padding:15px;
	position:relative;
	margin:0 auto;
	overflow:hidden;
}
#displayText {
	position: absolute;
	z-index:20;
}

/* ---------- scene layers: all positioned on the 650 x 475 scene ---------- */
#playContainer{
	position:absolute;
	left:0;
	top:0;
	width:650px;
	height:475px;
}
.scHead, .scBody, .scArmL, .scArmR, .scLegs, .bgFront, .crow{
	position:absolute;
	background-repeat:no-repeat;
	background-size:100% 100%;
}
.scLegs{ background-image:url(../images/sc_legs.png); left:150px; top:312px; width:80px;  height:120px; z-index:2; }
.scArmL{ background-image:url(../images/sc_armL.png); left:70px;  top:200px; width:100px; height:60px;  z-index:3; transform-origin:95% 35%; }
.scArmR{ background-image:url(../images/sc_armR.png); left:210px; top:200px; width:100px; height:60px;  z-index:3; transform-origin:5% 35%; }
.scBody{ background-image:url(../images/sc_body.png); left:140px; top:215px; width:100px; height:115px; z-index:4; }
.scHead{ background-image:url(../images/sc_head.png); left:130px; top:112px; width:120px; height:120px; z-index:6; transform-origin:50% 85%; }
.bgFront{ background-image:url(../images/scene_front.png); left:0; top:0; width:650px; height:475px; z-index:8; pointer-events:none; }

/* gentle straw-arm sway once the arms are on */
.sway.scArmL{ animation: swayL 2.2s ease-in-out infinite alternate; }
.sway.scArmR{ animation: swayR 2.2s ease-in-out infinite alternate; }
@keyframes swayL { from{ transform:rotate(-2.5deg); } to{ transform:rotate(2deg); } }
@keyframes swayR { from{ transform:rotate(2.5deg); }  to{ transform:rotate(-2deg); } }

/* loss: head droops a little ("aww, shucks") */
.scHead.droop{ transition:transform .8s ease-in-out .9s; transform:rotate(12deg); }
/* win: happy hop */
.scHead.happy{ animation: hop .5s ease-in-out 4; }
@keyframes hop { 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-10px) rotate(-6deg); } }

/* crows fly in on the 5th wrong guess */
.crow{
	background-image:url(../images/crow.png);
	width:56px;
	height:48px;
	z-index:9;
	opacity:0;
	transition: transform 1.1s cubic-bezier(.2,.8,.3,1), opacity .3s;
}
.crow1{ left:165px; top:96px;  transform:translate(380px,-180px) scale(.6); }
.crow2{ left:82px;  top:186px; transform:translate(520px,-240px) scale(.6); transition-delay:.25s; }
.crow3{ left:262px; top:186px; transform:translate(300px,-260px) scale(.6) scaleX(-1); transition-delay:.5s; }
.crow.landed{ opacity:1; }
.crow1.landed{ transform:translate(0,0) scale(1); }
.crow2.landed{ transform:translate(0,0) scale(1); }
.crow3.landed{ transform:translate(0,0) scaleX(-1); }

#result {
	position: absolute;
	right:100px;
	top: 50%;
	z-index:9999;
}
.winner, .looser{
	width:220px;
}
.winner img, .looser img{
	width:100%;
	max-width:100%
}

#keyBoard{
	background:#fff;
	background:rgba(255,255,255,0.3);
	border-radius: 10px;
	position:absolute;
	right: 15px;
	top:15px;
	width: 85px;
	text-align: center;
	z-index:100;
}
#wordTable li{
	padding:5px;
	display:inline-block;
	vertical-align:top;
	*display:inline;
	*zoom:1;
}
.key{
	border-radius: 6px;
	border: 1px solid #FFF;
	background:#C00; /*ps red left side buttons A-Y*/
	width:22px;
	height:20px;
	font-size:15px;
	padding-top:2px;
	color:#FFF; /*white*/
}
.key1{
	border-radius: 6px;
	border: 1px solid #FFF;
	background:#C00; /*ps red right side buttons B-Z*/
	width:22px;
	height:20px;
	font-size:15px;
	padding-top:2px;
	color:#FFF; /*white*/
}
#textDisplay{
	right:100px;
	position:absolute;
	top:100px;
	z-index:20;
	background:rgba(255,255,255,0.88);
	border-radius:8px;
	padding:6px 10px;
}
.prWord{
	font-size:24px;
	font-family:Arial, Helvetica, sans-serif;
	color:#C00; /*ps red phrase*/
	text-align:center;
}
.prWord1{
	border-radius: 6px;
	border: 0px solid #FF0;
	background-color:#CCC;
	width:15px;
	height:28px;
	visibility:hidden;
}
.displayWord{
	border-radius: 6px;
	border: 0px solid #FF0;
	background-color:#E6E6E6;
	width:28px;
	height:28px;
}
.wordsDisplay >li>div{
	display:inline-block;
	vertical-align:top;
	*display:inline;
	*zoom:1;
	margin:0 2px 2px 0;
}
.dWord{
	visibility:hidden;
	color:#FFF;
	text-align:center;
	vertical-align:text-top;
	margin-left:7px;
	font-size:20px;
}
.displayWord1{
	border-radius: 6px;
	border: 0px solid #FF0;
	background-color:#CCC;
	width:28px;
	height:28px;
	visibility:hidden;
}

@media only screen and (max-width:680px){
	#game{
		width:auto;
		overflow:hidden;
	}
}

@media only screen and (max-width:600px){
	#keyBoard{
		top:initial;
		bottom:15px;
		right:0;
		width:100%;
	}
	#result, #textDisplay{
		right:15px;
	}
	/* phone: phrase goes up top (where the letter tiles were) so it doesn't cover the scarecrow's head */
	#textDisplay{
		top:15px;
		left:15px;
	}
}