:root{--bg: #0a0f0a;--panel: #0f1610;--grid: #0b120c;--fg: #d2ffdf;--fg-dim: #82c79a;--accent: #00ff88;--accent-dim: #00cc6c;--shadow: rgba(0, 255, 136, .06);--cell: clamp(28px, 4.8vw, 52px)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 800px at 70% -10%,rgba(0,255,136,.08),transparent 60%),linear-gradient(180deg,rgba(0,255,136,.03),transparent 120px),var(--bg);color:var(--fg);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;letter-spacing:.3px}.app{min-height:100%;display:grid;grid-template-rows:auto 1fr auto}.app-header,.app-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--panel);border-bottom:1px solid rgba(0,255,136,.18);box-shadow:0 2px 0 var(--shadow) inset}.app-footer{border-top:1px solid rgba(0,255,136,.18);border-bottom:none;box-shadow:0 -2px 0 var(--shadow) inset}h1{margin:0;font-weight:700;text-transform:lowercase;font-size:18px;color:var(--accent);text-shadow:0 0 12px rgba(0,255,136,.3)}.stats{display:flex;align-items:center;gap:16px}.mono.small{font-size:12px;color:var(--fg-dim)}.btn{background:transparent;color:var(--accent);border:1px solid var(--accent-dim);padding:6px 10px;border-radius:6px;cursor:pointer}.btn:hover{background:#00ff8814}.game-wrapper{display:grid;grid-template-columns:minmax(0,70%) minmax(0,30%);gap:14px;padding:14px;max-width:100%}.board{display:grid;grid-template-rows:auto 1fr auto;gap:8px;min-width:0}.row{display:grid;grid-template-columns:auto 1fr auto;gap:8px}.grid{background:var(--grid);border:1px solid rgba(0,255,136,.2);border-radius:10px;padding:6px;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:var(--cell);gap:5px;position:relative;box-shadow:0 0 0 1px #00ff8814 inset,0 20px 60px #0000004d inset;max-width:100%}.cell{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#00ff880d,#00ff8803);border:1px solid rgba(0,255,136,.18);border-radius:8px;-webkit-user-select:none;user-select:none;transition:transform .12s ease,background .12s ease,box-shadow .12s ease,border-color .12s ease}.cell:hover{border-color:#00ff8859;box-shadow:0 0 0 1px #0f83 inset}.glyph{font-size:28px;line-height:1;color:var(--fg);text-shadow:0 0 8px rgba(0,255,136,.4)}.clearing{animation:fade-down .45s ease forwards}@keyframes fade-down{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(12px)}}.row-controls,.col-controls{display:grid;align-content:center;gap:6px}.row-controls.left,.row-controls.right{grid-template-rows:repeat(6,var(--cell))}.col-controls.top,.col-controls.bottom{grid-template-columns:repeat(6,1fr)}.control-btn{display:flex;align-items:center;justify-content:center;background:#00ff880f;color:var(--accent);border:1px dashed rgba(0,255,136,.28);border-radius:8px;height:var(--cell);cursor:pointer;transition:background .12s ease,border-color .12s ease}.control-btn:hover{background:#00ff881f;border-color:#00ff8880}.control-btn .arrow{opacity:.9}.cell.sel-row{background:linear-gradient(180deg,#00ff881f,#00ff8808)}.cell.sel-col{box-shadow:0 0 0 2px #0f83 inset}.cell.sel-cross{border-color:#0f89;box-shadow:0 0 0 2px #00ff8859 inset}.grid.row-mode,.grid.col-mode{outline:1px dashed rgba(0,255,136,.2)}.cypher-pane{background:var(--panel);border:1px solid rgba(0,255,136,.2);border-radius:10px;padding:12px;display:grid;grid-template-rows:auto auto minmax(0,2fr) minmax(0,1fr);gap:8px;overflow:hidden}.pane-title{color:var(--accent);font-weight:700;letter-spacing:2px;font-size:12px}.cypher-image-wrap{position:relative;background:#050805;border:1px solid rgba(0,255,136,.2);border-radius:8px;display:grid;place-items:center;overflow:hidden;max-width:100%;min-height:0}.cypher-image-wrap img{width:100%;height:100%;object-fit:contain;object-position:center}.image-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--fg-dim);text-align:center}.ascii-face{font-size:22px;margin-bottom:6px;color:var(--accent-dim)}.hint{font-size:11px}.cipher-bar{background:#050805;border:1px solid rgba(0,255,136,.2);border-radius:6px;padding:6px 8px;min-height:22px;display:block;overflow:hidden;margin-bottom:4px}.cipher-bar span{display:block;white-space:nowrap;text-overflow:clip;overflow:hidden;letter-spacing:1px;font-size:11px}.pane-body{overflow:auto}@media (max-width: 900px){.game-wrapper{grid-template-columns:1fr}.cypher-pane{order:-1}}