/* Oyun arayüzü teması (CSS/SVG ile çizilir). 6 tema: ahsap, gece, orman + Pro: okyanus, seker, retro.
   Tema, <body data-theme="..."> ile seçilir; renkler değişkenlerden gelir. */
:root,[data-theme="ahsap"]{
  --edge:#4a2160;--edge2:#2b1040;
  --w1:#f6a845;--w2:#de8028;--w3:#c26a1c;
  --l1:#b9631e;--l2:#9b4b15;--l3:#83400f;
  --rune1:#85409f;--rune2:#4a2160;--btn1:#8f46af;--btn2:#5d2878;--btntxt:#fff;
  --ink:#fff3d4;--dark:#3a1a05;--mute:rgba(255,243,212,.78);--tsh:#3a1a05;--bink:#fff3d4;--bsh:#3a1a05;
  --hi:rgba(255,214,150,.45);--lo:rgba(90,35,0,.38);--rad:16px;--ribbon1:#8a44aa;--ribbon2:#4a2160;
  --bg:radial-gradient(ellipse at 50% -10%,#41205a 0,#170b23 55%,#0a0510 100%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.12' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.15 0 0 0 0 0.02 0 0 0 1.7 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='.6'/%3E%3C/svg%3E");
  --font:"Trebuchet MS",ui-rounded,"Segoe UI",system-ui,sans-serif;
}
[data-theme="gece"]{--bink:#eef2ff;--bsh:#0a1030;--edge:#0c1230;--edge2:#050818;--w1:#4a63a8;--w2:#36508f;--w3:#26397a;--l1:#2c3f78;--l2:#233468;--l3:#1b2a55;--rune1:#e6b84a;--rune2:#a67c1c;--btn1:#e6b84a;--btn2:#b88a1f;--btntxt:#2a1d00;
  --ink:#eef2ff;--dark:#0a1030;--mute:rgba(238,242,255,.78);--tsh:#0a1030;--hi:rgba(160,190,255,.35);--lo:rgba(0,0,40,.45);--ribbon1:#e6b84a;--ribbon2:#a67c1c;
  --bg:radial-gradient(ellipse at 50% -10%,#1d2f66 0,#0b1230 55%,#05081a 100%);--grain:none}
[data-theme="orman"]{--bink:#f3ffe9;--bsh:#0f2a12;--edge:#12331a;--edge2:#08170c;--w1:#7fc467;--w2:#5aa349;--w3:#3f8236;--l1:#357a31;--l2:#2b6628;--l3:#215320;--rune1:#c9a15a;--rune2:#8a6a2b;--btn1:#c9a15a;--btn2:#8a6a2b;--btntxt:#2a1d00;
  --ink:#f3ffe9;--dark:#0f2a12;--mute:rgba(243,255,233,.8);--tsh:#0f2a12;--hi:rgba(190,255,170,.35);--lo:rgba(0,40,0,.4);--ribbon1:#c9a15a;--ribbon2:#8a6a2b;
  --bg:radial-gradient(ellipse at 50% -10%,#245a31 0,#0f2a18 55%,#061208 100%);--grain:none}
[data-theme="okyanus"]{--bink:#032c3a;--bsh:rgba(255,255,255,.55);--edge:#0b3a55;--edge2:#04202f;--w1:#58d3e3;--w2:#2fa8c2;--w3:#1c7f9c;--l1:#1a7f9c;--l2:#146a85;--l3:#0f566d;--rune1:#ffd27a;--rune2:#c9922c;--btn1:#ffd27a;--btn2:#c9922c;--btntxt:#3a2600;
  --ink:#f0fdff;--dark:#06303f;--mute:rgba(240,253,255,.8);--tsh:#06303f;--hi:rgba(200,250,255,.4);--lo:rgba(0,50,70,.4);--ribbon1:#ffd27a;--ribbon2:#c9922c;
  --bg:radial-gradient(ellipse at 50% -10%,#0f5b7a 0,#06324a 55%,#021622 100%);--grain:none}
[data-theme="seker"]{--bink:#4a0f30;--bsh:rgba(255,255,255,.55);--edge:#6b1f4a;--edge2:#3a0f2a;--w1:#ffb3d4;--w2:#f58abb;--w3:#e0609f;--l1:#d24f92;--l2:#bd3f80;--l3:#a33270;--rune1:#ffe27a;--rune2:#e0a92e;--btn1:#ffe27a;--btn2:#e0a92e;--btntxt:#4a2a00;
  --ink:#fff5fa;--dark:#5a1238;--mute:rgba(255,245,250,.85);--tsh:#5a1238;--hi:rgba(255,230,245,.5);--lo:rgba(120,20,70,.35);--ribbon1:#ffe27a;--ribbon2:#e0a92e;
  --bg:radial-gradient(ellipse at 50% -10%,#5a1d52 0,#2a0c2c 55%,#120514 100%);--grain:none}
[data-theme="retro"]{--bink:#111;--bsh:transparent;--edge:#000;--edge2:#000;--w1:#f7f7f7;--w2:#e4e4e4;--w3:#cfcfcf;--l1:#ffffff;--l2:#eaeaea;--l3:#d5d5d5;--rune1:#111;--rune2:#111;--btn1:#222;--btn2:#000;--btntxt:#fff;
  --ink:#111;--dark:#fff;--mute:rgba(17,17,17,.7);--tsh:transparent;--hi:rgba(255,255,255,.0);--lo:rgba(0,0,0,.08);--rad:3px;--ribbon1:#111;--ribbon2:#000;
  --bg:#111;--grain:none;--font:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
[data-theme="retro"] .leaf{display:none}
[data-theme="okyanus"] .banner h1,[data-theme="seker"] .banner h1,[data-theme="okyanus"] .round,[data-theme="seker"] .round,[data-theme="okyanus"] .foot a,[data-theme="seker"] .foot a{color:var(--bink);text-shadow:0 1px 0 var(--bsh)}
[data-theme="retro"] .banner h1,[data-theme="retro"] .round,[data-theme="retro"] .foot a{color:#111;text-shadow:none}
[data-theme="retro"] .rune,[data-theme="retro"] .chip{color:#fff}

*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;color:var(--ink);font-family:var(--font);background:var(--bg) fixed;overflow-x:hidden}
a{color:inherit}
.sp{flex:1}.small{font-size:12px}
.stage{max-width:640px;margin:0 auto;padding:18px 16px 44px;display:flex;flex-direction:column;align-items:center}
.stage.center{min-height:calc(100vh - 60px);justify-content:center}

/* ---- üst çubuk ---- */
.topbar{display:flex;gap:8px;align-items:center;max-width:900px;margin:0 auto;padding:12px 16px 0}
.topbar form{margin:0}
.brand{font-weight:900;font-size:20px;text-decoration:none;color:var(--ink);text-shadow:0 2px 0 #000;letter-spacing:1px}
[data-theme="retro"] .brand{text-shadow:none;color:#fff}

/* ---- tahta ---- */
.plank{position:relative;border:4px solid var(--edge);border-radius:var(--rad);
  background:var(--grain),linear-gradient(180deg,var(--w1),var(--w2) 52%,var(--w3));
  box-shadow:inset 0 0 0 3px var(--hi),inset 0 -12px 22px var(--lo),0 6px 0 var(--edge2),0 16px 30px rgba(0,0,0,.55)}
.plank::before,.plank::after{content:"";position:absolute;top:11px;width:12px;height:12px;border-radius:3px;transform:rotate(45deg);
  background:radial-gradient(circle at 35% 30%,var(--rune1),var(--rune2));border:2px solid var(--edge2)}
.plank::before{left:11px}.plank::after{right:11px}
.board{width:100%;padding:68px 22px 26px;text-align:center;margin-top:-12px}
.board.narrow{max-width:460px;margin-top:0;padding-top:34px}
.plank.foot{margin-top:22px;padding:8px 26px;font-weight:800;font-size:14px;border-radius:12px}
.plank.foot::before,.plank.foot::after{display:none}
.foot a{text-decoration:none;color:var(--ink);text-shadow:0 2px 0 var(--tsh)}

/* ---- şerit başlık ---- */
.banner{position:relative;z-index:3;margin:0 auto;padding:9px 40px;border:4px solid var(--edge);border-radius:12px;
  background:var(--grain),linear-gradient(180deg,var(--w1),var(--w2) 60%,var(--w3));
  box-shadow:inset 0 0 0 3px var(--hi),0 5px 0 var(--edge2),0 12px 20px rgba(0,0,0,.5)}
.banner::before,.banner::after{content:"";position:absolute;top:12px;width:50px;height:calc(100% - 6px);z-index:-1;
  background:linear-gradient(180deg,var(--ribbon1),var(--ribbon2));border:3px solid var(--edge2)}
.banner::before{left:-34px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,28% 50%)}
.banner::after{right:-34px;clip-path:polygon(0 0,100% 0,72% 50%,100% 100%,0 100%)}
.banner h1{margin:0;font-size:26px;letter-spacing:1.5px;text-shadow:0 3px 0 var(--tsh),0 0 2px var(--tsh);text-align:center;max-width:70vw;overflow-wrap:anywhere}

/* ---- yuvarlak tahta ---- */
.avatar{position:relative;z-index:4;margin:18px 0 -50px}
.round{width:108px;height:108px;border-radius:50%;border:5px solid var(--edge);display:flex;align-items:center;justify-content:center;
  font-size:48px;font-weight:900;color:var(--ink);text-shadow:0 3px 0 var(--tsh);overflow:hidden;
  background:var(--grain),radial-gradient(circle at 36% 28%,var(--w1),var(--w2) 55%,var(--w3));
  box-shadow:inset 0 0 0 3px var(--hi),0 6px 0 var(--edge2),0 12px 22px rgba(0,0,0,.55)}
[data-theme="retro"] .round{border-radius:6px}
.leaf{position:absolute;pointer-events:none;filter:drop-shadow(0 3px 0 rgba(20,40,10,.45))}
.leaf.av{width:46px;left:-20px;top:-6px;transform:rotate(-25deg)}
.leaf.l1{width:70px;right:-18px;top:-30px;transform:rotate(12deg);z-index:5}
.leaf.l2{width:58px;left:-16px;bottom:-16px;transform:rotate(190deg);z-index:5}
.tagline{margin:6px 0 4px;font-weight:900;letter-spacing:2px;text-transform:uppercase;font-size:13px;color:var(--bink);text-shadow:0 1px 0 var(--bsh)}
.bio{margin:0 auto;max-width:440px;line-height:1.5;color:var(--bink);text-shadow:0 1px 0 var(--bsh)}
.muted{color:var(--bink);opacity:.85;text-shadow:0 1px 0 var(--bsh)}
.h{margin:4px 0 8px;font-size:24px;color:var(--bink);text-shadow:0 2px 0 var(--bsh)}

/* ---- bağlantı tahtaları ---- */
.links{display:flex;flex-direction:column;gap:13px;margin-top:22px}
.lnk{display:flex;align-items:center;gap:13px;text-decoration:none;padding:10px 14px;border:3px solid var(--edge);border-radius:calc(var(--rad) - 3px);
  background:var(--grain),linear-gradient(180deg,var(--l1),var(--l2) 58%,var(--l3));
  box-shadow:inset 0 0 0 2px var(--hi),0 5px 0 var(--edge2),0 10px 16px rgba(0,0,0,.35);transition:transform .08s,filter .15s}
.lnk:hover{transform:translateY(-3px);filter:brightness(1.1)}
.lnk:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--hi),0 2px 0 var(--edge2)}
.rune{flex:none;width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:23px;
  background:linear-gradient(180deg,var(--rune1),var(--rune2));border:3px solid var(--edge2);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.txt{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column}
.txt b{font-size:17px;text-shadow:0 2px 0 var(--tsh);overflow-wrap:anywhere}
.txt small{opacity:.92;font-size:12px;text-shadow:0 1px 0 var(--tsh)}
.go{font-weight:900;opacity:.85;text-shadow:0 2px 0 var(--tsh)}

/* ---- düğmeler ---- */
.wbtn{display:inline-block;cursor:pointer;font-family:inherit;font-size:15px;padding:10px 22px;border:3px solid var(--edge);border-radius:12px;color:var(--btntxt);font-weight:900;text-decoration:none;
  background:linear-gradient(180deg,var(--btn1),var(--btn2));box-shadow:inset 0 0 0 2px rgba(255,255,255,.3),0 5px 0 var(--edge2);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.wbtn:hover{filter:brightness(1.12)}.wbtn:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.3),0 2px 0 var(--edge2)}
.wbtn.ok{background:linear-gradient(180deg,#86dc5c,#3f9a2a);color:#fff}
.wbtn.no{background:linear-gradient(180deg,#f0705f,#b02a1c);color:#fff}
.wbtn.gold{background:linear-gradient(180deg,#ffd36b,#e8952a);color:#4a2400;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.wbtn.sm{padding:5px 11px;font-size:13px;border-radius:9px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28),0 3px 0 var(--edge2)}
.wbtn[disabled]{opacity:.5;cursor:not-allowed}
[data-theme="retro"] .wbtn{text-shadow:none}

/* ---- ana sayfa ---- */
.shorten{display:flex;gap:8px;margin:16px auto 8px;max-width:480px}
.shorten input{flex:1;min-width:0;font:inherit;padding:11px 12px;border-radius:10px;border:3px solid var(--edge2);background:#150a21;color:#fff3d4}
.feats{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:14px}

/* ---- önizleme ---- */
.dest{font-size:24px;margin:6px 0 2px;color:var(--bink);text-shadow:0 2px 0 var(--bsh);overflow-wrap:anywhere}
.url{font-size:12px;opacity:.85;overflow-wrap:anywhere;margin:0 0 12px;color:var(--bink);text-shadow:0 1px 0 var(--bsh)}
.stats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0 14px}
.chip{background:linear-gradient(180deg,var(--rune1),var(--rune2));border:3px solid var(--edge2);border-radius:20px;padding:3px 12px;font-size:13px;font-weight:800;color:#fff}
[data-theme="gece"] .chip,[data-theme="orman"] .chip,[data-theme="okyanus"] .chip,[data-theme="seker"] .chip{color:#2a1d00}
.qr{background:#fff;padding:8px;border-radius:10px;border:3px solid var(--edge);max-width:100%}
.short{font-weight:900;font-size:15px;margin:8px 0 14px;overflow-wrap:anywhere;color:var(--bink);text-shadow:0 1px 0 var(--bsh)}

/* ---- panel ---- */
.adm{max-width:900px;margin:0 auto;padding:12px 14px 60px}
.adm .banner{display:table;max-width:92%;margin-bottom:6px}
.tabsbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:18px 0 14px}
.tabsbar .wbtn.on{outline:3px solid #ffd36b}
.card{background:linear-gradient(180deg,rgba(60,26,86,.92),rgba(34,14,50,.95));border:4px solid #4a2160;border-radius:14px;padding:14px;margin-bottom:14px;color:#fff3d4;
  box-shadow:inset 0 0 0 2px rgba(190,140,230,.25),0 5px 0 #2b1040,0 12px 24px rgba(0,0,0,.45)}
.card h3{margin:0 0 10px;font-size:17px;color:#ffd990;text-shadow:0 2px 0 #000}
.adm{--edge:#4a2160;--edge2:#2b1040;--btn1:#8f46af;--btn2:#5d2878;--btntxt:#fff;--ink:#fff3d4;--tsh:#000;--mute:rgba(255,243,212,.78)}
.adm label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:800;color:#e9d7ff}
.adm input,.adm textarea,.adm select{font-family:inherit;font-size:14px;color:#fff3d4;background:#150a21;border:2px solid #0a0510;border-radius:9px;padding:9px 10px;width:100%}
.adm input:focus,.adm textarea:focus{outline:2px solid #f6a845}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row>*{flex:1 1 150px}.row>.w2{flex:2 1 260px}.row>.fix{flex:0 0 auto}
.lrow{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:10px 12px;border-radius:11px;background:rgba(0,0,0,.28);margin-top:9px;border:2px solid rgba(0,0,0,.3)}
.lrow.off{opacity:.55}
.lrow .sl{font-weight:900;color:#ffd990;cursor:pointer;overflow-wrap:anywhere}
.lrow .ds{font-size:12px;opacity:.8;overflow-wrap:anywhere}
.lrow .acts{display:flex;gap:6px;flex-wrap:wrap;grid-column:1/-1}
.pl{display:grid;grid-template-columns:54px 1fr;gap:8px;padding:10px;margin-top:9px;border-radius:11px;background:rgba(0,0,0,.28)}
.pl .f{display:grid;grid-template-columns:1fr 1fr;gap:6px}.pl .f .wide{grid-column:1/-1}
.pl .ic{text-align:center;font-size:20px;padding:6px}
.pl .bar{grid-column:1/-1;display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px}
.err{color:#ff9a8f;font-weight:800;font-size:13px;min-height:16px}
.notice{background:rgba(255,211,107,.16);border:2px solid #f6a845;border-radius:10px;padding:10px;font-size:13px;line-height:1.5}
.qrbox{background:#fff;padding:8px;border-radius:10px;display:block;margin:6px auto}
.secret{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:1px;text-align:center;font-size:13px;word-break:break-all}
.overlay{position:fixed;inset:0;background:rgba(10,4,16,.75);display:flex;align-items:center;justify-content:center;padding:14px;z-index:50;overflow:auto}
.overlay .card{width:100%;max-width:440px;margin:0}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#1d0d2b;color:#ffd990;border:3px solid #f6a845;border-radius:10px;padding:8px 16px;font-weight:800;z-index:90}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}
.planbadge{display:inline-block;padding:2px 12px;border-radius:14px;font-weight:900;background:linear-gradient(180deg,#8f46af,#5d2878);border:3px solid #2b1040}
.planbadge.pro{background:linear-gradient(180deg,#ffd36b,#e8952a);color:#4a2400}
.meter{height:14px;background:#150a21;border:2px solid #0a0510;border-radius:8px;overflow:hidden;margin:6px 0}.meter i{display:block;height:100%;background:linear-gradient(180deg,#86dc5c,#3f9a2a)}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.tcard{cursor:pointer;border:3px solid #2b1040;border-radius:12px;padding:8px;background:rgba(0,0,0,.25);text-align:center;font-weight:800;font-size:13px;position:relative}
.tcard.on{outline:3px solid #ffd36b}.tcard.lock{opacity:.6;cursor:not-allowed}
.tcard .sw{height:46px;border-radius:8px;margin-bottom:6px;border:3px solid var(--edge);background:var(--bg)}
.tcard .sw i{display:block;height:100%;border-radius:5px;background:linear-gradient(180deg,var(--w1),var(--w2) 55%,var(--w3));margin:8px 12px;height:24px;border:2px solid var(--edge2)}
.tcard .pro{position:absolute;top:4px;right:4px;background:#ffd36b;color:#4a2400;border-radius:8px;font-size:10px;padding:1px 6px;font-weight:900}
[hidden]{display:none!important}
@media(max-width:480px){.banner h1{font-size:21px}.banner{padding:8px 26px}.banner::before{left:-26px;width:40px}.banner::after{right:-26px;width:40px}.board{padding:66px 14px 22px}}

.who{font-weight:800;font-size:14px;color:var(--ink);text-shadow:0 2px 0 #000;padding:0 4px}
.card.result{border-color:#3f9a2a;box-shadow:inset 0 0 0 2px rgba(134,220,92,.35),0 5px 0 #1d4a14,0 12px 24px rgba(0,0,0,.45)}
.sl.big{font-size:22px;font-weight:900;color:#ffd990;cursor:pointer;overflow-wrap:anywhere}