/* no text selection or long-press callout anywhere, on any element - this is a game, not a
   document, and a long-press-to-select (or iOS's "Copy/Look Up" callout) firing mid-drag looks
   like a bug. Applied via a universal selector, not just html/body: user-select doesn't reliably
   cascade onto every descendant in practice (confirmed by real-device testing), so every element
   gets it set directly instead of relying on inheritance. */
*, *::before, *::after{
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* ...except where text is typed: WebKit (every iPhone browser) lets you type in a field under the rule above but not select
   or replace its text (Select-all selects nothing) - the questionnaire's text box and every admin editor. 2026-10-20. */
input, textarea, select, [contenteditable="true"]{
	-webkit-user-select: text;
	user-select: text;
}

html, body{
	margin:0 auto;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	font-family: arial;

	direction: rtl;
}
/* a game screen taller than the phone (a big board, a long clue) scrolls up and down - with no scrollbar shown (the user, 2026-11-02).
   One scroller (the body, as the short-screen rule below always did); a word itself never scrolls the page (.moveword touch-action: none),
   a swipe on the background does. No pull-to-refresh / bounce past the ends */
html, body{ overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: none; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar{ display: none; }

a{
	color: #337c33;
}

#container{
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	min-height: 100%;   /* grows with a tall game screen (the body scrolls) - a mini-game page keeps the screen's height, below */
	display: flex;
	flex-direction: column;
	border-left: 1px solid;
	border-right: 1px solid;

	position: relative;
}

/*logo*/
.logo{
	display: block;
	margin: 4px auto 2px;
	height: 96px;
	width: auto;
	max-width: 82%;
	object-fit: contain;
	cursor: pointer;
	transition: filter .3s;
}

.logo:hover{
	filter: brightness(1.05);
}

#lolitimer{
	height: 32px;
    width: auto;
    /* min-width: 82px; */
    position: absolute;
	line-height: 28px;
    font-size: 24px;
    color: #3498db;
    text-shadow: 1px 1px 1px #aaa;
    top: 16px;
    left: 3%;
    font-style: italic;
    z-index: 1000;
}

/*nav bar*/
.nav_bar{
	text-align: center;
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 18px;
}

.btn{
	padding: 2px 4px;
	font-size: 16px;
	color: #3498db;
	background: transparent;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color .2s;
}

.btn:hover{
	color: #146093;
}

.rst_ic{
	display: inline-block;
	font-size: 1.1em;
	font-weight: bold;
	-webkit-text-stroke: 0.6px currentColor;
	text-decoration: none;
}

.game_top{
	position: relative;
}

/* game top */
.game_top .row {
    margin: 10px 0px 4px;
}

/* .toprow is position:relative so #hintWrap can anchor to the question row
   (row1) without affecting the question's own centering */
.toprow{ position: relative; }

/* hint button (💡) + counter - fixed to the left of the question line, only
   while a clue is up and waiting for an answer (isAnswering() / refreshHintBtn) */
#hintWrap[hidden]{ display: none; }   /* #hintWrap's own `display` below outranks the [hidden]
                                          UA rule (id beats attribute selector) without this */
#hintWrap{
	position: absolute;
	top: 50%;
	inset-inline-end: 2px;
	transform: translateY(-50%);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
}
.hint_btn{
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #3498db;
	border-radius: 50%;
	background: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s;
}
.hint_btn:hover{ background: #eaf4fb; }
.hint_left{
	font-size: 10px;
	color: #999;
	white-space: nowrap;
	margin-top: 2px;
}

/* full-screen backdrop behind a blocking hint reveal (see showHintReveal) */
#hintShadow{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.45);
	z-index: 25;
}

#hint_pop{
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 4px;
	z-index: 26;
	background: #fff;
	border: 1px solid #cfe3f2;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0,0,0,.18);
	padding: 16px 16px 12px;
	max-width: 92%;
	text-align: center;
	font-size: 16px;
}
#hint_pop .hp_title{ font-weight: bold; color: #2c6a95; margin-bottom: 6px; }
#hint_pop .hp_msg{ line-height: 1.4; }
#hint_pop .hp_note{ font-size: 12px; color: #888; margin-top: 6px; }
#hint_pop .hp_btns{
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(2, minmax(96px, 1fr));
	gap: 8px;
}
#hint_pop .hp_btns.hp_single{ grid-template-columns: 1fr; }
#hint_pop button{
	padding: 8px 10px;
	font-size: 15px;
	color: #2c6a95;
	background: #eef6fc;
	border: 1px solid #d6e8f5;
	border-radius: 8px;
	cursor: pointer;
}
#hint_pop button:hover{ background: #dcecf8; }
#hint_pop .hp_cancel{
	display: block;
	margin: 10px auto 0;
	padding: 2px 4px;
	border: 0;
	background: none;
	color: #3498db;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 14px;
}
#hint_pop .hp_cancel:hover{ color: #146093; }


.rotBlk{
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #555;

	border-radius: 8px;
	background: #eee;

	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);   /* vertical middle of the answer row, was sitting at its top
	                                   edge and overlapping the hint counter text above it */
	border: 1px solid #ccc;
	opacity: 0;

	transition: opacity .5s;
}

.start_btn {
	display: inline-block;
    background: #3498db;
    padding: 4px 16px;
    color: white;
	border-radius: 999px;
	transition: 1s;
	box-shadow: 1px 1px 5px 0 #555;
}

.start_btn:hover {
	background: #146093;
}

.question {
	height: 20px;
	color: #777;
	text-shadow: 1px 1px 2px #39579b;
	font-size: 24px;
    line-height: 26px;
	opacity: 0;

	height: auto;
	transition: 1s;
}

/* while a word is dragged: the squares it would take if let go now (showDropPreview) - where it fits, not whether it's right */
.row_block.lc_drop_preview .inner_box{
	box-shadow: inset 0 0 0 1.5px rgba(53, 150, 220, .45), 0 0 6px rgba(53, 150, 220, .25) !important;   /* older Safari: no color-mix */
	background-color: rgba(53, 150, 220, .1) !important;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lc-preview, rgb(53, 150, 220)) 45%, transparent),
	            0 0 6px color-mix(in srgb, var(--lc-preview, rgb(53, 150, 220)) 25%, transparent) !important;   /* the design's accent, soft */
	background-color: color-mix(in srgb, var(--lc-preview, rgb(53, 150, 220)) 10%, transparent) !important;
}
/* the word being carried is a little see-through, so the lit squares under it show */
.moveword.lc_dragging{ opacity: .75; }

/* "ההגדרה:" - small and quiet, right before the question text (showClue) */
.question .q_inner{ display: inline-block; max-width: 100%; text-align: start; }   /* a wrapped clue's second line starts at the right, not centred */
.question .q_label{ font-size: 14px; font-weight: normal; opacity: .75; margin-inline-end: 6px; vertical-align: 2px; }   /* keeps the design's colour + shadow (dark designs need it) */

/* autoplay only: clue history stacked oldest-on-top, newest at the bottom.
   Fixed height + flex-end so adding a row grows the stack UPWARD into
   reserved space and never shoves the board below it. */
.question.clue_stack{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	gap: 3px;
	line-height: 1.15;
	height: 4.6em;   /* ~= a full 4-row stack: steady once full, no bounce, minimal slack */
}
.clue_row{ transition: text-shadow .35s ease, opacity .35s ease; }
.clue_stack .clue_row:last-child{ margin-top: 0.3em; }   /* newest - a little gap from the old ones above */
.clue_row.aged1{ text-shadow: none; font-size: 90%; opacity: .85; }
.clue_row.aged2{ text-shadow: none; font-size: 85%; opacity: .7; }
.clue_row.aged3{ text-shadow: none; font-size: 85%; opacity: .5; }

/* autoplay: order number(s) + direction arrow(s) on a placed word's first
   letter. Words sharing a first square: extra numbers stack down, arrows left. */
