@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');:root{--red:#c92d21;--cream:#eee0bd;--dark:#15110f;--panel:#241b17;--line:#675344}*{box-sizing:border-box}body{margin:0;background:#0c0a09;color:var(--cream);font-family:Arial,sans-serif}.shell{max-width:1080px;margin:24px auto;padding:24px;background:linear-gradient(#251d19,#15110f);border:2px solid #574639;border-radius:18px}header{display:flex;justify-content:space-between;gap:20px}header small{font-weight:900;letter-spacing:.22em;color:#aa9675}h1{font:70px/.85 'Creepster',Impact,Arial Black,sans-serif;margin:10px 0 0}h2{font:40px/1 'Creepster',Impact,Arial Black,sans-serif;color:var(--red);margin:8px 0}.stamp{height:max-content;border:3px solid var(--red);color:var(--red);padding:10px;text-align:center;transform:rotate(3deg)}.stats{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px;margin:22px 0}.stats>*,.escape{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px}.stats small{display:block;color:#a89474}.stats strong{display:block;font:28px Impact;margin-top:5px}select{width:100%;margin-top:7px;padding:11px;background:#100d0c;color:var(--cream);border:1px solid var(--line);border-radius:7px;font-size:16px}.prog b{font-size:12px;color:#ad9979;display:flex;justify-content:space-between}.prog i{display:block;height:13px;background:#090807;border:1px solid var(--line);border-radius:20px;overflow:hidden;margin:6px 0 18px}.prog em{display:block;height:100%;width:0;background:var(--red)}.play{display:grid;grid-template-columns:1fr 225px;gap:15px}.bed{background:#1c1613;border:2px solid var(--line);border-radius:14px;padding:13px}.bed h3,.escape h3{font-size:13px;letter-spacing:.1em;margin:0 0 12px}.bed h3 span{float:right}.grid{display:grid;gap:4px}.cell{aspect-ratio:1;background:#2b211c;color:var(--cream);border:1px solid #705a49;border-radius:5px;font-weight:900;padding:0;min-width:0;cursor:pointer}.cell.start{outline:3px solid #ee5948}.cell.found{background:var(--red);color:#fff}.bed p{text-align:center;font-weight:bold;min-height:22px}.escape h3{color:#e54b3b}.word{margin:7px 0;font-weight:bold}.word.found{text-decoration:line-through;opacity:.4}button{width:100%;min-height:46px;margin-top:12px;border:0;border-radius:9px;background:var(--red);color:white;font-weight:900;padding:11px;cursor:pointer}.alt{background:#2b211c;border:1px solid var(--line);color:var(--cream)}.finish{text-align:center;border:2px solid var(--red);background:var(--panel);border-radius:13px;padding:20px;margin-top:18px}.hidden{display:none}footer{border-top:1px solid #4d3e34;margin-top:18px;padding-top:12px;color:#8e7c64;font-size:11px;font-weight:bold;display:flex;justify-content:space-between}@media(max-width:720px){.shell{margin:0;padding:13px;border-radius:0}header{display:block}h1{font-size:50px}.stamp{display:inline-block;margin-top:12px}.stats{grid-template-columns:1fr 1fr}.stats label{grid-column:1/-1}.play{grid-template-columns:1fr}#wordList{columns:2}.grid{gap:2px}.cell{font-size:10px}}
/* v4: keep the complete containment bed visible without page scrolling on desktop */
@media (min-width:721px){
  .shell{margin:10px auto;padding:16px;max-width:1080px}
  header p{margin:6px 0}
  h1{font-size:54px;margin-top:5px}
  h2{font-size:31px;margin:4px 0}
  .stats{margin:10px 0;gap:9px}
  .stats>*{padding:8px 11px}
  .stats strong{font-size:23px;margin-top:2px}
  select{margin-top:4px;padding:7px}
  .prog i{margin:4px 0 9px;height:10px}
  .play{grid-template-columns:minmax(0,1fr) 225px;align-items:start}
  .bed{padding:9px 11px}
  .bed h3,.escape h3{margin-bottom:7px}
  .grid{width:min(100%,calc(100vh - 300px));margin:0 auto;gap:2px}
  .cell{min-height:0;margin:0;font-size:clamp(9px,1.35vh,14px);line-height:1}
  .bed p{margin:7px 0 2px;min-height:18px;font-size:13px}
  .word{margin:4px 0;font-size:13px}
  aside button{min-height:38px;margin-top:8px;padding:7px}
  footer{margin-top:9px;padding-top:8px}
}

/* v5: desktop fit — complete puzzle visible in iframe without an internal scrollbar */
@media (min-width:721px){
  html,body{height:100%;overflow:hidden}
  body{display:flex;align-items:flex-start;justify-content:center}
  .shell{
    width:min(1240px,calc(100% - 18px));
    max-width:1240px;
    height:calc(100vh - 12px);
    margin:6px auto;
    padding:10px 14px;
    overflow:hidden;
    border-radius:14px;
  }
  header{gap:12px;align-items:flex-start}
  header small{font-size:10px}
  header p{font-size:12px;margin:3px 0}
  h1{font-size:48px;line-height:.82;margin:3px 0 0}
  h2{font-size:29px;line-height:1;margin:2px 0}
  .stamp{font-size:12px;padding:6px 8px;border-width:2px}
  .stats{margin:6px 0;gap:7px}
  .stats>*{padding:5px 8px}
  .stats small{font-size:10px}
  .stats strong{font-size:18px;margin-top:1px}
  select{margin-top:2px;padding:5px;font-size:12px}
  .prog b{font-size:9px}
  .prog i{height:7px;margin:2px 0 5px}
  .play{grid-template-columns:minmax(0,1fr) 220px;gap:9px;align-items:start}
  .bed{padding:6px 8px;border-radius:10px}
  .bed h3,.escape h3{font-size:10px;margin:0 0 4px}
  .grid{
    width:auto;
    max-width:none;
    margin:0;
    gap:2px;
  }
  .cell{
    aspect-ratio:auto;
    height:clamp(20px,2.75vh,29px);
    min-height:0;
    border-radius:3px;
    font-size:clamp(9px,1.35vh,13px);
    line-height:1;
  }
  .bed p{font-size:10px;line-height:1.15;margin:4px 0 0;min-height:12px}
  .escape{padding:7px 9px;border-radius:9px}
  .word{margin:2px 0;font-size:11px;line-height:1.05}
  aside button{min-height:28px;margin-top:5px;padding:5px;font-size:10px;border-radius:6px}
  footer{font-size:9px;margin-top:5px;padding-top:4px}
  .finish{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:5;width:min(520px,80%);margin:0}
}

/* v7: same desktop width, use more vertical space for easier play */
@media (min-width:721px){
  .shell{width:min(1240px,calc(100% - 18px));max-width:1240px;height:calc(100vh - 8px);margin:4px auto;padding:12px 14px}
  .cell{height:clamp(22px,3.05vh,32px);font-size:clamp(10px,1.5vh,14px)}
  .bed h3,.escape h3{font-size:11px}
  .bed p{font-size:11px;margin-top:5px}
  .word{font-size:12px;line-height:1.08}
  aside button{min-height:31px;font-size:11px}
}