:root {
    --fall-speed: 0.1s;
    --swap-speed: 0.08s;
    --rows: 5;
    --cols: 6;
    /* アプリ画面の高さ。一番上までスクロールした時に画面ぴったりに収まる */
    --app-height: 100vh;
}

@supports (height: 100dvh) {
    :root {
        --app-height: 100dvh;
    }
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    overscroll-behavior: none;
    background-color: #111;
    font-family: sans-serif;
    color: #fff;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

#main-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#app-container {
    position: relative;
    z-index: 100;
    width: 100%;
    flex-shrink: 0;
    height: var(--app-height);
    max-width: calc(var(--app-height) * 9 / 16);
    background-color: #222;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

button,
.tab,
.size-tab,
.spawn-item,
.toggle-label,
.usage-summary,
input[type="checkbox"],
input[type="range"],
.palette-orb {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

#footer {
    width: 100%;
    max-width: calc(var(--app-height) * 9 / 16);
    padding: 1.5vh 15px 4vh 15px;
    box-sizing: border-box;
    text-align: center;
    color: #888;
    font-size: 13px;
    line-height: 1.8;
}

#footer p {
    margin: 0 0 10px 0;
}

.highlight-text {
    color: #aaa;
    font-weight: bold;
}

#footer a {
    color: #1da1f2;
    text-decoration: none;
    padding: 2px 5px;
}

#footer a:hover {
    text-decoration: underline;
}

.hidden {
    display: none !important;
}

#mode-tabs {
    position: absolute;
    top: 2%;
    left: 5%;
    width: 90%;
    height: 6%;
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

.tab {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #444;
    color: #aaa;
    font-weight: bold;
    font-size: 2.2vh;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.tab.active {
    background-color: #0088ff;
    color: #fff;
}

#settings-btn {
    position: absolute;
    top: 9.5%;
    left: 5%;
    width: 90%;
    height: 5%;
    background: #333;
    color: #fff;
    font-size: 1.8vh;
    font-weight: bold;
    border: 1px solid #555;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    z-index: 20;
    transition: background 0.2s;
}

#settings-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

.settings-content {
    width: 85%;
    max-width: 390px;
    max-height: 88vh;
    overflow-y: auto;
    background: #222;
    border: 2px solid #555;
    border-radius: 12px;
    padding: 5%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9);
    transform: translateZ(0);
    will-change: transform;
}

.settings-header {
    text-align: center;
    font-size: 20px !important;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px !important;
}

.settings-subheader {
    text-align: center;
    font-size: 16px !important;
    font-weight: bold;
    color: #ffd700;
    margin-top: 15px !important;
}

.settings-subheader:first-of-type {
    margin-top: 0 !important;
}

#size-tabs {
    display: flex;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #555;
    box-sizing: border-box;
    flex-shrink: 0 !important;
    min-height: 38px !important;
}

.size-tab {
    flex: 1;
    text-align: center;
    padding: 10px 0 !important;
    background-color: #444;
    color: #aaa;
    font-weight: bold;
    font-size: 16px !important;
    cursor: pointer;
    transition: 0.2s;
    flex-shrink: 0 !important;
}

.size-tab.active {
    background-color: #e60088;
    color: #fff;
}

.control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px !important;
    font-weight: bold;
    color: #fff;
}

input[type=range] {
    width: 45%;
    accent-color: #ffd700;
}

.toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #ffd700;
    font-weight: bold;
    font-size: 14px !important;
}

.toggle-label input {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px;
    accent-color: #e60088;
}

.spawn-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 12px !important;
    justify-content: center;
    margin-bottom: 10px !important;
}

.spawn-item {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    cursor: pointer;
}

.spawn-item input {
    width: 18px !important;
    height: 18px !important;
    accent-color: #e60088;
    margin: 0;
}

.close-btn {
    margin-top: 0;
    padding: 12px !important;
    background: #e60088;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px !important;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.close-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

#edit-controls {
    position: absolute;
    top: 9.5%;
    left: 5%;
    width: 90%;
    height: auto;
    min-height: 16%;
    background: #333;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    padding: 2.5% 3% 3% 3%;
    z-index: 20;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 1.5vh;
}

