:root{--paper:#f2eddf;--ink:#161814;--faint:#b7b2a4;--mist:#d8d2c2;--white:#faf7ed}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}
body{font-family:Georgia,"Times New Roman",serif;padding:18px;letter-spacing:.025em}
button{font:inherit;color:inherit;background:transparent;border:2px solid var(--ink);border-radius:0;cursor:pointer;touch-action:manipulation}
.shell{width:min(100%,880px);margin:auto}
.masthead{display:flex;align-items:end;justify-content:space-between;border-bottom:5px solid var(--ink);padding:4px 0 10px}
.header-actions{display:flex;align-items:center;gap:24px}
.eyebrow{font:bold 11px/1.2 Arial,sans-serif;letter-spacing:.25em;margin:0 0 4px}
h1{font:900 clamp(31px,7vw,58px)/.88 Georgia,serif;letter-spacing:-.055em;margin:0}
h1 span{font:11px Arial,sans-serif;letter-spacing:.08em;vertical-align:top;margin-left:6px}
.text-button{min-height:38px;border:0;border-bottom:2px solid;padding:9px 5px 7px;font:bold 13px Arial,sans-serif;letter-spacing:.13em;white-space:nowrap}
.status{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:2px solid var(--ink)}
.stat{padding:9px 12px;border-right:1px solid var(--ink);display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.stat:last-child{border:0}.stat span,.log-label{font:9px Arial,sans-serif;letter-spacing:.18em}.stat strong{font-size:17px}
.equipment{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--ink);background:var(--white)}.equipment div{min-width:0;padding:5px 9px;border-right:1px solid var(--ink);display:flex;justify-content:center;gap:8px;align-items:baseline}.equipment div:last-child{border:0}.equipment span{font:8px Arial,sans-serif;letter-spacing:.13em}.equipment strong{font:bold 11px Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-frame{position:relative;border:3px solid var(--ink);border-top:0;background:var(--ink);overflow:hidden}
canvas{display:block;width:100%;height:auto;aspect-ratio:5/3;image-rendering:pixelated;outline:0}
.game-over{position:absolute;inset:20% 16%;background:var(--paper);border:5px double var(--ink);padding:24px;text-align:center;box-shadow:8px 8px 0 var(--ink)}
.game-over p{font:10px Arial,sans-serif;letter-spacing:.2em}.game-over strong{display:block;font-size:clamp(20px,4vw,34px);margin:8px 0 20px}.game-over button{padding:12px 18px;font-weight:bold;background:var(--ink);color:var(--paper)}
.log-panel{min-height:65px;border:2px solid var(--ink);border-top:0;padding:9px 13px;background:var(--white)}
.log-panel p{margin:0}.log-panel #log{font-style:italic;font-size:15px;margin-top:5px}
.controls{display:grid;grid-template-columns:minmax(170px,210px) 1fr;gap:12px;margin-top:10px;align-items:stretch}
.dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,44px);gap:3px;justify-content:center}
.dpad button{font:bold 19px Arial,sans-serif;background:var(--white)}
.zoom-out{grid-column:1;grid-row:1}.north{grid-column:2;grid-row:1}.zoom-in{grid-column:3;grid-row:1}.west{grid-column:1;grid-row:2}.wait{grid-column:2;grid-row:2}.east{grid-column:3;grid-row:2}.south{grid-column:2;grid-row:3}
.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}.actions button{padding:9px 13px;text-align:left;font:bold 12px Arial,sans-serif;letter-spacing:.08em;background:var(--white)}
.actions.single-action button{grid-column:1/-1;grid-row:1/-1}
.actions.two-actions{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr))}.actions.two-actions button{grid-column:1}
.actions button span{display:inline-block;min-width:52px;color:#555}.actions b{float:right;background:var(--ink);color:var(--paper);padding:1px 6px}
footer{display:flex;flex-wrap:wrap;gap:18px;margin-top:15px;padding-top:8px;border-top:1px solid var(--ink);font:10px Arial,sans-serif;letter-spacing:.11em}
dialog{max-width:520px;background:var(--paper);border:4px solid var(--ink);padding:0;box-shadow:10px 10px 0 var(--ink)}
dialog::backdrop{background:rgba(20,20,18,.7)}dialog form{padding:25px}dialog h2{font-size:28px;margin:4px 0 12px}dialog dl{display:grid;grid-template-columns:1fr 1.4fr;border-top:1px solid;margin:18px 0}dialog dt,dialog dd{padding:8px 0;border-bottom:1px solid;margin:0}dialog dt{font-weight:bold}dialog button{width:100%;padding:11px;background:var(--ink);color:var(--paper);font-weight:bold}
.skin-dialog{width:min(94vw,690px)}.skin-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.skin-options .skin-choice{background:var(--white);color:var(--ink);padding:8px}.skin-choice[aria-pressed="true"]{outline:4px double var(--ink);outline-offset:3px}.skin-preview{height:108px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ink);margin-bottom:9px}.classic-preview{background:var(--ink);color:var(--paper);font:bold 22px monospace;letter-spacing:.15em}.illustrated-preview,.colorsoft-preview{background-color:var(--paper);background-size:600% 600%;background-position:0 0;background-repeat:no-repeat;image-rendering:pixelated}.illustrated-preview{background-image:url('assets/ink-hack-retro-sprites.png')}.colorsoft-preview{background-color:#172029;background-image:url('assets/ink-hack-colorsoft-sprites.png')}.skin-choice strong,.skin-choice small{display:block}.skin-choice small{font-weight:normal;margin-top:2px}.dialog-close{margin-top:4px}
@media(max-width:600px){
  body{padding:6px;overflow:hidden}
  .shell{height:calc(100vh - 12px);height:calc(100dvh - 12px);display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto 120px auto}
  .masthead{padding:2px 0 6px}.header-actions{gap:14px}.eyebrow{font-size:8px}h1{font-size:30px}.text-button{min-height:40px;padding:10px 4px 7px;font-size:12px;letter-spacing:.09em}
  .stat{padding:5px 3px;display:block;text-align:center}.stat span{display:block;margin-bottom:1px;font-size:7px}.stat strong{font-size:14px}
  .equipment div{padding:3px 4px;display:block;text-align:center}.equipment span{display:block;font-size:6px}.equipment strong{display:block;font-size:9px}
  .game-frame{min-height:0;display:flex;align-items:center;justify-content:center}.game-frame canvas{display:block;width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:auto}
  .log-panel{min-height:50px;padding:6px 9px}.log-panel #log{font-size:12px;margin-top:3px}.log-label{font-size:7px}
  .controls{grid-template-columns:170px minmax(0,1fr);gap:8px;margin-top:7px;min-height:0}
  .dpad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,36px);gap:3px;align-self:center}
  .dpad button{font-size:16px}.actions{gap:6px;min-height:0}.actions button{padding:5px 8px;font-size:10px}.actions button span{min-width:34px}
  .game-over{inset:10% 8%;padding:14px}
  footer{gap:10px;justify-content:center;margin-top:6px;padding-top:5px;font-size:8px;white-space:nowrap}
}
@media(max-width:390px){.header-actions{gap:9px}.text-button{font-size:10px;padding-left:2px;padding-right:2px}.controls{grid-template-columns:150px minmax(0,1fr)}.dpad{grid-template-columns:repeat(3,46px)}.actions button span{display:none}}
@media(prefers-color-scheme:dark){:root{--paper:#ece7d8;--ink:#161814;--white:#f7f2e5}}