/* Pixel pages of the fan translations: /ikenfell/ (night-purple palette, school towers) and /lost-vikings/ (.is-vikings: cold blue palette, mountains).
   All drawn here, no game art; the only pictures from a game are the translator's own screenshots.
   The pixel font Tiny5 is under the SIL Open Font License 1.1 (chosen for its readable Cyrillic). A frame is four box-shadows the size of one pixel (--px), which leaves the corners notched. */
@font-face{font-family:"Tiny5";font-style:normal;font-weight:400;font-display:swap;src:url(tiny5-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Tiny5";font-style:normal;font-weight:400;font-display:swap;src:url(tiny5-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.ikf-page{--ink:#1a1030;--plum:#21173f;--plum-hi:#2d2154;--lilac:#7d63c9;--lilac-soft:#b9a8f0;--pink:#ff6fae;--sun:#ffd166;--mint:#6ee7d8;--paper:#f4eeff;--mist:#cbc1e8;--pixel:"Tiny5",var(--display);
  --frame:0 -4px 0 0 var(--lilac),0 4px 0 0 var(--lilac),-4px 0 0 0 var(--lilac),4px 0 0 0 var(--lilac);
  max-width:1000px;margin:0 auto;padding:20px 0 48px;color:var(--paper)}
.ikf-page h1,.ikf-page h2,.ikf-page h3,.ikf-btn,.ikf-tag,.ikf-plate,.ikf-pops,.ikf-talk summary,.ikf-table th,.ikf-steps li::before,.ikf-credits .ikf-role,.ikf-credits .ikf-name{font-family:var(--pixel);font-synthesis:none;letter-spacing:.03em}

.ikf-page.is-vikings{--ink:#0d1b2a;--plum:#14263b;--plum-hi:#1d3550;--lilac:#4f86b8;--lilac-soft:#9cc8ea;--pink:#e8604c;--sun:#ffc857;--mint:#7cd6c8;--paper:#eef6ff;--mist:#bcd3e6}
.is-vikings .ikf-hero{background:linear-gradient(#07111f 0 26%,#0b1a2e 26% 44%,#10233c 44% 60%,#16304d 60% 74%,#1d3d5e 74% 86%,#24496c 86%)}
.is-vikings h1,.is-vikings .ikf-credits .ikf-name{text-shadow:4px 4px 0 #0b3a5c}
.is-vikings .ikf-block h2::after,.is-vikings .ikf-credits{background-image:repeating-linear-gradient(90deg,#4f86b899 0 8px,transparent 8px 16px)}
.is-vikings .ikf-steps li:not(:last-child)::after{background:repeating-linear-gradient(#4f86b8 0 4px,transparent 4px 10px)}
.ikf-shots{display:grid;gap:22px 26px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.ikf-shots figure{margin:4px}
.ikf-shots a{display:block;background:var(--ink);box-shadow:var(--frame)}
.ikf-shots img{display:block;width:100%;height:auto}
.ikf-shots figcaption{margin-top:12px;font-family:var(--pixel);font-size:15px;letter-spacing:.03em;text-align:center;color:var(--lilac-soft)}
.ikf-list{margin:0;padding-left:24px;color:var(--mist)}
.ikf-list li{margin:8px 0}
.ikf-list li::marker{color:var(--sun)}
.ikf-keys th{width:22%;color:var(--sun)}
.ikf-back{margin:0 4px 14px;font-family:var(--pixel);font-size:16px;letter-spacing:.03em}
.ikf-back a{color:var(--lilac-soft);text-decoration:none}
.ikf-back a:hover{color:var(--sun)}
.ikf-hero{position:relative;overflow:hidden;text-align:center;padding:44px 28px 132px;margin:8px 4px 34px;background:linear-gradient(#0e0820 0 26%,#140c2c 26% 44%,#1b1139 44% 60%,#241548 60% 74%,#2f1a56 74% 86%,#3b1f62 86%);box-shadow:var(--frame)}
/* Stars stay out of the text: a band along the top, and on wide screens two side bands. A dot over a letter would read as й or ё. */
.ikf-hero::before,.ikf-hero::after{content:"";position:absolute;left:0;top:0;width:4px;height:4px;background:transparent;pointer-events:none}
.ikf-hero::before{box-shadow:36px 14px #fff,98px 30px #ffffff99,162px 10px #6ee7d8,224px 26px #ffffff80,286px 12px #fff,338px 30px #ffd166aa,402px 16px #ffffff99,466px 28px #fff,
  530px 10px #ffd166,594px 24px #ffffff80,650px 14px #6ee7d8aa,712px 30px #fff,770px 12px #ffffff99,828px 26px #b9a8f0,884px 10px #fff,944px 24px #ffffff80}
@media (min-width:1100px){.ikf-hero::after{box-shadow:30px 70px #ffffff80,92px 118px #fff,54px 176px #b9a8f0,116px 228px #ffffff66,26px 262px #ffd166aa,84px 300px #ffffff80,
  900px 64px #fff,962px 104px #ffffff80,884px 150px #6ee7d8aa,948px 196px #fff,906px 244px #ffffff66,966px 288px #b9a8f0}}
.ikf-hero>:not(.ikf-towers){position:relative}
.ikf-tile{display:block;width:88px;height:88px;margin:0 auto 18px;filter:drop-shadow(0 8px 0 #0009)}
.ikf-tag{display:inline-block;margin:0 0 12px;padding:2px 10px;font-size:14px;color:var(--ink);background:var(--mint);box-shadow:0 -3px var(--mint),0 3px var(--mint),-3px 0 var(--mint),3px 0 var(--mint)}
.ikf-page h1{font-size:clamp(30px,5.4vw,52px);line-height:1.1;margin:6px 0 16px;color:var(--paper);text-shadow:4px 4px 0 #5a2a8a}
.ikf-lead{position:relative;color:var(--mist);font-size:18px;max-width:680px;margin:0 auto}
.ikf-sub{margin:6px auto 18px;color:var(--lilac-soft)}
.ikf-btn{position:relative;display:inline-flex;align-items:center;gap:12px;margin:14px 4px 8px;padding:13px 26px 17px;font-size:21px;line-height:1.1;color:var(--ink);text-decoration:none;background:var(--sun);
  box-shadow:inset 0 -6px 0 #e0a23a,inset 0 4px 0 #fff2bf,0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink),0 10px 0 0 #0008}
.ikf-btn:hover{color:var(--ink);background:#ffdb80;transform:translateY(-2px)}
.ikf-btn:active{transform:translateY(3px)}
.ikf-btn:focus-visible{outline:3px dashed var(--mint);outline-offset:9px}
.ikf-btn svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:square}
.ikf-meta{position:relative;color:var(--mist);font-size:14px;margin:20px 0 0}
.ikf-meta b{color:var(--paper);font-weight:700}
.ikf-note{color:var(--mist);font-size:14px}
.ikf-towers{position:absolute;left:0;bottom:0;width:100%;height:96px;pointer-events:none}

.ikf-block{padding:30px 4px 8px}
.ikf-block h2{display:flex;align-items:center;gap:18px;margin:0 0 24px;font-size:26px;line-height:1.2;color:var(--sun)}
.ikf-block h2::before{content:"";flex:none;width:4px;height:4px;margin:4px;background:var(--pink);box-shadow:4px 0 var(--pink),-4px 0 var(--pink),0 4px var(--pink),0 -4px var(--pink)}
.ikf-block h2::after{content:"";flex:1;min-width:24px;height:4px;background:repeating-linear-gradient(90deg,#7d63c999 0 8px,transparent 8px 16px)}

.ikf-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.ikf-card{--c:var(--pink);margin:4px;padding:20px 22px 22px;background:var(--plum);box-shadow:inset 0 4px 0 var(--plum-hi),var(--frame),0 12px 0 0 #0007}
.ikf-card:nth-child(2){--c:var(--sun)}
.ikf-card:nth-child(3){--c:var(--mint)}
.ikf-card:nth-child(4){--c:var(--lilac-soft)}
.ikf-card h3{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:18px;line-height:1.25;color:var(--c)}
.ikf-card h3::before{content:"";flex:none;width:12px;height:12px;background:var(--c);box-shadow:inset -4px -4px 0 #00000059,inset 4px 4px 0 #ffffff66}
.ikf-card p{margin:0;color:var(--mist);font-size:15px}
.ikf-card .ikf-pops{display:flex;flex-wrap:wrap;gap:8px 16px;margin:16px 0 0}
.ikf-pops span{display:inline-block;font-size:17px;color:var(--sun);transform:rotate(-5deg);
  text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink),2px 2px var(--ink),-2px 2px var(--ink),2px -2px var(--ink),-2px -2px var(--ink),0 5px #0009}
.ikf-pops span:nth-child(2){color:var(--pink);transform:rotate(4deg)}
.ikf-pops span:nth-child(3){color:var(--mint)}
.ikf-pops span:nth-child(4){color:var(--lilac-soft);transform:rotate(3deg)}

.ikf-steps{list-style:none;counter-reset:ikf;display:grid;gap:18px;margin:0;padding:0}
.ikf-steps li{counter-increment:ikf;position:relative;min-height:36px;padding:6px 0 0 58px}
.ikf-steps li::before{content:counter(ikf);position:absolute;left:4px;top:0;width:36px;height:36px;display:grid;place-items:center;font-size:18px;color:var(--ink);background:var(--mint);box-shadow:inset 0 -4px 0 #3db3a5,inset 0 4px 0 #b9fff6}
.ikf-steps li:not(:last-child)::after{content:"";position:absolute;left:20px;top:42px;bottom:-16px;width:4px;background:repeating-linear-gradient(#7d63c9 0 4px,transparent 4px 10px)}

.ikf-tip{position:relative;margin:40px 4px 4px;padding:26px 22px 18px;background:var(--plum);box-shadow:var(--frame)}
.ikf-tip .ikf-plate{position:absolute;left:16px;top:-17px;margin:0;padding:1px 10px;font-size:15px;color:var(--ink);background:var(--pink);box-shadow:0 -3px var(--pink),0 3px var(--pink),-3px 0 var(--pink),3px 0 var(--pink)}
.ikf-tip p{margin:0;color:var(--mist)}

.ikf-table{width:calc(100% - 8px);margin:4px;border-collapse:collapse;font-size:15px;background:var(--plum);box-shadow:var(--frame)}
.ikf-table th,.ikf-table td{text-align:left;vertical-align:top;padding:13px 20px;border-bottom:2px dashed #7d63c955}
.ikf-table tr:last-child th,.ikf-table tr:last-child td{border-bottom:0}
.ikf-table th{width:30%;font-size:16px;color:var(--lilac-soft)}
.ikf-table td{color:var(--paper)}
.ikf-download{margin-top:26px}

.ikf-talk{position:relative;margin:4px 4px 22px;background:var(--plum);box-shadow:var(--frame)}
.ikf-talk summary{position:relative;display:block;list-style:none;cursor:pointer;padding:14px 20px 14px 46px;font-size:18px;line-height:1.3;color:var(--paper)}
.ikf-talk summary::-webkit-details-marker{display:none}
.ikf-talk summary::before{content:"";position:absolute;left:20px;top:50%;width:4px;height:4px;margin-top:-2px;color:var(--lilac);background:currentColor;box-shadow:0 -8px,0 -4px,0 4px,0 8px,4px -4px,4px 0,4px 4px,8px 0}
.ikf-talk summary:hover,.ikf-talk[open] summary{color:var(--sun)}
.ikf-talk summary:hover::before{color:var(--pink)}
.ikf-talk[open] summary::before{color:var(--pink);transform:rotate(90deg)}
.ikf-talk summary:focus-visible{outline:3px dashed var(--mint);outline-offset:6px}
.ikf-talk p{margin:0;padding:0 46px 30px;color:var(--mist)}
.ikf-talk[open]::after{content:"";position:absolute;right:26px;bottom:18px;width:4px;height:4px;color:var(--pink);background:currentColor;box-shadow:-8px -8px,-4px -8px,0 -8px,4px -8px,8px -8px,-4px -4px,0 -4px,4px -4px;animation:ikf-blink 1.1s steps(1) infinite}
@keyframes ikf-blink{50%{opacity:0}}

.ikf-downloads{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px}
.ikf-download .ikf-downloads{justify-content:flex-start}
.ikf-btn.is-switch{background:var(--pink);box-shadow:inset 0 -6px 0 #d9468c,inset 0 4px 0 #ffc2dd,0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink),0 10px 0 0 #0008}
.ikf-btn.is-switch:hover{background:#ff8dbf}
.ikf-h3{margin:34px 0 18px;font-size:19px;color:var(--mint)}
.ikf-block h2+.ikf-h3{margin-top:0}
.ikf-tips{display:grid;gap:12px 28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.ikf-tips .ikf-tip{margin-top:22px}
.ikf-tips .ikf-plate{background:var(--mint);box-shadow:0 -3px var(--mint),0 3px var(--mint),-3px 0 var(--mint),3px 0 var(--mint)}

.ikf-intro{margin:0 0 22px;color:var(--mist)}
.ikf-form{display:grid;gap:18px;margin:4px;padding:24px 24px 20px;background:var(--plum);box-shadow:var(--frame)}
.ikf-chips{display:flex;flex-wrap:wrap;gap:10px 14px;margin:0;padding:0;border:0}
.ikf-chips legend{width:100%;margin:0 0 10px;padding:0;font-family:var(--pixel);font-size:16px;letter-spacing:.03em;color:var(--lilac-soft)}
.ikf-chips label{position:relative;cursor:pointer}
.ikf-chips input{position:absolute;opacity:0;width:1px;height:1px}
.ikf-chips span{display:block;margin:3px;padding:6px 14px;font-family:var(--pixel);font-size:16px;letter-spacing:.03em;color:var(--paper);background:var(--ink);box-shadow:0 -3px var(--lilac),0 3px var(--lilac),-3px 0 var(--lilac),3px 0 var(--lilac)}
.ikf-chips label:hover span{color:var(--sun)}
.ikf-chips input:checked+span{color:var(--ink);background:var(--sun);box-shadow:0 -3px var(--sun),0 3px var(--sun),-3px 0 var(--sun),3px 0 var(--sun)}
.ikf-chips input:focus-visible+span{outline:3px dashed var(--mint);outline-offset:6px}
.ikf-field{display:block}
.ikf-field>span{font-family:var(--pixel);font-size:16px;letter-spacing:.03em;color:var(--lilac-soft)}
.ikf-field em{font-style:normal;font-size:13px;color:#9d90c7}
.ikf-field input,.ikf-field textarea{display:block;box-sizing:border-box;width:calc(100% - 6px);margin:10px 3px 3px;padding:10px 12px;font:inherit;font-size:15px;color:var(--paper);background:var(--ink);border:0;border-radius:0;resize:vertical;box-shadow:0 -3px var(--lilac),0 3px var(--lilac),-3px 0 var(--lilac),3px 0 var(--lilac)}
.ikf-field input::placeholder,.ikf-field textarea::placeholder{color:#8f83b8}
.ikf-field input:focus,.ikf-field textarea:focus{outline:0;box-shadow:0 -3px var(--mint),0 3px var(--mint),-3px 0 var(--mint),3px 0 var(--mint)}
.ikf-file{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:12px 3px 0;cursor:pointer}
.ikf-file input{position:absolute;opacity:0;width:1px;height:1px}
.ikf-file-btn{padding:7px 14px;font-family:var(--pixel);font-size:16px;letter-spacing:.03em;color:var(--ink);background:var(--mint);box-shadow:inset 0 -4px 0 #3db3a5,0 -3px var(--mint),0 3px var(--mint),-3px 0 var(--mint),3px 0 var(--mint)}
.ikf-file:hover .ikf-file-btn{background:#9af2e6}
.ikf-file input:focus-visible+.ikf-file-btn{outline:3px dashed var(--sun);outline-offset:6px}
.ikf-file-hint{font-size:14px;color:#9d90c7}
.ikf-file-note{margin:10px 0 0;font-size:13px;color:#9d90c7}
.ikf-shot.is-over .ikf-file-btn{background:var(--sun);box-shadow:0 -3px var(--sun),0 3px var(--sun),-3px 0 var(--sun),3px 0 var(--sun)}
.ikf-shot-preview:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:14px 3px 0}
.ikf-shot-preview img{display:block;width:160px;max-height:120px;object-fit:contain;background:var(--ink);box-shadow:0 -3px var(--lilac),0 3px var(--lilac),-3px 0 var(--lilac),3px 0 var(--lilac)}
.ikf-shot-name{flex:1;min-width:0;font-size:14px;color:var(--mist);overflow-wrap:anywhere}
.ikf-shot-preview button{padding:5px 12px;font:inherit;font-size:13px;color:var(--paper);background:var(--plum-hi);border:0;cursor:pointer}
.ikf-shot-preview button:hover{color:var(--ink);background:var(--pink)}
@media (pointer:coarse){.ikf-file-hint{display:none}}
.ikf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.ikf-check:empty{display:none}
.ikf-send{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.ikf-send .ikf-btn{margin:4px 4px 10px;font-size:19px;padding:11px 26px 15px}
.ikf-btn:disabled{filter:grayscale(.6);cursor:progress}
.ikf-status{margin:0;color:var(--pink)}
.ikf-status.is-good{color:var(--mint)}
.ikf-status:empty{display:none}
.ikf-form .ikf-note{margin:0}

.ikf-reports{margin-top:30px}
.ikf-report{margin:4px 4px 18px;padding:14px 18px;background:#1a1233;box-shadow:0 -3px var(--pink),0 3px var(--pink),-3px 0 var(--pink),3px 0 var(--pink)}
.ikf-report.is-done{opacity:.6;box-shadow:0 -3px var(--lilac),0 3px var(--lilac),-3px 0 var(--lilac),3px 0 var(--lilac)}
.ikf-report p{margin:0 0 8px}
.ikf-report-head{font-size:13px;color:var(--mist)}
.ikf-report-head b{color:var(--sun)}
.ikf-report-text{white-space:normal;color:var(--paper)}
.ikf-report-fix,.ikf-report-from{font-size:14px;color:var(--mist)}
.ikf-report-from a{color:var(--mint)}
.ikf-report-shot{display:inline-block;margin:2px 3px 12px}
.ikf-report-shot img{display:block;max-width:min(100%,360px);height:auto;box-shadow:0 -3px var(--lilac),0 3px var(--lilac),-3px 0 var(--lilac),3px 0 var(--lilac)}
.ikf-report-do{display:flex;gap:10px}
.ikf-report-do button{padding:5px 12px;font:inherit;font-size:13px;color:var(--paper);background:var(--plum-hi);border:0;cursor:pointer}
.ikf-report-do button:hover{color:var(--ink);background:var(--sun)}

.ikf-credits{margin-top:30px;padding:34px 16px 4px;text-align:center;color:var(--mist);font-size:14px;background:repeating-linear-gradient(90deg,#7d63c999 0 8px,transparent 8px 16px) top/100% 4px no-repeat}
.ikf-credits p{margin:4px 0}
.ikf-credits .ikf-role{margin:0;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--lilac-soft)}
.ikf-credits .ikf-name{margin:6px 0 22px;font-size:26px;font-weight:700;color:var(--sun);text-shadow:3px 3px 0 #5a2a8a}
.ikf-credits a{color:var(--mint);text-decoration:underline}
.ikf-credits a:hover{color:var(--sun)}

@media (max-width:600px){
  .ikf-hero{padding:32px 18px 100px;margin:4px 4px 26px}
  .ikf-towers{height:72px}
  .ikf-tile{width:72px;height:72px}
  .ikf-lead{font-size:16px}
  .ikf-btn{font-size:18px;padding:12px 20px 16px}
  .ikf-block h2{font-size:22px;gap:14px}
  .ikf-table th,.ikf-table td{display:block;width:auto;padding:12px 16px 0}
  .ikf-table td{padding:4px 16px 12px}
  .ikf-table th{border-bottom:0}
  .ikf-talk summary{font-size:17px;padding-right:16px}
  .ikf-talk p{padding:0 18px 30px 46px}
  .ikf-downloads{flex-direction:column;align-items:center}
  .ikf-form{padding:20px 16px 16px}
}
@media (prefers-reduced-motion:reduce){.ikf-talk[open]::after{animation:none}.ikf-btn:hover,.ikf-btn:active{transform:none}}