:root {
	--accent: #5b86ff;
	--accent2: #9a5cff;
	--accent-gradient: linear-gradient(135deg, var(--accent), var(--accent2));
	--panel-bg: #131a2e;
	--panel-bg-2: #1b2340;
	--panel-hover: #273156;
	--panel-border: #2c3760;
	--text: #e7eaf5;
	--text-muted: #8b93ac;
	--shadow: 0 4px 18px rgba(0,0,0,.45);
}
* {
	border:0;
	padding:0;
	margin:0;
	font: 14px/1.2 "Segoe UI", "Hiragino Sans", "Yu Gothic", Verdana, sans-serif;
	line-height:140%
}
a, a:visited {
	color:var(--accent)
}
body {
	background:#06090f;
	background:radial-gradient(1200px 760px at 50% -8%, #17213f 0%, #0a0e1c 52%, #05070d 100%) fixed;
	color:var(--text);
	overflow-x:hidden;
	min-height:100vh;
}
#wrapwrap {
	width:100%;
	max-width:540px;
	margin:0 auto;
}
#lineback {
	width:100%;
	max-width:540px;
	margin:0 auto;
	background:var(--panel-bg);
	box-sizing:border-box;
	overflow:hidden;
	padding:6px 0;
	border-radius:0 0 10px 10px;
	box-shadow:var(--shadow);
	border-bottom:3px solid transparent;
	border-image:var(--accent-gradient) 1;
}
#game {
	margin-top:10px
}
#arrowSurfaceC, #arrowSurface {
	position:absolute;
	pointer-events:none;
	z-index:2;
}
#board {
	aspect-ratio: 6 / 5;
	border:20px solid #22242e;
	clear:both;
	width:100%;
	max-width:540px;
	margin: 0 auto;
	position:relative;
	box-sizing:border-box;
	box-shadow:var(--shadow);
}
#boardBg {
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	overflow:hidden;
}
.bgcell {
	float:left;
	width: var(--tile-size, 90px);
	height: var(--tile-size, 90px);
	background-size:100% 100%;
}
.bgcell.bg1 { background-image:url('img/bg1.png'); }
.bgcell.bg2 { background-image:url('img/bg2.png'); }
#score {
	margin:0 auto;
	width:100%;
	max-width:540px;
	background:var(--panel-bg);
	min-height:20px;
	text-align:center;
	padding:6px 0;
	box-sizing:border-box;
}
#entry {
	border:1px solid var(--panel-border);
	background:var(--panel-bg-2);
	color:var(--text);
	width:70px;
    resize: none;
	font: 18px/1.2 Courier New;
	height:120px;
	z-index:1;
	overflow:hidden;
}
#colorchange {
	width:70px;
    resize: none;
	float:right;
	clear:both;
	font: 18px/1.2 Courier New;
	height:200px;
	z-index:1;
	margin:20px;
}
#colorto, #colorfrom {
	border:1px solid var(--panel-border);
	background:var(--panel-bg-2);
	color:var(--text);
	float:left;
	width:30px;
    resize: none;
	font: 18px/1.2 Courier New;
	height:20px;
	text-align:center;
}
#infobooth {
	width:100%;
	max-width:500px;
	background:var(--panel-bg);
	padding:20px;
	margin: 0 auto;
	border-radius:10px;
	box-shadow:var(--shadow);
	min-height:100px;
	box-sizing:border-box;
}
#library {
	width:100%;
	max-width:500px;
	margin: 20px auto 0;
	display:flex;
	gap:8px;
	box-sizing:border-box;
}
#library button {
	border: 1px solid var(--panel-border);
	background:var(--panel-bg);
	color:var(--text);
	padding:8px 10px;
	border-radius:8px;
	cursor:pointer;
	box-shadow:var(--shadow);
}
#library button:hover {
	background:var(--panel-hover);
}
#openLibraryBtn {
	flex:1 1 auto;
	text-align:left;
	font-weight:bold;
}
#saveBoardBtn {
	flex:none;
}

/* Saved-boards picker: a full-screen page of its own laid over the app,
   so a long list scrolls here instead of squeezing the puzzle screen.
   Opened from #openLibraryBtn; tapping a board loads it and closes. */
