:root {
    --bg-h: 135;
    --bg-s: 80%;
    --bg-l: 18%;
    --wall-color: hsl(var(--wall-h), var(--wall-s), var(--wall-l));
    --wall-h: 34;
    --wall-s: 83%;
    --wall-l: 81%;
    --red-h: 155;
    --red-s: 76%;
    --red-l: 8;
    --grn-h: 152;
    --grn-s: 77%;
    --grn-l: 10;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: hsl(var(--bg-h), var(--bg-s), var(--bg-l));
}
#fieldWrap { position: relative; flex: 0 0 auto; transform-origin: center center; }
#field { position: relative; }
.wall-seg {
    position: absolute;
    pointer-events: none;
    background-color: var(--wall-color);
}
.dot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    transform: translate(-50%, -50%);
}
#redDot {
    background: radial-gradient(circle, hsl(var(--red-h), var(--red-s), calc((var(--red-l) + 10) * 1%)) 40%, hsl(var(--red-h), var(--red-s), calc(var(--red-l) * 1%)) 100%);
    animation: pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse {
    0% { transform: translate(-50%,-50%) scale(0.75); opacity: 0.9; }
    100% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
}
#greenDot {
    background: radial-gradient(circle, hsl(var(--grn-h), var(--grn-s), calc((var(--grn-l) + 10) * 1%)) 40%, hsl(var(--grn-h), var(--grn-s), calc(var(--grn-l) * 1%)) 100%);
}
.trail-dot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, hsl(var(--red-h), var(--red-s), calc((var(--red-l) + 10) * 1%)) 40%, hsl(var(--red-h), var(--red-s), calc(var(--red-l) * 1%)) 100%);
    transition: opacity 0.3s;
}
#panel input[type=range] { width: 56px; cursor: pointer; height: 14px; }
.ctrl-row { display:flex; align-items:center; gap:4px; }
.ctrl-label { width:72px; font-size:11px; flex-shrink:0; }
#toast {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:rgba(0,0,0,0.75); color:#fff; font-family:sans-serif; font-size:16px;
    padding:14px 28px; border-radius:10px; z-index:300;
    opacity:0; pointer-events:none; transition:opacity 0.4s;
}
#toast.show { opacity:1; }
#saveModal {
    display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:200;
    background:rgba(0,0,0,0.6); justify-content:center; align-items:center;
}
#saveModal.active { display:flex; }
#saveModal > div {
    background:#222; border-radius:10px; padding:20px 24px; min-width:280px;
    font-family:sans-serif; color:#ccc; display:flex; flex-direction:column; gap:12px;
}
#saveModal input[type=text] {
    background:#333; border:1px solid #555; border-radius:4px; padding:6px 10px;
    color:#fff; font-size:14px; outline:none;
}
#saveModal button { padding:6px 14px; border:none; border-radius:4px; cursor:pointer; font-size:13px; }
.pattern-item {
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    font-size:11px; padding:2px 0; cursor:pointer;
}
.pattern-item:hover { color:#fff; }
.pattern-del { color:#666; cursor:pointer; font-size:14px; flex-shrink:0; }
.pattern-del:hover { color:#f44; }
#confirmModal {
    display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:200;
    background:rgba(0,0,0,0.6); justify-content:center; align-items:center;
}
#confirmModal.active { display:flex; }
#confirmModal > div {
    background:#222; border-radius:10px; padding:20px 24px; min-width:220px;
    font-family:sans-serif; color:#ccc; display:flex; flex-direction:column; gap:12px;
}
#confirmModal button { padding:6px 14px; border:none; border-radius:4px; cursor:pointer; font-size:13px; }
.pivot-dot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background-color: var(--wall-color);
    transform: translate(-50%, -50%);
}