/* Secret takeovers. There is intentionally no visible trigger in the homepage. */
#secret-dialog{--secret-color:#ff4b3e;--secret-rgb:255,75,62;position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;overflow:hidden;border:0;background:transparent;color:#f7eee7;isolation:isolate}
#secret-dialog[data-secret=vector]{--secret-color:#57f5ec;--secret-rgb:87,245,236}
#secret-dialog[data-secret=alizee]{--secret-color:#e6a5bf;--secret-rgb:230,165,191}
#secret-dialog[data-secret=nare]{--secret-color:#89c6ad;--secret-rgb:137,198,173}
#secret-dialog[data-secret=tps]{--secret-color:#ff5b47;--secret-rgb:255,91,71}
#secret-dialog[data-secret=ross]{--secret-color:#ff922e;--secret-rgb:255,146,46}
#secret-dialog[data-secret=nath]{--secret-color:#ff962f;--secret-rgb:255,150,47}
#secret-dialog[data-secret=choceh]{--secret-color:#70e0ee;--secret-rgb:112,224,238}
#secret-dialog[data-secret=kakao]{--secret-color:#f04335;--secret-rgb:240,67,53}
#secret-dialog[data-secret=orcywoo]{--secret-color:#ff397f;--secret-rgb:255,57,127}
#secret-dialog[data-secret=will]{--secret-color:#b8f485;--secret-rgb:184,244,133}
#secret-dialog[data-secret=marc]{--secret-color:#72e3d1;--secret-rgb:114,227,209}
#secret-dialog::backdrop{background:#050509e8;backdrop-filter:blur(2px)}
#secret-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;z-index:0;cursor:crosshair}
.secret-fragments{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;perspective:900px}
.secret-fragment{position:absolute;pointer-events:none;will-change:transform,opacity}
.secret-fragment *{animation:none!important;transition:none!important;pointer-events:none!important;cursor:default!important}
.secret-screen-edge{position:absolute;inset:0;z-index:5;pointer-events:none;border:1px solid rgba(var(--secret-rgb),.25);box-shadow:inset 0 0 120px #0008;background:linear-gradient(#0305089e,transparent 25%,transparent 70%,#030508b3)}
.secret-header{position:absolute;inset:max(28px,env(safe-area-inset-top)) 36px auto;z-index:6;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;pointer-events:none}
.secret-kicker{display:block;font:8px var(--mono);letter-spacing:2px;color:var(--secret-color)}
.secret-kicker b{font-weight:400;margin-left:8px}
.secret-header h2{font:700 clamp(43px,5vw,78px)/.98 var(--display);letter-spacing:3px;margin-top:15px;text-shadow:0 0 45px rgba(var(--secret-rgb),.15)}
.secret-header p{font:7px/1.7 var(--mono);letter-spacing:2px;margin-top:14px;color:#b5a9ad}
#secret-close{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:22px;background:#090b108c;border:1px solid #a3b0ba55;min-height:46px;padding:0 15px;color:#c3c2c7;font:7px var(--mono);letter-spacing:1px;backdrop-filter:blur(8px)}
#secret-close b{font:28px/1 var(--body);font-weight:400}#secret-close:hover{border-color:var(--secret-color);color:#fff;background:rgba(var(--secret-rgb),.1)}
.secret-status{position:absolute;left:36px;top:202px;z-index:5;display:flex;align-items:center;gap:9px;font:7px var(--mono);letter-spacing:1.4px;color:#ad9fa6;pointer-events:none}
.secret-status i{display:block;width:5px;height:5px;border-radius:50%;background:var(--secret-color);box-shadow:0 0 12px var(--secret-color)}
.secret-controls{position:absolute;left:36px;right:36px;bottom:max(22px,env(safe-area-inset-bottom));z-index:6;pointer-events:none}
.secret-help{display:flex;justify-content:space-between;gap:18px;font:7px/1.8 var(--mono);letter-spacing:1px;color:#a09aa6;margin-bottom:17px}.secret-help i{font-style:normal;color:var(--secret-color);margin-inline:8px}
.secret-controls-row{display:flex;justify-content:space-between;gap:20px;align-items:stretch;pointer-events:auto}
#secret-burst{display:flex;align-items:center;justify-content:space-between;gap:38px;min-height:66px;padding:0 22px;background:var(--secret-color);border:1px solid var(--secret-color);color:#08090d;font:700 11px var(--mono);letter-spacing:1px;box-shadow:0 0 40px rgba(var(--secret-rgb),.17)}
#secret-burst b{font:38px/1 var(--body);font-weight:400;transition:transform .4s}#secret-burst:hover b{transform:rotate(120deg)}#secret-burst:hover{filter:brightness(1.15)}
.secret-switches{display:flex;border:1px solid #a3b0ba44;background:#090b108c;backdrop-filter:blur(12px)}.secret-switches button{background:none;min-width:100px;min-height:60px;padding:0 15px;color:#b7b2bd;font:8px var(--mono);letter-spacing:1px;border-right:1px solid #a3b0ba33}.secret-switches button:last-child{border-right:0}.secret-switches button[aria-pressed=true]{color:var(--secret-color);background:rgba(var(--secret-rgb),.06)}.secret-switches button:hover{color:white;background:#fff1}
.secret-footnote{text-align:center;font:6px/1.5 var(--mono);letter-spacing:1.8px;color:#695e6c;margin-top:17px}
.secret-rest{position:absolute;z-index:7;left:50%;top:47%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 44px));padding:32px;background:#080a10e8;backdrop-filter:blur(16px);border:1px solid rgba(var(--secret-rgb),.3);text-align:center;box-shadow:0 20px 80px #0008}
.secret-rest>span{font:7px var(--mono);letter-spacing:2px;color:var(--secret-color)}.secret-rest h3{font:700 37px/.98 var(--display);margin-top:19px;letter-spacing:.5px}.secret-rest p{font:14px/1.6 var(--body);color:#b5a9ba;margin-top:16px}.secret-rest button{display:inline-flex;align-items:center;justify-content:center;gap:30px;min-height:49px;padding:0 22px;font:700 10px var(--mono);letter-spacing:1px;background:var(--secret-color);color:#08090d;margin-top:22px}.secret-rest button b{font:23px/1 var(--body)}
#secret-dialog[data-fallback=true]{background:radial-gradient(ellipse at center,rgba(var(--secret-rgb),.14),#080a10 65%)}.secret-controls-row button:disabled{opacity:.35;cursor:default}
#secret-dialog :focus-visible{outline:2px solid var(--secret-color);outline-offset:5px}#secret-canvas:focus-visible{outline-offset:-3px;outline-color:rgba(var(--secret-rgb),.18)}
@media(max-width:700px){.secret-header{inset:max(20px,env(safe-area-inset-top)) 20px auto}.secret-header h2{font-size:53px;letter-spacing:2px}.secret-kicker{font-size:6px;letter-spacing:1.2px}.secret-header p{font-size:6px;letter-spacing:1px;margin-top:10px}#secret-close{padding:0;width:44px;min-height:44px}#secret-close span{display:none}.secret-status{left:20px;top:164px;font-size:6px;letter-spacing:.8px}.secret-controls{left:18px;right:18px;bottom:max(16px,env(safe-area-inset-bottom))}.secret-help{font-size:6px;justify-content:center;letter-spacing:.7px;margin-bottom:13px}.secret-help>span:last-child{display:none}.secret-controls-row{gap:10px}#secret-burst{font-size:8px;letter-spacing:.4px;min-height:56px;flex:1;padding:0 13px;gap:12px}#secret-burst b{font-size:27px}.secret-switches button{min-width:64px;min-height:54px;font-size:6px;letter-spacing:.3px;padding-inline:9px}.secret-footnote{font-size:5px;letter-spacing:.6px;margin-top:13px}.secret-rest{padding:25px}.secret-rest h3{font-size:32px}.secret-rest p{font-size:13px}.secret-rest button{min-height:46px}}
@media(max-width:380px){.secret-header{left:16px;right:13px}.secret-header h2{font-size:46px}.secret-header p{font-size:5px;letter-spacing:.8px}.secret-status{left:16px;font-size:5px;top:151px}.secret-controls{left:12px;right:12px}.secret-controls-row{flex-wrap:wrap;gap:8px}#secret-burst{flex-basis:100%;min-height:48px}.secret-switches{flex:1}.secret-switches button{flex:1;min-height:44px}.secret-rest{top:43%;padding:22px 18px}.secret-rest h3{font-size:28px}.secret-rest p{font-size:12px}.secret-rest button{margin-top:17px}.secret-footnote{margin-top:9px}}
@media(max-height:540px) and (min-width:600px){.secret-header{top:15px;left:23px;right:23px}.secret-header h2{font-size:40px;margin-top:9px}.secret-header p{margin-top:8px;font-size:5px}.secret-kicker{font-size:6px}.secret-status{top:131px;left:23px;font-size:5px}.secret-controls{bottom:12px;left:23px;right:23px}#secret-burst{min-height:49px;font-size:9px}.secret-switches button{min-height:48px;font-size:7px}.secret-footnote{display:none}.secret-help{margin-bottom:10px;font-size:5px}.secret-rest{top:46%;padding:21px}.secret-rest h3{font-size:29px;margin-top:12px}.secret-rest p{font-size:12px;margin-top:10px}.secret-rest button{min-height:44px;margin-top:15px}}

/* Different toys get their own visual language, while the escape route stays put. */
#secret-dialog:is([data-format=desktop],[data-format=comic]){color:#20202a}
#secret-dialog:is([data-format=desktop],[data-format=comic]) .secret-screen-edge{background:none;box-shadow:none;border:3px solid #20202a}
#secret-dialog:is([data-format=desktop],[data-format=comic]) :is(.secret-header p,.secret-status,.secret-help,.secret-footnote){color:#39363f}
#secret-dialog:is([data-format=desktop],[data-format=comic]) .secret-kicker{color:#322631}
#secret-dialog:is([data-format=desktop],[data-format=comic]) #secret-close{background:#fff5de;border:2px solid #20202a;color:#20202a;box-shadow:3px 3px 0 #20202a}
#secret-dialog:is([data-format=desktop],[data-format=comic]) .secret-switches{background:#fff5de;border:2px solid #20202a;backdrop-filter:none;box-shadow:3px 3px 0 #20202a}
#secret-dialog:is([data-format=desktop],[data-format=comic]) .secret-switches button{color:#20202a;border-color:#20202a}
#secret-dialog:is([data-format=desktop],[data-format=comic]) #secret-burst{border:2px solid #20202a;box-shadow:4px 4px 0 #20202a;color:#17141b}
#secret-dialog:is([data-format=desktop],[data-format=comic]) .secret-rest{color:#f7eee7}
#secret-dialog[data-format=desktop] .secret-header h2{font-family:var(--mono);font-size:clamp(30px,4vw,60px);letter-spacing:-4px;text-shadow:3px 3px 0 #f0433555}
#secret-dialog[data-format=desktop] .secret-status{top:178px}
#secret-dialog[data-format=comic] .secret-header h2{font-style:italic;letter-spacing:-1px;transform:rotate(-3deg);text-shadow:3px 3px 0 #ff397f88}
#secret-dialog[data-format=comic] .secret-help>span:first-child{visibility:hidden}
#secret-dialog[data-format=tactical] .secret-header h2{font-family:var(--mono);font-size:clamp(28px,3vw,42px);letter-spacing:8px}
#secret-dialog[data-format=tactical] .secret-screen-edge{box-shadow:inset 0 0 65px #0007;background:none}
#secret-dialog[data-format=tactical] #secret-burst{box-shadow:none;background:#142419;color:#b8f485}
#secret-dialog:is([data-format=arcade],[data-format=tactical]) .secret-status{top:113px;font-size:6px}
#secret-dialog:is([data-format=arcade],[data-format=tactical]) .secret-header h2{font-size:38px;margin-top:9px}
#secret-dialog:is([data-format=arcade],[data-format=tactical]) .secret-header p{margin-top:7px;font-size:6px}
#secret-dialog[data-format=arcade] .secret-header h2{font-style:italic;color:#f5e5be;text-shadow:3px 3px 0 #bd3c43}
#secret-dialog[data-format=arcade] .secret-screen-edge{box-shadow:inset 0 0 70px #0004;background:none;border:2px solid #72e3d144}
@media(max-width:700px){
  #secret-dialog:is([data-format=desktop],[data-format=comic]) .secret-header h2{font-size:40px;letter-spacing:-2px}
  #secret-dialog:is([data-format=desktop],[data-format=comic]) .secret-status{top:139px}
  #secret-dialog:is([data-format=arcade],[data-format=tactical]) .secret-header{top:16px}
  #secret-dialog:is([data-format=arcade],[data-format=tactical]) .secret-header h2{font-size:30px;letter-spacing:2px}
  #secret-dialog:is([data-format=arcade],[data-format=tactical]) .secret-status{top:94px;font-size:5px;letter-spacing:.4px}
  #secret-dialog:is([data-format=arcade],[data-format=tactical]) .secret-controls{bottom:14px}
  #secret-dialog:is([data-format=arcade],[data-format=tactical]) .secret-controls-row{flex-wrap:nowrap;gap:7px}
  #secret-dialog:is([data-format=arcade],[data-format=tactical]) #secret-burst{flex-basis:auto;min-height:48px;padding-inline:10px;font-size:7px;gap:6px}
  #secret-dialog:is([data-format=arcade],[data-format=tactical]) #secret-burst b{font-size:20px}
  #secret-dialog:is([data-format=arcade],[data-format=tactical]) .secret-switches{flex:0}
  #secret-dialog:is([data-format=arcade],[data-format=tactical]) .secret-switches button{min-width:53px;min-height:46px;padding-inline:7px}
  #secret-dialog:is([data-format=arcade],[data-format=tactical]) .secret-footnote{margin-top:10px}
}
@media(max-width:380px){
  #secret-dialog:is([data-format=desktop],[data-format=comic]) .secret-controls-row{flex-wrap:nowrap;gap:7px}
  #secret-dialog:is([data-format=desktop],[data-format=comic]) #secret-burst{flex-basis:auto;min-height:48px;padding-inline:10px;font-size:7px;gap:6px}
  #secret-dialog:is([data-format=desktop],[data-format=comic]) #secret-burst b{font-size:20px}
  #secret-dialog:is([data-format=desktop],[data-format=comic]) .secret-switches{flex:0}
  #secret-dialog:is([data-format=desktop],[data-format=comic]) .secret-switches button{min-width:53px;min-height:46px;padding-inline:7px}
}
@media(max-height:650px) and (min-width:701px){
  #secret-dialog[data-format=desktop] .secret-header h2{font-size:32px;margin-top:8px}
  #secret-dialog[data-format=desktop] .secret-header p{font-size:5px;margin-top:8px}
  #secret-dialog[data-format=desktop] .secret-status{top:112px;font-size:5px}
}

/* The remade member toys leave a larger, usable playing surface. */
#secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) .secret-header h2{font-size:38px;margin-top:9px;letter-spacing:1px}
#secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) .secret-header p{margin-top:7px;font-size:6px}
#secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) .secret-status{top:112px;font-size:6px;letter-spacing:.7px}
#secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) .secret-screen-edge{box-shadow:none;background:none}
#secret-dialog[data-format=office]{color:#203d36}
#secret-dialog[data-format=office] .secret-header h2{font-family:Georgia,serif;font-size:31px;font-weight:400;letter-spacing:-1px}
#secret-dialog[data-format=office] :is(.secret-header p,.secret-kicker,.secret-status,.secret-help,.secret-footnote){color:#304f45}
#secret-dialog[data-format=office] :is(#secret-close,.secret-switches){background:#f5f0df;border-color:#47685b;color:#203d36;box-shadow:none;backdrop-filter:none}
#secret-dialog[data-format=office] .secret-switches button{color:#203d36;border-color:#47685b55}
#secret-dialog[data-format=office] .secret-rest{color:#f7eee7}
#secret-dialog[data-format=zine] .secret-header h2{font-style:italic;transform:rotate(-3deg);text-shadow:2px 2px 0 #e6a5bf66}
#secret-dialog[data-format=zine] #secret-burst{box-shadow:4px 4px 0 #fff2;border:2px dashed #201c26}
#secret-dialog[data-format=aim] .secret-header h2{font-style:italic;font-family:var(--display);color:#fff0d3}
#secret-dialog[data-format=soda] .secret-header h2{font-style:italic;letter-spacing:-1px;text-shadow:3px 3px 0 #dd621d}
#secret-dialog[data-format=courier] .secret-header h2{font-family:var(--mono);font-style:italic;letter-spacing:-2px}
@media(max-width:700px){
  #secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) .secret-header{top:16px}
  #secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) .secret-header h2{font-size:30px;letter-spacing:1px}
  #secret-dialog[data-format=office] .secret-header h2{font-size:clamp(20px,5.8vw,28px);letter-spacing:-.8px}
  #secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) .secret-header p{font-size:5px;letter-spacing:.5px}
  #secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) .secret-status{top:97px;font-size:5px;letter-spacing:.4px}
  #secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) .secret-controls{bottom:14px}
  #secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) .secret-controls-row{flex-wrap:nowrap;gap:7px}
  #secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) #secret-burst{flex-basis:auto;min-height:48px;padding-inline:10px;font-size:7px;gap:6px}
  #secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) #secret-burst b{font-size:20px}
  #secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) .secret-switches{flex:0}
  #secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) .secret-switches button{min-width:53px;min-height:46px;padding-inline:7px}
  #secret-dialog:is([data-format=office],[data-format=zine],[data-format=aim],[data-format=soda],[data-format=courier],[data-format=golf],[data-format=build],[data-format=bridge],[data-format=rant],[data-format=lan],[data-format=derby]) .secret-footnote{margin-top:10px}
}


/* Three more highly specialised wastes of an evening. */
#secret-dialog[data-secret=ryan]{--secret-color:#e5c76d;--secret-rgb:229,199,109}
#secret-dialog[data-secret=hoggy]{--secret-color:#d8b86e;--secret-rgb:216,184,110}
#secret-dialog[data-secret=riddance]{--secret-color:#e5b949;--secret-rgb:229,185,73}
#secret-dialog[data-format=golf] .secret-header h2{font-style:italic;letter-spacing:-1px}
#secret-dialog[data-format=build] .secret-header h2{color:#f1dbab;text-shadow:0 2px 15px #a97b2c44}
#secret-dialog[data-format=build] #secret-burst{background:#2e251c;color:#f1dbab;border-color:#b89a55;box-shadow:inset 0 0 20px #b89a5515}
#secret-dialog[data-format=bridge] .secret-header h2{font-style:italic;letter-spacing:-1px}
#secret-dialog[data-format=bridge] #secret-burst{box-shadow:4px 4px 0 #0003}

/* Pete's intercom has received its final polite request. */
#secret-dialog[data-secret=pete]{--secret-color:#ff754b;--secret-rgb:255,117,75}
#secret-dialog[data-format=rant] .secret-header h2{font-style:italic;letter-spacing:-1px;color:#f2e4c9}
#secret-dialog[data-format=rant] #secret-burst{border-color:#edbd82;box-shadow:0 5px 0 #8d392a,inset 0 1px 0 #ffd4a566}
#secret-dialog[data-format=rant] #secret-burst:active{transform:translateY(3px);box-shadow:0 2px 0 #8d392a}

/* A secret clubhouse for the secrets. */
#secret-dialog[data-format=lan]{--secret-color:#ff7455;--secret-rgb:255,116,85}
#secret-dialog[data-format=lan] .secret-header h2{color:#f5e4c8;text-shadow:0 0 24px #ff583033;letter-spacing:2px}
#secret-dialog[data-format=lan] #secret-burst{background:#291b1b;color:#ffc5a0;border-color:#b76649;box-shadow:inset 0 0 24px #ff653318}
#secret-dialog[data-format=lan] .secret-footnote{color:#a48d79}
@media(max-width:700px){
  #secret-dialog[data-format=lan] .secret-header h2{font-size:clamp(22px,6.2vw,30px);letter-spacing:1px}
  #secret-dialog[data-format=lan] .secret-help{font-size:5px;letter-spacing:.2px}
}

/* Nobody read the demolition derby's insurance exclusions. */
#secret-dialog[data-format=derby]{--secret-color:#ff5148;--secret-rgb:255,81,72}
#secret-dialog[data-format=derby] .secret-header h2{font-style:italic;color:#f2e9df;letter-spacing:1px;text-shadow:3px 3px 0 #ab302738}
#secret-dialog[data-format=derby] #secret-burst{border-color:#ff9d84;box-shadow:0 4px 0 #74241f,inset 0 1px 0 #ffd5b966}
#secret-dialog[data-format=derby] #secret-burst:active{transform:translateY(2px);box-shadow:0 2px 0 #74241f}
#secret-dialog[data-format=derby] .secret-screen-edge{border:1px solid #fe71652a}