#libraryPage {
	display:none;
	position:fixed;
	top:0; left:0; right:0; bottom:0;
	z-index:50;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	overscroll-behavior:contain;
	background:#0a0e1c;
	padding-bottom:env(safe-area-inset-bottom);
}
#libraryPage.open {
	display:block;
}
body.libraryOpen {
	overflow:hidden;
}
#libraryPageHeader {
	position:sticky;
	top:0;
	z-index:1;
	max-width:540px;
	margin:0 auto;
	box-sizing:border-box;
	padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
	background:var(--panel-bg);
	border-bottom:3px solid transparent;
	border-image:var(--accent-gradient) 1;
	box-shadow:var(--shadow);
	display:flex;
	align-items:center;
	gap:10px;
}
#libraryBackBtn {
	border: 1px solid var(--panel-border);
	background:var(--panel-bg-2);
	color:var(--text);
	padding:4px 12px;
	border-radius:6px;
	cursor:pointer;
}
#libraryPageTitle {
	font-weight:bold;
	font-size:16px;
}
#libraryList {
	max-width:540px;
	margin:0 auto;
	padding:12px 10px 24px;
	box-sizing:border-box;
}
.libraryItem {
	background:var(--panel-bg);
	border:1px solid var(--panel-border);
	border-radius:10px;
	padding:10px;
	margin-bottom:12px;
	cursor:pointer;
	box-shadow:var(--shadow);
}
.libraryItem:hover {
	background:var(--panel-bg-2);
}
.libraryItem .libHead {
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:8px;
}
.libraryItem .libName {
	font-weight:bold;
	font-size:15px;
	word-break:break-all;
}
.libraryItem .libMeta {
	display:block;
	color:var(--text-muted);
	font-size:12px;
}
.libraryItem .libDelete {
	flex:none;
	border: 1px solid var(--panel-border);
	background:var(--panel-bg-2);
	color:var(--text);
	margin-left:8px;
	padding:4px 10px;
	border-radius:6px;
	cursor:pointer;
}
.libraryItem .libDelete:hover {
	background:var(--panel-hover);
}
.miniBoard {
	display:grid;
	width:100%;
	max-width:300px;
	margin:0 auto;
	border:6px solid #22242e;
	box-sizing:border-box;
}
.miniCell {
	aspect-ratio:1;
	background-size:100% 100%;
}
.miniCell.bg1 { background-image:url('img/bg1.png'); }
.miniCell.bg2 { background-image:url('img/bg2.png'); }
.miniCell img {
	display:block;
	width:100%;
	height:100%;
}
.libraryEmpty {
	color:var(--text-muted);
	text-align:center;
	padding:30px 0;
}
.image1 {
	background:url("img/atk.svg")
}
.image2 {
	background:url("img/clock.svg")
}
.image4 {
	background:url("img/minus.png")
}
.image5 {
	background:url("img/plus.png")
}
.image6 {
	background:url("img/gear.png");
	/* gear.png is solid black on transparent; invert so it reads on the
	   dark theme's panel background instead of disappearing into it */
	filter: invert(1);
}
.image7 {
	background:url("img/Green.png")
}
.image8 {
	background:url("img/Red.png")
}
.image9 {
	background:url("img/Blue.png")
}
.image10 {
	background:url("img/Light.png")
}
.image11 {
	background:url("img/Dark.png")
}
.image12 {
	background:url("img/Heart.png")
}
.topbutton {
	float:left;
	margin:2px;
	background-repeat: no-repeat;
	background-size:20px 20px;
	text-indent:-9999px;
	width:20px;
	height:20px
}
/* Gear (options) in the header, sized to match the hamburger and the
   enlarged Play / Edit / 解析 buttons. */
