/* super-light styles for layout; replace with Tailwind/etc later */

body {
    font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

h2, .floaty {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
    max-width: 680px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.bar {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin: 1rem 0;
}

.cell {
    position: absolute;
    width: 72px;
    height: 56px;
    border-radius: 12px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: #fff;
}

.required {
    background: #eef6ff;
    border-color: #9cc2ff;
}

:root {
    --rank-green: #2ecc71;
    --rank-blue: #3498db;
    --rank-purple: #9b59b6;
    --text-dim: #505a66;
}

/* Rank line + colours */
.rank-line {
    font-weight: 800;
    font-size: 1.35rem;
    margin: .5rem 0 .25rem;
}

.title {
    font-weight: 800;
    font-size: 1.35rem;
}

.subtitle {
    font-size: 1.35rem;
}
.game-card h2 {
    font-weight: 800;
    font-size: 1.35rem;
}
.game-card-support {
    background: #f4eef8 !important;
}
.game-card-feedback {
    background: #f4ce00 !important;
}
.rank-default {
    color: #444;
}

.rank-green {
    color: var(--rank-green);
}

.rank-blue {
    color: var(--rank-blue);
}

.rank-purple {
    color: var(--rank-purple);
}

.next-rank {
    color: var(--text-dim);
    font-size: .95rem;
    margin: 0 0 1rem;
}

/* Pulse animation */
@keyframes rankPulse {
    0% {
        transform: scale(1);
        text-shadow: none;
    }

    35% {
        transform: scale(1.06);
        text-shadow: 0 0 10px rgba(0,0,0,.08);
    }

    70% {
        transform: scale(1.00);
        text-shadow: 0 0 4px rgba(0,0,0,.04);
    }

    100% {
        transform: scale(1);
        text-shadow: none;
    }
}

.pulse {
    animation: rankPulse 900ms ease;
}

.hx-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1040;
}

.hx-modal {
    position: fixed;
    z-index: 1050;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, 92vw);
    max-width: 92vw;
    height: auto;
    max-height: calc(100vh - 6rem);
    background: #fff;
    color: #111;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,.2);
    padding: 1.25rem 1.25rem 1rem;
    animation: hx-pop 160ms ease-out;
}

.hx-modal h3 {
    margin: 0 0 .5rem;
    font-weight: 800;
}

.hx-modal p {
    margin: 0 0 1rem;
    color: #4b5563;
}

.hx-modal-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

.found-box {
    max-height: 320px;
    overflow: auto;
    padding: .5rem .75rem;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    background: #fff;
}

.found-list {
    column-gap: 2rem;
    column-count: 2;
    margin: 0;
}

@media (min-width: 768px) {
    .found-list {
        column-count: 3;
    }

    .found-list.single-column {
        column-count: 1;
    }
}

.found-list li {
    break-inside: avoid;
    line-height: 1.6;
    list-style: disc;
    margin-left: 1.25rem;
}

.found-list {
    list-style: disc;
    padding-left: 1.25rem;
}

.found-list.single-column{
    column-count: 1;
}

.found-word {
    margin: .25rem 0;
}

.found-word.pangram {
    font-weight: 700;
    color: var(--rank-purple);
}

.clue {
    margin: .25rem 0;
    font-style: italic;
    color: #3498db;
}

.score-area, .rank-line, .input-area {
    position: relative;
}

