/* Clicky Bird v10.1 · Funnel-Overlays (DOM über dem Canvas, skaliert mit #stage via cqw) */
#stage{container-type:inline-size}
.v10-layer{position:absolute;inset:0;pointer-events:none;z-index:5;font-family:"Geist",system-ui,sans-serif}
.v10-layer .hit{pointer-events:auto}
.v10-hidden{display:none!important}
/* Game-Over-Aktionen */
#goActions{position:absolute;left:8.9%;right:8.9%;top:67.8%;display:flex;flex-direction:column;gap:2.2cqw;opacity:0;transform:translateY(3cqw);transition:opacity .35s ease .25s,transform .35s ease .25s}
#goActions.show{opacity:1;transform:none}
.v10-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:15.5cqw;border-radius:4.4cqw;background:linear-gradient(180deg,#e8b872,#dda15e);color:#071315;text-decoration:none;box-shadow:0 0 6cqw rgba(221,161,94,.45),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .12s ease,box-shadow .15s;text-align:center;line-height:1.15;padding:1.6cqw 3cqw}
.v10-cta small{font-size:3.2cqw;font-weight:600;opacity:.82}
.v10-cta b{font-size:4.3cqw;font-weight:800}
.v10-cta:hover{transform:scale(1.03);box-shadow:0 0 8cqw rgba(221,161,94,.6),inset 0 1px 0 rgba(255,255,255,.45)}
.v10-cta:active{transform:scale(.97)}
.v10-row{display:flex;gap:2.4cqw}
.v10-btn{flex:1;min-height:10.5cqw;border-radius:3.4cqw;border:1px solid rgba(232,184,114,.55);background:rgba(3,95,106,.72);backdrop-filter:blur(8px);color:#fbf8f3;font:700 3.6cqw/1.1 "Geist",system-ui,sans-serif;cursor:pointer;transition:transform .12s ease,background .15s;padding:0 2cqw}
.v10-btn:hover{background:rgba(4,122,140,.92);transform:scale(1.03)}
.v10-btn:active{transform:scale(.96)}
.v10-btn.ghost{background:rgba(7,19,21,.55)}
.v10-btn.gold{background:linear-gradient(180deg,#e8b872,#dda15e);color:#071315;border-color:rgba(255,255,255,.4)}
.v10-status{min-height:4cqw;text-align:center;font:600 3cqw/1.3 "Geist Mono",monospace;color:rgba(240,247,248,.7)}
.v10-status .ok{color:#e8b872}
/* Start: Bestenliste-Button + Skin-Leiste */
#lbTop{position:absolute;top:10px;left:10px;height:38px;padding:0 12px;border-radius:12px;border:1px solid rgba(232,184,114,.45);background:rgba(7,19,21,.55);backdrop-filter:blur(10px);color:#e8b872;font:700 12px "Geist",system-ui;cursor:pointer;transition:transform .12s,background .15s}
#lbTop:hover{background:rgba(3,95,106,.9);transform:scale(1.05)}
#skinBar{position:absolute;left:4%;right:4%;top:84.8%;display:flex;flex-direction:column;align-items:center;gap:1.2cqw}
#skinBar .lbl{font:600 2.9cqw "Geist Mono",monospace;color:rgba(240,247,248,.6);letter-spacing:.02em}
#skinBar .chips{display:flex;gap:2.2cqw}
.skin-chip{position:relative;width:13.4cqw;height:13.4cqw;border-radius:4cqw;border:1px solid rgba(232,184,114,.35);background:radial-gradient(circle at 50% 35%,rgba(4,122,140,.75),rgba(7,19,21,.75));cursor:pointer;padding:0;transition:transform .12s,border-color .15s,box-shadow .15s}
.skin-chip canvas{width:100%;height:100%;display:block;border-radius:4cqw}
.skin-chip:hover{transform:translateY(-1cqw)}
.skin-chip.sel{border:2px solid #e8b872;box-shadow:0 0 4cqw rgba(232,184,114,.55)}
.skin-chip.locked canvas{filter:saturate(.35) brightness(.7)}
.skin-chip .lock{position:absolute;right:-1cqw;bottom:-1cqw;width:6.4cqw;height:6.4cqw;border-radius:50%;background:#071315;border:1px solid rgba(232,184,114,.7);display:grid;place-items:center;font-size:3.2cqw}
/* Modal */
#v10Modal{position:absolute;inset:0;z-index:8;background:rgba(7,19,21,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;pointer-events:auto;opacity:0;transition:opacity .2s}
#v10Modal.show{opacity:1}
.m-wrap{position:relative;width:90%;max-height:92%;display:flex;flex-direction:column;align-items:center}
.m-peek{position:relative;z-index:3;width:30cqw;height:30cqw;margin-bottom:-10cqw;pointer-events:none;filter:drop-shadow(0 2cqw 3cqw rgba(0,0,0,.45))}
.m-card{position:relative;z-index:2;width:100%;max-height:100%;overflow:auto;border-radius:5.5cqw;background:linear-gradient(180deg,rgba(4,122,140,.97),rgba(3,95,106,.97) 30%,rgba(5,52,58,.98));border:1px solid rgba(232,184,114,.65);box-shadow:0 0 10cqw rgba(4,122,140,.45),0 6cqw 14cqw rgba(0,0,0,.55);padding:10cqw 5cqw 4.5cqw;color:#fbf8f3;transform:translateY(4cqw) scale(.97);transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
#v10Modal.show .m-card{transform:none}
.m-close{position:absolute;top:2.6cqw;right:2.6cqw;width:8.5cqw;height:8.5cqw;border-radius:50%;border:1px solid rgba(232,184,114,.45);background:rgba(7,19,21,.45);color:#e8b872;font-size:4.4cqw;cursor:pointer;line-height:1}
.m-title{font:800 5.6cqw/1.15 "Geist",system-ui;text-align:center;margin-bottom:1.5cqw}
.m-sub{font:500 3.4cqw/1.4 "Geist",system-ui;color:rgba(240,247,248,.82);text-align:center;margin-bottom:3cqw}
.demo-badge{display:inline-block;font:700 2.7cqw/1 "Geist Mono",monospace;letter-spacing:.06em;color:#071315;background:#e8b872;border-radius:99px;padding:1cqw 2.2cqw;margin:0 auto 2.4cqw}
.m-center{text-align:center}
.tabs{display:flex;gap:1.6cqw;margin-bottom:2cqw}
.tabs button{flex:1;padding:2.2cqw 0;border-radius:3cqw;border:1px solid rgba(232,184,114,.4);background:rgba(7,19,21,.35);color:rgba(240,247,248,.8);font:700 3.4cqw "Geist",system-ui;cursor:pointer}
.tabs button.on{background:#e8b872;color:#071315;border-color:#e8b872}
.lb-meta{font:500 2.8cqw "Geist Mono",monospace;color:rgba(240,247,248,.6);text-align:center;margin-bottom:2cqw}
.lb-list{list-style:none;display:flex;flex-direction:column;gap:1.3cqw;margin-bottom:3cqw}
.lb-list li{display:flex;align-items:center;gap:2.4cqw;padding:2cqw 3cqw;border-radius:3cqw;background:rgba(7,19,21,.38);font:600 3.6cqw "Geist",system-ui}
.lb-list li.you{background:rgba(232,184,114,.22);border:1px solid rgba(232,184,114,.7)}
.lb-list .rk{width:6cqw;font:800 3.6cqw "Geist Mono",monospace;color:#e8b872}
.lb-list .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-list .sc{font:800 3.8cqw "Geist Mono",monospace}
.tag{font:700 2.4cqw "Geist Mono",monospace;padding:.6cqw 1.6cqw;border-radius:99px;background:rgba(240,247,248,.14);color:rgba(240,247,248,.75);margin-left:1.2cqw;vertical-align:middle}
.tag.you{background:#e8b872;color:#071315}
.lb-empty{font:500 3.2cqw "Geist",system-ui;color:rgba(240,247,248,.7);text-align:center;padding:2cqw}
.m-actions{display:flex;flex-direction:column;gap:2cqw}
.m-actions .v10-btn,.m-actions .v10-cta{width:100%;flex:none}
.m-small{font:500 2.8cqw/1.45 "Geist",system-ui;color:rgba(240,247,248,.62);text-align:center;margin-top:2cqw}
.m-small a{color:#e8b872}
.m-link{background:none;border:0;color:#e8b872;font:600 3cqw "Geist",system-ui;text-decoration:underline;cursor:pointer}
/* Formular */
.f-row{margin-bottom:2.4cqw}
.f-row label{display:block;font:700 3.1cqw "Geist",system-ui;margin-bottom:1cqw;color:rgba(240,247,248,.9)}
.f-row label span{font-weight:500;color:rgba(240,247,248,.6)}
.f-row input[type=text],.f-row input[type=email]{width:100%;padding:2.6cqw 3cqw;border-radius:3cqw;border:1px solid rgba(232,184,114,.45);background:rgba(7,19,21,.5);color:#fbf8f3;font:500 3.8cqw "Geist",system-ui;user-select:text;outline:none}
.f-row input:focus{border-color:#e8b872;box-shadow:0 0 0 2px rgba(232,184,114,.25)}
.chk{display:flex;gap:2cqw;align-items:flex-start;font:500 2.9cqw/1.4 "Geist",system-ui;color:rgba(240,247,248,.85);margin-bottom:2.4cqw;cursor:pointer}
.chk input{margin-top:.6cqw;accent-color:#dda15e;width:3.6cqw;height:3.6cqw;flex:none}
.chk a{color:#e8b872}
.f-err{min-height:3.6cqw;font:600 3cqw "Geist",system-ui;color:#ffd7a8;text-align:center;margin-bottom:1.6cqw}
.sim-box{border:1px dashed rgba(232,184,114,.7);border-radius:3.4cqw;padding:3cqw;background:rgba(7,19,21,.35);margin-bottom:3cqw;text-align:center;font:500 3.2cqw/1.45 "Geist",system-ui}
.sim-box b{color:#e8b872}
/* Quiz */
.q-meta{display:flex;justify-content:center;gap:1.6cqw;flex-wrap:wrap;margin-bottom:2.4cqw}
.q-meta span{font:700 2.7cqw "Geist Mono",monospace;padding:1cqw 2.2cqw;border-radius:99px;background:rgba(7,19,21,.4);color:#e8b872}
.q-text{font:800 4.8cqw/1.3 "Geist",system-ui;text-align:center;margin-bottom:3.4cqw}
.q-opts{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;margin-bottom:2.6cqw}
.q-opts.long{grid-template-columns:1fr;gap:1.6cqw}
.q-opts.long .q-opt{min-height:9.6cqw;text-align:left;padding:1.6cqw 3cqw;font-size:3.5cqw}
.q-opt{min-height:12.5cqw;border-radius:3.4cqw;border:1px solid rgba(232,184,114,.5);background:rgba(7,19,21,.42);color:#fbf8f3;font:700 3.8cqw/1.2 "Geist",system-ui;cursor:pointer;padding:1.5cqw;transition:transform .12s,background .15s}
.q-opt:hover:not([disabled]){background:rgba(4,122,140,.95);transform:scale(1.03)}
.q-opt .k{display:inline-block;font:700 2.6cqw "Geist Mono",monospace;color:#e8b872;margin-right:1.2cqw}
.q-opt.right{background:linear-gradient(180deg,#e8b872,#dda15e);color:#071315;border-color:#fff3d6}
.q-opt.right .k{color:#071315}
.q-opt.wrong{background:rgba(7,19,21,.6);color:rgba(240,247,248,.55);border-style:dashed}
.q-opt[disabled]{cursor:default}
.v10-btn:focus-visible,.q-opt:focus-visible,.v10-cta:focus-visible,.skin-chip:focus-visible{outline:2px solid #e8b872;outline-offset:2px}
.v10-btn:focus:not(:focus-visible),.q-opt:focus:not(:focus-visible){outline:none}
.q-fb{display:none;border-radius:3.4cqw;padding:2.8cqw 3cqw;background:rgba(240,247,248,.1);margin-bottom:2.6cqw;font:500 3.3cqw/1.45 "Geist",system-ui;text-align:center}
.q-fb.show{display:block}
.q-fb b{display:block;font:800 4cqw "Geist",system-ui;color:#e8b872;margin-bottom:.6cqw}
/* Share */
.sh-img{display:block;width:100%;border-radius:3.6cqw;box-shadow:0 2cqw 6cqw rgba(0,0,0,.4);margin-bottom:3cqw;aspect-ratio:1/1;background:#035f6a}
.sh-url{width:100%;padding:2cqw 2.6cqw;border-radius:2.6cqw;border:1px solid rgba(232,184,114,.35);background:rgba(7,19,21,.5);color:rgba(240,247,248,.8);font:500 2.6cqw "Geist Mono",monospace;margin-bottom:2.4cqw;user-select:all}