:root { --background: #27312f; --panel: #35413d; --text: #f0f2e9; --muted: #c4cec5; --accent: #b5c9b1; --danger: #ff5151; --cell-gap: 5px; } * { box-sizing: border-box; } html { min-height: 100%; scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } body { margin: 0; min-height: 100vh; padding: 16px; background-color: var(--background); background-image: url("img/XPD_22.PNG"); background-repeat: repeat; color: var(--text); font-family: "Yu Gothic", "Meiryo", sans-serif; text-align: center; overflow-y: auto; scrollbar-width: none; } button { font: inherit; } .header { margin: 0 auto 18px; max-width: 900px; } .header h1 { margin: 0; font-size: clamp(23px, 4vw, 36px); color: #0d0435; text-shadow: 0 2px 4px rgba(252, 244, 244, 0.945); } .subtitle { margin: 8px 0 0; color: var(--muted); font-size: 14px; } .game-container { width: min(100%, 760px); margin: 0 auto; } .status-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .status-box { min-width: 0; padding: 10px 5px; border: 1px solid #82918a; border-radius: 10px; background: #283632eF; box-shadow: inset 0 1px 3px #ffffff12, 0 3px 6px #0003; } .status-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; } .timer, .game-status, .result-time { display: block; font-weight: bold; overflow-wrap: anywhere; } .timer { font-size: clamp(23px, 5vw, 34px); font-variant-numeric: tabular-nums; letter-spacing: 1px; } .game-status { font-size: clamp(14px, 3vw, 19px); } .result-time { font-size: clamp(18px, 4vw, 25px); font-variant-numeric: tabular-nums; } .timer.danger { color: #ff2222; } .board-section { width: 100%; margin: 0 auto; } .board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--cell-gap); width: min(100%, 600px); aspect-ratio: 1; margin: 0 auto; padding: 8px; border: 2px solid #71817a; border-radius: 12px; background: #17231feF; box-shadow: 0 8px 18px #0005, inset 0 2px 5px #0005; } .cell { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: 1px solid #ffffff32; border-radius: 7px; background: #26322d; box-shadow: inset 0 2px 4px #0005, 0 1px 2px #ffffff0a; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; } .cell:focus-visible { outline: 3px solid #fff; outline-offset: -3px; } .cell.movable { border-color: #e3ead2; } .cell.movable:hover { filter: brightness(1.14); } .cell:active { filter: brightness(0.92); } .cell.empty { background: #17201d; border: 2px dashed #697970; box-shadow: inset 0 0 12px #0008; cursor: default; } .tile { position: absolute; inset: 3px; display: flex; align-items: center; justify-content: center; border: 1px solid #ffffff75; border-radius: 6px; box-shadow: inset 2px 2px 3px #ffffff58, inset -3px -4px 5px #0004, 0 3px 3px #0005; transition: transform 0.12s ease, filter 0.12s ease; } .tile::after { content: ""; position: absolute; top: 4px; left: 5px; right: 5px; height: 22%; border-radius: 50%; background: #ffffff32; filter: blur(2px); pointer-events: none; } .color-red { background: linear-gradient(145deg, #ff8585, #d72f39 60%, #98202b); } .color-blue { background: linear-gradient(145deg, #88caff, #287bc7 60%, #194a87); } .color-yellow { background: linear-gradient(145deg, #fff2a0, #e8bf38 60%, #ad8420); } .color-green { background: linear-gradient(145deg, #a9e7a0, #42a65c 60%, #22663b); } .controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 18px 0; } .button { min-width: 120px; padding: 11px 20px; border: 1px solid #ffffff35; border-radius: 8px; color: #fff; font-weight: bold; cursor: pointer; box-shadow: 0 3px 5px #0003; transition: transform 0.12s ease, filter 0.12s ease; } .button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); } .button:active:not(:disabled) { transform: translateY(1px); } .button:disabled { opacity: 0.38; cursor: not-allowed; } .cancel-button { background: linear-gradient(145deg, #b75d58, #793b39); } .retry-button { background: linear-gradient(145deg, #629c73, #356847); } .sound-button { background: linear-gradient(145deg, #677e89, #3a505a); } .message-panel { min-height: 58px; display: flex; align-items: center; justify-content: center; padding: 10px; border: 1px solid #64756a; border-radius: 9px; background: #26352fef; } .message-panel p { margin: 0; line-height: 1.7; overflow-wrap: anywhere; } .message-panel.success { color: #c8f5b9; border-color: #78b57b; } .message-panel.failure { color: #ffb1a7; border-color: #c96b62; } .record-panel, .rules { margin-top: 16px; padding: 14px; border: 1px solid #64756a; border-radius: 10px; background: #293832ed; text-align: left; } .record-panel h2, .rules h2 { margin: 0 0 10px; font-size: 18px; } .record-panel p { margin: 6px 0; } .rules ul { margin: 0; padding-left: 22px; line-height: 1.9; color: var(--muted); } .effect-layer { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: none; } .confetti { position: absolute; top: -20px; width: 10px; height: 16px; animation: confettiFall var(--duration, 3s) linear forwards; } #displayModeButton { padding: 10px 16px; border: 1px solid #777; border-radius: 8px; background: #333; color: #fff; font-size: 14px; cursor: pointer; transition: background 0.2s; } #displayModeButton:hover { background: #505050; } #board.image-mode .tile.color-red { background-color: transparent !important; background-image: url("img/0.png"); background-position: center; background-repeat: no-repeat; background-size: contain; } #board.image-mode .tile.color-blue { background-color: transparent !important; background-image: url("img/1.png"); background-position: center; background-repeat: no-repeat; background-size: contain; } #board.image-mode .tile.color-yellow { background-color: transparent !important; background-image: url("img/2.png"); background-position: center; background-repeat: no-repeat; background-size: contain; } #board.image-mode .tile.color-green { background-color: transparent !important; background-image: url("img/3.png"); background-position: center; background-repeat: no-repeat; background-size: contain; } #clearRecordsButton { padding: 10px 16px; border: 1px solid #a44; border-radius: 8px; background: #632f2f; color: #fff; font-size: 14px; cursor: pointer; } #clearRecordsButton:hover { background: #853d3d; } a { font-weight: bold; } #board .cell.glow-red, #board .cell.glow-blue, #board .cell.glow-yellow, #board .cell.glow-green { position: relative; z-index: 2; animation: colorGlow 0.45s ease-out; } #board .cell.glow-red { --glow-color: #ff3030; } #board .cell.glow-blue { --glow-color: #35aaff; } #board .cell.glow-yellow { --glow-color: #ffe34d; } #board .cell.glow-green { --glow-color: #40ff85; } #gameOverOverlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: #ff3030; font-size: clamp(30px, 7vw, 64px); font-weight: bold; letter-spacing: 4px; text-shadow: 0 0 8px #ff0000, 0 0 18px #ff0000, 0 0 30px #ff5555; pointer-events: none; } #gameOverOverlay.show { display: flex; } #board .cell.completed-red { outline: 3px solid #ff3030; box-shadow: 0 0 10px #ff3030, inset 0 0 8px #ff3030; } #board .cell.completed-blue { outline: 3px solid #35aaff; box-shadow: 0 0 10px #35aaff, inset 0 0 8px #35aaff; } #board .cell.completed-yellow { outline: 3px solid #ffe34d; box-shadow: 0 0 10px #ffe34d, inset 0 0 8px #ffe34d; } #board .cell.completed-green { outline: 3px solid #40ff85; box-shadow: 0 0 10px #40ff85, inset 0 0 8px #40ff85; } @keyframes colorGlow { 0% { outline: 3px solid var(--glow-color); outline-offset: -3px; box-shadow: 0 0 8px var(--glow-color), 0 0 18px var(--glow-color), inset 0 0 10px var(--glow-color); } 50% { outline: 3px solid var(--glow-color); outline-offset: -3px; box-shadow: 0 0 14px var(--glow-color), 0 0 28px var(--glow-color), 0 0 40px var(--glow-color), inset 0 0 14px var(--glow-color); } 100% { outline: 0 solid transparent; box-shadow: none; } } @keyframes confettiFall { to { transform: translate3d(var(--drift, 0px), 110vh, 0) rotate(900deg); opacity: 0; } } .flying-tile { animation: tileFly 0.8s ease-in forwards; } @keyframes tileFly { to { transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--fly-rotate)) scale(0.2); opacity: 0; } } @media (max-width: 480px) { body { padding: 8px; } .status-panel { gap: 5px; } .status-box { padding: 8px 3px; } .board { gap: 3px; padding: 5px; } .cell { border-radius: 4px; } .tile { inset: 2px; border-radius: 3px; } .controls { gap: 8px; } .button { min-width: 95px; padding: 10px 12px; } } @media (prefers-reduced-motion: reduce) { .timer.danger { animation-duration: 1.5s; } .tile, .button { transition: none; } }