#lineback .image6 {
	width:30px;
	height:30px;
	background-size:30px 30px;
	margin:3px 4px;
}
.tophelp {
	float:left;
	margin:2px;
}
#buttons {
	padding-top:10px;
	margin:0 auto;
	width: 100%;
	max-width:540px;
	background-color: transparent;
	min-height:20px;
	overflow:hidden;
	box-sizing:border-box;
}
#buttons button {
	width:16.666%;
	box-sizing:border-box;
	background: var(--panel-bg);
	color: var(--text);
	float:left;
	border: 1px solid var(--panel-border);
	border-right: none;
	padding:6px 0;
	cursor:pointer;
	transition: background-color .15s ease, color .15s ease;
}
#buttons button:first-child {
	border-left: none;
	border-radius:8px 0 0 8px;
}
#buttons button:last-child {
	border-radius:0 8px 8px 0;
}
#colorchange button {
	border: 1px solid var(--panel-border);
	background:var(--panel-bg-2);
	color:var(--text);
}
#buttons button:hover {
	background: var(--accent-gradient);
	color:#fff;
}
.tile, button {
	-webkit-transition: opacity .4s ease-in-out;
	-moz-transition: opacity .4s ease-in-out;
	-ms-transition: opacity .4s ease-in-out;
	-o-transition: opacity .4s ease-in-out;
	transition: opacity .4s ease-in-out
}
.tile {
	margin:0px;
	display: block;
	float: left;
	height: var(--tile-size, 90px);
	width: var(--tile-size, 90px);
	background-size:100%;
	z-index:1;
	position:relative;
}
.jammer { background-image:url(img/Jammer.png) }
.black { background-color:#000 }
.poison { background-image:url(img/Poison.png) }
.red { background-image:url(img/Red.png) }
.blue { background-image:url(img/Blue.png) }
.dark { background-image:url(img/Dark.png) }
.light { background-image:url(img/Light.png) }
.green { background-image:url(img/Green.png) }
.heart { background-image:url(img/Heart.png) }
.input-prompt {
	width:90px;
	margin-top:-22px;
	display:block;
	position: absolute;
	font-style: italic;
	color: var(--text-muted);
	text-align:center
}
input:disabled {
	background:var(--panel-bg-2)
}

.test1{
border:1px solid #616261; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #7d7e7d; background-image: -webkit-gradient(linear, left top, left bottom, from(#7d7e7d), to(#0e0e0e));
 background-image: -webkit-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: -moz-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: -ms-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: -o-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: linear-gradient(to bottom, #7d7e7d, #0e0e0e);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#7d7e7d, endColorstr=#0e0e0e);
}
.test1 button {
	background-size:30px 30px;
	width:30px;
	height:30px
}
#colorchange #convert{
	width:70px;
	height:20px;
	line-height:15px
}

.comboInfoBox {
	height: 36px;
}

.comboInfoBox span, .comboInfoBox img {
	vertical-align: middle;
}

#modeToggle {
	display:inline-block;
}
/* Play / Edit / 解析 are the main mode switch: bigger tap targets than
   the other pill buttons so they're easy to hit without fumbling. */