#edit-controls.active {
    display: flex;
}

#palette-container {
    background: #222;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 1.2vh;
}

.palette-row {
    display: flex;
    justify-content: center;
    gap: 1.5vw;
}

.palette-orb {
    position: relative;
    width: 5.5vh;
    height: 5.5vh;
    max-width: 55px;
    max-height: 55px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.4), 1px 1px 2px rgba(0, 0, 0, 0.5);
    transition: transform 0.1s;
}

.palette-orb.heal {
    border-radius: 20%;
}

.palette-orb.selected {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px #fff, 0 0 10px rgba(255, 255, 255, 0.8);
}

.palette-orb.unmatchable {
    background: #444;
}

#board-area {
    position: absolute;
    /* iPhoneの角丸・ホームバーにかからないよう、セーフエリア分だけ上げる */
    /* --board-bottom は iPhoneのPWA時のみ index.html のスクリプトで設定される */
    bottom: var(--board-bottom, env(safe-area-inset-bottom, 0px));
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.8vh;
    z-index: 10;
}

#board-buttons-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.8vh;
    width: 100%;
    padding: 0 2%;
    box-sizing: border-box;
}

#board-buttons-wrapper.puzzle-mode {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.8vh 2vw;
}

#board-buttons-wrapper.puzzle-mode .btn-row {
    display: contents !important;
}

#board-buttons-wrapper.puzzle-mode button {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

#board-buttons-wrapper.puzzle-mode #mirror-btn,
#board-buttons-wrapper.puzzle-mode #autoplay-btn,
#board-buttons-wrapper.puzzle-mode #reverse-route-btn {
    display: none !important;
}

#board-buttons-wrapper.puzzle-mode #load-data-manual-btn {
    grid-column: 1;
    grid-row: 1;
}

#board-buttons-wrapper.puzzle-mode #toggle-route-btn {
    grid-column: 1;
    grid-row: 2;
}

#board-buttons-wrapper.puzzle-mode #new-board-btn {
    grid-column: 1;
    grid-row: 3;
}

#board-buttons-wrapper.puzzle-mode #reset-btn {
    grid-column: 2;
    grid-row: 2 / span 2;
}

.btn-row {
    display: flex;
    justify-content: space-between;
    gap: 2vw;
    width: 100%;
    box-sizing: border-box;
}

.btn-row button {
    flex: 1;
    padding: 1.2vh 0;
    font-size: 1.8vh;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}

.btn-row button:active {
    transform: translateY(2px);
    box-shadow: none;
}

#new-board-btn {
    background-color: #00aaff;
}

#reset-btn {
    background-color: #e60088;
}

#toggle-route-btn,
#reverse-route-btn,
#autoplay-btn,
#mirror-btn,
#load-data-manual-btn,
#load-url-btn {
    background-color: #555;
}

#toggle-route-btn.has-route {
    background-color: #00aaff;
    color: #fff;
}

#load-data-manual-btn.has-data {
    background-color: #00aaff;
    color: #fff;
}

#toggle-route-btn.has-route.hidden-route {
    background-color: #555;
    color: #aaa;
}

#reverse-route-btn.has-route {
    background-color: #ffd700;
    color: #000;
}

#autoplay-btn.has-route {
    background-color: #32cd32;
    color: #fff;
}

#drop-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2vh 0;
    width: 100%;
    padding: 0 2%;
    box-sizing: border-box;
    min-height: 3vh;
    align-items: center;
    margin: 0.2vh 0;
}

.count-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
    width: calc(100% / 7);
    font-size: 2.1vh;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.mini-orb {
    width: 2.4vh;
    height: 2.4vh;
    border-radius: 50%;
    box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.4), 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.mini-orb.heal,
.mini-orb.ojama,
.mini-orb.poison,
.mini-orb.mortal {
    border-radius: 20%;
}

#board {
    position: relative;
    width: 100%;
    aspect-ratio: var(--cols) / var(--rows);
    background-color: #333;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6) 2px, transparent 2px), linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 2px, transparent 2px);
    background-size: calc(100% / var(--cols)) calc(100% / var(--rows));
    background-position: -1px -1px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    overflow: hidden;
}