.ap_badge{ position: absolute; pointer-events: none; z-index: 40; }
.ap_badge .ap_ords{
	position: absolute; top: 1px; right: 2px;
	display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.ap_badge .ap_dirs{
	position: absolute; bottom: 0; right: 2px;
	display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 2px;
}
.ap_badge .ap_ord{ font-size: 10px; line-height: 1; font-weight: bold; color: #12467a; }
.ap_badge .ap_dir{ font-size: 13px; line-height: 1; font-weight: bold; color: #12467a; }

.txt_entry {
	border-bottom: 1px solid cornflowerblue;
    color: #aaa;
	min-height: 64px;
    min-width: 100px;
    text-align: center;
	text-shadow: 1px 1px 2px #999;
	transition: .5s;
	cursor: pointer;

	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.txt_entry.started .ans_block{
	color: cornflowerblue;
	/*
	font-size: 24px;*/
}

.txt_entry.is_wrong .ans_block{
	color: red;
	/*font-size: 24px;
	font-weight: bold;*/
	transition: .5s;
}

.txt_entry.is_almost .ans_block{
	color: #e8963c;
	background-color: rgba(232, 150, 60, 0.18);
	transition: .25s;
}

.txt_entry .ans_block {
	/* line-height: 100%; */
    background-color: #eeeeeeb5;
    border: 1px solid transparent;
    
}


/*game*/
.game_area{
	margin: 5px auto 0;
    position: relative;

    display: flex;
    flex-direction: column;
    align-content: space-around;
    justify-content: space-around;
    align-items: center;

	width: 380px;
    
}


.toprow, .ansrow, .ans_block, .move_letter, .moveword{
	display: flex;
	justify-content: center;
	margin: 5px;

	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}


.row_block, .ans_block, .move_letter{
	line-height: 40px;
    font-size: 40px;
    
    border-radius: 8px;
	/*transition:  1.6s; /*transform*/
	/*background: #ddd;*/

}

.row_block, .move_letter{
	width: 52px;
    height: 46px;
	
}


.ans_block{
	width: 51px;
    height: 47px;
    
}

.row, .row_block {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;

	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.row{
	
}

.row_block {
    padding: 5px;
    background: transparent;
	border-radius: 0;
	position: relative;
}

.row_block .inner_box {
	display: block;
    /* background: #ddd; */
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100%;
    border: 2px solid #ccc;
	transition: background .25s, border-color .25s;
}


.row_block.drop-activated{
	/*background:rgba(185, 250, 7, 0.562);*/
}

/* per-word action bar + info tip — both are CHILDREN of the word, so they ride along with it
   (drag / animation) and can never end up detached */
.moveword.wa_open,
.moveword.wa_sel{   /* wa_sel: selected look without a bar (feature bar_on_reveal off) */
	z-index: 30;   /* the open word + its bar render above the others */
	box-shadow: 0 2px 10px rgba(53, 150, 220, .4);
}

#word_actions{
	position: absolute;
	top: 100%;   /* left / top / width are set by placeWordActions() */
	left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;   /* one .wa_row per line - see showWordActions() */
	gap: 6px;
	padding: 5px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #cfe3f2;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
/* a row never wraps on its own width - only an explicit `break` in the action list starts a new
   .wa_row (build mode: the bank-insert action gets its own 2nd row, everything else stays 1) */
.wa_row{ display: flex; gap: 6px; white-space: nowrap; justify-content: center; }
/* the bar as a drawn shape joined to the word (placeWordActions, friends round): the outline and fill are an SVG behind the
   buttons, so the box itself draws nothing - ID + class beats every design's own #word_actions look. The word's side
   where they meet goes square and frameless, so word and bar read as one outline. No pointer arrow. */
#word_actions::before, #word_actions::after{ display: none; }
#word_actions.wa_shape{ background: none; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box; justify-content: flex-start; }
#word_actions.wa_shape .wa_row{ position: relative; z-index: 1; }
.wa_shape_svg{ opacity: .8; position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.16)); }
/* the drawer (friends round, 2026-10-23): a newly shown bar slides out from the edge where it joins the word - the part still over the word
   is clipped, so it seems to come from under it. showWordActions adds .wa_enter once and takes it off when this ends (a re-placement or a
   resize never replays it); the open sides' clip is negative so the shape's shadow isn't cut. Off under reduced motion. */
@keyframes wa_slide_b{ from{ transform: translateY(-100%); clip-path: inset(100% -14px -14px -14px); } to{ transform: translateY(0); clip-path: inset(0 -14px -14px -14px); } }
@keyframes wa_slide_t{ from{ transform: translateY(100%); clip-path: inset(-14px -14px 100% -14px); } to{ transform: translateY(0); clip-path: inset(-14px -14px 0 -14px); } }
@keyframes wa_slide_r{ from{ transform: translateX(-100%); clip-path: inset(-14px -14px -14px 100%); } to{ transform: translateX(0); clip-path: inset(-14px -14px -14px 0); } }
@keyframes wa_slide_l{ from{ transform: translateX(100%); clip-path: inset(-14px 100% -14px -14px); } to{ transform: translateX(0); clip-path: inset(-14px 0 -14px -14px); } }
#word_actions.wa_enter.wa_join_b{ animation: wa_slide_b .15s cubic-bezier(.2, .8, .3, 1) both; }
#word_actions.wa_enter.wa_join_t{ animation: wa_slide_t .15s cubic-bezier(.2, .8, .3, 1) both; }
#word_actions.wa_enter.wa_join_r{ animation: wa_slide_r .15s cubic-bezier(.2, .8, .3, 1) both; }
#word_actions.wa_enter.wa_join_l{ animation: wa_slide_l .15s cubic-bezier(.2, .8, .3, 1) both; }
@media (prefers-reduced-motion: reduce){ #word_actions.wa_enter{ animation: none !important; } }
.moveword.wa_open.wa_join_b{ border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom-color: transparent !important; }
.moveword.wa_open.wa_join_t{ border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top-color: transparent !important; }
.moveword.wa_open.wa_join_r{ border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right-color: transparent !important; }
.moveword.wa_open.wa_join_l{ border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left-color: transparent !important; }
/* a vertical word's bar: each button's words one under the other, the arrow under them */
#word_actions.wa_vert .wa_row{ flex-direction: column; }
#word_actions.wa_vert .wa_btn{ display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.15; }
#word_actions.wa_vert .wa_lbl{ display: flex; flex-direction: column; align-items: center; order: 1; }
#word_actions.wa_vert .wa_ic{ order: 2; }

.wa_btn{
	padding: 3px 5px;
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
	color: #2c6a95;
	background: #eef6fc;
	border: 1px solid #d6e8f5;
	border-radius: 6px;
	cursor: pointer;
}
/* the tile's colour on the buttons (waColours: only where their text stays readable - else the design's own button look) */
#word_actions.wa_shape.wa_tinted .wa_btn{ background-color: var(--wa-btn-bg); background-image: none; }   /* lit: the accent at 28% */
#word_actions.wa_shape.wa_tinted .wa_btn:hover{ filter: brightness(.94); }
.wa_btn:hover{ background: #dcecf8; }

.wa_ic{ display: inline-block; vertical-align: middle; transform-origin: center; }
.wa_ic_rot{ position: relative; top: -1px; margin: 0 2px; font-size: 1.15em; }
/* the bar's main action (rotate): bigger and bold. Two classes, so it beats every design's .wa_btn size */
.wa_btn.wa_btn_main{ font-size: 16px; padding: 1px 6px; font-weight: bold; line-height: 1.15; }
.wa_btn.wa_btn_main .wa_ic{ font-size: 1.35em; }
/* the rotate arrows: a third of a circle as a thin outline with a wider head at each end (WA_ARC_V / WA_ARC_H) */
.wa_arc{ width: 1.8em; height: 1.8em; vertical-align: -.4em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* the rotate arrow follows the word's state (↕ to vertical / ↔ to horizontal) - over each design's fixed rotate glyph */
.wa_ic_rot.wa_ic_turn::before{ content: attr(data-ic); }
.wa_arc.wa_arc_v{ width: 1.35em; height: 1.35em; margin: 3px 0; vertical-align: -.35em; }   /* the standing arrow: shorter, room above and below */
/* a short word: the bar squeezed to just fit under it (placeWordActions) */
#word_actions.wa_tight .wa_btn.wa_btn_main{ font-size: 14px; padding: 0 4px; line-height: 1.1; }
#word_actions.wa_tight .wa_arc.wa_arc_v{ width: 1.15em; height: 1.15em; margin: 1px 0; }
#word_actions.wa_tight .wa_arc{ width: 1.3em; height: 1.3em; }
.wa_ic_up{ position: relative; top: -2px; margin: 0 4px; font-weight: bold; transform: scaleX(2.4) scaleY(1.4); }
.wa_ic_info{ position: relative; top: -1px; margin: 0 3px; color: #1d6fc0; font-weight: bold; transform: scaleX(1.9); }

/* per-word info tooltip — child of the word, sits above it */
#word_tip{
	position: absolute;
	bottom: 100%;
	margin-bottom: 9px;
	inset-inline-start: 0;
	width: max-content;
	max-width: 220px;
	padding: 7px 11px;
	font-size: 13px;
	line-height: 1.35;
	text-align: center;
	color: #333;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0,0,0,.2);
	transition: opacity .4s;
}
#word_tip.fade{ opacity: 0; }

.moveword{
	margin: 0;

	cursor: grab;
	z-index: 10;

	/* a word reads as one object: soft same-hue border + fill, rounded */
	padding: 3px;
	border-radius: 9px;
	border: 1px solid rgba(53, 150, 220, .26);
	background: rgba(53, 150, 220, .09);

	position: absolute;

	touch-action: none;
	user-select: none;
	
	
	/*
	top: 45%;
    margin-right: -5px;
	margin: 0 21%;
	*/

	/*min-width: 405px; */ /* (shold be claculated at runtime - as the grids' rows width) */
	
}

.moveword.initial{
	/*top: 7%;
    right: 16%;*/
}

.moveword.dirvert{
	flex-direction: column;

	padding-block-start: 3px;
}

/* a placed word looks like a discovered word: a rounded group frame coloured by result,
   sized in JS to span exactly the cells it covers. The letters show through from the
   grid cells (.covered), which get matching rounded tinted tiles. */
.moveword.placed{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border-radius: 8px;
}
.moveword.placed .ans_block{ display: none; }

.moveword.placed.st_correct{ border-color: rgba(53, 165, 53, .5);   background: rgba(53, 165, 53, .10); }
.moveword.placed.st_almost { border-color: rgba(232, 150, 60, .55); background: rgba(232, 150, 60, .11); }
.moveword.placed.st_wrong  { border-color: rgba(196, 52, 75, .5);   background: rgba(196, 52, 75, .09); }

.moveword.locked{ cursor: default; }   /* can be tapped for info; drag is blocked in JS */

/* a cell under a placed word: a thin, semi-transparent, rounded tile in the word's colour
   (no grey frame). Un-covered cells keep the plain grey square. */
.row_block.covered .inner_box{
	border-radius: 5px;
	border-width: 1px;
	border-color: rgba(120, 120, 120, .3);
	background: transparent;
	color: #333;
}
.row_block.covered.place_correct .inner_box{ border-color: rgba(53, 165, 53, .45);  background: rgba(53, 165, 53, .12); color: #2f8f2f; }
.row_block.covered.place_almost  .inner_box{ border-color: rgba(232, 150, 60, .5);  background: rgba(232, 150, 60, .14); color: #b9791b; }
.row_block.covered.place_wrong   .inner_box{ border-color: rgba(196, 52, 75, .45);  background: rgba(196, 52, 75, .10); color: #b23b5e; }


.moveword .move_letter{
	
	margin-top: 0;
	margin-bottom: 0;
	
	box-shadow: 0 1px 2px rgba(0,0,0,0);
	transition:  0.1s;
	
}

.moveword.dirvert .move_letter{
	margin-bottom: 15px;
}

.moveword.raised .move_letter{
	
	text-shadow: 1px 1px 2px lightgreen;
	font-weight: bold;
	box-shadow: 0 5px 15px rgba(0,0,0,0.8);
	
}




.ansrow{
	cursor: grab;
}


.moveword .ans_block{
	cursor: grab;
    transition: 0.3s;
    background: rgba(53, 150, 220, .14);
    box-shadow: 0 1px 3px rgba(53, 150, 220, .18);
    border: 1px solid rgba(53, 150, 220, .22);
	border-radius: 6px;

	color: #2b6fb0;
    text-shadow: 1px 1px 2px #cdd9e6;

	margin: 4px;
}

.moveword.dirvert .ans_block{
	margin-block-end: 3px;
    margin-block-start: 4px;
}

.moveword.initial .ans_block{
	/*
	color: #4acb4a;
    text-shadow: 2px 1px 3px #389b38;
    */
}

.moveword.placed .ans_block{
	
	color: transparent;
    text-shadow: none;
	border: none;
    background: none;
    box-shadow: none;
	
	padding-inline-end: 2px;
    margin-block-end: 2px;
}

.moveword.dirvert.placed .ans_block {
    margin-block-end: 5px;
    margin-block-start: 4px;

	padding-inline-end: 0;
}

.moveword.placed .ans_block:last-child{
	margin-block-end: 0;
	margin-inline-end: 3px;
}

.moveword.dirvert.placed .ans_block:last-child{
	padding-block-end: 3px;
}

.ansrow:active .ans_block{
	background: rgb(221 221 221 / 5%);
	border: 1px solid rgb(204 204 204 / 8%)
	
}

.ansrow.dirvert{
	flex-direction: column;
}

.ansrow.dirvert .ans_block{
	margin-block-end: 10px;
}

/* placement result: cell fill + border + letter colour together */
.place_correct .inner_box{
	color: #2f8f2f;
	background: rgba(53, 165, 53, 0.18);
	border-color: #35a535;
}
.place_almost .inner_box{
	color: #b9791b;
	background: rgba(232, 150, 60, 0.20);
	border-color: #e8963c;
}
.place_wrong .inner_box{
	color: #b23b5e;
	background: rgba(196, 52, 75, 0.13);
	border-color: #d98aa0;
}

/* ---- word "discovered" reveal: a quick blink-out then pop back ---- */
.moveword.word_reveal{
	animation: wordReveal .55s cubic-bezier(.2, 1.4, .35, 1) both;
	transform-origin: center;
}
@keyframes wordReveal{
	0%   { opacity: 0; transform: scale(.35); }
	14%  { opacity: 0; }
	40%  { opacity: 1; transform: scale(1.12); }
	66%  { transform: scale(.97); }
	100% { transform: none; }
}

/* ---- the blinking cursor in the answer row (switches answer_cursor / _shape / _speed; classes set by applyFeatureSwitches).
   A ::after of #the_answer - never a child, so the typing code (the row's children = the typed letters) never sees it. */
html.lc_cursor #the_answer.started::after{
	content: "";
	flex: 0 0 auto;
	align-self: flex-end;
	width: 26px;
	height: var(--lc-cursor-w, 2px);
	margin: 0 6px 12px;
	background: var(--lc-cursor, cornflowerblue);
	animation: lcCursorBlink var(--lc-cursor-ms, 1000ms) steps(1, end) infinite;
}
html.lc_cursor.lc_cursor_rect #the_answer.started::after{
	align-self: center;
	width: 14px;
	height: 34px;
	margin: 0 6px;
	border-radius: 2px;
	opacity: .85;
}
html.lc_cursor.lc_cursor_vert #the_answer.started::after{   /* a vertical line, as in most text editors */
	align-self: center;
	width: var(--lc-cursor-w, 2px);
	height: 34px;
	margin: 0 6px;
}
@keyframes lcCursorBlink{ 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce){ html.lc_cursor #the_answer.started::after{ animation: none; } }

/* ---- particle FX layer (water / fire / dust) ---- */
.fx{
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 26;
}
/* the blur+contrast pair makes overlapping blobs merge into organic shapes (fire, water, dust) */
.fx_goo{
	position: absolute;
	left: 0;
	top: 0;
}
.water_goo{ filter: blur(3px) contrast(6); }
.fire_goo { filter: blur(6px) contrast(11); }
.dust_goo { filter: blur(4px) contrast(5); mix-blend-mode: multiply; }

/* water */
.wblob{
	position: absolute; left: 0; top: 0;
	width: 20px; height: 20px; margin: -10px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #f2fbff, #9fd8f4 55%, #4aa8dd 92%);
	transform: translate(0,0) scale(.3);
	animation: wblob .68s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes wblob{
	0%   { transform: translate(0,0) scale(.3); opacity: 0; }
	18%  { opacity: 1; }
	60%  { transform: translate(var(--tx), var(--ty)) scale(var(--s)); opacity: .95; }
	100% { transform: translate(calc(var(--tx) * 1.1), calc(var(--ty) + 26px)) scale(.15); opacity: 0; }
}
.wdrop{
	position: absolute; left: 0; top: 0;
	width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2);
	border-radius: 60% 60% 65% 65% / 75% 75% 55% 55%;
	background: linear-gradient(180deg, #e7f6fd, #6cc0e8);
	box-shadow: 0 0 3px rgba(120,200,240,.8);
	animation: wdrop .8s ease-out forwards;
}
@keyframes wdrop{
	0%   { transform: translate(0,0); opacity: 0; }
	12%  { opacity: 1; }
	45%  { transform: translate(var(--tx), var(--ty)); opacity: 1; }
	100% { transform: translate(calc(var(--tx) * 1.22), calc(var(--ty) + var(--fall))); opacity: 0; }
}
.wcrown{
	position: absolute; left: 0; top: 0;
	width: 36px; height: 24px; margin: -22px 0 0 -18px;
	border-radius: 50% 50% 45% 45% / 75% 75% 25% 25%;
	background: radial-gradient(ellipse at 50% 100%, #d7f2ff 0%, #86ceef 45%, rgba(134,206,239,0) 74%);
	transform: scaleY(.15);
	transform-origin: bottom center;
	animation: wcrown .5s ease-out forwards;
}
@keyframes wcrown{
	0%   { transform: scaleY(.12) scaleX(.7); opacity: 0; }
	35%  { transform: scaleY(1.2) scaleX(1); opacity: .95; }
	100% { transform: scaleY(.3) scaleX(1.35); opacity: 0; }
}

/* fire */
.fblob{
	position: absolute; left: 0; top: 0;
	width: 36px; height: 36px; margin: -18px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 68%,
		#fff3b0 0%, #ffcf3a 28%, #ff7a1a 58%, #e02a0a 84%, rgba(224,42,10,0) 100%);
	animation: fblob .7s ease-out forwards;
}
@keyframes fblob{
	0%   { transform: translate(0, 10px) scale(.2); opacity: 0; }
	20%  { opacity: 1; }
	55%  { transform: translate(var(--x), calc(var(--rise) * -.55)) scale(var(--fs)); opacity: 1; }
	100% { transform: translate(calc(var(--x) * 1.5), calc(var(--rise) * -1)) scale(.12); opacity: 0; }
}
.ember{
	position: absolute; left: 0; top: 0;
	width: var(--esz); height: var(--esz); margin: calc(var(--esz) / -2);
	border-radius: 50%;
	background: #ffd24d;
	box-shadow: 0 0 6px 1px #ff8a1a;
	animation: ember .9s ease-out forwards;
}
@keyframes ember{
	0%   { transform: translate(0,0) scale(1); opacity: 0; }
	15%  { opacity: 1; }
	100% { transform: translate(var(--ex), var(--ey)) scale(.15); opacity: 0; }
}

/* dust */
.row_block.landed .inner_box{
	animation: cellLand .42s ease-out;
}
@keyframes cellLand{
	0%   { transform: translateY(-3px) scale(1.07); }
	35%  { transform: translateY(2px) scale(.95); }
	70%  { transform: translateY(0) scale(1.02); }
	100% { transform: none; }
}
.dblob{
	position: absolute; left: 0; top: 0;
	width: 30px; height: 30px; margin: -15px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(140,128,104,.85) 0%, rgba(140,128,104,0) 72%);
	animation: dblob .8s ease-out forwards;
}
@keyframes dblob{
	0%   { transform: translate(0, 4px) scale(.2); opacity: 0; }
	20%  { opacity: .95; }
	100% { transform: translate(var(--dx), var(--dy)) scale(var(--ds)); opacity: 0; }
}
.dfleck{
	position: absolute; left: 0; top: 0;
	width: 3px; height: 3px; margin: -1.5px;
	border-radius: 50%;
	background: #7a6f58;
	animation: dfleck .9s ease-out forwards;
}
@keyframes dfleck{
	0%   { transform: translate(0,0); opacity: 0; }
	15%  { opacity: 1; }
	100% { transform: translate(var(--fx), var(--fy)); opacity: 0; }
}

/* red pill for the trap message, sitting on the normal notification line */
#notification .note_pill{
	display: inline-block;
	background: rgba(216, 30, 15, .94);
	color: #fff;
	font-weight: bold;
	letter-spacing: .5px;
	padding: 2px 14px;
	border-radius: 999px;
	box-shadow: 0 3px 12px rgba(0,0,0,.25);
}


/*notification*/
#notification{
	font-family: arial;
	text-align: center;
	letter-spacing: 1px;
	font-size: 19px;
	margin-top: 5px;
	margin-bottom: 5px;
	height: 22px;
	line-height: 22px;
    min-height: 22px;

	display: none;
	transition: transform 0.5s;
}
/* the line as a speech bubble out of the board (2026-11-01, the user): one line's height always kept (a long text grows to two), the
   keyboard's width; the frame and its tip - top right, a bit in from the corner - only while there is text. Round 2 (the user): only a
   border, in the board squares' border colour (--note-border, read from the board by notify() - each design has its own), a soft
   shadow under it; the tip a slender curve leaning left. The border is drawn by ::after with a gap cut where the tip stands on it. */
#notification{
	box-sizing: border-box;
	position: relative;
	width: calc(100% - 8px);
	max-width: 560px;
	margin: 8px auto -3px;   /* 2026-11-02 (the user): 8px closer to the board and to the keyboard (its 2% top margin); the tip rises beside the last row */
	padding: 4px 10px;
	min-height: 30px;
	font-size: 16px;   /* was 19 (the user, 2026-11-02) */
	flex-shrink: 0;   /* #container is a flex column of a fixed height: without it a second line spilled out of the frame */
	border-radius: 9px;
	box-shadow: 0 3px 4px -2px rgba(0, 0, 0, .22);
}
#notification::after{
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--note-border, #ccc);
	border-radius: inherit;
	pointer-events: none;
	-webkit-mask: linear-gradient(#000 0 0) right 15px top / 7px 3px no-repeat, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) right 15px top / 7px 3px no-repeat exclude, linear-gradient(#000 0 0);
}
#notification::before{
	content: "";
	position: absolute;
	top: -13px;
	right: 12px;   /* 2026-11-02: 10px further right, clear of the squares now that the bubble sits closer */
	width: 14px;
	height: 14px;
	background: var(--note-border, #ccc);
	/* 2026-11-02: the left root at x=4 (was 7) - the base is 3px wider toward the left; the frame's gap below grew to match (4px -> 7px) */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M12 14C12 7.5 8 2.5 1 1C3 4 4 8.5 4 14' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M12 14C12 7.5 8 2.5 1 1C3 4 4 8.5 4 14' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
#notification:empty{ box-shadow: none; pointer-events: none; }   /* empty: never catches a tap - an S25 trace had the bar's rotate press land on it (2026-11-03) */
#notification:empty::before, #notification:empty::after{ display: none; }
/* every text fades in with its frame; the same message again (e.g. English typed twice) blinks out and fades back in, so it's noticed */
#notification.note_in{ animation: note_in .3s ease-out; }
@keyframes note_in{ from{ opacity: 0; } to{ opacity: 1; } }

/* keyboard */
#keyboard{
	text-align:center;
	margin: 2% auto 2%;
	display: none;
	transition: .2s;

	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
	width: calc(100% - 8px);   /* edge to edge on a phone (friends round: the keys were too small) */
	max-width: 560px;
}

#topKeys, #midKeys, #botKeys{
	display: flex;
	justify-content:center;
}

.keyboardKey_s, .keyboardKey_m, .keyboardKey_l{
	background-color: #c5c5c57d;
    font-size: 26px;
    line-height: 26px;
    height: 44px;   /* a finger-sized target */
    padding: 1px 0;
    margin: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    font-family: arial;
    cursor: pointer;
    border-radius: 3px;
    color: #1968ab;
}

.keyboardKey_s{
	width: 10%;
}

.keyboardKey_m{
	width: 9%;
}

.keyboardKey_l{
	width: 20%;
}


.blockGreen, .blockGrey, .blockGold{
	color:#fff;
	transform: rotateX(360deg);
}

.blockGreen{
	background-color: #35a535;
}

.blockGrey{
	background-color: #737373;
}

.blockGold{
	background-color: #d7bf4a;
}

/*modal*/
/* both fixed on the screen: a page that scrolls (the mini-game scrolls #container, the admin the page) opens its windows where the
   player is, over a shade on the whole screen - not at the page top over a partial shade */
#shadowBack{
	position: fixed;
	inset: 0;
	background: #000;
	opacity: 0;
	width: 100%;
	height: 100%;
	z-index: 41;   /* above .ap_badge (40) - the autoplay order-number/direction-arrow badges on
	                  the board were rendering over the end-game banner */
	cursor: pointer;
	transition: opacity .2s;
}

#modal{
	position: fixed;
	top: 80px;
	width: 340px;
	max-width: 92%;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 40px rgba(0,0,0,.35);
	opacity: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 42;   /* above .ap_badge (40) and its own #shadowBack (41) */
	transition: opacity .35s;
	max-height: calc(100vh - 100px);    /* safety net: a modal taller than the screen (below its 80px top) scrolls internally or its own */
	max-height: calc(100dvh - 100px);   /* content (e.g. the "קדימה!" button) becomes unreachable; dvh: the phone's address bar */
	overflow-y: auto;
}

/* end-game banners only: a draggable title bar so the whole modal can be pulled aside/off-screen
   to see or screenshot the finished board underneath (see makeModalDraggable() in game.js) */
.modalTitleRow{
	display: flex;
	align-items: center;
	justify-content: space-between;   /* title pinned to its right, drag handle to its left */
	gap: 8px;
	padding: 10px;
	background: #f3f8fc;
	border-bottom: 1px solid #e3edf5;
	border-radius: 10px 10px 0 0;
	cursor: grab;
	touch-action: none;   /* the drag is handled entirely in JS, not the browser's own touch-scroll */
	user-select: none;    /* dragging by the title text shouldn't select it */
}
.modalTitleRow:active{ cursor: grabbing; }
.modalTitleText{
	font-size: 16.5px;   /* ~10% larger than the row's earlier 15px baseline */
	font-weight: bold;
	color: #2c6a95;
}
.modalDragHandle{
	display: inline-flex;
	color: #888;
}

/* ?showconf=y is now a full dedicated admin page (assets/js/admin-preact/, own CSS section below),
   not a popup - the old #confModal/.conf_* form-picker styling it used is gone. */

#modalClose{
	position: absolute;
	top: 6px;
	inset-inline-start: 6px;
	width: 30px;
	height: 30px;
	line-height: 26px;
	font-size: 22px;
	background: transparent;
	border: 0;
	color: #999;
	cursor: pointer;
	z-index: 1;
}
#modalClose:hover{ color: #333; }

.modalMessage{
	display: block;
	font-size: 22px;
	text-align: center;
	margin-top: 11px;
	line-height: 32px;
	letter-spacing: .5px;
}

#msBlock{
	display: flex;
	justify-content: space-evenly;
	padding: 10px 0 14px;
}

