:root{
    --paper:#ECE9DF;
    --grid:#DDD9CC;
    --ink:#2B2A26;
    --pencil:#8B887E;
    --pencil-dark:#5A5750;
    --yellow:#F2D14B;
    --green:#A8C77F;
    --red:#C0503C;
    --tile:#FAF8F1;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:"Courier New",Courier,monospace;
    background:var(--paper);
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:22px 22px;
    color:var(--ink);
    display:flex;justify-content:center;
    padding:16px 10px 60px;
  }
  .sheet{width:100%;max-width:430px;}

  header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:6px;}
  h1{font-size:24px;letter-spacing:6px;font-weight:bold;}
  .actions{font-size:13px;text-align:right;}
  .actions b{font-size:20px;display:block;}
  .actions b.danger{color:var(--red);animation:missPulse 1s infinite;}
  @keyframes missPulse{50%{opacity:.45;}}

  .tagline{font-size:12px;color:var(--pencil-dark);margin-bottom:8px;}
  .tagline a{color:var(--ink);cursor:pointer;text-decoration:underline;}

  .theme{
    text-align:center;font-size:13px;letter-spacing:3px;font-weight:bold;
    border:2px solid var(--ink);background:var(--yellow);
    box-shadow:3px 3px 0 var(--ink);
    padding:8px;margin:10px 0 4px;transform:rotate(-.5deg);
  }
  .theme small{display:block;font-size:9px;letter-spacing:2px;font-weight:normal;color:var(--ink);opacity:.6;}

  .slot.revealed{background:var(--paper);color:var(--red);border-style:dashed;border-color:var(--red);box-shadow:none;}
  .history{display:flex;gap:3px;flex-wrap:wrap;margin:6px 0;min-height:12px;}
  .history i{width:11px;height:11px;border:1px solid var(--ink);display:block;}
  .history i.g{background:var(--green);}
  .history i.y{background:var(--yellow);}

  #rules{display:none;border:1px dashed var(--pencil);padding:10px;font-size:12px;line-height:1.55;margin-bottom:12px;background:var(--tile);}
  #rules.open{display:block;}
  #rules li{margin-left:16px;margin-bottom:4px;}
  .chip{display:inline-block;padding:0 4px;border:1px solid var(--ink);font-weight:bold;}
  .chip.g{background:var(--green);}
  .chip.y{background:var(--yellow);}

  .words{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
  .word-block{transition:opacity .15s;}
  .word-block.dimmed{opacity:.3;}
  .word-block.flagged .word-row{position:relative;}
  .word-block.flagged .word-row::before{
    content:"\25B8";color:var(--ink);font-size:16px;font-weight:bold;
    position:absolute;left:-14px;top:14px;
  }
  .row-chips{display:flex;gap:4px;justify-content:center;align-items:center;margin-top:4px;min-height:24px;}
  .chips-label{font-size:10px;letter-spacing:1px;color:var(--pencil);text-transform:uppercase;margin-right:2px;}
  .word-row{display:flex;gap:5px;align-items:center;justify-content:center;}
  .chip-tile{
    width:24px;height:24px;display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:bold;background:var(--paper);color:var(--pencil);
    border:1.5px dashed var(--pencil);cursor:pointer;
  }
  .chip-tile:nth-child(odd){transform:rotate(3deg);}
  .chip-tile:nth-child(even){transform:rotate(-3deg);}
  .chip-tile:hover,.chip-tile:focus{outline:none;color:var(--ink);border-color:var(--ink);}
  .chip-tile.inspecting{background:var(--yellow);color:var(--ink);border-style:solid;border-color:var(--ink);outline:2px solid var(--red);}
  .slot{
    width:44px;height:50px;background:var(--tile);
    border:2px solid var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-size:22px;font-weight:bold;
    box-shadow:2px 2px 0 var(--ink);
    position:relative;cursor:default;
  }
  .word-block:nth-child(odd) .slot:nth-child(odd){transform:rotate(-1deg);}
  .word-block:nth-child(odd) .slot:nth-child(even){transform:rotate(1deg);}
  .word-block:nth-child(even) .slot:nth-child(odd){transform:rotate(1deg);}
  .word-block:nth-child(even) .slot:nth-child(even){transform:rotate(-1deg);}
  .slot.open.targetable{cursor:pointer;border-style:dashed;border-color:var(--pencil);box-shadow:2px 2px 0 var(--pencil);}
  .slot.open.targetable:hover,.slot.open.targetable:focus{background:var(--yellow);outline:none;}
  .slot.filled{background:var(--green);}
  .slot.missed{cursor:not-allowed;}
  .slot .x{color:var(--red);font-size:18px;font-weight:bold;}
  .slot.pop{animation:pop .25s;}
  @keyframes pop{0%{transform:scale(1.2);}100%{transform:scale(1);}}

  .table{margin-top:16px;border:2px solid var(--ink);background:var(--tile);box-shadow:4px 4px 0 var(--ink);padding:14px;text-align:center;}
  .hand{display:flex;gap:12px;justify-content:center;margin-bottom:8px;}
  .hand-tile{
    width:58px;height:66px;font-size:30px;font-weight:bold;
    display:flex;align-items:center;justify-content:center;
    border:2px solid var(--ink);background:var(--yellow);
    box-shadow:3px 3px 0 var(--ink);cursor:pointer;
  }
  .hand-tile:nth-child(1){transform:rotate(-2deg);}
  .hand-tile:nth-child(2){transform:rotate(1deg);}
  .hand-tile:nth-child(3){transform:rotate(-1deg);}
  .hand-tile:hover,.hand-tile:focus{outline:none;filter:brightness(1.05);}
  .hand-tile.selected{outline:3px solid var(--red);transform:translateY(-4px) rotate(0deg);}
  .hand-tile.deal{animation:deal .25s;}
  @keyframes deal{0%{transform:translateY(-14px) rotate(0);opacity:0;}100%{opacity:1;}}
  button{
    font-family:inherit;font-size:14px;font-weight:bold;letter-spacing:1px;
    background:var(--tile);border:2px solid var(--ink);color:var(--ink);
    padding:10px 18px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);
  }
  button:hover{background:var(--yellow);}
  button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
  button:focus-visible{outline:3px solid var(--red);outline-offset:2px;}
  button.quiet{font-weight:normal;font-size:12px;box-shadow:none;border-style:dashed;border-color:var(--pencil-dark);color:var(--pencil-dark);padding:8px 14px;}
  .btnrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

  #status{
    margin-top:10px;padding-top:10px;font-size:12px;line-height:1.4;
    min-height:34px;display:flex;align-items:center;justify-content:center;
    border-top:1px dashed var(--green);color:var(--ink);
  }
  #status.idle{border-top-color:var(--pencil);color:var(--pencil);}
  #status.mid{border-top-color:var(--yellow);}
  #status.bad{border-top-color:var(--red);color:var(--red);}

  #winbox{display:none;margin-top:20px;border:3px double var(--ink);background:var(--tile);padding:20px;text-align:center;}
  #winbox.open{display:block;}
  #winbox h2{font-size:20px;letter-spacing:3px;margin-bottom:8px;}
  #winbox .score{font-size:40px;font-weight:bold;}
  #winbox p{font-size:12px;color:var(--pencil);margin:8px 0 14px;}

  .shake{animation:shake .3s;}
  @keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

  footer{margin-top:30px;font-size:10px;color:var(--pencil-dark);text-align:center;}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
  }
  @media (max-width:380px){
    .slot{width:38px;height:44px;font-size:19px;}
  }