/* Light Arcade: the gallery paper, neutral resting controls, green active states. */
:root{--pop-purple:#d6d6d6;--arcade-panel:#e0e1d7;--arcade-muted:#626958}
body{background:var(--paper);color:var(--ink)}
header{border-color:#c9cdbf}
h1,h2{color:var(--ink)}
.eyebrow{color:#55603c}
aside{border-top-color:#9da38f}
.hint,.note p,.stock-credits{color:#626958}
.note{border-color:#c9cdbf}
.canvas-wrap,#quickAdjust,#caseEditor,#teeEditor,#illustratedTeeEditor{background:#e0e1d7;color:var(--ink)}
.canvas-actions span{color:#626958}
.layer{border-color:#9da38f}
.layer.selected{border-color:#6b8035}
body :is(button,.upload,select,summary){background-color:#d6d6d6!important;color:var(--ink)!important;box-shadow:0 5px 0 #999!important}
body :is(button,.upload,select,summary):hover{background-color:#e2e2e2!important}
body details[open]>summary,
body details[open]>summary:hover,
body button:is(.active,.selected,[aria-pressed="true"],[aria-selected="true"]),
body button:is(.active,.selected,[aria-pressed="true"],[aria-selected="true"]):hover,
body button:not(:disabled):active,
body .upload:active,
body select:focus{background-color:var(--lime)!important;color:var(--ink)!important;box-shadow:0 5px 0 #6b8035!important}
body select:open{background-color:var(--lime)!important;box-shadow:0 5px 0 #6b8035!important}
body button:disabled{box-shadow:none!important}
body .upload:active,body button:not(:disabled):active{box-shadow:0 2px 0 #6b8035!important}

/* Paper-colored thumbnail wells preserve contrast for every accessory cutout. */
body #accessories button,body #accessories button:hover,
body .stock-background,body .stock-background:hover{background-color:var(--paper)!important;color:var(--ink)!important}
body #accessories button:is(.selected,[aria-pressed="true"]),
body #accessories button:not(:disabled):active,
body .stock-background[aria-pressed="true"],
body .stock-background:not(:disabled):active{background-color:var(--lime)!important}

/* Center labels consistently; reserve equal space on both sides of menu arrows. */
body button,body .upload,body summary{text-align:center;justify-content:center}
body :is(.tool-group,.custom-tool,.stock-section)>summary{padding-inline:48px}
body select{text-align:center;text-align-last:center;padding-left:36px;padding-right:36px}
body .stock-background :is(span,small){text-align:center}

/* Compact layer actions live beside the composition instead of below the layers. */
body .canvas-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding-bottom:12px}
body .canvas-actions #currentObject{flex-basis:100%;text-align:center;font-size:11px}
body .edit-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;width:100%}
body .edit-actions button{margin:0;padding:9px 4px;min-height:38px;font-size:12px;line-height:1.2;letter-spacing:0;min-width:0}
body #quickRemove[hidden]{display:none}

body #umbrellaPeek[hidden]{display:none}body #umbrellaPeek{margin:0;font-size:12px;padding:8px 12px;min-height:36px}

.design-actions{display:flex;gap:8px;max-width:760px;margin:auto}.design-actions button{flex:1;font-size:12px;padding:10px}.design-hint{margin:8px 0 16px}#designLibrary{background:var(--paper);color:var(--ink);border:2px solid var(--ink);width:min(90vw,440px);max-height:80vh;overflow:auto;padding:20px}#designLibrary::backdrop{background:#0008}#savedDesignList button{width:100%;margin-bottom:12px;font-size:13px}#closeDesignLibrary{width:100%;margin-top:14px}

/* Stair-step pixel arrows, matching the selected arcade option. */
body summary{position:relative;list-style:none;padding-inline:48px}
body summary::-webkit-details-marker{display:none}
body summary::marker{content:''}
body summary::after{content:''!important;position:absolute;right:16px;top:50%;width:22px;height:25px;border-radius:0;background:var(--ink);clip-path:polygon(30% 0,70% 0,70% 40%,100% 40%,100% 60%,80% 60%,80% 80%,60% 80%,60% 100%,40% 100%,40% 80%,20% 80%,20% 60%,0 60%,0 40%,30% 40%);transform:translateY(-50%)}
body details[open]>summary::after{transform:translateY(-50%) rotate(180deg)}
body select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath fill='%23171913' d='M6 0h8v10h6v4h-4v4h-4v6H8v-6H4v-4H0v-4h6z'/%3E%3C/svg%3E");background-size:18px 22px}
body select:open{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath transform='rotate(180 10 12)' fill='%23171913' d='M6 0h8v10h6v4h-4v4h-4v6H8v-6H4v-4H0v-4h6z'/%3E%3C/svg%3E")}

body #halloweenAccessories button,body #halloweenAccessories button:hover{background-color:var(--paper)!important;color:var(--ink)!important}body #halloweenAccessories button:not(:disabled):active{background-color:var(--lime)!important}

body #animalAccessories button,body #animalAccessories button:hover{background-color:var(--paper)!important;color:var(--ink)!important}body #animalAccessories button:not(:disabled):active{background-color:var(--lime)!important}

body #layerLock{grid-column:1/-1}body #layerLock[aria-pressed="true"]{background:var(--lime)!important}

body #layers .layer{position:relative;user-select:none;cursor:grab;display:flex;align-items:center;gap:10px;text-align:left}body #layers .layer-handle{flex:none;touch-action:none;font-size:23px;line-height:1;padding:8px 5px;margin:-6px 0;cursor:grab}body #layers .layer-dragging{opacity:.5;cursor:grabbing}body #layers .drop-before{box-shadow:0 -5px 0 var(--lime)!important}body #layers .drop-after{box-shadow:0 5px 0 var(--lime)!important}

/* Warm orange marks the open Halloween section. */
body details.halloween-group[open]>summary,body details.halloween-group[open]>summary:hover{background-color:#ffc18c!important;color:var(--ink)!important;box-shadow:0 5px 0 #a77549!important}

body .accessory-group-label{grid-column:1/-1;margin:20px 0 3px;padding:0 0 7px;border-bottom:1px solid #17191333;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:lowercase;color:var(--ink)}body .accessory-group-label:first-child{margin-top:4px}

body #accessoryCutout[hidden]{display:none}body #accessoryCutout{padding:12px 14px;margin:12px auto;max-width:760px;border:1px solid #17191344;border-radius:7px}.cutout-actions{display:flex;gap:10px;flex-wrap:wrap}.cutout-actions button{flex:1;min-width:140px;font-size:13px;padding:10px}.cutout-upload-option{display:flex;align-items:center;gap:9px;margin:14px 0}.cutout-upload-option input{width:20px;height:20px;accent-color:var(--lime)}