:root{--zisa-yellow:#ffcf56;--zisa-brown:#6f4300;--zisa-ink:#2f2a22;--zisa-green:#27ae60;--zisa-cream:#fffaf2}
body{font-family:"Comic Sans MS","Trebuchet MS",Arial,sans-serif;background:radial-gradient(circle at 90% 0,rgba(255,207,86,.28),transparent 25%),#f4efe5}
main{max-width:1180px;padding:12px 18px 28px}
.studio-nav{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.nav-home,.nav-studio{border:0;border-radius:12px;background:#383838;color:#fff;text-decoration:none;padding:10px 15px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.nav-studio{background:#fff;color:var(--zisa-brown);border:1px solid #ead8b8}
.studio-start{max-width:980px;margin:4vh auto 0}
.start-hero{text-align:center;background:linear-gradient(135deg,#fffaf2,#fff);border:1px solid #ead8b8;border-radius:26px;padding:34px 24px;box-shadow:0 14px 36px rgba(80,50,10,.11)}
.eyebrow{display:block;color:#997000;font-weight:900;letter-spacing:.13em;font-size:.75rem;margin-bottom:7px}
.start-hero h1,.choice-heading h1{font-size:clamp(2rem,5vw,3.5rem);color:var(--zisa-brown);margin:0 0 8px}.start-hero p{max-width:680px;margin:auto;color:#6e6252;line-height:1.55}
.start-actions{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
.play-notice{display:flex;align-items:flex-start;gap:13px;margin-top:18px;padding:15px 18px;border:1px solid #b9ddc4;border-radius:16px;background:#eff9f2;color:#31563b}.play-notice>span{font-size:1.7rem}.play-notice b{display:block;color:#176b31;margin-bottom:3px}.play-notice p{margin:0;font-size:.84rem;line-height:1.45}
.start-card{appearance:none;text-align:left;text-decoration:none;border:2px solid transparent;border-radius:22px;padding:22px;min-height:200px;display:grid;grid-template-columns:auto 1fr;gap:14px;background:#fff;box-shadow:0 8px 24px rgba(70,45,10,.09);transition:.18s transform,.18s box-shadow;cursor:pointer;color:var(--zisa-ink)}
.start-card:hover,.start-card:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px rgba(70,45,10,.15);outline:none}.maker-card{border-color:#f0c85d}.game-card{border-color:#85d39c}.start-icon{font-size:2.4rem}.start-card b{display:block;font-size:1.35rem;color:#503500;margin-bottom:7px}.start-card small{font-size:.9rem;line-height:1.45;color:#6f6659}.start-card strong{grid-column:2;color:#187e39}
.choice-screen{max-width:1120px;margin:auto}.choice-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:8px 0 18px}.choice-heading h1{font-size:2.1rem}.choice-heading p{margin:0;color:#6e6252}.choice-heading button{white-space:nowrap}
.puzzle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:15px}.puzzle-choice{border:1px solid #e5dac8;border-radius:18px;background:#fff;padding:12px;cursor:pointer;box-shadow:0 5px 16px rgba(70,45,10,.07);transition:.16s}.puzzle-choice:hover,.puzzle-choice:focus-visible{transform:translateY(-3px);border-color:#27ae60;outline:3px solid rgba(39,174,96,.16)}.puzzle-preview{height:135px;display:grid;place-items:center;border-radius:12px;background:#eff9f2;overflow:hidden}.puzzle-preview svg{width:94%;height:94%}.puzzle-choice b{display:block;font-size:1rem;margin:10px 2px 2px;color:#3d3328}.puzzle-choice span{font-size:.72rem;color:#766b5b}
.puzzle-choice.pro-locked{border-color:#e8cf7b;background:#fffdf4}.puzzle-choice.pro-locked .puzzle-preview{position:relative;background:#fff8dc}.puzzle-choice.pro-locked svg{opacity:.48;filter:saturate(.55)}.pro-badge{position:absolute;right:8px;top:8px;padding:4px 8px;border-radius:999px;background:#ffd45c;color:#493300;font:900 .68rem Arial,sans-serif;font-style:normal;box-shadow:0 3px 9px #72560025}.pro-modal{position:fixed;z-index:5000;inset:0;display:grid;place-items:center;padding:18px;background:#17324db8}.pro-modal[hidden]{display:none}.pro-modal section{width:min(480px,100%);padding:26px;border-radius:22px;background:#fff;text-align:center;box-shadow:0 22px 65px #0005}.pro-modal h2{color:#173f73;margin:12px 0 8px}.pro-modal p{color:#5d6873;line-height:1.55}.pro-modal .pro-pill{display:inline-block;padding:5px 10px;border-radius:999px;background:#ffd45c;color:#493300;font-weight:900}.pro-modal div{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}.pro-modal button,.pro-modal a{border:0;border-radius:11px;padding:11px 15px;font-weight:900;text-decoration:none}.pro-modal button{background:#edf3f8;color:#174d79}.pro-modal a{background:#1768ac;color:#fff}.discover-mode #toolHeader{border-top:5px solid #ffd45c}
#toolHeader{padding:12px 16px;margin-bottom:10px;border-color:#ead8b8;background:#fffaf2}#toolHeader h1{color:var(--zisa-brown)}.tabs{margin-top:8px}.tab{padding:9px}.tab.active{background:var(--zisa-green);border-color:var(--zisa-green)}
.card{border-color:#e6ddcf;box-shadow:0 4px 14px rgba(70,45,10,.045)}button.primary{background:#27ae60;border-color:#218f50}button:focus-visible,a:focus-visible{outline:3px solid rgba(255,180,0,.45);outline-offset:2px}
.game-workspace.active{display:grid!important;grid-template-columns:minmax(0,68fr) minmax(320px,32fr);grid-template-rows:auto minmax(0,1fr);gap:10px;height:calc(100dvh - 140px);min-height:440px}.game-workspace>.card{margin:0}.game-workspace>.card:first-child{grid-column:1/-1;padding:10px 14px}.game-workspace>.card:nth-child(2){min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:center;overflow:hidden;padding:8px}.game-workspace>.card:nth-child(3){min-width:0;min-height:0;display:flex;flex-direction:column;padding:10px;overflow:hidden}.game-workspace .gameTop{grid-template-columns:1fr auto}.game-workspace .gameTop label,.game-workspace .gameTop select{display:none}.game-workspace #gScore{position:absolute;right:32px;top:72px;margin:0;background:#fff4cf}.game-workspace .boardwrap{min-height:0;max-height:100%;overflow:auto;align-items:center}.game-workspace .tray{flex:1;min-height:150px;overflow:auto;background:#fffdf8}.game-workspace .actions{grid-template-columns:repeat(3,1fr);margin-top:8px}.game-workspace .actions button{min-height:48px;padding:8px}.game-workspace .status{margin-top:6px;padding:8px}.game-workspace #gNew{width:auto!important}.stars{font-size:18px}.puzzle-help{width:100%;margin-bottom:7px;padding:9px 11px;border:1px solid #efd080;border-radius:13px;background:#fff8dd;color:#573d00}.puzzle-help>strong{display:block;font-size:1rem}.puzzle-help>span{display:block;margin:2px 0 7px;font-size:.78rem}.puzzle-help-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.puzzle-help-actions button{min-height:46px;padding:7px 9px;border-color:#e4bd55;background:#fff;font-size:.82rem;color:#173f73}
body.game-mode{overflow:hidden}body.game-mode #toolHeader{padding:7px 12px}body.game-mode #toolHeader h1{font-size:19px;margin:0}body.game-mode #toolHeader>.small,body.game-mode #toolHeader .tabs{display:none}body.game-mode .studio-nav{height:38px;margin-bottom:6px}
@media(max-width:680px){.start-actions{grid-template-columns:1fr}.studio-start{margin-top:0}.start-card{min-height:155px}.choice-heading{align-items:flex-start;flex-direction:column-reverse}.puzzle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-workspace.active{display:block!important;height:auto;min-height:0}.game-workspace>.card{margin-bottom:10px}.game-workspace #gScore{position:static}.game-workspace .tray{min-height:280px}.game-workspace .boardwrap{max-height:none;overflow:auto}.puzzle-help-actions{grid-template-columns:1fr}.puzzle-help-actions button,.game-workspace .actions button{min-height:54px;font-size:.95rem}body.game-mode{overflow:auto}}
@media(min-width:681px) and (max-width:1100px){.game-workspace.active{grid-template-columns:minmax(0,64fr) minmax(300px,36fr)}.puzzle-help-actions button,.game-workspace .actions button{min-height:54px}.puzzle-help>span{font-size:.84rem}}
@media(max-height:700px) and (min-width:681px){#toolHeader .small{display:none}#toolHeader{padding:7px 12px}#toolHeader h1{font-size:19px}.studio-nav{height:38px;margin-bottom:6px}.game-workspace.active{height:calc(100dvh - 112px)}.game-workspace #gScore{top:54px}.game-workspace>.card:first-child h2,.game-workspace>.card:first-child .small{display:none}.game-workspace .actions button{min-height:36px;font-size:13px}.game-workspace .status{font-size:12px}}
@media print{.studio-nav,.studio-start,.choice-screen{display:none!important}}