/* KN Island game. Every rule is scoped to #kni so nothing here touches the rest of the site,
   and the id beats site.css where class names overlap (.btn, .row, .small).
   Cards, buttons and chips keep dark lettering on pastel in both themes; outer borders follow --line. */
#kni{--k:#24202A;--blue:#cfe8ff;--green:#d4f5c9;--yel:#fff1a8;--peach:#ffd8b0;--pink:#ffd3e2;font-family:Nunito,system-ui,sans-serif;line-height:1.45;max-width:47.5rem;margin:0 auto}
#kni h1,#kni h2,#kni h3,#kni .lil{font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-weight:400;margin:0;text-shadow:none;line-height:1.15}
#kni h1{font-size:2.2rem}#kni h2{font-size:1.5rem;margin:.35rem 0 .3rem}#kni h3{font-size:1.25rem}
#kni b{font-family:inherit;font-weight:800}
#kni p{margin:.6rem 0}
#kni .kc{border:.1875rem solid var(--line);border-radius:1.125rem;padding:1rem;box-shadow:.25rem .3rem 0 var(--shadow);margin:1rem 0;color:var(--k)}
#kni .blue{background:var(--blue)}#kni .green{background:var(--green)}#kni .yel{background:var(--yel)}#kni .peach{background:var(--peach)}#kni .pink{background:var(--pink)}
#kni .btn{font:800 1rem/1.3 Nunito,system-ui,sans-serif;border:.1875rem solid var(--k);border-radius:.875rem;padding:.75rem 1rem;background:#fff;color:var(--k);cursor:pointer;box-shadow:.1875rem .1875rem 0 var(--k);transition:transform .08s}
#kni .btn:active{transform:translate(.125rem,.125rem);box-shadow:.0625rem .0625rem 0 var(--k)}
#kni .btn:focus-visible{outline:.25rem solid #75D1EF;outline-offset:.1875rem}
#kni .btn.big{font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-weight:400;font-size:1.3rem;background:#FF7A1A;color:#fff;padding:.8rem 1.6rem}
#kni .btn:disabled{opacity:.4;cursor:not-allowed}
#kni .choices{display:grid;gap:.7rem;margin-top:.8rem}
#kni .choice{text-align:left;width:100%}
#kni .choice:nth-child(2){background:#fffbe8}#kni .choice:nth-child(3){background:#f2fbff}
#kni .choice.struck{text-decoration:line-through}
#kni .meters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.35rem;margin:.6rem 0}
#kni .meter{background:#fff;color:var(--k);border:.15rem solid var(--line);border-radius:.75rem;padding:.3rem .35rem;text-align:center;font-size:.72rem;font-weight:800}
#kni .meter .ic{font-size:1.15rem;line-height:1}
#kni .meter .nm{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#kni .bar{height:.5625rem;border-radius:.5625rem;background:#eee;border:.09rem solid var(--k);overflow:hidden;margin-top:.2rem}
#kni .bar i{display:block;height:100%;transition:width .7s ease,background .7s}
#kni .meter.bump{animation:kni-bump .6s}
@keyframes kni-bump{30%{transform:scale(1.12)}}
#kni .island{width:100%;height:auto;display:block;border:.1875rem solid var(--line);border-radius:1.125rem;box-shadow:.25rem .3rem 0 var(--shadow);background:#bfe6ff}
#kni .hud{display:flex;justify-content:space-between;font-weight:800;font-size:.8rem;opacity:.85}
#kni .yr{display:inline-block;background:var(--k);color:#fff;border-radius:999px;padding:.1rem .7rem;font-weight:800;font-size:.8rem}
#kni .spec{font-size:.78rem;font-weight:800;opacity:.75;margin-top:.15rem}
#kni .row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:0}
#kni .small{font-size:.85rem}
#kni .verdict{display:inline-block;font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-size:1.25rem;padding:.15rem .8rem;border-radius:999px;border:.1875rem solid var(--k);margin-bottom:.4rem;color:var(--k)}
#kni .v-good{background:#9be38a}#kni .v-trade{background:#ffe066}#kni .v-bad{background:#ff9b8a}
#kni .chips{display:flex;flex-wrap:wrap;gap:.3rem;margin:.4rem 0}
#kni .chip{border:.125rem solid var(--k);border-radius:999px;padding:.05rem .55rem;font-weight:800;font-size:.85rem;background:#fff;color:var(--k)}
#kni .chip.up{background:#c9f2bd}#kni .chip.dn{background:#ffc9c0}
#kni .note{background:#fff;color:var(--k);border:.15rem dashed var(--k);border-radius:.875rem;padding:.7rem .8rem;margin-top:.7rem;font-size:.95rem}
#kni .note b.t{font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-weight:400;font-size:1.05rem;display:block;margin-bottom:.15rem}
#kni details summary{font-weight:800;cursor:pointer}
#kni .hint{font-size:.85rem;padding:.45rem .7rem;background:var(--pink)}
#kni .report{padding:.7rem .9rem}
#kni .rl{display:flex;justify-content:space-between;align-items:center;gap:.4rem;flex-wrap:wrap;border-top:.09rem dashed rgba(36,32,42,.3);padding:.3rem 0;font-weight:800;font-size:.9rem}
#kni .rl .chip{font-size:.78rem}
#kni .shock h2{font-size:1.4rem}
#kni .kh{padding-left:1.2rem;margin:.4rem 0}
#kni .kh li{margin:.25rem 0}
#kni .field{position:relative;height:16.875rem;border:.1875rem solid var(--k);border-radius:1rem;overflow:hidden;background:#7cc85a;background-image:radial-gradient(#5fae44 2px,transparent 2.5px),radial-gradient(#8fd86c 1.5px,transparent 2px);background-size:22px 22px,15px 15px;background-position:0 0,7px 9px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#kni .beetle{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#kni .beetle svg{width:100%;height:100%;pointer-events:none}
#kni .pop{position:absolute;font-weight:800;font-size:.85rem;pointer-events:none;animation:kni-pop .8s forwards;color:#fff;text-shadow:0 1px 2px #000}
@keyframes kni-pop{to{transform:translateY(-28px);opacity:0}}
#kni .fieldhud{display:flex;justify-content:space-between;font-weight:800;margin:.5rem 0}
#kni .timer{font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-size:1.4rem}
#kni table.calc{border-collapse:collapse;margin:.5rem 0;background:#fff}
#kni table.calc td{border:.09rem solid var(--k);padding:.3rem .6rem;font-weight:800}
#kni input.num{font:800 1.2rem Nunito,system-ui,sans-serif;width:7rem;padding:.5rem;border:.1875rem solid var(--k);border-radius:.75rem;background:#fff;color:var(--k)}
#kni .fmla{font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-size:1.25rem;background:#fff;border:.15rem solid var(--k);border-radius:.75rem;display:inline-block;padding:.3rem .8rem;margin:.3rem 0}
#kni .notebook .note{border-style:solid}
#kni .notebook .note:nth-child(4n+1){background:var(--blue)}#kni .notebook .note:nth-child(4n+2){background:var(--green)}#kni .notebook .note:nth-child(4n+3){background:var(--yel)}#kni .notebook .note:nth-child(4n+4){background:var(--peach)}
#kni .nbh{margin-top:1.4rem}
#kni .grade{font-size:2.2rem;margin:.2rem 0}
@keyframes kni-spin{to{transform:rotate(360deg)}}
#kni .rot{animation:kni-spin 2.4s linear infinite;transform-box:view-box}
@keyframes kni-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
#kni .wave{animation:kni-drift 4s ease-in-out infinite}
@keyframes kni-puff{0%{opacity:.85;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(14px,-26px) scale(1.4)}}
#kni .smoke{animation:kni-puff 3s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes kni-jump{0%,70%,100%{transform:translateY(0);opacity:0}80%{opacity:1;transform:translateY(-10px)}90%{opacity:1;transform:translateY(-4px)}}
#kni .fish{animation:kni-jump 4s ease-in-out infinite}
@keyframes kni-fly{0%{transform:translateX(-30px)}100%{transform:translateX(430px)}}
#kni .birds{animation:kni-fly 18s linear infinite}
@media (prefers-reduced-motion:reduce){#kni .rot,#kni .wave,#kni .smoke,#kni .fish,#kni .birds{animation:none}}
@media (max-width:420px){#kni .meter{font-size:.62rem}#kni h2{font-size:1.3rem}}
@media print{#kni{display:none}}