.orb {
    position: absolute;
    box-sizing: border-box;
    cursor: grab;
    z-index: 3;
    transform: translate3d(var(--tx, 0%), var(--ty, 0%), 0) scale(0.99);
    will-change: top, left, transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    box-shadow: inset -3px -3px 8px rgba(0, 0, 0, 0.4), 1px 1px 3px rgba(0, 0, 0, 0.5);
    transition: top var(--swap-speed) ease, left var(--swap-speed) ease, transform 0.15s ease, opacity 0.2s ease;
    border-radius: 50%;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.orb.falling {
    transition: top var(--fall-speed) ease-in, left var(--swap-speed) ease, transform 0.1s ease;
}

.orb.dragging {
    transition: none;
    z-index: 9999 !important;
    transform: translate3d(var(--tx, 0%), var(--ty, 0%), 0) scale(1.15) !important;
    opacity: 0.99;
}

.orb.exploded {
    transition: all 0.2s ease-out !important;
    transform: translate3d(var(--tx, 0%), var(--ty, 0%), 0) scale(1.5) !important;
    opacity: 0 !important;
    filter: brightness(2);
}

.orb.heal {
    transform: translate3d(var(--tx, 0%), var(--ty, 0%), 0) scale(0.86);
}

.orb.heal.dragging {
    transform: translate3d(var(--tx, 0%), var(--ty, 0%), 0) scale(0.99) !important;
}

.orb.bom {
    transform: translate3d(var(--tx, 0%), var(--ty, 0%), 0) scale(1.0, 0.9);
}

.orb.bom.dragging {
    transform: translate3d(var(--tx, 0%), var(--ty, 0%), 0) scale(1.15, 1.035) !important;
}

.orb.ojama {
    transform: translate3d(var(--tx, 0%), var(--ty, 0%), 0) scale(0.82);
}

.orb.mortal {
    transform: translate3d(var(--tx, 0%), var(--ty, 0%), 0) scale(1.1);
}

.orb.mortal.dragging {
    transform: translate3d(var(--tx, 0%), var(--ty, 0%), 0) scale(1.25) !important;
}

#route-canvas,
#route-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
}

.route-line-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.9);
    stroke-linejoin: round;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

.route-line {
    fill: none;
    stroke-linejoin: round;
}

.route-marker-text {
    font-family: sans-serif;
    font-weight: bold;
    pointer-events: none;
    user-select: none;
}

.red {
    background: url('images/dp_v2.png') 0% 0% / 500% 200% no-repeat;
}

.blue {
    background: url('images/dp_v2.png') 25% 0% / 500% 200% no-repeat;
}

.green {
    background: url('images/dp_v2.png') 50% 0% / 500% 200% no-repeat;
}

.yellow {
    background: url('images/dp_v2.png') 75% 0% / 500% 200% no-repeat;
}

.purple {
    background: url('images/dp_v2.png') 0% 100% / 500% 200% no-repeat;
}

.heal {
    background: url('images/dp_v2.png') 50% 100% / 500% 200% no-repeat;
    border-radius: 20%;
}

.ojama {
    background: url('images/dp_v2.png') 25% 100% / 500% 200% no-repeat;
    border-radius: 20%;
}

.poison {
    background: url('images/dp_v2.png') 75% 100% / 500% 200% no-repeat;
    border-radius: 20%;
}

.mortal {
    background: url('images/dp_v2.png') 100% 100% / 500% 200% no-repeat;
    border-radius: 20%;
}

.bom {
    background: url('images/bom.png') center/100% 100% no-repeat;
}

.orb.ojama,
.orb.poison,
.orb.mortal,
.orb.bom,
.mini-orb.ojama,
.mini-orb.poison,
.mini-orb.mortal,
.mini-orb.bom {
    box-shadow: none;
}

.unmatchable::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.65);
    border-radius: 50%;
    z-index: 1;
}

.unmatchable::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M20 20 L80 80 M80 20 L20 80' stroke='white' stroke-width='24'/%3E%3Cpath d='M20 20 L80 80 M80 20 L20 80' stroke='red' stroke-width='14'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}