.floaty-wrap {
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: .25rem;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.floaty {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.5rem;
    background: rgba(128, 200, 255, .15);
    color: #2b7cff;
    backdrop-filter: blur(2px);
    animation: hx-float 1.5s ease-out forwards;
    will-change: transform, opacity;
}

/* float up + fade */
@keyframes hx-float {
    0% {
        transform: translateY(0) scale(.98);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    60% {
        transform: translateY(-14px) scale(1.02);
    }

    100% {
        transform: translateY(-22px) scale(1);
        opacity: 0;
    }
}

:root.dark .floaty {
    background: rgba(80, 140, 255, .18);
    color: #8fb6ff;
}

.hexboard {
    width: 320px;
    height: 300px;
    margin: 1.25rem auto 2rem;
    position: relative;
}

.tile-group{
    position: absolute;
    width: 84px;
    height: 96px;
    padding: 0;
    background: transparent;
    border: 0;
    filter: drop-shadow(-1px 3px 3px rgba(0, 0, 0,0.36));
}

.tile {
    width: 84px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d7bce3;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    font-size: 1.5rem;
    font-weight: 800;
    position: absolute;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .15s ease;
}

.tile:active {
    transform: scale(.97);
}

.tile.required {
    background: var(--rank-purple);
    color: white;
}

@media (max-width: 420px) {
    .hexboard {
        transform: scale(.9);
        transform-origin: top center;
        height: 270px;
    }
}

@media (max-width: 360px) {
    .hexboard {
        transform: scale(.82);
        height: 250px;
    }
}

.tile {
    font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.tile-group:nth-child(1) {
    left: calc(160px - 1 * 42px);
    top: calc(150px - 1 * 42px);
}
.tile-group:nth-child(2) {
    left: calc(160px);
    top: calc(150px - 3 * 42px);
}
.tile-group:nth-child(3) {
    left: calc(160px + 1 * 42px);
    top: calc(150px - 1 * 42px);
}
.tile-group:nth-child(4) {
    left: calc(160px);
    top: calc(150px + 1 * 42px);
}
.tile-group:nth-child(5) {
    left: calc(160px - 2 * 42px);
    top: calc(150px + 1 * 42px);
}
.tile-group:nth-child(6) {
    left: calc(160px - 3 * 42px);
    top: calc(150px - 1 * 42px);
}
.tile-group:nth-child(7) {
    left: calc(160px - 2 * 42px);
    top: calc(150px - 3 * 42px);
}
.submit {
    background-color: var(--rank-purple) !important;
    border-color: var(--rank-purple) !important;
}
.submit.disabled, .submit:disabled {
    background-color: #d7bce3 !important;
    border-color: var(--rank-purple) !important;
}

.tile-group .tile-badge {
    display: none;
}

.tile-group .tile-badge.cleared{
    display: inline-flex;
    position: absolute;
    right: 16px;
    top: 16px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #ab74c2;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 2px rgba(0,0,0,.18);
    pointer-events: none;
}

.mini-cell {
    width: var(--cell);
    height: var(--cell);
    border: 2px solid #ddd;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #fff;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.mini-cell.is-active {
    border-color: rebeccapurple;
    box-shadow: 0 0 0 3px rgba(102, 51, 153, 0.25) inset;
}

/* Replace the shorthand with longhand so Safari doesn't reset hidden font props */
/*.mini-cell-input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    caret-color: transparent;
}*/

/* iOS/Safari-only: disable ligature/synthesis oddities that trigger the bad glyphs */
/*@supports (-webkit-touch-callout: none) {
    .mini-cell-input {
        font-variant-ligatures: no-common-ligatures;
        font-synthesis: none;
        -webkit-font-smoothing: antialiased;
    }
}*/

.mini-cell {
  position: relative;            /* give the input an anchor */
}

.mini-cell-input{
  position: absolute;
  inset: 0;                      /* fill the cell */
  display: flex;                 /* center the single character */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;                    /* kill iOS default input padding */
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  -webkit-appearance: none;      /* stop Safari from applying control chrome */
  appearance: none;

  /* font (longhand; avoids Safari shorthand quirks) */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;            /* harmless now, but can be omitted */
  caret-color: transparent;
  z-index: 1;
  /* create its own compositing layer—prevents rare clipping when zooming */
  /*transform: translateZ(0);*/
}

/* iOS-specific polish */
@supports (-webkit-touch-callout: none) {
  .mini-cell-input{
    font-variant-ligatures: no-common-ligatures;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
  }
}

.mini-cell-input:focus {
    outline: none;
}

.mini-grid {
    display: grid;
    grid-template-columns: repeat(5, var(--cell));
    grid-auto-rows: var(--cell);
    gap: var(--gap);
    outline: none; /* we handle focus inside cells */
}

.mini-grid-cellwrap {
    width: var(--cell);
    height: var(--cell);
    margin: 0;
    padding: 0;
    position: relative;
}

.mini-cell.is-block {
    background: #222;
    border-color: #222;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.mini-cell.is-highlighted {
    background: #ffffbf;
}

.cluenumber {
    position: absolute;
    top: 3px;
    left: 6px;
    font: 600 10px/1 system-ui, sans-serif;
    opacity: 0.7;
    pointer-events: none;
    z-index: 2;
}

.cluelist ol {
    list-style: none;
    padding-left: 0;
}

.cluelist li {
    padding: 4px 6px;
    border-radius: 8px;
}

.clue--active {
    background: rgba(102, 51, 153, 0.10);
    font-weight: 700;
}

.cell--active-entry {
    box-shadow: inset 0 0 0 3px rgba(102, 51, 153, 0.12);
}

:root {
    --cell: 56px;
    --gap: 8px;
    --cols: 5;
}

.mini-board {
    width: calc(var(--cols)*var(--cell) + (var(--cols)-1)*var(--gap));
}

.cell--active-entry {
    box-shadow: inset 0 0 0 3px rgba(102, 51, 153, .12);
}

.list-group-item.active {
    background: rgba(102, 51, 153, .14);
    color: inherit;
    border: 0;
    font-weight: 700;
    border-radius: .75rem;
}

@media (min-width: 992px) {
    .clue-pane {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 160px);
        overflow: auto;
    }
}

.clue-num {
    min-width: 2.5ch;
    display: inline-block;
    opacity: .7;
}

@media (max-width: 991.98px) {
    .clue-num {
        font-weight: 700;
    }
}

.current-clue-bar {
    background: rgba(102, 51, 153, .14);
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin-top: 1rem;
}

.current-clue-bar .flex-grow-1 {
    min-height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mini-keys {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: #fff;
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 16px rgba(0,0,0,.08);
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
}

.mini-keys .keys-row {
    display: flex;
    gap: .4rem;
    justify-content: center;
    margin-bottom: .4rem;
}

.mini-keys .key {
    min-width: 2.2rem;
    height: 2.6rem;
    border-radius: .5rem;
    background: #f4f4f6;
    border: 1px solid #dcdce0;
}

.mini-keys .key.wide {
    min-width: 3.4rem;
}

.show-keys-btn {
    position: sticky;
    bottom: 0;
    margin: .5rem auto 0;
    display: block;
    z-index: 25;
    border-radius: 9999px;
    padding-inline: 1rem;
    max-width: 300px;
}

@media (max-width: 991.98px) {
    :root {
        --keys-height: 0px;
    }

    .current-clue-bar {
        position: fixed;
        left: .75rem;
        right: .75rem;
        bottom: calc(var(--keys-height) + 8px + env(safe-area-inset-bottom));
        z-index: 60;
        background: #f4eef8;
        border-radius: .75rem;
        padding: .5rem .75rem;
    }

    .current-clue-spacer {
        height: calc(3.5rem + var(--keys-height));
    }

    .mini-keys {
        position: fixed;
        left: .5rem;
        right: .5rem;
        bottom: env(safe-area-inset-bottom);
        z-index: 50;
        background: #fff;
        padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 16px rgba(0,0,0,.08);
        border-top-left-radius: .75rem;
        border-top-right-radius: .75rem;
    }
}

:root {
    /* Responsive key sizing */
    --key: clamp(24px, 7vw, 44px);
    --key-gap: clamp(2px, 1.5vw, 8px);
}

.mini-keys .keys-row {
    justify-content: center;
    gap: var(--key-gap);
    flex-wrap: nowrap; /* force all keys to stay on one row */
    max-width: 100%;
    overflow: hidden; /* avoid spill if rounding issues */
}

.mini-keys .key {
    flex: 0 1 var(--key);
    min-width: var(--key);
    width: var(--key);
    height: calc(var(--key) * 1.18);
}

.mini-keys .key.wide {
    flex-basis: calc(var(--key) * 1.6);
    min-width: calc(var(--key) * 1.6);
    width: calc(var(--key) * 1.6);
}

/* Fill the available width (no wrapping) */
.mini-keys .keys-row {
    justify-content: center;
    gap: var(--key-gap); /* from previous patch */
    flex-wrap: nowrap;
    max-width: 100%;
}

/* Keys: shrink on small screens, grow to use remaining space,
   and perfectly center their text/icon */
.mini-keys .key {
    flex: 1 1 var(--key); /* <— grows to fill the row */
    min-width: var(--key);
    width: var(--key);
    height: calc(var(--key) * 1.18);
    display: flex; /* center the label */
    align-items: center;
    justify-content: center;
    line-height: 1; /* avoid baseline offset */
    text-align: center;
}

    /* Wide keys stay proportionally wider */
    .mini-keys .key.wide {
        flex: 1.6 1 0; /* 1.6× width relative to normal keys */
        min-width: calc(var(--key) * 1.6);
        width: calc(var(--key) * 1.6);
    }