:root{--paper:#efe9dc;--paper-2:#e7e0d0;--ink:#1c2433;--ink-soft:#55607a;--line:#c9c0ab;--stamp:#c0341d;--stamp-soft:#e7d3cb;--accent:#1d6b6b;--shadow:0 1px 0 #fff6, 0 18px 40px -22px #1c243355;}
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:radial-gradient(120% 80% at 50% -10%, #f6f1e6 0%, var(--paper) 55%, var(--paper-2) 100%) fixed;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;padding:clamp(12px,2vw,20px) clamp(16px,4vw,48px);}
  .wrap{max-width:1280px;margin:0 auto}
  header.masthead{border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .mhead-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
  .acct{display:flex;align-items:center;gap:10px;font-size:12px;flex-wrap:wrap;justify-content:flex-end}
  .acct-link{color:var(--accent);text-decoration:none;font-weight:700}
  .acct-link:hover{text-decoration:underline}
  .acct-user{color:var(--ink-soft)}
  .acct-signin{font-family:inherit;font-size:12px;font-weight:700;padding:4px 10px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--accent);cursor:pointer;text-decoration:none}
  .acct-signin:hover{border-color:var(--accent)}
  .title{font-weight:800;letter-spacing:-.02em;line-height:1;font-size:clamp(28px,5vw,46px);text-transform:uppercase;}
  .title small{display:block;font-size:.34em;letter-spacing:.42em;font-weight:600;color:var(--stamp);margin-bottom:8px;text-transform:uppercase}
  .tag{font-size:13px;color:var(--ink-soft);max-width:34ch;text-align:right}
  .grid-2{display:grid;grid-template-columns:340px 1fr;gap:30px;align-items:start}
  @media(max-width:760px){.grid-2{grid-template-columns:1fr}}
  .panel{background:linear-gradient(180deg,#fbf8f1,#f1ebde);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);}
  .panel h2{margin:0 0 4px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
  .field{margin-top:18px}
  label.lab{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
  label.lab .hint{font-weight:400;color:var(--ink-soft)}
  input[type=text],textarea,select{width:100%;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:15px;color:var(--ink);background:#fffdf8;border:1px solid var(--line);border-radius:9px;padding:11px 12px;}
  input[type=text]:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
  textarea{resize:vertical;min-height:64px;line-height:1.6}
  select{font-family:inherit}
  .meta{margin-top:8px;font-size:12px;color:var(--ink-soft);font-family:ui-monospace,monospace;line-height:16px;min-height:16px}
  details{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
  summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--accent)}
  .btn{appearance:none;border:1px solid var(--ink);cursor:pointer;font-weight:700;letter-spacing:.02em;font-size:15px;padding:12px 16px;border-radius:10px;background:var(--ink);color:#fbf8f1;transition:transform .05s ease, box-shadow .15s ease;}
  .btn:hover{box-shadow:0 8px 18px -10px #1c2433aa}
  .btn:active{transform:translateY(1px)}
  .btn.primary{width:100%;margin-top:22px;font-size:16px;background:var(--stamp);border-color:var(--stamp)}
  .btn.ghost{background:transparent;color:var(--ink);font-size:14px;padding:9px 12px}
  .btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .stage{min-height:240px;display:flex;align-items:center;justify-content:center}
  .empty-state{color:var(--ink-soft);text-align:center;font-size:14px;max-width:36ch}
  .sheet{width:100%}
  .play-hint{text-align:center;font-size:11px;color:var(--ink-soft);margin:0 0 12px}
  .board{display:grid;justify-content:center;margin:0 auto;background:var(--line);border-radius:10px;width:max-content;max-width:100%;touch-action:none;}
  .cell{position:relative;background:#fffdf6;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:600;color:var(--ink);border-radius:2px;user-select:none;cursor:pointer;touch-action:none;transition:background .18s,color .18s;}
  .cell.gap{background:transparent;cursor:default}
  .cell .ord{position:absolute;top:1px;left:1px;min-width:14px;height:14px;padding:0 2px;border-radius:7px;background:var(--ink);color:#fff;font-size:8px;font-weight:800;line-height:13px;text-align:center;border:1px solid rgba(255,255,255,.85);box-shadow:0 1px 1px rgba(0,0,0,.22)}
  .readout{margin-top:18px;text-align:center;min-height:30px}
  .code{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;font-family:ui-monospace,monospace;font-size:clamp(18px,3vw,26px);font-weight:700;letter-spacing:.18em;}
  .codes{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:center}
    .coderow{font-family:ui-monospace,monospace;font-size:var(--codefs,14px);font-weight:700;letter-spacing:.08em;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
    .coderow a{font-size:12px;font-weight:600;letter-spacing:.02em;text-decoration:none;border-bottom:1px solid currentColor}
    .meta-order{font-family:ui-monospace,monospace;font-size:.8em;letter-spacing:.04em;color:var(--ink-soft);align-self:center}
    .meta-case{font-family:ui-monospace,monospace;font-size:.85em;letter-spacing:.08em;color:var(--ink-soft);align-self:center}
  .code .grp{background:transparent;border:1px dashed var(--stamp);padding:4px 12px;border-radius:8px}
  .readout .muted{color:var(--ink-soft);font-size:13px;letter-spacing:.04em}
  .solved{color:var(--accent);font-weight:800;font-size:14px;letter-spacing:.04em;white-space:nowrap;margin-right:6px}
  .readout .done{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
  .words{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
  .words .whead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
  .words h3{margin:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
  .prog{font-family:ui-monospace,monospace;font-size:12px;color:var(--ink-soft)}
  .wlist{
		display:flex;
		flex-wrap:wrap;

		gap:
			var(--wgapy,4px)
			var(--wgapx,6px);
	}

	.wlist span{

		font-size:var(--chip,13px);

		font-family:ui-monospace,monospace;

		font-weight:700;

		letter-spacing:.04em;

		padding:
			var(--wpady,4px)
			var(--wpadx,10px);

		border-radius:8px;

		border:1px solid var(--line);

		background:var(--card,#fffdf6);

		color:var(--ink);

	}
  .wlist span.found{text-decoration:line-through;opacity:.4;border-style:dashed}
  .note{margin-top:14px;font-size:12px;color:var(--ink-soft);line-height:1.55}
  .err{color:var(--stamp);font-weight:600}
  .checkrow{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer;font-size:13px}
  .checkrow input{width:auto}
  .checkrow.dim{opacity:.5;cursor:default}
  .tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
  .tabs button{appearance:none;cursor:pointer;font-family:ui-monospace,monospace;font-weight:700;font-size:13px;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:#fffdf6;color:var(--ink-soft);transition:.12s}
  .tabs button:hover{border-color:var(--ink)}
  .tabs button.active{background:var(--ink);color:#fbf8f1;border-color:var(--ink)}
  .source-line{font-family:ui-monospace,monospace;font-size:12px;color:var(--ink-soft);text-align:center;margin:-4px 0 12px;word-break:break-all}
  .source-line b{color:var(--accent);font-weight:700}
  .source-line a{color:var(--accent)}
  .checkrow.dim input{cursor:default}
  .btn:disabled{opacity:.45;cursor:default;box-shadow:none}
  .btn:disabled:hover{box-shadow:none}
  #reveal{min-width:122px;text-align:center}
  #showWords{min-width:140px;text-align:center}
  #copyImg{min-width:124px;text-align:center}
  #copyImg.copied{background:var(--accent);border-color:var(--accent);color:#fbf8f1}
  #copyImg.copyfail{background:var(--stamp);border-color:var(--stamp);color:#fbf8f1}
  @media(max-width:560px){
    .words{margin-top:14px;padding-top:10px}
    .play-hint{margin:0 0 8px}
    .btnrow{margin-top:12px}
    .stage{margin-top:4px}
  }
  @keyframes hintfade{0%{opacity:0}12%{opacity:.55}65%{opacity:.5}100%{opacity:0}}
  .hintfade{animation:hintfade 2.5s ease-out forwards}
  @keyframes chipfade{0%{background:#fffdf6}12%,65%{background:#fff2cf;border-color:var(--stamp);color:var(--stamp)}100%{background:#fffdf6;border-color:var(--line)}}
  .wlist span.hinting{animation:chipfade 2.5s ease-out forwards}
  .tabtheme{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
  .tabtheme select{width:auto;flex:1;min-width:160px}
  .tabtheme .lab{margin:0;white-space:nowrap}
  canvas{display:none}

/* grouped settings sections + collapsible advanced */
.sect{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin:20px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.sect:first-of-type{border-top:0;padding-top:2px;margin-top:4px}
details.adv{margin:6px 0 2px}
details.adv>summary{font-size:12.5px;font-weight:700;color:var(--accent);cursor:pointer;list-style:none;padding:4px 0}
details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::before{content:"\25B8 ";color:var(--ink-soft)}
details.adv[open]>summary::before{content:"\25BE "}

/* compact settings panel */
.setp{padding:18px}
.setp h2{margin-bottom:2px}
.setp .field{margin-top:11px}
.setp .sect{margin:14px 0 7px;padding-top:10px}
.setp .sect:first-of-type{margin-top:2px;padding-top:0}
.setp label.lab{margin-bottom:4px;font-size:12.5px}
.setp input[type=text],.setp textarea,.setp select{font-size:13.5px;padding:8px 10px;border-radius:8px}
.setp textarea{min-height:52px;line-height:1.45}
.setp .meta{font-size:11.5px}
.setp .checkrow{font-size:12.5px}

/* ============ DARK THEME ============ */
html.dark{
  --paper:#1b1712; --paper-2:#241f18; --ink:#ece4d6; --ink-soft:#9c907d;
  --line:#3b342b; --stamp:#e26a4f; --stamp-soft:#3a221b; --accent:#3fb3a4;
  --shadow:0 1px 0 #ffffff0a, 0 18px 40px -22px #000000a0;
}
html.dark body{background:radial-gradient(120% 80% at 50% -10%, #221d16 0%, #14110d 55%, #0d0b08 100%) fixed}
html.dark .panel{background:linear-gradient(180deg,#221d16,#191510)}
html.dark input[type=text],html.dark textarea,html.dark select{background:#15120e;color:var(--ink)}
html.dark .cell{background:#241f18}
html.dark .wlist span,html.dark .tabs button{background:#221d16}
html.dark .gen-app .pcard .words .wlist span{background:#221d16}
html.dark .btn{color:#14110d}
html.dark .btn.primary{color:#fbf8f1}
html.dark .btn.ghost{color:var(--ink-soft)}
html.dark .btn.ghost:hover{color:var(--ink)}
html.dark .btn.outline{color:var(--ink)}
html.dark .tabs button.active{color:#14110d}
html.dark #copyImg.copied,html.dark #copyImg.copyfail{color:#14110d}
html.dark .cell .ord{background:#ece4d6;color:#14110d;border-color:rgba(0,0,0,.45)}
html.dark .adsearch{background:#15120e;color:var(--ink)}
html.dark .auser.sel{background:#1f2a26;border-color:#2f4a43}
html.dark .aav{background:#1f2a26;color:#7fd3c4}
html.dark .pill.steam,html.dark .pill.link{background:#16241f}
html.dark .pill.image{background:#241d12}
html.dark .pill.ended{background:#2a1a15}
/* theme toggle bulb */
.masthead{position:relative}
.theme-bulb{position:absolute;top:14px;right:14px;z-index:60;appearance:none;border:1px solid var(--line);background:var(--paper);color:#ffb300;width:36px;height:36px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow);filter:drop-shadow(0 0 4px rgba(255,193,7,.95)) drop-shadow(0 0 11px rgba(255,179,0,.6))}
.theme-bulb:hover{border-color:var(--accent)}
html.dark .theme-bulb{color:var(--ink-soft);filter:none}

/* ===== main page: sticky build zone + scrollable settings ===== */
.setp{padding:0;display:flex;flex-direction:column;overflow:hidden;position:sticky;top:14px;max-height:calc(100vh - 28px)}
.setp .buildzone{flex:0 0 auto;padding:18px 18px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbf8f1,#f7f1e6)}
html.dark .setp .buildzone{background:linear-gradient(180deg,#241f17,#1d1812)}
.setp .buildzone h2{margin:0 0 10px}
.setp .buildzone .meta{margin-top:8px}
.setp .buildbtns{margin-top:10px;display:flex;gap:8px}
.setp .scrollarea{flex:1 1 auto;overflow-y:auto;padding:6px 18px 20px;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent)}
.setp .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.setp .grid2 .field{margin-top:11px}
.setp .opts{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.seg{display:flex;gap:6px}
.seg button{flex:1;appearance:none;font-family:inherit;font-weight:600;font-size:12.5px;height:32px;padding:0 6px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;transition:.12s}
.seg button:hover{background:var(--paper-2);color:var(--ink)}
.seg button:active{transform:translateY(1px)}
.seg button.on{border-color:var(--accent);color:var(--accent);background:var(--paper-2)}
@media(max-width:760px){
  .setp{position:static;max-height:none;overflow:visible}
  .setp .scrollarea{overflow:visible;mask-image:none}
}

/* ===== unified ghost / outline buttons (v0 look) ===== */
.btn.ghost,.btn.outline{font-size:13px;font-weight:500;letter-spacing:0;height:34px;padding:0 12px;border-radius:8px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-soft)}
.btn.ghost:hover{background:var(--paper-2);color:var(--ink);box-shadow:none}
.btn.outline{border-color:var(--line);background:var(--paper);color:var(--ink)}
.btn.outline:hover{border-color:var(--accent);box-shadow:none}
.btn.ghost:active,.btn.outline:active{transform:translateY(1px);box-shadow:none}
.btn.ic{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.ic::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.btnrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.btnrow .btn#reveal{min-width:126px}
.btnrow .btn#copyImg{min-width:124px}
.btnrow .vr{width:1px;align-self:stretch;min-height:22px;background:var(--line);margin:2px 5px}
.i-dice{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20width%3D%2712%27%20height%3D%2712%27%20x%3D%276%27%20y%3D%276%27%20rx%3D%272%27/%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%279.5%27%20r%3D%271.1%27%20fill%3D%27black%27%20stroke%3D%27none%27/%3E%3Ccircle%20cx%3D%2714.5%27%20cy%3D%2714.5%27%20r%3D%271.1%27%20fill%3D%27black%27%20stroke%3D%27none%27/%3E%3C/svg%3E")}
.i-eye{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%2012s3.5-6%2010-6%2010%206%2010%206-3.5%206-10%206S2%2012%202%2012Z%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27/%3E%3C/svg%3E")}
.i-bulb{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2018h6%27/%3E%3Cpath%20d%3D%27M10%2022h4%27/%3E%3Cpath%20d%3D%27M15%2014c.2-1%20.7-1.8%201.4-2.5A4.6%204.6%200%200%200%2018%208%206%206%200%200%200%206%208c0%201%20.2%202.2%201.5%203.5.7.7%201.2%201.5%201.4%202.5%27/%3E%3C/svg%3E")}
.i-list{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m3%2017%202%202%204-4%27/%3E%3Cpath%20d%3D%27m3%207%202%202%204-4%27/%3E%3Cpath%20d%3D%27M13%206h8%27/%3E%3Cpath%20d%3D%27M13%2012h8%27/%3E%3Cpath%20d%3D%27M13%2018h8%27/%3E%3C/svg%3E")}
.i-rot{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2012a9%209%200%201%200%203-6.7L3%208%27/%3E%3Cpath%20d%3D%27M3%203v5h5%27/%3E%3C/svg%3E")}
.i-shuffle{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m18%2014%204%204-4%204%27/%3E%3Cpath%20d%3D%27m18%202%204%204-4%204%27/%3E%3Cpath%20d%3D%27M2%2018h2c.9%200%201.8-.4%202.4-1.1L13%208%27/%3E%3Cpath%20d%3D%27M2%206h2c.9%200%201.8.4%202.4%201.1L21%2018%27/%3E%3Cpath%20d%3D%27M22%2018h-3%27/%3E%3Cpath%20d%3D%27M22%206h-3%27/%3E%3C/svg%3E")}
.i-img{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20width%3D%2718%27%20height%3D%2718%27%20x%3D%273%27%20y%3D%273%27%20rx%3D%272%27/%3E%3Ccircle%20cx%3D%279%27%20cy%3D%279%27%20r%3D%272%27/%3E%3Cpath%20d%3D%27m21%2015-3.1-3.1a2%202%200%200%200-2.8%200L6%2021%27/%3E%3C/svg%3E")}
.i-copy{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20width%3D%2714%27%20height%3D%2714%27%20x%3D%278%27%20y%3D%278%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M4%2016c-1.1%200-2-.9-2-2V4c0-1.1.9-2%202-2h10c1.1%200%202%20.9%202%202%27/%3E%3C/svg%3E")}
.i-link{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10%2013a5%205%200%200%200%207%200l3-3a5%205%200%200%200-7-7l-1.5%201.5%27/%3E%3Cpath%20d%3D%27M14%2011a5%205%200%200%200-7%200l-3%203a5%205%200%200%200%207%207l1.5-1.5%27/%3E%3C/svg%3E")}

.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
#batchBtn.on{color:var(--accent);border-color:var(--accent)}

/* focus: no rectangular ring on click; rounded ring on keyboard only */
.btn:focus,.seg button:focus,.melink:focus,.mecode:focus,.mecopy:focus,.meend:focus,.adel:focus,.audel:focus,.metab:focus,.adtab:focus,.wipebtn:focus,.adtg button:focus{outline:none}
.btn:focus-visible,.seg button:focus-visible,.melink:focus-visible,.mecode:focus-visible,.mecopy:focus-visible,.meend:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* site credit footer (every page) */
.site-credit{margin:0 auto;padding:20px 0 6px;text-align:center;font-size:12px;color:var(--ink-soft);font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.02em}
.site-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.site-credit a:hover{color:var(--accent)}

/* settings scrollbar: thin + inset so it blends into the panel */
.setp .scrollarea{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.setp .scrollarea::-webkit-scrollbar{width:11px}
.setp .scrollarea::-webkit-scrollbar-track{background:transparent}
.setp .scrollarea::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.setp .scrollarea::-webkit-scrollbar-thumb:hover{background:var(--ink-soft);background-clip:padding-box}
html.dark .setp .scrollarea{scrollbar-color:var(--line) transparent}

/* app shell: pin the credit footer to the bottom so it never floats mid-page */
body{min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column}
.site-credit{margin-top:auto;flex:0 0 auto}
/* list pages: same subtle, inset scrollbar as the settings panel */
.melist,.adlist{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.melist::-webkit-scrollbar,.adlist::-webkit-scrollbar{width:11px}
.melist::-webkit-scrollbar-track,.adlist::-webkit-scrollbar-track{background:transparent}
.melist::-webkit-scrollbar-thumb,.adlist::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.melist::-webkit-scrollbar-thumb:hover,.adlist::-webkit-scrollbar-thumb:hover{background:var(--ink-soft);background-clip:padding-box}

/* ===== fixed full-height shell (me + admin): the PAGE doesn't scroll, the LIST does ===== */
body.app-fixed{height:100vh;overflow:hidden}
body.app-fixed .wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:100%}
body.app-fixed .masthead,body.app-fixed .metabs,body.app-fixed #gate,body.app-fixed .anote,body.app-fixed .adbar,body.app-fixed .me-danger{flex:0 0 auto}
body.app-fixed .site-credit{margin:0}
/* me: the visible pane's list is the scroller */
body.app-fixed #pane-created,body.app-fixed #pane-solved{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.app-fixed #pane-created>.melist,body.app-fixed #pane-solved>.melist{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px}
body.app-fixed .me-danger{margin:14px 0 2px}
/* admin */
body.app-fixed #panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.app-fixed #pane-puzzles,body.app-fixed #pane-users{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.app-fixed #pane-puzzles>.adsearch{flex:0 0 auto}
body.app-fixed #pane-puzzles>.adlist{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px}
body.app-fixed #pane-users>.ad-cols{flex:1 1 auto;min-height:0}
body.app-fixed #pane-users .ad-cols>div{min-height:0;display:flex;flex-direction:column}
body.app-fixed #pane-users .adlist{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px}
body.app-fixed #pane-users .adprofile{min-height:0;overflow-y:auto}

/* =========================================================================
   GENERATOR RAIL LAYOUT (scoped to body.gen-app; reuses body.app-fixed shell)
   ========================================================================= */
/* =========================================================================
   GENERATOR RAIL LAYOUT (NEW DESKTOP LAYOUT)
   ========================================================================= */

.gen-app .shell{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    gap:16px;
    align-items:stretch;
}

.gen-app .shell > .setp{
    flex:0 0 340px;
    min-width:0;
}

.gen-app .shell > .pcard{
    flex:1 1 auto;
    min-width:0;
}

.gen-app .card{
    background:linear-gradient(180deg,#fbf8f1,#f1ebde);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:18px;
    display:flex;
    flex-direction:column;
    min-height:0;
}

html.dark .gen-app .card{
    background:linear-gradient(180deg,#211d17,#1b1813);
}

/* ---------- SETTINGS ---------- */

.gen-app .setp{
    max-height:none;
}

.gen-app .setp .buildzone{
    flex:0 0 auto;
}

.gen-app .setp .scrollarea{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding-right:6px;
    scrollbar-width:thin;
    scrollbar-color:var(--line) transparent;
}

.gen-app .setp .scrollarea::-webkit-scrollbar{
    width:11px;
}

.gen-app .setp .scrollarea::-webkit-scrollbar-track{
    background:transparent;
}

.gen-app .setp .scrollarea::-webkit-scrollbar-thumb{
    background:var(--line);
    border-radius:8px;
    border:3px solid transparent;
    background-clip:padding-box;
}

/* ---------- MAIN ---------- */

.gen-app .pcard > .pmain{
    flex:1 1 auto;
    min-height:0;
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        clamp(210px,28%,380px);

    column-gap:20px;

    align-items:stretch;
}

/* ---------- LEFT COLUMN ---------- */

.gen-app .pcard .pcard-left{

    min-width:0;
    min-height:0;

    display:flex;
    flex-direction:column;
}

.gen-app .pcard .pcard-header{

    flex:0 0 auto;

    margin-bottom:12px;
}

.gen-app .pcard .pcard-header h2{

    margin:0 0 2px;
}

.gen-app .pcard .pcard-header .area-caption{

    display:block !important;

    height:1.45em;

    font-size:13px;

    line-height:1.45;

    color:var(--ink-soft);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.gen-app .pcard .gridwrap{

    flex:1 1 auto;
    min-height:0;


    min-width:0;
    min-height:0;

    display:grid;

    grid-template-rows:
        minmax(0,1fr)
        18px
        60px;

    row-gap:8px;

    overflow:hidden;
}

/* GRID */

.gen-app .pcard .stage{

    min-width:0;
    min-height:0;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.gen-app .pcard .board{

    margin:auto;

    max-width:100%;
    max-height:100%;
}

/* READOUT */

.gen-app .pcard .readout{

    height:60px;

    margin:0;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;

    text-align:center;
}

.gen-app .pcard .readout .muted{
    display:none;
}

.gen-app .pcard .readout .codes{

    width:100%;

    max-width:100%;

    justify-content:center;

    margin:0;
}

.gen-app .pcard .readout .grp{

    word-break:break-word;

    overflow-wrap:anywhere;
}

/* ---------- RIGHT COLUMN ---------- */

.gen-app .pcard .words{

    margin:0;

    padding:0 0 0 20px;

    border-top:0;

    border-left:1px solid var(--line);

    min-width:0;
    min-height:0;

    display:flex;
    flex-direction:column;
}

.gen-app .pcard .words .whead{

    flex:0 0 auto;

    margin-bottom:8px;
}

.gen-app .pcard .words .area-caption{

    flex:0 0 auto;

    font-size:12px;

    line-height:1.45;

    color:var(--ink-soft);

    margin:0 0 8px;

    white-space:pre-line;
}

/* Caption in left col (gridwrap) */
.gen-app .pcard .gridwrap .area-caption{

    min-height:0;

    font-size:12px;

    line-height:1.4;

    color:var(--ink-soft);

    white-space:pre-line;

    overflow:hidden;
}

.gen-app .pcard .words h3{

    margin:0;

    font-size:12px;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--ink-soft);
}

.gen-app .pcard .words .prog{

    white-space:nowrap;
}

.gen-app .pcard .words .wlist{

    flex:1 1 auto;

    min-height:0;

    display:flex;

    flex-wrap:wrap;

    align-content:flex-start;

    gap:8px;

    overflow:hidden;
}

.gen-app .pcard .words .wlist span{

    font-size:var(--chip,13px);

    font-family:ui-monospace,monospace;

    font-weight:700;

    letter-spacing:.04em;

    padding:4px 10px;

    border-radius:8px;

    border:1px solid var(--line);

    background:var(--card,#fffdf6);

    color:var(--ink);
}
/* ---------- TOOLBAR ---------- */

.gen-app .pcard .toolbar{

    flex:0 0 auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    margin-top:16px;

    padding-top:14px;

    border-top:1px solid var(--line);

    flex-wrap:wrap;
}

.gen-app .toolbar .tgroup{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;
}

/* ---------- EXPORT ---------- */

.gen-app .export{

    position:relative;

    display:inline-flex;
}

.gen-app .splitmain{

    display:inline-flex;

    align-items:center;

    gap:7px;

    border:1px solid var(--ink);

    border-right:0;

    background:var(--ink);

    color:#fbf8f1;

    font:inherit;

    font-size:12px;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

    padding:9px 13px;

    border-radius:9px 0 0 9px;

    cursor:pointer;

    white-space:nowrap;
}

.gen-app .splitcaret{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--ink);

    background:var(--ink);

    color:#fbf8f1;

    padding:9px 10px;

    border-radius:0 9px 9px 0;

    cursor:pointer;

    font-size:11px;

    line-height:1;
}

.gen-app .splitmain:hover,
.gen-app .splitcaret:hover{

    box-shadow:0 8px 18px -10px #1c2433aa;
}

html.dark .gen-app .splitmain,
html.dark .gen-app .splitcaret{

    color:#14110d;
}

.gen-app .exmenu{

    position:absolute;

    right:0;

    bottom:calc(100% + 8px);

    min-width:190px;

    display:flex;

    flex-direction:column;

    gap:2px;

    padding:6px;

    border:1px solid var(--line);

    border-radius:10px;

    background:linear-gradient(180deg,#fbf8f1,#f1ebde);

    box-shadow:var(--shadow);

    z-index:50;
}

html.dark .gen-app .exmenu{

    background:linear-gradient(180deg,#211d17,#1b1813);
}

.gen-app .exmenu[hidden]{

    display:none;
}

.gen-app .exmenu button{

    appearance:none;

    border:0;

    background:transparent;

    border-radius:7px;

    padding:9px 10px;

    text-align:left;

    font:inherit;

    font-size:13px;

    font-weight:600;

    color:var(--ink);

    cursor:pointer;
}

.gen-app .exmenu button:hover{

    background:#1c243314;
}

.gen-app .exmenu button.on{

    color:var(--accent);
}

.gen-app .exmenu [data-multi]{

    display:none;
}

.gen-app .export.multi .exmenu [data-multi]{

    display:block;
}

/* ---------- DESKTOP WORD PANEL ---------- */

.gen-app .pcard .words .wlist{

    justify-content:flex-start;

    align-items:flex-start;

    align-content:flex-start;
}

.gen-app .pcard .words .wlist span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    white-space:nowrap;

    max-width:100%;
}

/* ---------- DESKTOP GRID ---------- */

.gen-app .pcard .gridwrap>.stage{

    width:100%;

    height:100%;
}

.gen-app .pcard .stage>.board{

    flex:0 0 auto;
}

.gen-app .pcard .play-hint{

    display:block;
    margin:0;
    height:18px;
    line-height:18px;
    text-align:center;
    font-size:11px;
    color:var(--ink-soft);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ==========================================================================
   GENERATOR MOBILE LAYOUT
   ========================================================================== */

@media (max-width:860px){

    body.gen-app.app-fixed{
        height:auto;
        overflow:auto;
    }

    .gen-app .wrap{
        min-height:0;
    }

    .gen-app .shell{
        display:flex;
        flex-direction:column;
        gap:16px;
        min-height:0;
    }

    .gen-app .shell>.setp,
    .gen-app .shell>.pcard{
        flex:none;
        width:100%;
    }

    .gen-app .card{
        min-height:auto;
    }

    .gen-app .setp .scrollarea{
        overflow:visible;
        min-height:0;
        padding-right:0;
    }

    /* stack puzzle vertically on phones */

    .gen-app .pcard>.pmain{
        display:flex;
        flex-direction:column;
        gap:16px;
        min-height:0;
    }

    .gen-app .pcard .pcard-left{
        display:contents;
    }

    .gen-app .pcard .gridwrap{

        display:grid;

        grid-template-rows:
            minmax(0,1fr)
            18px
            60px;

        row-gap:8px;

        padding:0;

        overflow:hidden;
    }

    .gen-app .pcard .play-hint{

        display:block;
    }

    .gen-app .pcard .stage{

        min-height:260px;

        overflow:auto;

        justify-content:center;

        align-items:center;
    }

    .gen-app .pcard .board{

        margin:auto;

        max-width:100%;

        max-height:none;
    }

    .gen-app .pcard .readout{

        position:static;

        height:60px;

        margin:0;
    }

    .gen-app .pcard .readout .codes{

        max-width:100%;
    }

    .gen-app .pcard .words{

        border-left:0;

        border-top:1px solid var(--line);

        padding-left:0;

        padding-top:16px;

        min-height:auto;
    }

    .gen-app .pcard .words .whead{

        display:flex;

        justify-content:space-between;

        align-items:center;

        margin-bottom:10px;
    }

    .gen-app .pcard .words .whead-mobile{

        display:none;
    }

    .gen-app .pcard .words .wlist{

        overflow:visible;

        gap:6px;

        align-content:flex-start;
    }

    .gen-app .toolbar{

        justify-content:center;
    }

    .gen-app .toolbar .tgroup{

        justify-content:center;
    }

    .gen-app .export{

        position:static;
    }

    .gen-app .exmenu{

        position:static;

        margin-top:8px;

        min-width:0;
    }

    .gen-app .masthead{

        flex-wrap:wrap;

        gap:12px;
    }

    .gen-app .title{

        font-size:clamp(20px,5vw,34px);
    }

    .gen-app .tag{

        display:none;
    }
}

/* ---------- PLAYER: stretch puzzle panel to footer (words stay below); info panel natural ---------- */
body.play-app .grid-2{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)}
body.play-app .grid-2>.playmain{align-self:stretch;min-height:0;display:flex;flex-direction:column}
body.play-app .grid-2>.panel:not(.playmain){align-self:start}
body.play-app .playmain>.stage{flex:1 1 auto;min-height:0}
body.play-app .playmain>.sheet{flex:0 0 auto;min-height:0}
@media(max-width:760px),(max-height:639.98px){
  body.play-app{height:auto;overflow:visible}
  body.play-app .wrap{display:block}
  body.play-app .grid-2{display:block}
  body.play-app .grid-2>.playmain{display:block}
  body.play-app .playmain>.stage{min-height:240px}
}

/* clickable revealed codes (giveaway links) */
.codebig .codelink{color:var(--accent);text-decoration:underline;white-space:nowrap}
.codebig .codelink:hover{opacity:.8}