:root{--v:#5b2a86;--v2:#efe7f6;--ink:#1d1d1f}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-wrap:break-word}
img,table,input,select,textarea{max-width:100%}
body{margin:0;font-family:Helvetica,Arial,sans-serif;font-size:20px;line-height:1.45;color:var(--ink);background:#fff}
header.top{background:var(--v);color:#fff;padding:14px 20px}
header.top a{color:#fff;text-decoration:none;margin-right:18px;font-weight:bold;display:inline-block;padding:4px 0}
header.top .brand{font-size:24px;margin-right:28px}
main{max-width:1060px;margin:0 auto;padding:20px}
h1{color:var(--v);font-size:34px;margin:10px 0}
h2{color:var(--v);font-size:26px}
.card{border:2px solid var(--v2);border-radius:10px;padding:16px 20px;margin:14px 0}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
button,.btn{font-size:20px;padding:10px 18px;border-radius:8px;border:2px solid var(--v);background:var(--v);color:#fff;cursor:pointer;text-decoration:none;display:inline-block;margin:4px 6px 4px 0}
button.alt,.btn.alt{background:#fff;color:var(--v)}
button[disabled]{opacity:.45;cursor:not-allowed}
input,select,textarea{font-size:20px;padding:8px;border:2px solid #bbb;border-radius:6px;font-family:inherit}
label{font-weight:bold;margin-right:8px}
.note{font-size:18px;color:#444}
.paid{background:var(--v2);border-radius:10px;padding:12px 16px;margin:12px 0}
.status{font-weight:bold}
table.sd{border-collapse:collapse;margin:10px auto}
table.sd td{width:56px;height:56px;text-align:center;font-size:34px;font-weight:bold;border:1px solid #333}
table.sd tr:nth-child(3n) td{border-bottom:4px solid #000}table.sd tr:first-child td{border-top:4px solid #000}
table.sd td:nth-child(3n){border-right:4px solid #000}table.sd td:first-child{border-left:4px solid #000}
table.ws td{width:46px;height:46px;text-align:center;font-size:30px;font-weight:bold}
table.ws td.hit{background:#e3d3f1}
table.cw{border-collapse:collapse;margin:10px auto}
table.cw td{width:58px;height:58px;border:2px solid #000;position:relative;text-align:center;font-size:30px;font-weight:bold;vertical-align:middle}
table.cw td.b{background:#000}table.cw td span{position:absolute;top:1px;left:3px;font-size:18px;line-height:1;font-weight:normal}
table.cw td{padding-top:12px}
.clues{columns:2;font-size:21px}
table.cal{border-collapse:collapse;width:100%;table-layout:fixed}
table.cal th{background:var(--v);color:#fff;font-size:20px;padding:6px}
table.cal td{border:2px solid #333;height:120px;vertical-align:top;padding:4px}
table.cal td b{font-size:26px}table.cal textarea{width:100%;height:70px;font-size:18px;border:1px dashed #bbb;resize:none}
.trivia li{margin:12px 0;font-size:24px}.ans{color:var(--v);font-weight:bold}
footer.site{border-top:2px solid var(--v2);margin-top:30px;padding:16px 20px;font-size:18px;color:#555;text-align:center}
#printfoot{display:none}
@media print{header.top,footer.site,.noprint{display:none!important}main{max-width:none;padding:0}
 #printfoot{display:block;position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:18pt;color:#555}
 body.clean #printfoot{display:none}.pagebreak{page-break-before:always}}
/* v2 mobile: nothing wider than the screen at 390px; text never below 18px */
@media (max-width:600px){
 main{padding:12px}
 header.top a{margin-right:12px}
 input[style*="width"]{width:100%!important}
 table.ws td{width:calc((100vw - 40px)/12);height:calc((100vw - 40px)/12);font-size:max(18px,calc((100vw - 40px)/20))}
 table.sd td{width:calc((100vw - 40px)/9);height:calc((100vw - 40px)/9);font-size:max(20px,calc((100vw - 40px)/14))}
 table.cw td{width:calc((100vw - 40px)/9);height:calc((100vw - 40px)/9);font-size:max(18px,calc((100vw - 40px)/18));padding-top:14px}
 .clues{columns:1}
 table.cal,table.cal tbody,table.cal tr,table.cal td{display:block;width:100%}
 table.cal tr:first-child{display:none}
 table.cal td{height:auto;border-width:0 0 2px 0}
 table.cal td:empty{display:none}
 table.cal textarea{height:64px}
}
@media print{table.cal,table.cal tbody{display:table}table.cal tr{display:table-row}table.cal td{display:table-cell}}
.fit{max-width:100%;overflow-x:auto}
