/* Alleen het Halloween-spel; de rest van de arcade behoudt zijn eigen stijl. */
.spook-game { position:fixed; inset:0; z-index:210; overflow:auto; color:#fff3dc; background:radial-gradient(ellipse at 15% 65%,#51306a 0,transparent 50%),radial-gradient(ellipse at 90% 0,#4c2964 0,transparent 45%),#191027; font-family:'Patrick Hand',cursive; overscroll-behavior:contain; }
.spook-game * { box-sizing:border-box; }
.spook-game button { font:inherit; cursor:pointer; touch-action:manipulation; }
.spook-game button:focus-visible { outline:4px solid #c9f28c; outline-offset:4px; }
.spook-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 4%; border-bottom:2px solid #73527c; font-family:'Bangers',sans-serif; letter-spacing:1.5px; font-size:22px; }
.spook-edition { color:#ffbb5c; }
.spook-actions { display:flex; gap:8px; }
.spook-actions button { border:1px solid #937aa7; color:#fff3dc; background:#30213f; padding:9px 14px; min-height:44px; border-radius:5px; font-size:17px; }
.spook-layout { width:min(1120px,94%); margin:26px auto; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:48px; }
.spook-tag { color:#dfc0ee; font-family:'Bangers',sans-serif; letter-spacing:2px; font-size:15px; }
.spook-story h1 { font-family:'Bangers',sans-serif; font-size:clamp(56px,6.5vw,86px); line-height:.97; letter-spacing:2px; margin:14px 0 20px; transform:rotate(-3deg); text-shadow:5px 5px #080713; }
.spook-story h1 span { color:#ffad48; }
.spook-story p { font-size:21px; line-height:1.35; color:#e2cee9; margin:0; }
.spook-oliver { display:block; height:330px; max-width:100%; object-fit:contain; margin:10px auto -12px; filter:drop-shadow(0 10px 25px #0a061b88); }
.spook-record { display:flex; align-items:center; justify-content:center; gap:12px; padding:12px; font-family:'Bangers',sans-serif; letter-spacing:1px; transform:rotate(-2deg); background:#251a36; border:1px solid #795c8e; border-radius:6px; }
.spook-record strong { font-size:28px; color:#c4ee85; }
.spook-record span { font-family:'Patrick Hand',cursive; font-size:14px; letter-spacing:0; color:#dec9e9; }
.spook-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.spook-stats>div { background:#2f2042; border:2px solid #795c8e; padding:9px 14px; border-radius:8px 8px 0 0; }
.spook-stats span { display:block; color:#d7c0e3; font-size:12px; letter-spacing:2px; font-family:'Bangers',sans-serif; }
.spook-stats strong { font-family:'Bangers',sans-serif; font-size:32px; letter-spacing:1px; color:#ffe2a7; white-space:nowrap; }
.spook-stats small { font-size:16px; }
.spook-stats .spook-hearts { color:#ff9a9e; font-family:Arial,sans-serif; font-size:27px; line-height:38px; letter-spacing:2px; }
.spook-hearts span { display:inline; color:#c1a4d1; font:inherit; }
.spook-timer { height:6px; background:#4b325d; margin:8px 0 14px; border-radius:5px; overflow:hidden; }
.spook-timer>div { height:100%; background:#ffb655; transition:width .1s linear; }
.spook-house { position:relative; padding:0 18px 18px; border:3px solid #886294; border-radius:55px 55px 12px 12px; background:repeating-linear-gradient(0deg,transparent 0 32px,#9870ab12 33px 35px),#38264b; box-shadow:8px 8px 0 #0e091b; }
.spook-house.spook-shield { border-color:#ffca69; box-shadow:0 0 22px #ffad4844,8px 8px #0e091b; }
.spook-house-label { text-align:center; font-family:'Bangers',sans-serif; font-size:19px; letter-spacing:2px; padding:15px 0; color:#e1c7ef; }
.spook-house-label span { color:#ffbc65; margin:0 6px; }
.spook-windows { display:grid; grid-template-columns:repeat(3,1fr); gap:12px 18px; }
.spook-window { position:relative; aspect-ratio:1.2; min-width:0; border:3px solid #9c77ad; border-bottom:7px solid #ae8bc0; border-radius:40% 40% 5px 5px; background:radial-gradient(ellipse at 50% 100%,#533860,#1a102b 80%); padding:5px; overflow:hidden; -webkit-tap-highlight-color:transparent; user-select:none; }
.spook-window:disabled { cursor:default; opacity:1; }
.spook-window.has-visitor { background:radial-gradient(ellipse at 50% 70%,#986b51,#33223e 85%); }
.spook-window-number { position:absolute; top:5px; left:13px; color:#d2b6df; font:13px 'Bangers',sans-serif; }
.spook-window svg { width:100%; height:100%; display:block; animation:spook-appear .16s ease-out; }
.spook-visitor-time { position:absolute; bottom:0; left:0; height:3px; background:#ffcb77; }
.spook-window-star { font-size:35px; color:#71527f; }
.spook-pop { position:absolute; inset:0; display:grid; place-content:center; color:#ffe0a0; font:24px 'Bangers',sans-serif; text-shadow:2px 2px #140b22; }
.spook-overlay { position:absolute; inset:0; display:grid; place-items:center; padding:15px; border-radius:50px 50px 10px 10px; background:#140c24df; }
.spook-dialog { text-align:center; width:100%; max-width:400px; }
.spook-dialog h2 { font:42px/1 'Bangers',sans-serif; color:#ffbd62; margin:14px 0; letter-spacing:1px; }
.spook-dialog p { font-size:20px; line-height:1.4; margin:16px 0; }
.spook-start { background:#ffb451; color:#24152d; border:3px solid #120c1b; border-radius:5px; padding:14px 20px; box-shadow:4px 5px 0 #866041; font-family:'Bangers',sans-serif!important; font-size:23px!important; letter-spacing:1px; }
.spook-start:hover { background:#ffd38b; }
.spook-dialog>small { display:block; margin-top:16px; color:#d7c0e3; font-size:14px; }
.spook-status { min-height:42px; padding:13px 0 4px; font-size:17px; color:#ffda97; display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px; }
.spook-status>span { color:#c4ee85; }
.spook-legend { display:flex; flex-direction:column; gap:4px; margin-top:7px; }
.spook-legend>div { display:flex; align-items:center; gap:10px; }
.spook-legend svg { width:38px; height:38px; flex-shrink:0; }
.spook-legend b { font-size:17px; font-weight:400; color:#fff0dc; }
.spook-legend small { font-size:15px; color:#d4bbdf; margin-left:10px; }
.spook-controls { font-size:14px; color:#c5add4; line-height:1.5; margin-bottom:0; }
@keyframes spook-appear { from { transform:translateY(15px) scale(.8); opacity:.4; } to { transform:none; opacity:1; } }
@media (max-width:760px) {
 .spook-top { padding:9px 3%; font-size:18px; letter-spacing:1px; }
 .spook-edition { display:none; }
 .spook-actions button { padding:7px 10px; }
 .spook-layout { display:block; width:min(540px,94%); margin:16px auto 24px; }
 .spook-story { position:relative; padding-right:105px; min-height:100px; margin-bottom:16px; }
 .spook-story h1 { font-size:43px; margin:6px 0; line-height:1; transform:none; }
 .spook-story h1 br { display:none; }
 .spook-story h1 span { display:block; }
 .spook-story>.spook-tag { font-size:11px; letter-spacing:1px; }
 .spook-story>p { display:none; }
 .spook-oliver { position:absolute; right:0; bottom:-4px; height:115px; margin:0; }
 .spook-record { display:block; transform:none; border:0; padding:0; background:none; font-size:12px; margin-top:7px; }
 .spook-record strong { font-size:16px; margin-left:8px; }
 .spook-record span { display:none; }
 .spook-house { padding:0 10px 12px; }
 .spook-windows { gap:9px; }
 .spook-house-label { padding:12px 0; font-size:16px; letter-spacing:1px; }
 .spook-dialog h2 { font-size:32px; margin:8px 0; }
 .spook-dialog p { font-size:17px; margin:12px 0; }
 .spook-dialog>.spook-tag { font-size:12px; letter-spacing:1px; }
 .spook-start { font-size:19px!important; padding:12px 15px; }
 .spook-dialog>small { font-size:12px; margin-top:12px; }
 .spook-legend small { display:block; margin:0; }
 .spook-stats>div { padding:7px 10px; }
 .spook-pop { font-size:19px; }
}
@media (max-width:360px) { .spook-dialog p { font-size:15px; } .spook-dialog h2 { font-size:27px; } .spook-dialog>small { margin-top:8px; } .spook-overlay { padding:10px; } }
@media (prefers-reduced-motion:reduce) { .spook-game *, .spook-game *::before, .spook-game *::after { animation:none!important; transition:none!important; } }