.heal.unmatchable::before,
.ojama.unmatchable::before,
.poison.unmatchable::before,
.mortal.unmatchable::before {
    border-radius: 20%;
}

.usage-details {
    background: #333;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: left;
    overflow: hidden;
    border: 1px solid #444;
}

.usage-summary {
    padding: 12px;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
    background: #444;
    list-style: none;
    outline: none;
    text-align: center;
}

.usage-summary::-webkit-details-marker {
    display: none;
}

.usage-content {
    padding: 10px;
    background: #222;
}

.usage-content details {
    margin-bottom: 8px;
    border-bottom: 1px solid #333;
}

.usage-content summary {
    padding: 8px;
    color: #ffd700;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.usage-content ul {
    margin: 0;
    padding: 0 0 10px 25px;
    font-size: 13px;
    color: #ccc;
}

.usage-content li {
    margin-bottom: 5px;
}

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    background-color: #0088ff;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    transition: opacity 0.3s, transform 0.3s;
}

#back-to-top.show {
    opacity: 1;
    pointer-events: auto;
}

#back-to-top:hover {
    background-color: #00aaff;
    transform: scale(1.1);
}

.reset-settings-btn {
    margin-top: 0.5vh;
    padding: 10px !important;
    background: #444;
    color: #ccc;
    border: 1px solid #555;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px !important;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    align-self: center;
    width: 80% !important;
    max-width: 250px;
    transition: background-color 0.2s, transform 0.05s;
}

.reset-settings-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

.reset-settings-btn:hover {
    background-color: #555;
}

#loading-screen {
    position: fixed;
    inset: 0;
    background-color: #111;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s;
}

.loading-spinner {
    position: relative;
    width: 48px;
    height: 48px;
}

.loading-spinner span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background-color: #444;
    transform: rotate(calc(var(--i) * 36deg)) translateY(-19px);
    animation: loading-dot 1s linear infinite;
    animation-delay: calc(var(--i) * 0.1s - 1s);
}

@keyframes loading-dot {
    0% {
        background-color: #fff;
        box-shadow: 0 0 0 1.5px #111, 0 0 0 2.5px #fff;
    }

    10% {
        background-color: #ddd;
        box-shadow: none;
    }

    100% {
        background-color: #444;
    }
}

#loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-text {
    font-size: 23px;
    letter-spacing: 0.1em;
    animation: loading-blink 1.2s ease-in-out infinite;
}

@keyframes loading-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

#settings-modal,
#restore-modal,
#reset-confirm-modal,
#update-modal,
#migrate-modal,
#share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: none;
    justify-content: center;
    align-items: center;
}

#settings-modal.active,
#restore-modal.active,
#reset-confirm-modal.active,
#update-modal.active,
#migrate-modal.active,
#share-modal.active {
    display: flex;
}

.settings-content {
    padding: 20px !important;
    gap: 15px !important;
}

#settings-modal .settings-content {
    margin-top: env(safe-area-inset-top, 0px);
    max-height: calc(88vh - env(safe-area-inset-top, 0px));
}

.settings-content div[style*="gap: 2vw"] {
    gap: 15px !important;
}

.settings-content span[style*="font-size: 1.8vh"] {
    font-size: 15px !important;
}

.settings-content hr {
    margin: 8px 0 !important;
}

.action-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8vh;
}

.action-right {
    flex: 1;
    display: flex;
}

.action-right button {
    width: 100%;
    height: 100%;
}

@property --roulette-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes roulette-fill {
    0% {
        --roulette-angle: 0deg;
    }

    100% {
        --roulette-angle: 360deg;
    }
}

.palette-orb.roulette {
    background: url('images/roulette_icon.png') center/cover no-repeat;
    border: none !important;
    border-radius: 20% !important;
}

.palette-orb.roulette::after {
    content: none;
}

.roulette-frame {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;
    background: url('images/roulette_frame_v2.png') center/100% 100% no-repeat;
    transform: scale(1.0);
}

