/* Blue. All rules scoped under .blu-* (the app inlines only this file). */

/* the shore */
.blu-shore { position: relative; flex: 1; min-height: 300px; overflow: hidden; touch-action: none; }
.blu-sky { position: absolute; left: 0; right: 0; top: 0; height: 44%; background: linear-gradient(#2c74dc, #6fb0f2 70%, #a8d2f8); }
.blu-sea { position: absolute; left: 0; right: 0; top: 44%; height: 20%; background: linear-gradient(#1c5cb4, #2b7bd2); overflow: hidden; }
.blu-sea i { position: absolute; left: -20%; width: 140%; height: 2px; border-radius: 2px; background: rgba(255,255,255,.35); animation: bluWave 5s ease-in-out infinite alternate; }
.blu-sea i:nth-child(1) { top: 22%; }
.blu-sea i:nth-child(2) { top: 52%; animation-delay: -1.7s; opacity: .7; }
.blu-sea i:nth-child(3) { top: 80%; animation-delay: -3.1s; opacity: .5; }
@keyframes bluWave { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.blu-sand { position: absolute; left: 0; right: 0; top: 64%; bottom: 0; background: linear-gradient(#e9d29c, #cfae73); }
.blu-rock { position: absolute; left: 2%; top: 47%; width: 30%; max-width: 150px; overflow: visible; }
.blu-stone { fill: #8e8a83; stroke: #6d6962; stroke-width: 1.5; }
.blu-hand { fill: #b8402c; opacity: 0; transform-origin: 45px 36px; transform: scale(.7); transition: opacity .35s ease, transform .35s cubic-bezier(.3,1.6,.5,1); }
.blu-shore.stamped .blu-hand { opacity: .92; transform: none; }
.blu-boat { position: absolute; left: 54%; top: 33%; width: 32%; max-width: 170px; }
.blu-fruit { position: absolute; left: 4%; top: 80%; width: 22%; max-width: 110px; }
.blu-bowl { position: absolute; left: 62%; top: 68%; width: 34%; max-width: 170px; }
.blu-bowl img { display: block; width: 100%; }
.blu-paste { position: absolute; left: 24%; right: 24%; top: 26%; height: 22%; border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity .4s, transform .4s cubic-bezier(.3,1.5,.5,1); box-shadow: inset 0 -3px 6px rgba(0,0,0,.25); }
.blu-paste.on { opacity: 1; transform: none; }
.blu-said { position: absolute; left: -20%; right: -20%; top: 100%; margin-top: 2px; text-align: center; font: 800 15px var(--sans); color: #2a1d10; }
.blu-bowl.grind { animation: bluGrind .23s ease-in-out 4; }
@keyframes bluGrind { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 70% { transform: rotate(5deg); } }
.blu-clay { all: unset; position: absolute; left: 33%; top: 69%; width: 24%; max-width: 120px; min-height: 44px; display: flex; flex-direction: column; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.blu-clay img, .blu-feather img { display: block; width: 100%; }
.blu-clay span, .blu-feather span { font: 800 13px var(--sans); color: #2a1d10; white-space: nowrap; margin-top: 2px; transition: opacity .2s; }
.blu-feather { position: absolute; left: 30%; top: 64%; width: 28%; max-width: 140px; display: flex; flex-direction: column; align-items: center; }
.blu-feather img { width: 80%; }

/* the glass */
.blu-glass { position: absolute; width: 56px; height: 75px; cursor: grab; touch-action: none; z-index: 2; }
.blu-glass svg { display: block; width: 100%; height: 100%; overflow: visible; }
.blu-glassline { fill: rgba(255,255,255,.16); stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.blu-water { fill: rgba(225,240,255,.22); stroke: rgba(255,255,255,.9); stroke-width: 2; }
.blu-glint { stroke: rgba(255,255,255,.8); stroke-width: 3; stroke-linecap: round; }
.blu-glass.up { transform: scale(1.35); transform-origin: 50% 100%; transition: transform .4s ease; }
.blu-gsaid { position: absolute; left: -40px; right: -40px; bottom: 100%; margin-bottom: 4px; text-align: center; font: 800 16px var(--sans); color: #2a1d10; }

/* split the picture */
.blu-chips { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 8px; }
.blu-crow { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: rgba(10,14,26,.72); }
.blu-crow b { font: 800 14px var(--sans); color: #fff; width: 62px; }
.blu-crow i { width: 26px; height: 26px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.45); box-sizing: border-box; }
.blu-crow i.on { border: 2px solid rgba(255,255,255,.9); animation: bluPop .3s ease-out; }
@keyframes bluPop { from { transform: scale(.4); } to { transform: none; } }
.blu-fly { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; z-index: 3; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.blu-pick { cursor: pointer; }
.blu-shore .blu-pick.picked { opacity: .55; }
.blu-shore .blu-thing { transition: transform .6s cubic-bezier(.3,1.4,.5,1), filter .6s; }

/* the order of color words */
.blu-order { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 6px; visibility: hidden; }
.blu-order.shown { visibility: visible; }
.blu-step { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); opacity: 0; transition: opacity .3s, transform .3s; }
.blu-step.on { opacity: 1; }
.blu-step b { font: 800 14px var(--sans); color: var(--dim); width: 14px; }
.blu-step i { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.blu-step span { font: 700 15px var(--sans); color: var(--text); }
.blu-o-dl i { background: linear-gradient(90deg, #111 50%, #f4f0e8 50%); border: 1px solid var(--line-strong); }
.blu-o-r i { background: #c8402f; }
.blu-o-gy i { background: linear-gradient(90deg, #3aa457 50%, #f0c93a 50%); }
.blu-o-b i { background: #2f6fe0; }
.blu-o-br i { background: #8a5a33; }
.blu-o-b.on { border-color: #6fa4ff; box-shadow: 0 0 0 2px rgba(111,164,255,.35); }
.blu-sw { display: block; width: 46px; height: 46px; border-radius: 50%; margin: 2px auto 4px; border: 2px solid rgba(255,255,255,.7); }

/* Homer */
.blu-homer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.blu-homer img { display: block; max-height: 220px; max-width: 100%; border-radius: 14px; }
.blu-homer span { font: 600 13px var(--sans); color: var(--dim); }
.blu-homer.small img { max-height: 200px; }

/* Vermeer */
.blu-paint { width: 100%; display: flex; justify-content: center; }
.blu-frame { position: relative; display: inline-block; }
.blu-frame img { display: block; max-height: 340px; height: 44vh; min-height: 220px; width: auto; max-width: 100%; border-radius: 10px; }
.blu-spot { all: unset; position: absolute; width: 52px; height: 52px; transform: translate(-50%, -50%); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.blu-spot i { position: absolute; inset: 6px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.9); box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.blu-spot span { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; font: 800 13px var(--sans); color: #fff; background: rgba(10,14,26,.8); padding: 2px 7px; border-radius: 8px; opacity: 0; transition: opacity .3s; }
.blu-paint.named .blu-spot span { opacity: 1; }
.blu-spot.right i { border: 3px solid var(--mint); }
.blu-spot.wrong i { border: 3px solid var(--red); }

@media (max-height: 700px) {
  .blu-homer img { max-height: 170px; }
  .blu-homer.small img { max-height: 160px; }
  .blu-step { padding: 4px 10px; }
}