/* 全局重置 */
html, body, h1, p {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
touch-action: manipulation; /* 阻止移动端双击缩放，保障点击响应 */
}
html {
height: 100%;
font-family: Arial, sans-serif;
color: #222;
line-height: 1.5;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 10px;
}
a {
color: #3473ee;
}

/* 难度选择区域样式 */
#difficulty-container {
width: 100%;
text-align: center;
margin: 10px 0 5px;
font-size: 0.95rem;
z-index: 999; /* 保障按钮在最上层，不被遮挡 */
position: relative;
}
.difficulty-btn {
font-size: 0.95rem;
padding: 6px 14px;
margin: 0 4px;
border: 2px solid #0bc3ff;
border-radius: 6px;
background: #fff;
color: #0bc3ff;
cursor: pointer;
font-weight: bold;
transition: all 0.2s;
z-index: 999;
position: relative;
}
.difficulty-btn.active {
background: #0bc3ff;
color: #fff;
}
.difficulty-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none; /* 禁用状态完全阻止点击 */
}

/* 开始按钮样式 */
#start-container {
width: 100%;
text-align: center;
margin: 5px 0 15px;
z-index: 999;
position: relative;
}
#start {
font-size: 1.2rem;
padding: 10px 24px;
border: 2px solid #0bc3ff;
border-radius: 8px;
background: #fff;
color: #0bc3ff;
cursor: pointer;
font-weight: bold;
transition: all 0.2s;
z-index: 999;
position: relative;
}
#start:hover {
background: #0bc3ff;
color: #fff;
}
#start:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}

/* 移动端方向控制按钮 */
.controls {
display: grid;
grid-template-areas: ".    up   ."
"left down right";
width: 75vmin;
height: 50vmin;
margin: 10px auto;
z-index: 998;
position: relative;
touch-action: none; /* 完全阻止移动端触摸默认行为，保障方向键点击 */
}
#up { grid-area: up; }
#down { grid-area: down; }
#left { grid-area: left; }
#right { grid-area: right; }
.controls button {
color: #888;
font-size: 8vmin;
background: none;
border: 2px solid;
margin: 2px;
border-radius: 5vmin;
cursor: pointer;
touch-action: none;
z-index: 999;
}
.controls button:focus {
outline: none;
}
.controls button:active {
background: #8882;
}

/* 桌面端方向按钮适配 */
@media (min-width: 10cm) and (min-height: 10cm) {
.controls {
position: absolute;
width: 7.5cm;
height: 5cm;
bottom: 1.5cm;
right: 1.5cm;
}
.controls button {
font-size: 0.8cm;
border-radius: 0.5cm;
}
}

/* 通用样式 */
#url,
#max-score-grid {
background: #8883;
padding: 2px;
border-radius: 3px;
}
#share {
display: inline-block;
}
footer {
margin-top: auto;
font-size: 0.9rem;
}
.invisible {
display: none !important;
}
.hidden {
visibility: hidden;
}
:root.touch .no-touch-only,
:root:not(.touch) .touch-only {
display: none;
}

/* 展开/收起按钮 */
.expand-btn,
.collapse-btn {
background: none;
border: none;
padding: 0;
font: inherit;
font-weight: bold;
cursor: pointer;
width: 1rem;
z-index: 999;
position: relative;
}
.expand-btn,
.expandable {
transition: transform, opacity;
transition-duration: .4s;
}
.expandable {
display: inline-block;
position: relative;
height: 1.5rem;
transform: translateX(-100%);
padding-right: 10px;
z-index: 999;
}
.expand-btn {
position: absolute;
right: 0;
top: 0;
transform: translateX(100%);
opacity: 1;
}
.help-toggle {
color: #0bc3ff;
}
.high-score-toggle {
color: #ff8c0b;
}
.collapse-btn {
color: #aaa;
}
.expandable.expanded {
height: auto;
transform: none;
}
.expandable.expanded .expand-btn {
opacity: 0;
}
#share-note {
padding-left: 0.5rem;
}
#share-note.invisible {
transition: opacity 0.4s ease-in-out, display 0s ease-out 0.4s;
transition-behavior: allow-discrete;
opacity: 0;
display: none;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
html {
background: #222;
color: #eee;
}
#start, .difficulty-btn {
background: #222;
}
#start:hover, .difficulty-btn.active {
background: #0bc3ff;
color: #fff;
}
}

/* 图标字体 */
@font-face {
font-family: 'icons';
src: url('icons.woff2?40046441') format('woff2');
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "icons";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
margin-left: .2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-share:before { content: '\e811'; }