:root{--bg:#edf4ff;--bg2:#f8fbff;--panel:#fff;--soft:#f4f8fd;--ink:#17243a;--muted:#68788e;--line:#d6e2f0;--blue:#2563eb;--green:#16a34a;--red:#ef5b67;--shadow:0 16px 36px rgba(15,23,42,.08)}
html[data-theme="dark"]{color-scheme:dark;--bg:#111a28;--bg2:#172234;--panel:#1a2739;--soft:#213148;--ink:#f1f6fd;--muted:#a9b8cc;--line:#314760;--shadow:0 18px 38px rgba(0,0,0,.25)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%}body{font-family:ui-rounded,"Nunito","Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--ink);overflow:hidden}button{font:inherit;color:inherit}.app-shell{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:7px;padding:7px 10px 5px;overflow:hidden}
.topbar{display:grid;grid-template-columns:minmax(260px,1fr) auto minmax(180px,1fr);align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:5px 9px;box-shadow:var(--shadow);min-height:54px}.brand{display:flex;align-items:center;gap:11px;min-width:0}.brand-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:21px;background:linear-gradient(145deg,#fff,#dce9fa);box-shadow:0 8px 16px rgba(30,64,175,.09)}html[data-theme="dark"] .brand-icon{background:linear-gradient(145deg,#293b55,#1c2a3e)}.brand h1{font-size:20px;margin:0;line-height:1}.brand p{font-size:10px;color:var(--muted);margin:3px 0 0}.tabs{display:flex;gap:4px;padding:3px;border-radius:13px;background:var(--soft);border:1px solid var(--line)}.tab{border:0;background:transparent;padding:7px 11px;border-radius:10px;font-weight:900;color:var(--muted);cursor:pointer;white-space:nowrap}.tab.active{background:var(--panel);color:var(--blue);box-shadow:0 7px 16px rgba(37,99,235,.12)}.top-actions{justify-self:end;display:flex;gap:7px}.top-btn{border:1px solid var(--line);background:var(--panel);border-radius:11px;padding:7px 9px;font-weight:850;cursor:pointer}.top-btn.dark{background:#1e293b;color:#fff;border-color:#1e293b}html[data-theme="dark"] .top-btn.dark{background:#0c1421;border-color:#40516b}
.workspace{min-height:0;display:grid;grid-template-columns:minmax(320px,1fr) minmax(650px,1.72fr) minmax(310px,.95fr);gap:8px}.panel{min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:19px;padding:9px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.panel-head h2{font-size:18px;margin:0}.panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.model-name,.drag-badge{border-radius:999px;padding:7px 10px;font-size:11px;font-weight:950;background:#e8f7ef;color:#15713f}.drag-badge{background:#e9f1ff;color:#285ca8}
.reference-stage{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;border-radius:18px;border:1px solid var(--line);background:radial-gradient(circle at 50% 38%,rgba(96,165,250,.10),transparent 50%),linear-gradient(180deg,var(--soft),var(--panel));padding:12px;overflow:hidden}.model-board{position:relative;width:min(100%,500px);aspect-ratio:4/3;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(231,240,251,.88));border:1px solid var(--line);box-shadow:inset 0 0 0 5px rgba(255,255,255,.45);overflow:hidden}html[data-theme="dark"] .model-board{background:linear-gradient(180deg,#24364f,#1a293e);box-shadow:inset 0 0 0 5px rgba(255,255,255,.02)}
.model-piece,.play-piece,.drop-slot{position:absolute;padding:0}.model-piece{pointer-events:none}.shape-wrap{width:100%;height:100%;display:grid;place-items:center}.shape-render{display:block;width:100%;height:100%;position:relative;filter:drop-shadow(0 5px 6px rgba(15,23,42,.14));transform-origin:50% 50%}.shape-square{border-radius:7px;background:linear-gradient(145deg,#ff6969,#e22222);box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -8px 14px rgba(116,0,0,.18)}.shape-rectangle{border-radius:8px;background:linear-gradient(145deg,#a77cff,#6d28d9);box-shadow:inset 0 2px 0 rgba(255,255,255,.32),inset 0 -8px 14px rgba(43,0,99,.17)}.shape-triangle{clip-path:polygon(50% 4%,96% 94%,4% 94%);background:linear-gradient(145deg,#ffe66a,#f5b800)}.shape-circle{border-radius:50%;background:radial-gradient(circle at 34% 26%,#8ec7ff,#2f80ed 52%,#1457b8 100%);box-shadow:inset 0 2px 5px rgba(255,255,255,.45)}.shape-ring{border-radius:50%;border:7px solid #17b8b1;background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.24),0 8px 13px rgba(15,23,42,.10)}
.drop-slot{border:2px dashed rgba(37,99,235,.40);border-radius:12px;background:rgba(37,99,235,.055);pointer-events:none}.inventory{display:flex;flex-wrap:wrap;gap:6px}.inv-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:11px;font-weight:850}.inv-symbol{width:12px!important;height:12px!important;display:inline-block;filter:none!important}.guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.guide-step{display:grid;grid-template-columns:27px 1fr;gap:6px;align-items:center;border-radius:11px;background:var(--soft);border:1px solid var(--line);padding:6px}.guide-step>b{width:27px;height:27px;border-radius:9px;background:var(--panel);display:grid;place-items:center;color:var(--blue)}.guide-step strong{display:block;font-size:10px}.guide-step small{display:block;color:var(--muted);font-size:9px;margin-top:2px;line-height:1.2}
.play-head{align-items:center}.mini-actions{display:flex;gap:6px}.mini-actions button{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:8px 10px;font-weight:900;cursor:pointer}.mini-actions .check{background:linear-gradient(180deg,#22c55e,#15944a);border-color:transparent;color:#fff}.play-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:17px;overflow:hidden;background:linear-gradient(180deg,var(--soft),#e9f1fb);border:1px solid var(--line);padding:12px}html[data-theme="dark"] .play-stage{background:linear-gradient(180deg,#203047,#182638)}.play-board{position:relative;width:min(100%,780px);height:auto;max-width:100%;max-height:100%;aspect-ratio:4/3;flex:0 0 auto;border-radius:20px;background:linear-gradient(transparent calc(100% - 1px),rgba(99,125,158,.13) calc(100% - 1px)) 0 0/100% 6.6667%,linear-gradient(90deg,transparent calc(100% - 1px),rgba(99,125,158,.13) calc(100% - 1px)) 0 0/5% 100%,linear-gradient(180deg,#fff,#eef5fd);border:1px solid #d1ddeb;box-shadow:inset 0 0 0 5px rgba(255,255,255,.55),0 16px 28px rgba(15,23,42,.08);touch-action:none}.play-board.grid-off{background:linear-gradient(180deg,#fff,#eef5fd)}html[data-theme="dark"] .play-board{background:linear-gradient(transparent calc(100% - 1px),rgba(165,187,214,.14) calc(100% - 1px)) 0 0/100% 6.6667%,linear-gradient(90deg,transparent calc(100% - 1px),rgba(165,187,214,.14) calc(100% - 1px)) 0 0/5% 100%,linear-gradient(180deg,#263950,#1b2a3f);border-color:#394f69;box-shadow:inset 0 0 0 5px rgba(255,255,255,.02),0 18px 30px rgba(0,0,0,.22)}html[data-theme="dark"] .play-board.grid-off{background:linear-gradient(180deg,#263950,#1b2a3f)}.play-piece{cursor:grab;touch-action:none;user-select:none;z-index:10;-webkit-tap-highlight-color:transparent}.play-piece.dragging{z-index:99;opacity:.88}.play-piece:focus,.play-piece:focus-visible{outline:none}.bottom-actions{display:grid;grid-template-columns:1.12fr .8fr .9fr .9fr 1fr;gap:7px}.bottom-actions button{border:1px solid var(--line);background:var(--panel);border-radius:13px;padding:10px 7px;font-weight:900;cursor:pointer}.bottom-actions .primary{background:linear-gradient(180deg,#20c872,#149650);border-color:transparent;color:#fff}.bottom-actions .delete{background:linear-gradient(180deg,#ff8c95,#ea5964);border-color:transparent;color:#fff}
.palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:auto;padding-right:2px}.palette-card{position:relative;border:1px solid var(--line);background:var(--soft);border-radius:15px;padding:8px;min-height:116px;display:grid;grid-template-rows:66px auto;align-items:center;text-align:center;cursor:grab;touch-action:none;user-select:none;transition:.15s ease}.palette-card:hover{transform:translateY(-2px);border-color:#8bb8fa}.palette-shape{height:64px;display:grid;place-items:center}.palette-demo{display:grid;place-items:center;max-width:82px;max-height:58px}.palette-demo .shape-render{width:100%;height:100%}.palette-card strong{font-size:13px}.palette-card small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.need-badge{position:absolute;top:7px;right:7px;border-radius:999px;background:var(--panel);border:1px solid var(--line);padding:3px 6px;font-size:9px;font-weight:900;color:var(--muted)}.need-badge.used{color:#15713f;border-color:#b7e2c8}.challenge{margin-top:auto;border-radius:16px;background:linear-gradient(180deg,#fff4ca,#ffe7a0);border:1px solid #e8cd65;padding:11px}html[data-theme="dark"] .challenge{background:linear-gradient(180deg,#362d18,#251e10);border-color:#7b6322}.challenge>span{font-size:9px;font-weight:950;color:#7e5b00}.challenge strong{display:block;font-size:16px;margin-top:4px}.challenge p{font-size:11px;color:var(--muted);margin:4px 0 0}.palette-tip{margin-top:auto;padding:8px;border-radius:12px;background:var(--soft);color:var(--muted);font-size:10px;line-height:1.3}
.success-banner[hidden],.drag-ghost[hidden],.toast[hidden]{display:none!important}.success-banner{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#effff5,#dcffea);border:1px solid #92dfb3;border-radius:16px;padding:11px 16px;box-shadow:0 20px 34px rgba(22,163,74,.19)}html[data-theme="dark"] .success-banner{background:linear-gradient(180deg,#183626,#11291c);border-color:#3a9f67}.success-banner>span{font-size:24px}.success-banner strong{display:block}.success-banner small{display:block;color:var(--muted);margin-top:2px}.drag-ghost{position:fixed;z-index:999;pointer-events:none;transform:translate(-50%,-50%);display:grid;place-items:center}.drag-ghost .shape-render{width:100%;height:100%}.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:220;background:#17243a;color:#fff;padding:10px 14px;border-radius:13px;font-size:12px;font-weight:850;box-shadow:0 14px 26px rgba(15,23,42,.25)}footer{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;padding:0 4px}.palette-panel{transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.palette-panel.return-target{border-color:#34d399!important;box-shadow:0 0 0 4px rgba(52,211,153,.17),0 18px 34px rgba(16,185,129,.13)!important;background:linear-gradient(180deg,rgba(236,253,245,.96),rgba(255,255,255,.96))!important}html[data-theme="dark"] .palette-panel.return-target{background:linear-gradient(180deg,#18362b,#182638)!important;border-color:#34d399!important}.palette-panel.return-target .drag-badge{background:#dcfce7!important;color:#11633a!important}.palette-panel.return-target .palette-tip{background:#dcfce7!important;color:#11633a!important;font-weight:850}
@media(max-width:1180px){body{overflow:auto}.app-shell{height:auto;min-height:100dvh;overflow:visible}.topbar{grid-template-columns:1fr}.brand{justify-content:center}.top-actions{justify-self:center}.workspace{grid-template-columns:1fr}.reference-stage{min-height:300px}.model-board{max-width:500px}.play-stage{min-height:520px}.play-board{max-width:680px;width:100%}.palette{grid-template-columns:repeat(3,minmax(0,1fr))}.palette-tip{margin-top:0}}
@media(max-width:760px){.app-shell{padding:7px;gap:7px}.topbar{padding:9px}.brand{justify-content:flex-start}.brand h1{font-size:19px}.tabs{display:grid;grid-template-columns:.95fr 1.45fr 1fr;width:100%;gap:3px}.tab{padding:7px 4px;font-size:10.5px;white-space:nowrap}.top-actions{justify-self:stretch}.top-actions button{flex:1}.workspace{gap:8px}.panel{padding:9px}.guide{grid-template-columns:1fr}.reference-stage{min-height:260px}.model-board{max-width:400px}.play-stage{min-height:390px;padding:8px}.bottom-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.palette{grid-template-columns:repeat(2,minmax(0,1fr))}.palette-card{min-height:112px}.mini-actions{flex-wrap:wrap}footer{flex-direction:column;align-items:center;gap:2px}}

.inv-symbol.shape-ring{border-width:2px!important}.inv-symbol.shape-triangle{filter:none!important}

/* v1.3.1 — sağ palet ön izlemesi cache/CSS çakışmasına dayanıklı */
.palette-shape{position:relative;min-height:64px;display:grid!important;place-items:center!important;overflow:visible!important}
.palette-preview{visibility:visible!important;opacity:1!important;transform:none!important;position:relative!important;inset:auto!important;min-width:28px!important;min-height:28px!important}
.palette-card .palette-preview{pointer-events:none!important}

.palette-preview-svg{overflow:visible;display:block;visibility:visible!important;opacity:1!important}.palette-shape svg{max-width:100%;max-height:100%}

/* v1.3.3 — taşıma sırasında kaynak parça klon gibi görünmesin */
.play-piece.drag-source-hidden{opacity:0!important;visibility:hidden!important}

/* v1.3.4: sürükleme hayaleti gerçek tuval parçasıyla aynı piksel boyutunu korur. */
.drag-ghost{transition:none!important}.drag-ghost .shape-render{min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important}