#modeToggle .modebutton {
	font-size:15px;
	font-weight:bold;
	line-height:20px;
	padding:7px 16px;
	border-radius:18px;
	margin-left:4px;
}
.modebutton {
	border: 1px solid var(--panel-border);
	background:var(--panel-bg);
	color:var(--text);
	padding:2px 10px;
	line-height:18px;
	border-radius:14px;
	cursor:pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.modebutton:hover {
	background:var(--panel-hover);
}
.modebutton-active {
	background:var(--accent-gradient);
	border-color:transparent;
	color:#fff;
}

#editPalette {
	display:none;
	width:100%;
	max-width:540px;
	margin:0 auto;
	padding:8px 0;
	text-align:center;
	background:var(--panel-bg);
	box-sizing:border-box;
}
.edit-mode #editPalette {
	display:block;
}
#boardSizeButtons {
	margin-bottom:8px;
}
#analyzePanel {
	display:none;
	width:100%;
	max-width:540px;
	margin:0 auto;
	padding:8px 0;
	text-align:center;
	background:var(--panel-bg);
	box-sizing:border-box;
}
.analyze-mode #analyzePanel {
	display:block;
}
.analyze-mode #playPanel {
	display:none;
}
#analyzeStatus {
	margin-top:6px;
	color:var(--text-muted);
}
#analyzeLevels {
	margin-bottom:8px;
}
#orbCountBar {
	display:flex;
	justify-content:space-around;
	align-items:center;
	width:100%;
	max-width:540px;
	margin:0 auto;
	padding:4px 0;
	background:var(--panel-bg);
	box-sizing:border-box;
}
.edit-mode #orbCountBar, .analyze-mode #orbCountBar {
	display:none;
}
.orbCount {
	white-space:nowrap;
}
.orbCount img {
	width:20px;
	height:20px;
	vertical-align:middle;
	margin-right:2px;
}
.clearedItem {
	white-space:nowrap;
	margin-right:8px;
}
.clearedItem img {
	vertical-align:middle;
}
#buttons .editOnly {
	display:none;
}
.edit-mode #buttons .playOnly {
	display:none;
}
.edit-mode #buttons .editOnly {
	display:block;
	width:100%;
}
.analyze-mode #buttons {
	display:none;
}
#buttons button.toggled-on {
	background:var(--accent-gradient);
	color:#fff;
}
#genConfig {
	margin-top:10px;
	font-size:12px;
	color:var(--text-muted);
}
#genCols {
	margin-top:4px;
}
.genCol {
	display:inline-block;
	margin:0 3px;
	vertical-align:top;
}
.genChip {
	width:30px;
	height:30px;
	display:block;
	background-size:100%;
	border:2px solid transparent;
	opacity:0.3;
	cursor:pointer;
	margin:0 auto;
}
.genChip.selected {
	opacity:1;
	border-color:var(--accent);
}
.genCount {
	width:34px;
	margin-top:2px;
	border:1px solid var(--panel-border);
	background:var(--panel-bg-2);
	color:var(--text);
	text-align:center;
	font-size:12px;
	box-sizing:border-box;
}
#analyzeResults {
	display:inline-block;
	text-align:left;
	margin-top:6px;
}
.analyzeItem {
	padding:3px 0;
}
#analyzeConds {
	margin-bottom:8px;
}
.condRow {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:4px;
	margin-bottom:4px;
}
.condRow select, .condNum {
	border:1px solid var(--panel-border);
	background:var(--panel-bg-2);
	color:var(--text);
	border-radius:6px;
	padding:3px 4px;
	font-size:14px;
}
.condNum {
	width:3em;
}
.condCascade {
	color:var(--text-muted);
	font-size:12px;
	white-space:nowrap;
}
.condCascade input {
	vertical-align:middle;
	margin-right:2px;
}
.condRemove {
	border:1px solid var(--panel-border);
	background:var(--panel-bg-2);
	color:var(--text);
	border-radius:6px;
	padding:2px 8px;
	cursor:pointer;
}
#analyzeObjective {
	margin-top:6px;
}
#scoreRulesPanel {
	margin:8px auto 0;
	padding:8px 6px;
	max-width:420px;
	border:1px solid var(--panel-border);
	border-radius:8px;
}
.scoreRulesTitle {
	font-weight:bold;
	margin-bottom:4px;
}
.scoreRuleRow {
	margin:4px 0 6px;
	font-size:13px;
}
.ruleNum {
	width:5em;
	border:1px solid var(--panel-border);
	background:var(--panel-bg-2);
	color:var(--text);
	border-radius:6px;
	padding:3px 4px;
	font-size:14px;
}
.arrangeItem {
	padding:6px 0;
	border-bottom:1px solid var(--panel-border);
}
.arrangeItem .miniBoard {
	max-width:180px;
	margin:4px 0 0 1.2em;
	border-width:4px;
}
.condResult {
	font-size:12px;
	padding-left:1.2em;
}
.condResult span {
	margin-right:8px;
	white-space:nowrap;
}
.condOk {
	color:#4cd97b;
}
.condNg {
	color:#ff7a7a;
}
.analyzeItem button {
	border:1px solid var(--panel-border);
	background:var(--panel-bg-2);
	color:var(--text);
	padding:1px 8px;
	margin-left:6px;
	cursor:pointer;
}
.analyzeItem button:hover {
	background:var(--panel-hover);
}
#playPanel {
	display:block;
	width:100%;
	max-width:540px;
	margin:0 auto;
	padding:8px 0;
	text-align:center;
	background:var(--panel-bg);
	box-sizing:border-box;
	overflow:hidden;
}
.edit-mode #playPanel {
	display:none;
}
#countdownAdjust {
	display:inline-block;
	vertical-align:middle;
	margin-left:6px;
}
#countdownAdjust .topbutton {
	float:none;
	display:inline-block;
}
#playPanel #time {
	font-weight:bold;
}
#colorchange {
	display:none;
}
.paletteSwatch {
	width:36px;
	height:36px;
	margin:2px;
	background-size:100%;
	border:2px solid transparent;
	display:inline-block;
	vertical-align:middle;
	cursor:pointer;
}
.paletteSwatch.selected {
	border-color:var(--accent);
}