.msBlock{
	text-align: center;
}

.msHead{
	display:block;
	font-size: 16px;
	color: #777;
}

.msBody{
	display:block;
	font-size: 34px;
	color: #3498db;
}

.newBest{
	text-align: center;
	font-size: 20px;
	color: #35a535;
	padding-bottom: 12px;
}

/* a replay that beat the best (g_play_replay): a quiet link, its answer in a small bubble under it */
.replayWhy{ text-align: center; padding-bottom: 12px; }
.replayWhyLink{ font-size: 14px; }
.replayTip{ position: relative; max-width: 260px; margin: 8px auto 0; padding: 8px 12px; font-size: 14px; line-height: 1.4;
            color: #333; background: #fff; border: 1px solid #d9d9d9; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.replayTip::before{ content: ""; position: absolute; top: -7px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top: 0;
                    border-bottom: 7px solid #d9d9d9; }
.replayTip[hidden]{ display: none; }

.rateWrap{
	text-align: center;
	padding-bottom: 10px;
}

.rateWrap_tight{ padding-bottom: 6px; }   /* first of the two stacked rating rows */

.rateLabel{
	display: block;
	font-size: 14px;
	color: #777;
	margin-bottom: 4px;
}

/* the whole row (emojis + stars) is one press-anywhere/drag-anywhere rating strip - see the
   click-or-drag interaction in openModal()'s 'endScore' branch */
.rateRow{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	touch-action: none;   /* the drag is handled entirely in JS, not the browser's own touch-scroll */
	user-select: none;
}

.rateEmoji{
	font-size: 20px;
	line-height: 1;
}

.rateStars{
	display: flex;
	gap: 4px;
}

.rateStar{
	font-size: 26px;
	line-height: 1;
	color: #ccc;
	transition: color .1s;
}
.rateStar_on{ color: #f5b301; }

.endGoBtn{
	display: block;
	margin: 4px auto 18px;
	padding: 8px 28px;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	background: #3498db;
	border: 0;
	border-radius: 999px;
	box-shadow: 1px 1px 5px 0 #555;
	cursor: pointer;
	transition: background .2s;
}
.endGoBtn:hover{ background: #146093; }

.simBtns{ display: flex; gap: 12px; justify-content: center; margin: 8px 0 18px; }
.simBtns .endGoBtn{ margin: 0; }

#mhBlock{
	padding: 20px 18px 18px;
	text-align: center;
}

.mhbHead{
	font-size: 21px;
	font-weight: bold;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid #e2e2e2;
}

.mhbLine{
	font-size: 16px;
	line-height: 1.5;
	color: #333;
}

.mhbArrow{
	font-size: 15px;
	color: #bbb;
	margin: 4px 0;
}

.mhbGo{
	margin-top: 18px;
	padding: 10px 22px;
	font-size: 17px;
	color: #fff;
	background: #3498db;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 1px 1px 5px rgba(0,0,0,.3);
}
.mhbGo:hover{ background: #146093; }




/* ============================================================
   Responsive — phone widths.
   Ordered largest breakpoint first so the smallest matching one wins.
   ============================================================ */

@media only screen and (max-width: 430px) {
	.logo { height: 84px; }
	#lolitimer { font-size: 22px; top: 14px; left: 10px; }

	.game_area { width: 394px; }
	.row_block, .move_letter { width: 47px; height: 44px; }
	.ans_block { width: 46px; height: 45px; }
	.row_block, .ans_block, .move_letter { font-size: 37px; line-height: 37px; }
	.moveword .ans_block { margin: 4px 3px; }

	.keyboardKey_s, .keyboardKey_m, .keyboardKey_l { font-size: 24px; line-height: 24px; height: 44px; }

}

@media only screen and (max-width: 400px) {
	.logo { height: 76px; }

	.game_area { width: 366px; }
	.row_block, .move_letter { width: 43px; height: 41px; }
	.ans_block { width: 42px; height: 42px; }
	.row_block, .ans_block, .move_letter { font-size: 34px; line-height: 34px; }
	.moveword .ans_block { margin: 3px 2px; }

}

@media only screen and (max-width: 370px) {
	.logo { height: 70px; }
	#lolitimer { font-size: 20px; top: 12px; left: 8px; }

	.game_area { width: 332px; }
	.row_block, .move_letter { width: 39px; height: 37px; }
	.ans_block { width: 38px; height: 38px; }
	.row_block, .ans_block, .move_letter { font-size: 31px; line-height: 31px; }
	.moveword .ans_block { margin: 3px 2px; }

	.keyboardKey_s, .keyboardKey_m, .keyboardKey_l { font-size: 22px; line-height: 22px; height: 40px; margin: 1.5px; }
	.txt_entry { min-height: 44px; }

}

@media only screen and (max-width: 335px) {
	.game_area { width: 306px; }
	.row_block, .move_letter { width: 36px; height: 35px; }
	.ans_block { width: 35px; height: 35px; }
	.row_block, .ans_block, .move_letter { font-size: 28px; line-height: 28px; }

}

/* landscape / very short viewport — tighten the vertical rhythm (the page scrolls on every screen now - html, body at the top) */
@media only screen and (max-height: 560px) {
	.logo { height: 64px; margin-top: 0; }
	#lolitimer { font-size: 20px; top: 8px; }
	.game_top .row { margin: 4px 0 2px; }
	.game_area { margin-top: 2px; }
	#keyboard { margin: 1% auto; }
	.keyboardKey_s, .keyboardKey_m, .keyboardKey_l { height: 30px; }   /* a short screen (landscape): compact keys */

}

/* build mode: buttons under the board, multi-line modal messages, quest-number input */
.modalMessage{ white-space: pre-line; }

/* a notice's icon (admin + build, 2026-11-01; game/modal.js noticeIcon, admin-preact NoticeIcon): at the start of the line (the
   right, in RTL), a coloured disc with a white mark - ok a V, err an X, warn an !. Empty: the mark is the background, so the
   message's text is unchanged; a white ring keeps it apart from a dark design's background */
.notice_icon{
	display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-inline-end: .4em; flex: none;
	border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; background: center / 70% no-repeat;
}
.notice_ok{ background-color: #2e9e4f;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.notice_err{ background-color: #d63a3a;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.notice_warn{ background-color: #e8a800;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.8v6.6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='13' r='1.5' fill='%23fff'/%3E%3C/svg%3E"); }

/* confirm / question dialogs (showConfirmModal, quest-number dialog): wider, more padding, buttons never wrap */
#modal.confirm_modal{ width: 440px; max-width: 94%; padding: 10px 8px 4px; box-sizing: border-box; }
.confirm_modal .modalMessage{ padding: 14px 30px 4px; font-size: 20px; line-height: 30px; letter-spacing: 0; }
.confirm_modal .simBtns{ flex-wrap: wrap; padding: 0 22px; margin: 16px 0 22px; }
.confirm_modal .endGoBtn{ padding: 9px 24px; font-size: 18px; white-space: nowrap; }
/* opts.oneRow: the buttons never wrap - they shrink a little instead on a narrow screen */
.confirm_onerow .simBtns{ flex-wrap: nowrap; gap: 8px; padding: 0 8px; }
.confirm_onerow .endGoBtn{ flex: 0 1 auto; min-width: 0; padding: 9px clamp(10px, 4vw, 24px); font-size: clamp(15px, 4.6vw, 18px); }

/* feature next_q_early off: waiting for the new word's exact placement before the next clue -
   the answered clue + answer line hide, the keyboard greys out (body class set on the first drag,
   cleared by next_question) */
body.lc_await_place #the_answer, body.lc_await_place .question.clue_stack{ visibility: hidden; }
/* in the clue's place, the reason (2026-11-02 evening, the user): small, italic, centred both ways over the clue's own room */
.question .q_wait{ display: none; }
body.lc_await_place .question{ position: relative; }
body.lc_await_place .question .q_inner{ visibility: hidden; }
/* wider than the clue's own box (a short clue left it 3 narrow lines): centred on it, up to the screen's width */
body.lc_await_place .question .q_wait{ display: flex; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
	width: min(calc(100vw - 24px), 440px); box-sizing: border-box; align-items: center; justify-content: center;
	padding: 6px 8px 0; font-size: 13px; line-height: 1.35; font-style: italic; font-weight: normal; text-align: center; text-shadow: none;
	white-space: pre-line; color: #000; }   /* 2026-11-03 (the user): a line break after "נכון" (\n in the text), a little more top room, black */
html.lc_tone_dark body.lc_await_place .question .q_wait{ color: #fff; }   /* white over a dark design */
body.lc_await_place #keyboard{ opacity: .4; pointer-events: none; }

/* play-screen header row (arrangeHeader): right to left - logo | להתחיל! | clock | איך משחקים
   (2026-10-13, was help | clock). The logo keeps its natural spot on the right, איך משחקים sits at
   the far left, the other two share the middle. */
.lc_header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;   /* iPhone (WebKit) shrank the row to its contents without it - the items bunched in the middle */
	max-width: 520px;
	margin: 4px auto 0;
	padding: 0 12px;
	box-sizing: border-box;
}
.lc_header .logo{ width: clamp(96px, 29vw, 150px); height: auto; max-width: none; margin: 0; flex: 0 1 auto; min-width: 0; }
.lc_header .start_btn{ flex: 0 0 auto; font-size: 20px; padding: 5px 18px; white-space: nowrap; cursor: pointer; }
.lc_header #helpBtn{ flex: 0 1 auto; font-size: 15px; white-space: nowrap; padding: 2px 0; }
.lc_header #helpBtn[hidden]{ display: none; }
.lc_header #lolitimer{
	position: static;
	flex: 0 0 auto;
	height: auto;
	line-height: 1;
	direction: ltr;
}

/* the board's name under the header row (showBoardName, feature board_name): quiet, between two short
   lines; every design colours it through its --hub-* tokens. Hidden = no row at all. */
.lc_board_name{
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 520px;
	margin: 9px auto 0;   /* a bit more room above it and a bit bigger (the user, 2026-11-02 evening; was 3px / 16px) */
	padding: 0 16px;
	box-sizing: border-box;
	font-family: var(--hub-font);
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: .02em;
	color: var(--hub-soft);
	text-align: center;
	text-wrap: balance;
}
.lc_board_name > span{ flex: 0 1 auto; }
.lc_board_name::before, .lc_board_name::after{
	content: "";
	height: 1px;
	background: var(--hub-line);
}
/* right-aligned (RTL start): "אתם משחקים בלוח <name>:", then the line runs on to the left */
.lc_board_name{ justify-content: flex-start; text-align: right; }
.lc_board_name::before{ display: none; }
.lc_board_name::after{ display: none; }
.lc_bn_pre{ font-weight: 400; font-size: .85em; }
.lc_bn_name{ font-weight: 700; }
.lc_board_name[hidden]{ display: none; }
/* this browser's best time on the board, before להתחיל! (showBoardName, switch best_time_start) */
.lc_start_best{
	margin: 2px auto 0;
	font-family: var(--hub-font);
	font-size: 14px;
	color: var(--hub-soft);
	text-align: center;
}
.lc_start_best[hidden]{ display: none; }

@media only screen and (max-width: 430px){
	.lc_board_name{ font-size: 17px; margin-top: 8px; }
	.lc_header{ gap: 6px; padding: 0 8px; }
	.lc_header .logo{ width: 29vw; }
	.lc_header .start_btn{ font-size: 18px; padding: 4px 14px; }
	.lc_header #helpBtn{ font-size: 13px; }
	.lc_header #lolitimer{ font-size: 21px; }

}
@media only screen and (max-width: 370px){
	.lc_header{ gap: 6px; padding: 0 6px; }
	.lc_header .logo{ width: 28vw; }
	.lc_header .start_btn{ font-size: 16px; padding: 4px 11px; }
	.lc_header #helpBtn{ font-size: 12px; }
	.lc_header #lolitimer{ font-size: 19px; }

}
@media only screen and (max-height: 560px){
	.lc_header .logo{ width: 110px; }

}

/* feature first_flash: the first word's correct cells pulse after too many misses (firstWordTry) */
@keyframes lc_hint_pulse{
	0%, 100%{ background-color: transparent; box-shadow: none; }
	50%{ background-color: rgba(53, 165, 53, .35); box-shadow: 0 0 0 3px #35a535 inset; }
}
/* a wrong drop's letters flash (wrong_flash - drop-feedback.js): the colour for half of each cycle, then their own again */
.lc_wflash{ transition: color .06s linear; }
.lc_wflash.lc_wflash_on{ color: var(--lc-wflash) !important; -webkit-text-fill-color: var(--lc-wflash); }
.row_block.lc_hint_flash .inner_box{ animation: lc_hint_pulse .8s ease-in-out 3; border-radius: 6px; }   /* rounded like the letter tiles */
/* switches flash_bg / flash_frame off: that part of the flash stays still (!important outranks an animation, so this
   holds for every design's own flash keyframes too) */
html.lc_no_flbg .row_block.lc_hint_flash .inner_box{ background-color: transparent !important; }
html.lc_no_flfr .row_block.lc_hint_flash .inner_box{ box-shadow: none !important; outline: none !important; }

/* a word that couldn't be put down (letters under it, or off the board) and stays raised: after its "no" shake it
   settles a little up and to the right, with a soft shadow, so it plainly isn't on the board (an own `translate`,
   apart from the transforms the animations use). A word placed anywhere - right or wrong - sits on its squares.
   While a word is carried the offset is off (.lc_dragging - its on-screen place is then its real place for the drag). */
.moveword.lc_unplaced{ translate: 5px -6px; box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.moveword.lc_dragging{ translate: none !important; transition: opacity .2s; }

/* the delete key's icon (KEY_BACKSPACE_SVG) */
.key_back{ display: inline-flex; align-items: center; justify-content: center; }
.key_back_ic{ width: 1.15em; height: auto; display: block; pointer-events: none; }

/* the admin's own how-to-play text (features page / a mini-game), instead of the built-in steps */
.mhbText{ font-size: 17px; line-height: 1.55; color: #333; white-space: pre-line; text-align: right; margin: 6px 0 12px; }

/* a mini-game or questionnaire taller than the screen scrolls (html/body never do - the game screen is fixed) */
#container:has(> .hub_page){ height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* a long clue wraps before the hint button (it sits over the row's end), on both sides so it stays centred */
.toprow:has(#hintWrap:not([hidden])) .question{ padding-inline: 40px; box-sizing: border-box; }

/* admin-site games: which profile is in use (showActiveSetTag) */
.lc_set_row{ display: flex; justify-content: flex-end; max-width: 100%; margin: 8px auto 0; }   /* RTL: flex-end = left */
.lc_set_tag{
	white-space: nowrap;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 999px;
	color: #fff;
	opacity: .85;
	pointer-events: none;
}
.lc_set_tag.lc_set_0{ background: #8e44ad; }   /* מקומי */
.lc_set_tag.lc_set_1{ background: #e67e22; }   /* אדמין */
.lc_set_tag.lc_set_2{ background: #7f8c8d; }   /* שחקן */
.lc_set_row{ gap: 6px; }
.lc_set_tag.lc_set_board{ background: #16a085; }            /* סט n - the board's own feature set */
.lc_set_tag.lc_set_overridden{ opacity: .45; text-decoration: line-through; }

/* confirm dialogs: a "do nothing" choice as a quiet link under the buttons, and small helper text */
.confirm_links{ text-align: center; margin: -10px 0 14px; }
.confirm_link{ font-size: 16px; color: #777; }
.confirm_note{
	font-size: 13px;
	line-height: 1.6;
	color: #666;
	text-align: right;
	white-space: pre-line;
	border-top: 1px solid #e5e5e5;
	margin: 0 22px 16px;
	padding-top: 10px;
}
/* admin-site games: which board this is, bottom-right under the board (showActiveSetTag) */
.lc_board_tag{
	margin-inline-end: auto;   /* RTL: holds the right edge, the profile/set tags stay left */
	font-size: 12px;
	font-weight: bold;
	color: #2c6a95;
	border: 1.5px solid #3498db;
	border-radius: 4px;
	padding: 1px 8px;
	white-space: nowrap;
}
.lc_board_tag[hidden]{ display: none; }


/* the page stays hidden until its design's stylesheet is in (html.lc_wait - set by index*.html,
   removed by revealPage() in game.js), so the base look never flashes before the design's */
html.lc_wait body{ visibility: hidden; }
.lc_set_tag.lc_design_tag{ background: #d35400; }   /* עיצוב n - admin-site games only */
.lc_set_tag[hidden]{ display: none; }

/* icons drawn by CSS from data-ic (DESIGNS.md: a design swaps them with its own ::before content,
   colour or background image): action-bar buttons, the hint button, the help link, restart */
.wa_ic::before, .hint_btn::before, .help_ic::before, .rst_ic::before{ content: attr(data-ic); }

/* the logo's box: centred on top, or the header row's first item (a design may decorate it) */
.logo_box{ position: relative; display: block; width: fit-content; max-width: 82%; margin: 4px auto 2px; }
.logo_box .logo{ margin: 0; max-width: 100%; }
/* not production (screen.js addLogo): the test sites' logo orange, local yellow, with a small tag at the bottom left */
.logo_box.lc_stage_test .logo{ filter: hue-rotate(180deg) saturate(1.4) drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
.logo_box.lc_stage_local .logo{ filter: hue-rotate(205deg) saturate(1.8) brightness(1.15) drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
.lc_stage_tag{ position: absolute; left: -2px; bottom: -4px; z-index: 2; direction: ltr; pointer-events: none;
	font: 800 8px/1 Arial, sans-serif; letter-spacing: .5px; padding: 1px 3px; border-radius: 3px; color: #fff; background: #e8730c;
	box-shadow: 0 0 6px rgba(232, 115, 12, .7); }
.lc_stage_local .lc_stage_tag{ color: #3a2d00; background: #ffd21f; box-shadow: 0 0 6px rgba(255, 210, 31, .8); }
.lc_header .logo_box{ margin: 0; flex: 0 1 auto; min-width: 0; max-width: none; }

/* design effects (assets/js/fx.js): the mechanics only - each design's CSS gives them their look */
.lcfx{ position: absolute; pointer-events: none; z-index: 12; }
/* the first-try celebration's balls (fx.js firstPlaceBalls): size and colour set per ball; a small shine so they read as balls */
.lcfx_fp{ border-radius: 50%; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .15), inset 2px 2px 0 rgba(255, 255, 255, .45); z-index: 31; }

/* progress heat colours (game.js pctLevel): 0 grey, then one step per 10%, 100 dark green - the
   admin board list's % pill and the admin-site progress bar */
.lc_heat_0 { background: #e4e4e4; color: #777; }      /* 0 */
.lc_heat_1 { background: #ffffff; color: #555; border-color: #d6d6d6; }   /* 1-10 */
.lc_heat_2 { background: #fff6c4; color: #6b5a00; }   /* 11-20 light yellow */
.lc_heat_3 { background: #ffe14d; color: #5a4a00; }   /* 21-30 yellow */
.lc_heat_4 { background: #ffcc8f; color: #6b3b00; }   /* 31-40 light orange */
.lc_heat_5 { background: #ffa53d; color: #4a2600; }   /* 41-50 orange */
.lc_heat_6 { background: #ee7a0c; color: #fff; }      /* 51-60 dark orange */
.lc_heat_7 { background: #bfe6a6; color: #2c5a14; }   /* 61-70 light green */
.lc_heat_8 { background: #6cc24a; color: #fff; }      /* 71-80 green */
.lc_heat_9 { background: #3f9a30; color: #fff; }      /* 81-99 deeper green */
.lc_heat_10{ background: #1d6a1f; color: #fff; }      /* 100 dark green */

/* admin site only (showProgressBar): two bars, answered over placed, the whole row's width under the tag row */
.lc_prog_wrap{ display: flex; flex-direction: column; gap: 3px; margin: 6px 8px 0; }
.lc_prog{
	position: relative;
	height: 13px;
	border-radius: 7px;
	background: rgba(127, 127, 127, .14);
	border: 1px solid rgba(127, 127, 127, .25);
	overflow: hidden;
	direction: rtl;   /* fills from the right, as Hebrew reads */
}
/* one smooth gradient through the heat colours (0% at the right, 100% at the left - RTL); JS sizes
   it to the whole track so the fill shows only the part its progress covers, no hard colour steps */
.lc_prog_fill{
	position: relative;
	height: 100%;
	border-radius: 7px;
	background: linear-gradient(to left, #d3dbe2 0%, #f7f7f7 8%, #fff2b0 15%, #ffe14d 25%, #ffcc8f 35%, #ffa53d 45%,
	            #ee7a0c 55%, #bfe6a6 65%, #6cc24a 75%, #3f9a30 88%, #1d6a1f 100%) right center / 100% 100% no-repeat;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);   /* the pale low end (1-15%: grey to white) still reads on the track */
	transition: width .5s ease, background-size .5s ease;
}
.lc_prog_label{
	position: absolute;
	inset: 0;
	text-align: center;
	font-size: 10px;
	line-height: 13px;
	font-weight: bold;
	color: #333;
	text-shadow: 0 0 3px #fff, 0 0 2px #fff;
	direction: rtl;   /* "1% · נענו 9%" reads right to left */
}

/* ---- a mini-game (hub.js, GAMES.md): title, text, the game's boards as image tiles; a questionnaire
   (survey.js). Every look comes from --hub-* variables, so a design restyles the page by setting them in
   its own CSS (DESIGNS.md "Mini-games"); the defaults below are design 1's look. ---- */
:root{
	--hub-font: inherit;                                   /* title + text */
	--hub-title: #222;
	--hub-title-shadow: none;
	--hub-ink: #24323f;                                    /* text, questions */
	--hub-soft: #6a7a88;                                   /* hints, end words */
	--hub-accent: #3498db;                                 /* chosen pills, the ruler, focus */
	--hub-accent-ink: #fff;
	--hub-tile-bg: rgba(255, 255, 255, .85);
	--hub-tile-border: 1px solid rgba(120, 150, 175, .55);
	--hub-tile-radius: 14px;
	--hub-img-radius: 11px;
	--hub-tile-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	--hub-tile-shadow-up: 0 5px 14px rgba(0, 0, 0, .25);
	--hub-name-font: inherit;
	--hub-name-ink: #fff;
	--hub-name-bg: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .45) 40%, rgba(0, 0, 0, .65));
	--hub-name-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 6px rgba(0, 0, 0, .5);
	--hub-badge: #1e8449;
	--hub-badge-ink: #fff;
	--hub-done-bg: rgba(30, 132, 73, .12);
	--hub-done-border: rgba(30, 132, 73, .35);
	--hub-line: rgba(120, 150, 175, .35);                  /* between questions */
	--hub-field-bg: #fff;
	--hub-field-border: #bcd7ea;
	--hub-field-ink: #222;
	--hub-back-bg: rgba(255, 255, 255, .85);
	--hub-back-ink: #2c6a95;
	--hub-back-border: #bcd7ea;
}
.hub_page{ width: 100%; max-width: 640px; margin: 6px auto 24px; padding: 0 14px; box-sizing: border-box;
           display: flex; flex-direction: column; gap: 12px; text-align: right; font-family: var(--hub-font); }
.hub_title{ margin: 4px 0 0; font-size: 26px; line-height: 1.2; color: var(--hub-title); text-shadow: var(--hub-title-shadow); text-wrap: balance; font-family: var(--hub-font); }
.hub_text{ font-size: 17px; line-height: 1.5; white-space: pre-line; color: var(--hub-ink); }
/* cards per row: the settings hub_cols_desktop / hub_cols_mobile (hub.js hubColumns), each card its full share of the row */
.hub_tiles{ display: grid; grid-template-columns: repeat(var(--hub-cols-desktop, 6), minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.hub_tiles_break{ grid-column: 1 / -1; height: 0; margin: -5px 0; }   /* a set's line break: the next tile starts a new row */
@media only screen and (max-width: 480px){ .hub_tiles{ gap: 6px; grid-template-columns: repeat(var(--hub-cols-mobile, 5), minmax(0, 1fr)); } }
/* a tile: a frame, 2px padding, the board's image; its name bottom-aligned over a gradient, wrapping upward
   word by word (3 lines at most) */
.hub_tile{ position: relative; aspect-ratio: 1; padding: 2px; border-radius: var(--hub-tile-radius); border: var(--hub-tile-border);
           background: var(--hub-tile-bg); box-shadow: var(--hub-tile-shadow); overflow: hidden; cursor: pointer;
           font-family: inherit; transition: transform .15s, box-shadow .15s; }
.hub_tile:hover{ transform: translateY(-2px); box-shadow: var(--hub-tile-shadow-up); }
.hub_tile:focus-visible{ outline: 3px solid var(--hub-accent); outline-offset: 2px; }
.hub_tile img{ width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--hub-img-radius); }
.hub_tile_name{ position: absolute; inset: auto 2px 2px 2px; padding: 16px 3px 5px; border-radius: 0 0 var(--hub-img-radius) var(--hub-img-radius);
                background: var(--hub-name-bg); color: var(--hub-name-ink); font-family: var(--hub-name-font);
                font-size: clamp(11px, 2.9vw, 15px); font-weight: bold; line-height: 1.15; text-align: center; text-shadow: var(--hub-name-shadow);
                display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
/* finished: a check (+ the best time) on the corner */
.hub_tile_badge{ position: absolute; top: 4px; right: 4px; padding: 1px 6px; border-radius: 999px; background: var(--hub-badge); color: var(--hub-badge-ink);
                 font-size: clamp(10px, 2.6vw, 13px); font-weight: bold; direction: ltr; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
/* not open yet ("one after another"): dimmed, a lock */
.hub_tile_locked{ cursor: default; opacity: .45; }
.hub_tile_locked:hover{ transform: none; box-shadow: var(--hub-tile-shadow); }
.hub_tile_locked img{ filter: grayscale(.85) brightness(.75); }
.hub_tile_lock{ position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(18px, 5vw, 28px); filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.hub_done{ font-size: 18px; font-weight: bold; line-height: 1.45; white-space: pre-line; padding: 12px 14px; border-radius: 12px; color: var(--hub-ink);
           background: var(--hub-done-bg); border: 1px solid var(--hub-done-border); }
.hub_go{ align-self: center; }
/* above a board played from the mini-game: back to it */
.hub_back{ align-self: flex-start; margin: 6px 12px 0; padding: 4px 12px; font-family: inherit; font-size: 14px; color: var(--hub-back-ink);
           background: var(--hub-back-bg); border: 1px solid var(--hub-back-border); border-radius: 999px; cursor: pointer; }
.hub_back:hover{ filter: brightness(.96); }
.hub_end_btns [hidden]{ display: none; }
/* a short message over a tapped tile (hubToast) - what a tooltip says on a computer, for phones too */
.hub_toast{ position: fixed; z-index: 60; left: 50%; top: 40%; max-width: min(320px, calc(100vw - 16px)); box-sizing: border-box;
            padding: 8px 14px; border-radius: 10px; background: rgba(30, 40, 50, .92); color: #fff; font-size: 15px; line-height: 1.35;
            text-align: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); pointer-events: none; transition: opacity .35s; }
.hub_toast_out{ opacity: 0; }

/* ---- a questionnaire (survey.js): questions one under the other with a line between, pills for choices,
   a ruler for ratings ---- */
.srv_page{ text-align: right; gap: 0; }
.srv_page > .hub_text{ margin-bottom: 6px; }
.srv_page .hub_title, .srv_page > .hub_text{ text-align: center; }
.srv_q{ display: flex; flex-direction: column; gap: 6px; padding: 10px 2px; border-top: 1px solid var(--hub-line); }
.hub_title + .srv_q, .hub_text + .srv_q{ border-top: 0; }   /* no line above the first question */
.srv_q_missing{ background: rgba(210, 84, 95, .07); border-radius: 6px; box-shadow: inset 3px 0 0 #d2545f; }
.srv_label{ font-size: 16px; font-weight: bold; line-height: 1.4; color: var(--hub-ink); }
.srv_req{ color: #d2545f; }
.srv_hint{ font-size: 13px; color: var(--hub-soft); margin-bottom: 4px; }
.srv_text{ width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16px; line-height: 1.4; padding: 6px 9px;
           border: 1px solid var(--hub-field-border); border-radius: 10px; background: var(--hub-field-bg); color: var(--hub-field-ink); resize: vertical; }
.srv_text:focus{ outline: 2px solid var(--hub-accent); border-color: var(--hub-accent); }
.srv_choices{ display: flex; flex-wrap: wrap; gap: 6px; }
.srv_choice{ font-family: inherit; font-size: 15px; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--hub-field-border);
             background: var(--hub-field-bg); color: var(--hub-field-ink); cursor: pointer; }
.srv_choice.on{ background: var(--hub-accent); border-color: var(--hub-accent); color: var(--hub-accent-ink); font-weight: bold; }
/* the rating ruler: a track, a tick + number per step (1 at the right), a round cursor that snaps */
.srv_rate{ padding: 0 12px; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
/* nothing on the ruler can be selected (no blue selection while dragging / double-tapping) */
.srv_ruler, .srv_ruler *, .srv_ends, .srv_ends *{ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.srv_ruler{ position: relative; height: 50px; touch-action: none; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.srv_ruler:focus-visible{ box-shadow: 0 0 0 2px var(--hub-accent); border-radius: 8px; }
.srv_track{ position: absolute; left: 0; right: 0; top: 14px; height: 8px; border-radius: 999px; background: var(--hub-line); }
.srv_fill{ position: absolute; right: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--hub-accent); }
.srv_tick{ position: absolute; top: 28px; transform: translateX(50%); font-size: 14px; color: var(--hub-soft); font-variant-numeric: tabular-nums; }
.srv_tick::before{ content: ""; position: absolute; top: -10px; left: 50%; width: 1px; height: 6px; background: var(--hub-line); }
.srv_tick.on{ color: var(--hub-ink); font-weight: bold; }
.srv_thumb{ position: absolute; top: 3px; width: 30px; height: 30px; transform: translateX(50%); border-radius: 50%;
            background: var(--hub-field-bg); border: 3px solid var(--hub-accent); box-sizing: border-box; box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
            display: grid; place-items: center; font-size: 13px; font-weight: bold; color: var(--hub-field-ink); transition: right .12s; }
.srv_dragging .srv_thumb{ transition: none; transform: translateX(50%) scale(1.12); }
.srv_ends{ display: flex; justify-content: space-between; font-size: 13px; color: var(--hub-soft); margin-top: -2px; }
.srv_err{ color: #d2545f; font-size: 15px; text-align: center; min-height: 1px; }
.srv_send{ align-self: center; margin-top: 8px; }
.srv_end{ text-align: center; }
.rt_big{ font-size: 1.25em; }
.rt_center{ display: block; text-align: center; }
.rt_left{ display: block; text-align: left; }
.rt_small{ font-size: .82em; }
/* finished (not played again): the image dimmed under a big round check in the design's badge colour */
.hub_tile_done{ cursor: default; }
.hub_tile_done:hover{ transform: none; box-shadow: var(--hub-tile-shadow); }
.hub_tile_done img{ filter: saturate(.55) brightness(.92); opacity: .75; }
.hub_tile_v{ position: absolute; inset: 6% 10% 22%; width: 80%; height: 72%; pointer-events: none; z-index: 2; overflow: visible; }
.hub_tile_v path{ fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.hub_tile_v .hub_v_edge{ stroke: rgba(255, 255, 255, .92); stroke-width: 17; }
.hub_tile_v .hub_v_line{ stroke: var(--hub-accent); stroke-width: 10; }

/* ---- word look switches (FEATURES.md, applyFeatureSwitches): each off = that part transparent, whatever the
   design draws - a revealed word (just answered, picked up, selected, placed: correct / almost / wrong) and,
   separately, the letters being guessed. A placed word's letters are its board cells. ---- */
html.lc_no_wlbg .moveword .ans_block, html.lc_no_wlbg .moveword .ans_block .inner_box,
html.lc_no_wlbg .row_block.covered .inner_box, html.lc_no_wlbg .row_block[class*="place_"] .inner_box{ background: transparent !important; }
html.lc_no_wlfr .moveword .ans_block, html.lc_no_wlfr .moveword .ans_block .inner_box,
html.lc_no_wlfr .row_block.covered .inner_box, html.lc_no_wlfr .row_block[class*="place_"] .inner_box{ border-color: transparent !important; box-shadow: none !important; outline: none !important; }
html.lc_no_wbg .moveword{ background: transparent !important; }
html.lc_no_wfr .moveword{ border-color: transparent !important; box-shadow: none !important; outline: none !important; }
html.lc_no_glbg .txt_entry .ans_block, html.lc_no_glbg .txt_entry .ans_block .inner_box{ background: transparent !important; }
html.lc_no_glfr .txt_entry .ans_block, html.lc_no_glfr .txt_entry .ans_block .inner_box{ border-color: transparent !important; box-shadow: none !important; outline: none !important; }

/* the letter hint on wrong placements (placeLetterTry): a letter on its own square, over it (never its text),
   in the design's accent. Lands from huge while its word blinks out, pulses to 70% see-through and back
   (1.5s each way) until something is placed on the square, then fades out. */
.lc_place_hint{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1;
                pointer-events: none; font-weight: bold; color: var(--hub-accent); text-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.lc_place_hint.lc_ph_in{ animation: lc_ph_in .45s cubic-bezier(.2, .8, .3, 1) both; }
.lc_place_hint.lc_ph_pulse{ animation: lc_ph_pulse 3s ease-in-out infinite; }
.lc_place_hint.lc_ph_out{ animation: none; opacity: 0; transition: opacity .8s ease-out; }
@keyframes lc_ph_in{ from{ opacity: 0; transform: scale(3.2); } to{ opacity: 1; transform: none; } }
@keyframes lc_ph_pulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: .3; } }
.moveword.lc_ph_hide{ opacity: 0; transition: opacity .15s; }
.moveword{ transition: opacity .2s, translate .3s ease-out, box-shadow .3s; }
/* started on this device, not finished: the placed % on the corner, in the design's accent */
.hub_tile_badge.hub_tile_pct{ background: var(--hub-accent); color: var(--hub-accent-ink); }

/* ---- mini-game steps (hub.js, GAMES.md "Steps"): a board set's head and line, a locked step, the step buttons ---- */
.hub_step{ display: flex; flex-direction: column; gap: 6px; }
.hub_step_locked{ opacity: .5; filter: grayscale(.7); }
.hub_page_msg{ text-align: center; }
.hub_step_later{ font-size: 16px; font-weight: bold; color: var(--hub-title); }
.hub_set_head{ margin-top: 6px; }
.hub_set_title{ margin: 0; font-size: 20px; line-height: 1.25; color: var(--hub-title); font-family: var(--hub-font); }
.hub_set_sub{ font-size: 15px; color: var(--hub-soft); margin-top: 2px; }
.hub_set_note{ font-size: 13px; color: var(--hub-soft); }
.hub_step_survey .hub_go, .hub_step_page .hub_go{ align-self: center; }
.hub_go:disabled{ opacity: .6; cursor: default; }
.hub_set_done{ font-weight: bold; color: var(--hub-badge); }   /* "✓ כל השלבים הנדרשים הושלמו" under a complete set */
/* "להמשיך במכשיר אחר" (hubDeviceLink): a quiet link under the page, and its dialog */
.hub_share_row{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px auto 0; }
.hub_device_link{ display: block; font-size: 13px; opacity: .8; }
.hub_device_modal a.hub_device_btn{ text-align: center; text-decoration: none; box-sizing: border-box; }
.hub_switch_player{ display: block; margin: 8px auto 0; padding: 2px 6px; border: 0; background: none; color: var(--hub-soft, #888); font-size: 12px; text-decoration: underline; cursor: pointer; }
.hub_device_modal .hub_device_btn{ display: block; width: 100%; margin: 8px 0 0; }
.hub_device_modal .hub_device_mine{ font-weight: bold; }
.hub_device_note{ margin-top: 10px; font-size: 12px; line-height: 1.4; color: #666; white-space: pre-line; }
.hub_device_close{ display: block; margin: 10px auto 0; padding: 2px 6px; border: 0; background: none; color: #3498db;
                   text-decoration: underline; font-size: 14px; cursor: pointer; }

/* a just-finished tile (hubWinAnim): its V drawn once, then confetti; the V stays */
.hub_tile_winning .hub_tile_v path{ animation: hub_draw .8s ease-in-out both; }
@keyframes hub_draw{ from{ stroke-dashoffset: 100; } to{ stroke-dashoffset: 0; } }
.hub_confetti{ position: fixed; z-index: 3000; width: 8px; height: 12px; margin: -6px 0 0 -4px; border-radius: 2px; pointer-events: none;
               animation: hub_confetti 1.2s cubic-bezier(.15, .7, .4, 1) forwards; }
@keyframes hub_confetti{
	0%{ transform: translate(0, 0) rotate(0); opacity: 1; }
	100%{ transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--rot)); opacity: 0; }
}
/* the admin site's test modes on a mini-game (hubTestBar) - a plain admin strip, the same in every design */
.hub_testbar{ display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font: 13px arial, sans-serif;
              color: #555; background: #fff7e6; border: 1px dashed #e0a030; border-radius: 8px; padding: 5px 8px; }
/* one choice of three, one segmented switch (as the admin page's מקומי / אדמין / שחקן) */
.hub_test_seg{ display: inline-flex; border: 1px solid #e0a030; border-radius: 999px; overflow: hidden; background: #fff; }
.hub_test_seg button{ font: inherit; padding: 3px 12px; border: 0; background: transparent; color: #8a5a10; cursor: pointer; }
.hub_test_seg button + button{ border-inline-start: 1px solid #e0a030; }
.hub_test_seg button.on{ background: #e67e22; color: #fff; font-weight: bold; }
.hub_test_seg button:focus-visible{ outline: 2px solid #e67e22; outline-offset: -3px; }

/* switch almost_look (2026-10-15): how "almost" looks - a guessed answer that's almost right (.txt_entry.is_almost) and a
   word placed almost in its spot (its frame .st_almost, its squares .place_almost). One at a time, in the design's blues
   (classic's tokens; the fallbacks are the same colours). 0 / off = the original amber (above). */
html[class*="lc_almost_"]{ --al-sky: var(--c1-sky, #52a0e8); --al-pale: var(--c1-pale, #eaf4fe); --al-ink: var(--c1-navy, #0a3e9e); }
/* 1 - a dashed light-blue frame: "not complete" */
html.lc_almost_1 .txt_entry.is_almost .ans_block{ color: var(--al-ink); background: var(--al-pale); outline: 2px dashed var(--al-sky); outline-offset: -2px; text-shadow: none; }
html.lc_almost_1 .moveword.placed.st_almost{ border: 2px dashed var(--al-sky); background: rgba(82, 160, 232, .08); }
html.lc_almost_1 .row_block.covered.place_almost .inner_box, html.lc_almost_1 .place_almost .inner_box{
	color: var(--al-ink); background: rgba(82, 160, 232, .10); border-color: var(--al-sky); border-style: dashed; }
/* 2 - half-filled: "halfway there" */
html.lc_almost_2 .txt_entry.is_almost .ans_block{ color: var(--al-ink); text-shadow: none;
	background: linear-gradient(to top, rgba(82, 160, 232, .42) 50%, var(--al-pale) 50%); }
html.lc_almost_2 .moveword.placed.st_almost{ border-color: var(--al-sky); background: rgba(82, 160, 232, .06); }
html.lc_almost_2 .row_block.covered.place_almost .inner_box, html.lc_almost_2 .place_almost .inner_box{
	color: var(--al-ink); border-color: rgba(82, 160, 232, .6); background: linear-gradient(to top, rgba(82, 160, 232, .32) 50%, transparent 50%); }
/* 3 - a soft light-blue pulse, twice, then a faint ring: "look again, you're close" */
@keyframes lc_almost_pulse{ 0%, 100%{ box-shadow: 0 0 0 2px rgba(82, 160, 232, .55); } 50%{ box-shadow: 0 0 10px 4px rgba(82, 160, 232, .75); } }
html.lc_almost_3 .txt_entry.is_almost .ans_block{ color: var(--al-ink); background: var(--al-pale); text-shadow: none;
	box-shadow: 0 0 0 2px rgba(82, 160, 232, .55); animation: lc_almost_pulse .9s ease-in-out 2; }
html.lc_almost_3 .moveword.placed.st_almost{ border-color: var(--al-sky); background: rgba(82, 160, 232, .06);
	box-shadow: 0 0 0 2px rgba(82, 160, 232, .55); animation: lc_almost_pulse .9s ease-in-out 2; }
html.lc_almost_3 .row_block.covered.place_almost .inner_box, html.lc_almost_3 .place_almost .inner_box{
	color: var(--al-ink); border-color: var(--al-sky); background: var(--al-pale); }

/* ---- the configurable header (applyHeaderLayout, game.js): one grid of moved pieces; only with a layout in force (.lc_hl_on) ---- */
/* the grid is also .lc_header (applyHeaderLayout) - the header's own flex row gives way to it. 7 columns, column 1 on the right
   (the page is right-to-left): each as wide as its widest part + an equal share of the rest. No row gap - empty rows add nothing. */
.lc_header.lc_hl{ display: grid; grid-template-columns: repeat(7, auto); column-gap: 6px; row-gap: 0; align-items: center; justify-content: stretch; }
.lc_hl > *{ min-width: 0; }
.lc_hl > .hl_pos_right{ justify-self: start; }
.lc_hl > .hl_pos_center{ justify-self: center; }
.lc_hl > .hl_pos_left{ justify-self: end; }
.lc_hl > #lolitimer.hl_edge_left{ margin-left: 6px; }   /* the clock a little in from the screen's left edge (the user, 2026-11-02 evening) */
/* the board name and the question fill the cells they span (and add nothing to the columns' widths - so a long question wraps
   instead of widening its columns); their text sits by their position */
.lc_hl > .question, .lc_hl > .lc_board_name{ justify-self: stretch; contain: inline-size; width: auto; max-width: none; margin-inline: 0; }
.lc_hl > .question.hl_pos_right{ text-align: right; }
.lc_hl > .question.hl_pos_center{ text-align: center; }
.lc_hl > .question.hl_pos_left{ text-align: left; }
.lc_hl > .lc_board_name{ padding-inline: 8px; }   /* its text where it was (16px from the edge, with the header's 8) */
.lc_hl > .lc_board_name.hl_pos_center{ justify-content: center; text-align: center; }
.lc_hl > .lc_board_name.hl_pos_left{ justify-content: flex-end; text-align: left; }
.lc_hl > .lc_start_best{ justify-self: center; }
.lc_hl_on .hl_off{ display: none !important; }
/* A configured part with no current cell must not be auto-placed into an implicit grid row. */
.lc_hl .hl_unshown{ position: absolute !important; visibility: hidden; }
.lc_hl_on .hl_sm{ zoom: .85; }
.lc_hl_on .hl_lg{ zoom: 1.15; }
/* the question's centring and the hints button in the flow (the logo, clock, start and help keep the header's own rules) */
.lc_hl #hintWrap{ position: static; transform: none; inset: auto; flex: 0 0 auto; }
.lc_hl .rotBlk{ position: relative; inset: auto; transform: none; }
.lc_hl #hintWrap[hidden]{ display: none; }
.lc_hl .hub_back{ margin: 6px 0 0; align-self: auto; }
.lc_hl_on .game_top .toprow:empty{ display: none; }
.lc_hl .lc_board_name[hidden]{ display: none; }
/* an uploaded hints icon (hlImages, game.js) replaces the drawn one - over any design's own icon */
.hint_btn.hl_img::before{ content: "" !important; display: block; width: 70%; height: 70%; background: var(--hl-hint-img) center / contain no-repeat !important; }

/* the API refused this player's country (game.js showRegionBlocked) - over everything, nothing to play */
#lc_region { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 1.2em; padding: 24px; background: rgba(255, 255, 255, 0.97); color: #222; text-align: center; font-size: 1.15rem; direction: rtl; }
#lc_region a { font-size: 0.75rem; color: #777; direction: ltr; }

#message_status{font-size:.85rem;text-align:center;margin:.5em;line-height:1.5}
#message_status button{font:inherit;color:inherit;background:none;border:0;text-decoration:underline;cursor:pointer}

/* Authored message line breaks and size styles take their natural height. */
#notification{height:auto;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---- the pre-start overlay (2026-11-02, switch prestart_overlay, game/prestart.js) ----
   .lc_ps_mode: this start screen uses it - the header has no להתחיל! / איך משחקים of its own (before the start or during the play).
   .lc_ps_on: the overlay is up - the header and the play's parts are invisible but keep their places (the slide's targets are measured
   there); the board's squares and the answer's underline show, and so do the popups (help, a confirm) and the board line (a board that
   failed to load says so there) - review R3. */
.lc_ps_mode .start_btn, .lc_ps_mode #helpBtn{ display: none !important; }
#container.lc_ps_on{ position: relative; }
.lc_ps_on > .lc_header, .lc_ps_on > .lc_hl, .lc_ps_on > .logo_box, .lc_ps_on > #lolitimer, .lc_ps_on > .nav_bar, .lc_ps_on > .hub_back,
.lc_ps_on > .lc_board_name, .lc_ps_on > .lc_start_best, .lc_ps_on > #keyboard, .lc_ps_on .game_top{ visibility: hidden; }
.lc_ps_on #the_answer{ visibility: visible; }
.lc_ps_on #notification{ position: relative; z-index: 31; }
/* 2026-11-02 evening (the user): a bright shade - near white, mostly opaque, the board's squares faintly under it - in a frame close to
   the screen's edges, the board squares' border colour (--ps-frame, set from the board by prestart.js / screen.js refreshNoteFrame) with
   a soft shadow; on white every design reads the same dark ink, the links in להתחיל!'s blue */
.lc_ps{ position: absolute; inset: 0; z-index: 30; --lc-ps-ink: #1f4f86; --lc-ps-link: #3498db; }
.lc_ps_shade{ position: absolute; inset: 6px; box-sizing: border-box; background: rgba(255, 255, 255, .7);   /* .7: the user's pick, 2026-11-02 */
	border: 2px solid var(--ps-frame, rgba(128, 128, 128, .55)); border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.lc_ps_dark .lc_ps_shade{ background: rgba(255, 255, 255, .92); }   /* a dark design (--lc-tone: dark): near-white too, not grey */
.lc_ps_col{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 28px 16px 5.5em;   /* more room between the parts (the user, 2026-11-02 evening; was 14 / 18) */
	text-align: center; color: var(--lc-ps-ink); }
.lc_ps_logo{ min-height: 1px; }
.lc_ps_logo .logo_box{ display: inline-block; visibility: visible; }
.lc_ps_title{ font-size: 23px; line-height: 1.35; overflow-wrap: anywhere; }
.lc_ps_name{ display: inline-block; font-size: 26px; font-weight: bold; }
.lc_ps_prog{ font-size: 13px; line-height: 1.4; color: #5c4300; }   /* the logo's brown, no background */
.lc_ps_prog[hidden], .lc_ps_title[hidden]{ display: none; }
.lc_ps_start{ font: inherit; font-size: 18px; border: 0; cursor: pointer; background: var(--lc-ps-link); color: #fff; padding: 6px 22px;
	border-radius: 999px; box-shadow: 1px 1px 5px 0 #555; }
.lc_ps_start:hover{ background: #146093; }
.lc_ps_start:disabled{ cursor: default; opacity: .7; }
.lc_ps_help, .lc_ps_back{ font: inherit; font-size: 15px; border: 0; background: none; color: var(--lc-ps-link); text-decoration: underline;
	cursor: pointer; }
/* a mini-game's way back: pinned to the bottom of the screen, always in view */
.lc_ps_back{ position: fixed; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 31;
	text-decoration: none; white-space: nowrap; }
.lc_ps_back[hidden]{ display: none; }