:root { --ink:#2b2f3a; --muted:#6b7280; --akzent:#ffd43b; --blau:#4dabf7; --karte:rgba(255,255,255,.82); }
* { box-sizing:border-box; }
/* Elemente mit eigenem display würden das hidden-Attribut sonst überstimmen (Lehre aus Seeschlacht). */
[hidden] { display:none !important; }
html, body { height:100%; margin:0; }
body { font:15px/1.4 -apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:#0b1420; overflow:hidden; }
button { font:inherit; cursor:pointer; }

.screen { position:absolute; inset:0; display:none; }
.screen.sichtbar { display:block; }
canvas#cvStrand, canvas#cvInsel { position:absolute; inset:0; width:100%; height:100%; display:block; }

/* Bordkarte */
.karte { position:absolute; left:50%; top:50%; width:340px; height:430px; transform:translate(-50%,-50%); perspective:1200px; transition:transform .6s cubic-bezier(.4,0,.2,1), opacity .5s; }
.karte.weg { transform:translate(-50%,-50%) translateY(-60px) scale(.9); opacity:0; pointer-events:none; }
.karte .seite { position:absolute; inset:0; background:var(--karte); border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.6) inset, 0 0 40px rgba(255,212,59,.25); backdrop-filter:blur(10px); padding:22px 24px; transition:transform .7s cubic-bezier(.4,0,.2,1); backface-visibility:hidden; transform-style:preserve-3d; }
.karte .seite.hinten { transform:rotateY(180deg); }
.karte.gedreht .seite.vorne { transform:rotateY(-180deg); }
.karte.gedreht .seite.hinten { transform:rotateY(0); }
.karte form { display:flex; flex-direction:column; gap:11px; height:100%; position:relative; }
.kopfzeile { display:flex; justify-content:space-between; align-items:baseline; }
.marke { font-weight:900; letter-spacing:.2em; font-size:20px; color:var(--ink); }
.klein { font-size:12px; color:var(--muted); }
.perforation { border-top:2px dashed rgba(43,47,58,.25); margin:2px -24px 4px; position:relative; }
.perforation::before, .perforation::after { content:""; position:absolute; top:-9px; width:18px; height:18px; border-radius:50%; background:#5fb6ff; }
.perforation::before { left:-9px; } .perforation::after { right:-9px; }
.karte label { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.karte input { font:inherit; font-size:15px; padding:9px 11px; border:1px solid rgba(43,47,58,.2); border-radius:10px; background:rgba(255,255,255,.9); color:var(--ink); width:100%; }
.karte input:focus { outline:2px solid var(--blau); border-color:transparent; }
.passFeld { display:flex; gap:6px; } .passFeld button { border:none; background:transparent; font-size:16px; }
.kartenHinweis { margin:0; min-height:1.2em; font-size:12px; color:var(--muted); text-align:center; }
.einchecken { margin-top:auto; background:var(--akzent); border:none; border-radius:12px; padding:12px; font-weight:800; font-size:16px; letter-spacing:.04em; color:var(--ink); box-shadow:0 6px 0 #d9b02a; transition:transform .1s; }
.einchecken:active { transform:translateY(3px); box-shadow:0 3px 0 #d9b02a; }
.einchecken:disabled { opacity:.6; cursor:default; }
.link { text-align:center; color:var(--ink); text-decoration:none; opacity:.8; }
.stempel { position:absolute; left:50%; top:44%; transform:translate(-50%,-50%) rotate(-14deg) scale(1.6); font-weight:900; font-size:26px; letter-spacing:.1em; color:#d64545; border:4px solid #d64545; border-radius:8px; padding:4px 12px; opacity:0; pointer-events:none; transition:opacity .15s, transform .25s cubic-bezier(.2,1.6,.4,1); }
.stempel.an { opacity:.9; transform:translate(-50%,-50%) rotate(-14deg) scale(1); }
@keyframes wackel { 0%,100%{transform:translate(-50%,-50%)} 20%{transform:translate(-52%,-50%) rotate(-2deg)} 40%{transform:translate(-48%,-50%) rotate(2deg)} 60%{transform:translate(-52%,-50%) rotate(-1deg)} 80%{transform:translate(-48%,-50%) rotate(1deg)} }
.karte.wackel { animation:wackel .5s; }

#blende { position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; transition:opacity .5s; z-index:40; }
#blende.an { opacity:1; }

/* Creator */
#creator { background:linear-gradient(180deg,#bfe6ff,#e9f6ff); }
.creatorLayout { position:absolute; inset:16px; display:flex; gap:16px; }
.creatorLinks { flex:0 0 40%; display:flex; flex-direction:column; gap:10px; min-width:280px; }
.creatorVorschau { flex:1 1 auto; width:100%; border-radius:18px; border:3px solid var(--ink); background:#cfeeff; box-shadow:0 10px 30px rgba(0,0,0,.15); }
.creatorLeiste { display:flex; gap:8px; }
.creatorName { flex:1 1 auto; min-width:0; font:inherit; padding:9px 12px; border-radius:10px; border:2px solid var(--ink); background:#f4f7fa; }
.btnWuerfel { border-radius:10px; border:2px solid var(--ink); background:#fff; padding:8px 12px; }
.primaer { border-radius:10px; border:2px solid var(--ink); background:var(--akzent); font-weight:700; padding:8px 14px; }
.creatorRechts { flex:1 1 auto; display:flex; flex-direction:column; background:rgba(255,255,255,.75); border:3px solid var(--ink); border-radius:18px; overflow:hidden; min-width:0; }
.creatorTabs { display:flex; gap:0; border-bottom:3px solid var(--ink); background:#fff; }
.creatorTabs .tab { flex:1 1 auto; border:none; background:transparent; padding:11px 8px; font-weight:700; color:var(--muted); border-right:2px solid rgba(43,47,58,.12); }
.creatorTabs .tab.an { background:var(--akzent); color:var(--ink); }
.creatorInhalt { padding:14px 16px; overflow:auto; display:flex; flex-direction:column; gap:14px; }
.feldLabel { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.chip { border:2px solid rgba(43,47,58,.25); background:#fff; border-radius:999px; padding:5px 11px; font-size:13px; }
.chip.an { background:var(--ink); color:#fff; border-color:var(--ink); }
.swatch { width:28px; height:28px; border-radius:50%; border:3px solid rgba(255,255,255,.9); box-shadow:0 0 0 2px rgba(43,47,58,.25); padding:0; }
.swatch.an { box-shadow:0 0 0 3px var(--ink); transform:scale(1.12); }
.chips input[type=color] { width:32px; height:32px; border:none; background:transparent; padding:0; cursor:pointer; }

/* Insel: Bedienelemente über der Karte – klein und rund, damit die Insel das Bild bleibt */
.inselMenue { position:absolute; top:10px; right:10px; display:flex; gap:6px; z-index:5; }
.inselMenue button, .pille { background:rgba(255,255,255,.9); color:var(--ink); border:2px solid var(--ink); border-radius:999px; padding:4px 12px; font-size:13px; font-weight:700; box-shadow:0 3px 0 rgba(43,47,58,.35); }
.pille { position:absolute; top:10px; left:10px; z-index:5; background:var(--akzent); }
.emotes { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:4px; z-index:5; background:rgba(255,255,255,.85); border:2px solid var(--ink); border-radius:999px; padding:3px 6px; }
.emotes button { border:none; background:transparent; font-size:18px; line-height:1; padding:3px 5px; border-radius:50%; }
.emotes button:hover { background:rgba(43,47,58,.08); }
.lokalHinweis { position:absolute; bottom:52px; left:50%; transform:translateX(-50%); z-index:5; background:rgba(20,26,40,.8); color:#fff; font-size:12px; padding:5px 12px; border-radius:999px; white-space:nowrap; max-width:96vw; overflow:hidden; text-overflow:ellipsis; }
.steuerHinweis { position:absolute; bottom:12px; right:12px; z-index:4; font-size:11px; color:rgba(255,255,255,.85); text-shadow:0 1px 2px rgba(0,0,0,.5); }
@media (max-width:760px) { .steuerHinweis { display:none; } }

/* Portal: das Spiel als Fenster über der Insel */
#portal { position:fixed; inset:0; z-index:50; background:#0b1420; display:flex; }
#portalRahmen { flex:1 1 auto; width:100%; height:100%; border:0; display:block; }
.portalKopf { position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:2; }
.portalKopf button { background:rgba(20,26,40,.75); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:2px 12px; font-size:12px; }

#meldung { position:fixed; top:54px; left:50%; transform:translateX(-50%); z-index:55; background:rgba(255,255,255,.95); color:var(--ink); border:2px solid var(--ink); border-radius:14px; padding:8px 16px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.2); max-width:90vw; text-align:center; }

/* Tarnung */
#tarn { position:fixed; inset:0; background:#fff; color:#222; padding:14px; z-index:60; font:13px/1.5 "Segoe UI", sans-serif; }
#tarn .tarnKopf { font-weight:600; margin-bottom:8px; }
#tarn table { border-collapse:collapse; width:100%; }
#tarn th, #tarn td { border:1px solid #ddd; padding:4px 8px; text-align:left; }
#tarn th { background:#f3f3f3; }

@media (max-width:760px) { .creatorLayout { flex-direction:column; } .creatorLinks { flex:0 0 46%; min-width:0; } .karte { width:min(340px, 92vw); } }