/* Create page. Colours, fonts, buttons and dark mode come from ../styles.css. */

/* unlike the game, this page may need to scroll (even as a home-screen app) */
html body.create{position:static !important; overflow:visible !important;
  justify-content:flex-start; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));}

.create-head{text-align:center; margin-bottom:12px;}
#stepLetters .next{margin-top:10px;}
#stepLetters .cactions{margin-top:10px;}
#stepLetters .issues{margin-top:8px;}
.head-row{display:flex; justify-content:space-between; align-items:center; width:100%; max-width:360px;
  margin:0 auto 6px;}
.my-btn{border:0; background:transparent; padding:0; font-family:inherit; cursor:pointer; color:var(--accent);
  touch-action:manipulation;}
.my-btn[hidden]{display:none;}
.back-link{display:inline-block; font-size:13px; font-weight:700;
  color:var(--ink-soft); text-decoration:none;}
.back-link:hover{color:var(--accent);}
.create-head h1{font-size:clamp(26px, 6.5vw, 36px);}
.steps{list-style:none; display:flex; justify-content:center; gap:6px; margin:10px 0 0; padding:0;
  font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--ink-soft);}
.steps li{padding:4px 10px; border-radius:999px; background:var(--track);}
.steps li.on{background:var(--accent); color:#fff;}
.steps li.done{color:var(--ink);}

.step{width:100%; max-width:360px; display:flex; flex-direction:column; align-items:center;}
.step[hidden]{display:none;}
.step-hint{margin:6px 0 14px; font-size:13.5px; line-height:1.45; color:var(--ink-soft); text-align:center;}

/* the 4×4: tiles on the board's well, with gaps that hold the piece joints */
.cgrid{position:relative; display:grid; grid-template-columns:repeat(4, var(--cell));
  grid-auto-rows:var(--cell); gap:var(--gap); padding:12px; border-radius:18px;
  background:var(--well); box-shadow:inset 0 2px 6px rgba(25,40,55,.16);
  --cell:min(64px, calc((100vw - 92px) / 4)); --gap:10px;}
#letterGrid{--cell:min(60px, calc((100vw - 92px) / 4), calc((100svh - 452px) / 4)); --gap:8px; padding:10px;}
.ccell{position:relative; width:100%; height:100%; box-sizing:border-box; border-radius:12px;
  background:var(--tile); box-shadow:inset 0 0 0 1.25px var(--tile-line);
  font:inherit; font-family:'Archivo', sans-serif; font-weight:800; font-size:calc(var(--cell) * .46);
  color:var(--ink); text-align:center; text-transform:uppercase; padding:0; border:0;
  caret-color:var(--accent); outline:none; touch-action:manipulation;}
/* letters step: plain tiles (no text editing), a cursor and its line like a crossword app */
#letterGrid .ccell{display:flex; align-items:center; justify-content:center; cursor:pointer;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;}
#letterGrid .ccell.inline{background:var(--accent-soft);}
#letterGrid .ccell.cur{box-shadow:inset 0 0 0 3px var(--accent);}
#letterGrid .ccell.filled{color:var(--ink-soft);}       /* letters Fill in chose */
#letterGrid .ccell.bad{box-shadow:inset 0 0 0 2.5px var(--bad);}
#letterGrid .ccell.warn{box-shadow:inset 0 0 0 2.5px #D69E2E;}
#letterGrid .ccell.bad.cur{box-shadow:inset 0 0 0 3px var(--accent), 0 0 0 2.5px var(--bad);}

/* line marks: ✓ / ✗ at the end of each row and the foot of each column */
.lmark{position:absolute; width:18px; height:18px; border-radius:50%; font-size:11px; font-weight:900;
  display:flex; align-items:center; justify-content:center; line-height:1; pointer-events:none;}
.lmark[hidden]{display:none;}
.lmark.ok{background:var(--good); color:#fff;}
.lmark.bad{background:var(--bad); color:#fff;}
.lmark.warn{background:#D69E2E; color:#fff;}

.issues{list-style:none; margin:12px 0 0; padding:0; min-height:20px; font-size:13px; font-weight:700;
  color:var(--bad); text-align:center; line-height:1.5;}
.issues li.info{color:var(--ink-soft);}
.issues li.good{color:var(--good);}
.issues li.warn{color:#B7791F;}
html.dark .issues li.warn{color:#E5B85A;}

.cactions{display:flex; gap:10px; margin-top:14px; justify-content:center; flex-wrap:wrap;}
.cactions.col{flex-direction:column; width:100%; max-width:300px;}
.cactions.col .btn{width:100%; box-sizing:border-box; text-align:center; text-decoration:none;}
.next{margin-top:14px; width:100%; max-width:300px;}
.btn:disabled{opacity:.4; cursor:default;}

/* pieces step: tiles take their piece's colour; joints sit in the gaps */
.cgrid.pieces .ccell{display:flex; align-items:center; justify-content:center; cursor:pointer;
  user-select:none; -webkit-user-select:none;}
.cgrid.pieces .ccell.sel{box-shadow:inset 0 0 0 3px var(--accent);}
.joint{position:absolute; z-index:2; padding:0; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; touch-action:manipulation;}
.joint::after{content:''; width:8px; height:8px; border-radius:50%; background:var(--tile-line); opacity:.8;}
.joint:hover::after{background:var(--accent); opacity:1;}
.joint.on::after{display:none;}
.bridge{position:absolute; z-index:1; pointer-events:none;}
.piece-info{margin:12px 0 0; font-size:13.5px; font-weight:700; text-align:center; line-height:1.5;
  color:var(--ink-soft);}
.piece-info .good{color:var(--good);}
.piece-info .warn{color:#B7791F;}
html.dark .piece-info .warn{color:#E5B85A;}

/* share step */
.share-link{width:100%; max-width:300px;}
.share-link input{width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px;
  border:1px solid var(--tile-line); background:var(--surface); color:var(--ink);
  font:inherit; font-size:13px;}
.share-note{min-height:18px; margin:10px 0 0; font-size:13px; font-weight:700; color:var(--good);}

.btn.small{padding:9px 14px; font-size:14px;}
.btn.small:disabled{opacity:.4;}

/* Wordle-style letter keyboard */
.keyboard{width:100%; max-width:500px; margin-top:12px; display:flex; flex-direction:column; gap:6px;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}
.krow{display:flex; justify-content:center; gap:5px;}
.key{flex:1 1 0; max-width:42px; height:44px; padding:0; border:0; border-radius:7px;
  background:var(--track-2); color:var(--ink); font:inherit; font-family:'Archivo', sans-serif;
  font-size:16px; font-weight:800; cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;}
.key.wide{flex:1.6 1 0; max-width:66px; font-size:18px;}
.key.pressed{background:var(--accent-soft);}

/* My puzzles */
.mine-title{font-size:22px; margin:4px 0 6px;}
.mine-list{list-style:none; margin:4px 0 0; padding:0; width:100%;}
.mine-list li{display:flex; gap:12px; align-items:center; padding:10px 4px;
  border-bottom:1px solid var(--divider);}
.mini{display:grid; grid-template-columns:repeat(4, 15px); grid-auto-rows:15px; gap:1px; padding:3px;
  border-radius:6px; background:var(--well); flex:none;}
.mini span{border-radius:3px; font:800 9px/15px 'Archivo', sans-serif; text-align:center; color:var(--ink);}
.mine-body{flex:1; min-width:0;}
.mine-meta{font-size:13.5px; font-weight:700; color:var(--ink);}
.mine-meta b{color:var(--accent);}
.mine-sub{font-size:12.5px; color:var(--ink-soft); margin-top:1px;}
.mine-acts{display:flex; gap:14px; margin-top:5px; flex-wrap:wrap;}
.mlink{border:0; background:transparent; padding:2px 0; font:inherit; font-size:13.5px; font-weight:800;
  color:var(--accent); text-decoration:none; cursor:pointer; touch-action:manipulation;}
.mlink.del{color:var(--ink-soft);}
.mlink.del[data-armed]{color:var(--bad);}
.mine-note{color:var(--ink-soft); font-weight:600; font-size:12px; text-align:center;}

/* difficulty stars, the same scale as the daily puzzles (gold is kept for Grid Check) */
.diff{color:var(--ink);}
.diff small{font-size:12px; color:var(--ink-soft); font-weight:700;}
.stars{color:var(--accent); letter-spacing:1px;}
.stars .off{color:var(--track-2);}
.share-diff{margin:0 0 12px;}

/* Export all / import */
.export-btn{display:block; margin:14px auto 0;}
.export-btn[hidden], .import-box[hidden]{display:none;}
.import-box{width:100%; box-sizing:border-box; margin:6px 0 4px; padding:12px; border-radius:12px;
  background:var(--accent-soft); text-align:center; font-size:14px; font-weight:700; color:var(--ink);}
.import-box p{margin:0;}
.import-box .cactions{margin-top:10px;}

/* title and note on the Share step (16px text, or iOS zooms in on focus) */
.share-fields{width:100%; max-width:300px; display:flex; flex-direction:column; gap:10px; margin-bottom:12px;}
.share-fields label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:800; color:var(--ink);}
.share-fields .fl span{font-weight:600; color:var(--ink-soft);}
.share-fields input, .share-fields textarea{width:100%; box-sizing:border-box; padding:9px 11px; border-radius:10px;
  border:1px solid var(--tile-line); background:var(--surface); color:var(--ink); font:inherit; font-size:16px;
  font-weight:500; resize:none;}
.share-fields input:focus, .share-fields textarea:focus{outline:none; border-color:var(--accent);}
.mine-name{color:var(--ink); font-weight:800;}

/* "How is difficulty worked out?" fold-out */
.diff-detail{width:100%; max-width:330px; margin-top:8px; font-size:13px; line-height:1.5; color:var(--ink-soft);}
.diff-detail summary{cursor:pointer; text-align:center; font-weight:800; color:var(--accent);
  list-style:none; touch-action:manipulation;}
.diff-detail summary::-webkit-details-marker{display:none;}
.diff-detail summary::after{content:' ▾';}
.diff-detail[open] summary::after{content:' ▴';}
.diff-detail #diffBody{margin-top:8px; padding:12px 14px; border-radius:12px; background:var(--surface);
  border:1px solid var(--tile-line);}
.diff-detail p{margin:0 0 8px;}
.diff-detail b{color:var(--ink);}
.diff-detail h4{margin:10px 0 2px; font-size:13px; color:var(--ink);}
.dd-sum{margin-bottom:4px !important;}
.dd-lines{display:grid; grid-template-columns:repeat(4, auto auto); gap:2px 8px; justify-content:start;
  margin:0 0 8px; font-variant-numeric:tabular-nums;}
.dd-lines b{text-align:right; padding-right:6px;}

/* Start step: the game's 6×6 board, the middle 4×4 marked */
.sboard{position:relative; width:min(360px, calc(100vw - 32px)); aspect-ratio:1; border-radius:18px;
  background:var(--well); box-shadow:inset 0 2px 6px rgba(25,40,55,.16); touch-action:none;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}
.sboard .sq{position:absolute; border-radius:9px; background:rgba(255,255,255,.18);}
.sboard .sq.zone{background:rgba(255,255,255,.55);}
html.dark .sboard .sq{background:rgba(255,255,255,.03);}
html.dark .sboard .sq.zone{background:rgba(255,255,255,.09);}
.sboard.off .sq{opacity:.6;}
.sboard-go{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap;}
.spiece{position:absolute; z-index:2; touch-action:none;}
.spiece.lift{z-index:5; filter:brightness(1.04); transition:none;}
.spiece.sel .stile{box-shadow:inset 0 0 0 3px var(--accent) !important;}
.stile{position:absolute; z-index:1; box-sizing:border-box; border-radius:10px; display:flex;
  align-items:center; justify-content:center; font-family:'Archivo', sans-serif; font-weight:800;
  color:var(--ink); box-shadow:inset 0 0 0 1.25px var(--tile-line); cursor:grab;}
.sbridge{position:absolute; z-index:0; pointer-events:none;}
#stepStart .btn[hidden]{display:none;}

/* Colors fold-out: swatches; while open, tiles are paintable (no joints) */
.color-body{margin-top:8px; padding:12px 14px; border-radius:12px; background:var(--surface);
  border:1px solid var(--tile-line); text-align:center;}
.color-body p{margin:0 0 10px;}
.swatches{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:8px;}
.swatch{width:32px; height:32px; border-radius:9px; border:0; padding:0; cursor:pointer;
  box-shadow:inset 0 0 0 1.25px var(--tile-line); touch-action:manipulation;}
.swatch.auto{width:auto; padding:0 10px; background:transparent; font:inherit; font-size:12px;
  font-weight:800; color:var(--ink-soft);}
.swatch.on{box-shadow:inset 0 0 0 1.25px var(--tile-line), 0 0 0 2.5px var(--surface), 0 0 0 4.5px var(--accent);}
.cgrid.pieces.painting .joint{display:none;}
.cgrid.pieces.painting .ccell{cursor:copy;}
.piece-info .bad{color:var(--bad);}

/* Start step: the game itself, arranging (sized to its content by its messages) */
.arrange-frame{width:calc(100% + 28px); max-width:420px; margin:0 -14px; height:480px; border:0;
  display:block; background:transparent;}

/* Calendar (admin) */
.cal-detail[hidden]{display:none;}
.cal-body{margin-top:8px; padding:12px 14px; border-radius:12px; background:var(--surface);
  border:1px solid var(--tile-line); text-align:left;}
.cal-body p{margin:0 0 8px;}
.cal-date{display:flex; align-items:center; gap:8px; font-weight:800; color:var(--ink); margin-bottom:8px;}
.cal-date input{font:inherit; font-size:16px; padding:6px 8px; border-radius:8px; border:1px solid var(--tile-line);
  background:var(--surface); color:var(--ink);}
.cal-status .warn{color:#B7791F;} html.dark .cal-status .warn{color:#E5B85A;}
.cal-body .bad{color:var(--bad);}
.cal-steps{margin-top:8px !important;}
.cal-steps code{font-size:12px;}
.cal-body h4{margin:12px 0 4px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.cal-list{list-style:none; margin:0; padding:0; font-size:12.5px;}
.cal-list li{display:grid; grid-template-columns:7.5em 3em 1fr; gap:6px; padding:3px 4px; border-radius:6px;}
.cal-list li.pick{background:var(--accent-soft);}
.cal-list b{color:var(--ink);}