/* Nonogram structure. */
.nono-side { position: absolute; left: 5.6rem; top: 18rem; width: 58rem; bottom: 5rem; display: flex; flex-direction: column; gap: 2.6rem; }
.seg { display: flex; padding: 1rem; gap: 1rem; border-radius: 8rem; }
.seg-b { flex: 1; height: 12rem; border-radius: 6rem; display: flex; align-items: center; justify-content: center; font-size: 3.6rem; font-weight: 600; gap: 1.4rem; transition: background .2s, color .2s; }
.seg-b .sw { width: 3.4rem; height: 3.4rem; border-radius: 1rem; background: currentColor; opacity: .9; }
.meter { padding: 3rem 3.6rem; border-radius: 3.6rem; }
.meter-a { font-size: 3rem; font-weight: 600; }
.meter-n { font-family: var(--font-display); font-weight: 800; font-size: 7.6rem; letter-spacing: -.2rem; color: var(--bad); line-height: 1.1; }
.bar { height: 2.6rem; border-radius: 1.3rem; background: rgba(127,127,127,.2); margin-top: 1.4rem; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 1.3rem; background: var(--ok); transition: width .3s; }
.nono-info { display: flex; align-items: center; gap: 2.4rem; }
.nono-info .ic { width: 15rem; height: 13rem; background: var(--ic) center / contain no-repeat; filter: drop-shadow(0 1.8rem 1.8rem rgba(0,0,0,.2)); }
.nono-name { font-size: 3rem; line-height: 1.3; opacity: .75; }
.nono-tray { position: absolute; right: 5.6rem; top: 1.7rem; display: grid; grid-template-columns: 16rem auto; grid-template-rows: 12rem auto; gap: 1.2rem; padding: 1.6rem; border-radius: 5.2rem; }
.nono-cols { display: grid; grid-template-columns: repeat(8, 12rem); gap: .6rem; }
.nono-rows { display: grid; grid-template-rows: repeat(8, 12rem); gap: .6rem; }
.cc { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; line-height: 1.2; color: var(--clue, var(--accent)); }
.rc { display: flex; justify-content: flex-end; align-items: center; gap: 1.6rem; padding-right: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; color: var(--clue, var(--accent)); }
.cc.d, .rc.d { opacity: .35; }
.nono-grid { display: grid; grid-template-columns: repeat(8, 12rem); grid-template-rows: repeat(8, 12rem); gap: .6rem; touch-action: none; }
.nc { position: relative; border-radius: 2.6rem; cursor: pointer; transition: transform .1s; }
.nc.x::before, .nc.x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4.6rem; height: .8rem; border-radius: .4rem; background: var(--xmark, #cfcfc6); transform: translate(-50%, -50%) rotate(45deg); }
.nc.x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.nc.wrong { animation: wrongflash 1.2s ease; }
.nc.hinted { animation: pop .3s ease 2; }
.solved .nono-grid { animation: bounce .7s ease; }