html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0d0f12;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.viewer-web-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.viewer-iframe {
    position: fixed;
    border: 0;
    margin: 0;
    padding: 0;
    background: #fff;
    pointer-events: none;
}

.viewer-map {
    position: fixed;
    display: none;
    border: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #e5e3df;
    pointer-events: auto;
}

/* Google Maps は子要素が pointer-events:auto のため、親だけ none ではホイールが地図に取られる */
.viewer-embed--block-below-canvas,
.viewer-embed--block-below-canvas * {
    pointer-events: none !important;
}

.viewer-map.is-active {
    display: block;
}

.viewer-iframe.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

.viewer-youtube-mount {
    position: fixed;
    display: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.viewer-youtube-mount.is-active {
    display: block;
}

.viewer-youtube-mount #viewer-youtube-host {
    width: 100%;
    height: 100%;
}

.hud-embed-warning {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    color: #f9ab00;
    line-height: 1.35;
}

.hud-map-seed {
    margin-bottom: 0.45rem;
}

.hud-map-type-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
}

.hud-map-type-select {
    font-size: 0.75rem;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #e8eaed;
}

.hud-map-camera-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}

.hud-map-heading-btn {
    font-size: 0.72rem;
    padding: 0.22rem 0.42rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(10, 12, 18, 0.92);
    color: #e8eaed;
    cursor: pointer;
    min-width: 3.2rem;
}

.hud-map-heading-btn:hover {
    background: rgba(30, 34, 44, 0.95);
}

.hud-map-reset-north {
    font-size: 0.72rem;
    padding: 0.22rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(10, 12, 18, 0.92);
    color: #e8eaed;
    cursor: pointer;
}

.hud-map-reset-north:hover {
    background: rgba(30, 34, 44, 0.95);
}

.hud-map-seed-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.hud-seed-label {
    font-size: 0.72rem;
    color: #c4c7ce;
}

.hud-seed-input {
    width: 4.5rem;
    margin-left: 0.2rem;
    font-size: 0.75rem;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #e8eaed;
}

#viewer-canvas {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    cursor: grab;
    touch-action: none;
}

#viewer-canvas.pointer-pass-through {
    pointer-events: none;
}

#viewer-canvas.dragging {
    cursor: grabbing;
}

.hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

.hud-toolbar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3;
    display: flex;
    gap: 0.3rem;
    padding: 0.32rem 0.45rem;
    pointer-events: auto;
}

.hud-toolbar-btn {
    font-size: 0.7rem;
    padding: 0.22rem 0.48rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(10, 12, 18, 0.92);
    color: #e8eaed;
    cursor: pointer;
}

.hud-toolbar-btn:hover {
    background: rgba(30, 34, 44, 0.95);
}

.hud-toolbar-btn[aria-pressed='false'] {
    opacity: 0.55;
    border-style: dashed;
}

.hud--header-hidden .hud-header {
    display: none !important;
}

.hud--panel-hidden .hud-controls {
    display: none !important;
}

.hud-map-search {
    margin-bottom: 0.45rem;
}

.hud-map-search-host {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.hud-map-search-host gmp-place-autocomplete,
.hud-map-search-host .hud-place-autocomplete {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.8rem;
    --gmp-place-autocomplete-background-color: rgba(255, 255, 255, 0.06);
    --gmp-place-autocomplete-border: 1px solid rgba(255, 255, 255, 0.12);
    --gmp-place-autocomplete-border-radius: 4px;
    --gmp-place-autocomplete-color: #e8eaed;
}

gmp-place-autocomplete::part(prediction-list) {
    z-index: 10050;
}

.hud-map-search-hint {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #f9ab00;
}

.hud-map-search-hint a {
    color: #8ab4ff;
}

.pac-container {
    z-index: 10050 !important;
}

.hud-header,
.hud-controls {
    pointer-events: auto;
}

.hud-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: rgba(10, 12, 18, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hud-clients-pill {
    max-width: min(22rem, 92vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hud-link {
    color: #8ab4ff;
    text-decoration: none;
    font-size: 0.85rem;
}

.hud-link:hover {
    text-decoration: underline;
}

.hud-pill {
    font-size: 0.75rem;
    color: #c4c7ce;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.hud-controls {
    max-width: 28rem;
    margin: 0.35rem 0.6rem;
    padding: 0.5rem 0.65rem;
    background: rgba(10, 12, 18, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.hud-label {
    display: block;
    font-size: 0.75rem;
    color: #9aa0a6;
    margin-bottom: 0.25rem;
}

#file-input {
    font-size: 0.8rem;
    color: #e8eaed;
}

.hud-hint {
    margin: 0.45rem 0 0;
    font-size: 0.72rem;
    color: #80868b;
    line-height: 1.35;
}

.hud-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}

.hud-radio {
    font-size: 0.8rem;
    color: #e8eaed;
    cursor: pointer;
    user-select: none;
}

.hud-radio input {
    margin-right: 0.25rem;
    vertical-align: middle;
}

.hud-url-row {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}

.hud-url-input {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #e8eaed;
}

.hud-url-go {
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    border: 1px solid rgba(138, 180, 255, 0.45);
    background: rgba(138, 180, 255, 0.12);
    color: #8ab4ff;
    cursor: pointer;
}

.hud-url-go:hover {
    background: rgba(138, 180, 255, 0.22);
}

.hud-check {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #c4c7ce;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0.15rem;
}

.hud-check input {
    margin-top: 0.12rem;
}