/* Practice page: no pinch / double-tap zoom anywhere (a stray double tap
   near the top buttons used to zoom the page). Panning stays allowed so
   scrollable areas like the saved-boards page still scroll. touch-action
   is not inherited, so it's set on every element; iOS Safari also needs
   the gesturestart handler in pad.js. */
html.practicePage, html.practicePage * {
	touch-action:pan-x pan-y;
}

@media (max-width: 600px) {
	/* Full-height app layout for the practice page only (html.practicePage,
	   set in index.html — rankings/speedrun keep normal page scrolling since
	   their content can run longer than one screen). The board is pinned to
	   the bottom of the screen (roughly the bottom third, like the real
	   game) and everything else stacks above it, so the page itself never
	   scrolls. Only the saved-boards list scrolls, and only within its own
	   area if it's long. env(safe-area-inset-*) keeps content clear of the
	   notch/status bar and the home indicator (needs viewport-fit=cover on
	   the viewport meta). */
	html.practicePage, html.practicePage body {
		height:100%;
		overflow:hidden;
	}
	html.practicePage #wrapwrap {
		display:flex;
		flex-direction:column;
		height:100vh;
		height:100dvh;
		box-sizing:border-box;
		padding-top:env(safe-area-inset-top);
		padding-bottom:env(safe-area-inset-bottom);
	}
	html.practicePage #lineback { flex:none; }
	html.practicePage #buttons {
		order:1;
		flex:none;
	}
	html.practicePage #game {
		order:2;
		flex:none;
		margin-top:10px;
	}
	html.practicePage #library {
		order:3;
		flex:none;
		margin-top:10px;
	}
	html.practicePage #infobooth {
		order:4;
		/* takes the slack between the controls and the board, so the board
		   stays pinned to the bottom; long messages scroll inside it. One
		   line is always kept for it (fitBoardToScreen in pad.js leaves room
		   for this min-height when sizing the board) so combo results stay
		   visible even when the board has been shrunk to fit. */
		flex:1 1 auto;
		overflow-y:auto;
		min-height:22px;
		margin-top:6px;
		/* transparent + light padding so an empty message area doesn't leave
		   a stray card above the board; text/results still read on the page bg */
		background:transparent;
		box-shadow:none;
		border-radius:0;
		padding:0 10px;
	}
	html.practicePage #wrapwrap.options-open #infobooth {
		background:var(--panel-bg);
		border-radius:10px;
		padding:16px;
	}
	html.practicePage #board {
		order:5;
		flex:none;
		margin-top:10px;
	}
	#appTitle {
		display:none;
	}
	/* Only when even the smallest board can't fit (very short screens in
	   Edit mode): scroll rather than cut the board off. */
	html.practicePage #wrapwrap.tall-content {
		overflow-y:auto;
	}
	html.practicePage #wrapwrap.tall-content #infobooth {
		flex:none;
	}
	/* Long 解析 result lists scroll in place instead of pushing the board
	   off the screen. */
	html.practicePage #analyzeResults {
		max-height:30vh;
		overflow-y:auto;
	}

	/* Options display can't fit alongside the board without scrolling, so
	   while it's open the board (and the saved-boards list) are hidden and
	   the options panel fills the freed space. Closing it (✕ button, or
	   switching mode) restores the board. */
	html.practicePage #wrapwrap.options-open #board,
	html.practicePage #wrapwrap.options-open #library {
		display:none;
	}
	html.practicePage #wrapwrap.options-open #infobooth {
		flex:1 1 auto;
		overflow-y:auto;
	}
}

/* Short phones (iPhone SE, or any phone in Safari with its toolbars
   showing): tighten the gaps between sections so more height is left
   for the board. */
@media (max-width: 600px) and (max-height: 700px) {
	html.practicePage #buttons { padding-top:6px; }
	html.practicePage #game,
	html.practicePage #library,
	html.practicePage #board { margin-top:6px; }
	html.practicePage #infobooth { margin-top:4px; }
	html.practicePage #library button { padding:6px 10px; }
}

/* Narrow phones (first-generation iPhone SE, 320px wide): keep each row of
   buttons on one line. */
@media (max-width: 360px) {
	#buttons button { font-size:12px; }
	.paletteSwatch {
		width:32px;
		height:32px;
		margin:1px;
	}
	#modeToggle .modebutton {
		padding:7px 12px;
		margin-left:2px;
	}
	#lineback .image6 { margin:3px 2px; }
	#hamburgerBtn { margin:2px 6px; }
}