.roulette-bg {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
    background-color: transparent;
    background-image: conic-gradient(rgba(255, 255, 255, 0.9) var(--roulette-angle, 0deg), transparent var(--roulette-angle, 0deg));
    transform: scale(0.999);
    animation: roulette-fill var(--roulette-speed, 1s) linear infinite;
    -webkit-mask-image: radial-gradient(closest-side, transparent 80%, black 85%);
    mask-image: radial-gradient(closest-side, transparent 80%, black 85%);
}

.mini-orb.heal,
.palette-orb.heal,
.mini-orb.bom,
.palette-orb.bom {
    transform: scale(0.9);
}

.palette-orb.heal.selected,
.palette-orb.bom.selected {
    transform: scale(1.1);
}

#status-display-area {
    position: absolute;
    top: 14.5%;
    left: 0;
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4vw;
    z-index: 5;
    pointer-events: none;
}

#move-count-display {
    font-size: 3.5vh;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

#combo-text {
    font-size: 4vh;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

#time-bar {
    width: 100%;
    height: 100%;
    background-color: #ffd700;
    border-radius: 2px;
    align-self: flex-start;
    -webkit-animation: blink-bar 0.2s infinite alternate;
    animation: blink-bar 0.2s infinite alternate;
    will-change: background-color;
}

#time-gauge {
    position: absolute;
    z-index: 10000;
    pointer-events: none;
    transform: translate(-50%, -130%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#time-gauge.bar-style {
    width: 11vw;
    max-width: 50px;
    height: 6px;
    transform: translate(-50%, -300%);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #0088ff;
    border-radius: 3px;
}

#time-text {
    font-size: 1.5vh;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
    background: rgba(0, 0, 0, 0.75);
    padding: 2px 8px;
    border-radius: 4px;
    border: 2px solid #138399;
    white-space: nowrap;
}

@-webkit-keyframes blink-bar {
    0% {
        background-color: #ffd700;
    }

    100% {
        background-color: #ff4d4d;
    }
}

@keyframes blink-bar {
    0% {
        background-color: #ffd700;
    }

    100% {
        background-color: #ff4d4d;
    }
}

@media (display-mode: standalone) {

    #pwa-benefits,
    #pwa-benefits+#usage-container {
        display: none !important;
    }

    #main-wrapper {
        padding-top: env(safe-area-inset-top);
        box-sizing: border-box;
    }

    /* 上の余白分だけ高さを減らし、盤面が画面下からはみ出ないようにする */
    :root {
        --app-height: calc(100dvh - env(safe-area-inset-top));
    }
}

/* ==========================================
   左利きモード用のスタイリング定義
   ========================================== */
#board-buttons-wrapper.left-handed .btn-row {
    flex-direction: row-reverse;
}

#board-buttons-wrapper.puzzle-mode.left-handed #load-data-manual-btn {
    grid-column: 2;
}

#board-buttons-wrapper.puzzle-mode.left-handed #toggle-route-btn {
    grid-column: 2;
}

#board-buttons-wrapper.puzzle-mode.left-handed #new-board-btn {
    grid-column: 2;
}

#board-buttons-wrapper.puzzle-mode.left-handed #reset-btn {
    grid-column: 1;
}

#board-buttons-wrapper.left-handed #undo-redo-wrapper {
    flex-direction: row;
}

#board-buttons-wrapper.puzzle-mode #load-url-btn {
    display: block !important;
    grid-column: 2;
    grid-row: 1;
}

#board-buttons-wrapper.puzzle-mode.left-handed #load-url-btn {
    grid-column: 1;
}

#move-count-display:empty {
    display: none !important;
}

/* ==========================================
   配置モード時のステータス（コンボ）表示用調整
   ========================================== */
#status-display-area.edit-mode {
    top: 30% !important;
    height: 5% !important;
    z-index: 9999 !important;
}

#status-display-area.edit-mode #move-count-display {
    display: none !important;
}

#status-display-area.edit-mode #combo-text {
    font-size: 2.8vh !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 0.8) !important;
}

.orb.ghost {
    transition: none;
    opacity: 0.3 !important;
    pointer-events: none;
    z-index: 10 !important;
}