← Volver a código

Piedra Papel Tijera

Explora el código (HTML / CSS / JS) del juego

HTML

  1. <!doctype html>
  2. <html lang="es">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <title>Piedra Papel Tijera</title>
  7.   <link rel="stylesheet" href="css/piedra.css">
  8. </head>
  9. <body>
  11.   <!-- Estructura del juego (canvas, HUD, botones…) -->
  13.   <script src="js/piedra.js"></script>
  14. </body>
  15. </html>
    16.

CSS

  1. * { box-sizing: border-box; margin: 0; padding: 0; }
  3. :root {
  4.   --bg: #06050c;
  5.   --purple: #a55cff;
  6.   --purple-soft: #b56cff;
  7.   --cyan: #24f6d2;
  8.   --yellow: #ffd719;
  9.   --green: #22c55e;
  10.   --red: #ff4d6a;
  11.   --text: #ffffff;
  12.   --muted: rgba(255, 255, 255, 0.64);
  13. }
  15. html, body { width: 100%; min-height: 100%; overflow-x: hidden; }
  17. body {
  18.   min-width: 320px;
  19.   color: var(--text);
  20.   background-color: var(--bg);
  21.   background-position: center;
  22.   background-size: cover;
  23.   background-attachment: fixed;
  24.   font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  25. }
  27. button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
  28. button { cursor: pointer; }
  30. /* ===== Página / shell ===== */
  31. .ppt-page {
  32.   width: min(1400px, 94vw);
  33.   margin: 0 auto;
  34.   padding-bottom: 26px;
  35. }
  37. .game-toolbar {
  38.   display: flex;
  39.   align-items: center;
  40.   justify-content: space-between;
  41.   min-height: 56px;
  42.   padding: 0 4px;
  43. }
  45. .toolbar-link {
  46.   color: var(--purple);
  47.   text-decoration: none;
  48.   font-size: 13px;
  49.   font-weight: 850;
  50.   letter-spacing: 0.06em;
  51.   background: none;
  52.   border: 0;
  53. }
  54. .toolbar-link:hover { color: #d3a7ff; }
  56. .arcade-shell {
  57.   display: grid;
  58.   grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.95fr);
  59.   min-height: calc(100svh - 160px);
  60.   overflow: hidden;
  61.   border: 1px solid rgba(181, 108, 255, 0.48);
  62.   border-radius: 28px;
  63.   background: linear-gradient(135deg, rgba(11, 8, 25, 0.94), rgba(5, 4, 14, 0.92));
  64.   box-shadow: 0 35px 100px rgba(0, 0, 0, 0.62);
  65.   backdrop-filter: blur(9px);
  66. }
  68. .board-column {
  69.   display: flex;
  70.   min-width: 0;
  71.   flex-direction: column;
  72.   padding: 18px 26px 22px;
  73.   border-right: 1px solid rgba(255, 255, 255, 0.08);
  74. }
  76. .ppt-logo {
  77.   display: flex;
  78.   align-items: center;
  79.   justify-content: center;
  80.   gap: 14px;
  81.   min-height: 70px;
  82.   margin: 0 auto 10px;
  83.   color: var(--purple-soft);
  84.   font-size: clamp(28px, 3.4vw, 46px);
  85.   font-weight: 1000;
  86.   line-height: 1;
  87.   letter-spacing: 0.06em;
  88.   text-transform: uppercase;
  89.   text-shadow: 0 0 18px rgba(165, 92, 255, 0.55);
  90. }
  91. .ppt-logo .lg-dot { color: var(--cyan); }
  93. /* ===== Arena ===== */
  94. .ppt-arena {
  95.   position: relative;
  96.   flex: 1;
  97.   display: grid;
  98.   grid-template-columns: 1fr auto 1fr;
  99.   align-items: center;
  100.   gap: clamp(10px, 2.5vw, 36px);
  101.   min-height: 360px;
  102.   padding: clamp(18px, 4vh, 44px) clamp(12px, 2vw, 26px);
  103.   overflow: hidden;
  104.   border: 2px solid rgba(181, 108, 255, 0.5);
  105.   border-radius: 18px;
  106.   background:
  107.     radial-gradient(120% 90% at 50% 0%, rgba(123, 92, 255, 0.12), transparent 60%),
  108.     #03060c;
  109.   box-shadow: 0 0 30px rgba(123, 92, 255, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.7);
  110. }
  112. .ppt-side {
  113.   display: grid;
  114.   gap: 12px;
  115.   justify-items: center;
  116. }
  118. .ppt-tag {
  119.   font-size: 12px;
  120.   font-weight: 800;
  121.   letter-spacing: 0.14em;
  122.   text-transform: uppercase;
  123.   color: rgba(255, 255, 255, 0.72);
  124. }
  125. .ppt-side.you .ppt-tag { color: var(--cyan); }
  126. .ppt-side.ai .ppt-tag { color: var(--red); }
  128. /* Carta 3D */
  129. .flip-card {
  130.   width: min(210px, 30vw);
  131.   aspect-ratio: 3 / 4;
  132.   perspective: 1200px;
  133. }
  134. .flip-inner {
  135.   position: relative;
  136.   width: 100%;
  137.   height: 100%;
  138.   transform-style: preserve-3d;
  139.   transition: transform 0.6s cubic-bezier(0.6, 0.2, 0.2, 1);
  140. }
  141. .flip-card.flipped .flip-inner { transform: rotateY(180deg); }
  143. .flip-face {
  144.   position: absolute;
  145.   inset: 0;
  146.   display: grid;
  147.   place-items: center;
  148.   border-radius: 18px;
  149.   backface-visibility: hidden;
  150.   -webkit-backface-visibility: hidden;
  151. }
  152. .flip-front {
  153.   border: 2px solid rgba(181, 108, 255, 0.55);
  154.   background:
  155.     repeating-linear-gradient(45deg, rgba(123, 92, 255, 0.10) 0 10px, transparent 10px 20px),
  156.     rgba(12, 9, 26, 0.96);
  157.   color: rgba(181, 108, 255, 0.85);
  158.   font-size: clamp(48px, 8vw, 78px);
  159.   font-weight: 900;
  160. }
  161. .flip-back {
  162.   transform: rotateY(180deg);
  163.   border: 2px solid rgba(255, 255, 255, 0.14);
  164.   background: rgba(255, 255, 255, 0.05);
  165.   color: #fff;
  166.   font-size: clamp(54px, 9vw, 96px);
  167. }
  168. .flip-back i { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); }
  170. /* Resultado por carta */
  171. .flip-card.win .flip-back {
  172.   border-color: var(--green);
  173.   box-shadow: 0 0 0 2px var(--green), 0 0 45px rgba(34, 197, 94, 0.5);
  174. }
  175. .flip-card.win .flip-back i { color: var(--green); }
  176. .flip-card.lose .flip-inner { opacity: 0.45; filter: saturate(0.5); }
  177. .flip-card.tie .flip-back {
  178.   border-color: var(--purple-soft);
  179.   box-shadow: 0 0 0 2px rgba(181, 108, 255, 0.7), 0 0 40px rgba(123, 92, 255, 0.4);
  180. }
  181. .flip-card.tie .flip-back i { color: var(--purple-soft); }
  183. .flip-card.pulse { animation: ppt-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.5); }
  184. @keyframes ppt-pop {
  185.   0% { transform: scale(0.8); }
  186.   70% { transform: scale(1.06); }
  187.   100% { transform: scale(1); }
  188. }
  190. /* VS central */
  191. .ppt-vs {
  192.   display: grid;
  193.   place-items: center;
  194.   width: clamp(54px, 7vw, 78px);
  195.   height: clamp(54px, 7vw, 78px);
  196.   border-radius: 50%;
  197.   border: 2px solid rgba(255, 255, 255, 0.2);
  198.   background: rgba(10, 8, 22, 0.9);
  199.   color: #fff;
  200.   font-size: clamp(18px, 2vw, 26px);
  201.   font-weight: 1000;
  202.   letter-spacing: 0.05em;
  203.   box-shadow: 0 0 24px rgba(123, 92, 255, 0.35);
  204. }
  205. .ppt-vs.clash { animation: vs-clash 0.5s ease; }
  206. @keyframes vs-clash {
  207.   0% { transform: scale(1); }
  208.   40% { transform: scale(1.4); box-shadow: 0 0 60px rgba(181, 108, 255, 0.9); }
  209.   100% { transform: scale(1); }
  210. }
  212. /* Cuenta atrás + destello */
  213. .ppt-count {
  214.   position: absolute;
  215.   inset: 0;
  216.   display: grid;
  217.   place-items: center;
  218.   z-index: 5;
  219.   color: #fff;
  220.   font-size: clamp(70px, 12vw, 130px);
  221.   font-weight: 1000;
  222.   pointer-events: none;
  223.   opacity: 0;
  224.   text-shadow: 0 0 30px rgba(123, 92, 255, 0.8);
  225. }
  226. .ppt-count.tick { animation: count-tick 0.45s ease; }
  227. @keyframes count-tick {
  228.   0% { opacity: 0; transform: scale(1.6); }
  229.   40% { opacity: 1; transform: scale(1); }
  230.   100% { opacity: 0; transform: scale(0.8); }
  231. }
  233. .ppt-flash {
  234.   position: absolute;
  235.   inset: 0;
  236.   z-index: 4;
  237.   pointer-events: none;
  238.   opacity: 0;
  239.   background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.85), transparent 60%);
  240. }
  241. .ppt-flash.go { animation: flash-go 0.45s ease; }
  242. @keyframes flash-go { 0% { opacity: 0; } 30% { opacity: 0.9; } 100% { opacity: 0; } }
  244. /* Partículas del choque */
  245. .spark {
  246.   position: absolute;
  247.   z-index: 6;
  248.   width: 10px;
  249.   height: 10px;
  250.   border-radius: 50%;
  251.   pointer-events: none;
  252.   will-change: transform, opacity;
  253. }
  255. /* Estado / resultado */
  256. .ppt-status {
  257.   display: grid;
  258.   gap: 4px;
  259.   margin-top: 16px;
  260.   text-align: center;
  261. }
  262. .ppt-result {
  263.   min-height: 26px;
  264.   font-size: clamp(18px, 2vw, 24px);
  265.   font-weight: 900;
  266.   letter-spacing: 0.03em;
  267. }
  268. .ppt-result.win { color: var(--green); text-shadow: 0 0 18px rgba(34, 197, 94, 0.5); }
  269. .ppt-result.lose { color: var(--red); text-shadow: 0 0 18px rgba(255, 77, 106, 0.5); }
  270. .ppt-result.tie { color: var(--purple-soft); }
  271. .ppt-detail { font-size: 13px; color: var(--muted); }
  273. /* Elección */
  274. .ppt-choices {
  275.   display: grid;
  276.   grid-template-columns: repeat(3, 1fr);
  277.   gap: 12px;
  278.   margin-top: 18px;
  279. }
  280. .ppt-choice {
  281.   display: grid;
  282.   place-items: center;
  283.   gap: 8px;
  284.   padding: 16px 10px;
  285.   border: 1px solid rgba(181, 108, 255, 0.35);
  286.   border-radius: 16px;
  287.   background: rgba(123, 92, 255, 0.07);
  288.   color: #fff;
  289.   transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  290. }
  291. .ppt-choice .ic { font-size: 34px; color: var(--purple-soft); }
  292. .ppt-choice .lb {
  293.   font-size: 12px;
  294.   font-weight: 800;
  295.   letter-spacing: 0.06em;
  296.   text-transform: uppercase;
  297.   color: rgba(255, 255, 255, 0.82);
  298. }
  299. .ppt-choice:hover {
  300.   transform: translateY(-4px);
  301.   border-color: var(--purple-soft);
  302.   background: rgba(123, 92, 255, 0.18);
  303.   box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4), 0 0 20px rgba(165, 92, 255, 0.3);
  304. }
  305. .ppt-choice:hover .ic { color: #fff; }
  306. .ppt-choice:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
  308. /* ===== Columna control ===== */
  309. .control-column {
  310.   display: flex;
  311.   min-width: 0;
  312.   flex-direction: column;
  313.   padding: 24px 28px 22px;
  314. }
  316. .desktop-stats {
  317.   display: grid;
  318.   grid-template-columns: repeat(3, 1fr);
  319.   gap: 12px;
  320. }
  321. .stat-card {
  322.   display: flex;
  323.   flex-direction: column;
  324.   align-items: center;
  325.   gap: 4px;
  326.   padding: 14px 8px;
  327.   border: 1px solid rgba(255, 255, 255, 0.14);
  328.   border-radius: 16px;
  329.   background: rgba(255, 255, 255, 0.035);
  330.   font-size: 10px;
  331.   font-weight: 800;
  332.   letter-spacing: 0.06em;
  333.   text-transform: uppercase;
  334.   color: var(--muted);
  335. }
  336. .stat-card b { font-size: 24px; line-height: 1; color: var(--yellow); }
  337. .stat-card.you b { color: var(--cyan); }
  338. .stat-card.ai b { color: var(--red); }
  340. .streak-badge {
  341.   display: flex;
  342.   align-items: center;
  343.   justify-content: center;
  344.   gap: 8px;
  345.   margin-top: 14px;
  346.   padding: 10px;
  347.   border: 1px solid rgba(181, 108, 255, 0.35);
  348.   border-radius: 13px;
  349.   background: rgba(123, 92, 255, 0.08);
  350.   font-size: 12px;
  351.   font-weight: 800;
  352.   letter-spacing: 0.05em;
  353.   text-transform: uppercase;
  354.   color: var(--muted);
  355. }
  356. .streak-badge b { color: var(--purple-soft); font-size: 16px; }
  358. .rules-block { margin: 22px 0; }
  359. .rules-block h2 {
  360.   margin-bottom: 16px;
  361.   color: var(--purple);
  362.   font-size: 18px;
  363.   font-weight: 900;
  364.   letter-spacing: 0.045em;
  365. }
  366. .rules-block p {
  367.   margin: 12px 0;
  368.   font-size: 15px;
  369.   line-height: 1.6;
  370.   color: rgba(255, 255, 255, 0.82);
  371. }
  372. .rules-block strong { color: var(--cyan); }
  374. .action-row {
  375.   display: grid;
  376.   grid-template-columns: 1fr;
  377.   gap: 12px;
  378.   margin-top: auto;
  379. }
  380. .arcade-action {
  381.   min-height: 46px;
  382.   border: 1px solid rgba(181, 108, 255, 0.45);
  383.   border-radius: 13px;
  384.   color: var(--purple);
  385.   background: rgba(123, 92, 255, 0.08);
  386.   font-size: 12px;
  387.   font-weight: 900;
  388.   letter-spacing: 0.04em;
  389. }
  390. .arcade-action:hover { color: #fff; background: rgba(123, 92, 255, 0.19); }
  392. .btn-start-ppt {
  393.   display: flex;
  394.   align-items: center;
  395.   justify-content: center;
  396.   gap: 12px;
  397.   width: 100%;
  398.   min-height: 58px;
  399.   border: 2px solid var(--purple-soft);
  400.   border-radius: 12px;
  401.   color: var(--purple-soft);
  402.   background: rgba(24, 14, 46, 0.9);
  403.   font-size: 18px;
  404.   font-weight: 900;
  405.   letter-spacing: 0.06em;
  406.   text-transform: uppercase;
  407.   box-shadow: 0 0 18px rgba(165, 92, 255, 0.25);
  408. }
  409. .btn-start-ppt:hover { color: #fff; box-shadow: 0 0 28px rgba(165, 92, 255, 0.45); }
  411. /* ===== Responsive ===== */
  412. .mobile-choices-note { display: none; }
  414. @media (max-width: 1050px) {
  415.   .arcade-shell { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.85fr); }
  416. }
  418. @media (max-width: 820px) {
  419.   .ppt-page { width: calc(100% - 24px); }
  420.   .arcade-shell { display: block; min-height: 0; border-radius: 22px; }
  421.   .board-column { padding: 18px 16px 16px; border-right: 0; }
  422.   .control-column {
  423.     padding: 4px 16px 20px;
  424.     border-top: 1px solid rgba(255, 255, 255, 0.08);
  425.   }
  426.   .action-row { margin-top: 18px; }
  427. }
  429. @media (max-width: 480px) {
  430.   .ppt-page { width: calc(100% - 16px); }
  431.   .flip-card { width: 40vw; }
  432.   .ppt-choice { padding: 12px 6px; }
  433.   .ppt-choice .ic { font-size: 28px; }
  434.   .desktop-stats { gap: 8px; }
  435.   .stat-card b { font-size: 20px; }
  436. }
    437.

JS

  1. (function () {
  2.   'use strict';
  4.   const $ = (id) => document.getElementById(id);
  6.   const cardYou = $('cardYou');
  7.   const cardAI = $('cardAI');
  8.   const backYou = $('backYou');
  9.   const backAI = $('backAI');
  10.   const vsBadge = $('vsBadge');
  11.   const countEl = $('countEl');
  12.   const flashEl = $('flashEl');
  13.   const arenaEl = $('arena');
  14.   const resultEl = $('resultLine');
  15.   const detailEl = $('detailLine');
  16.   const choiceButtons = Array.from(document.querySelectorAll('.ppt-choice'));
  18.   const scoreYouEl = $('scoreYou');
  19.   const scoreAIEl = $('scoreAI');
  20.   const scoreTieEl = $('scoreTie');
  21.   const streakEl = $('streakValue');
  22.   const resetScoreBtn = $('resetScoreBtn');
  23.   const playBtn = $('playBtn');
  25.   const STORE_KEY = 'rps_neon_v1';
  27.   const es = {
  28.     rock: 'Piedra', paper: 'Papel', scissors: 'Tijera',
  29.     win: '¡GANAS!', lose: '¡PIERDES!', tie: 'EMPATE',
  30.     beats: 'vence a', ties: 'empata con',
  31.     choose: 'Elige tu carta', go: '¡YA!',
  32.     winStreak: 'racha', reset: 'Marcador reseteado'
  33.   };
  34.   const en = {
  35.     rock: 'Rock', paper: 'Paper', scissors: 'Scissors',
  36.     win: 'YOU WIN!', lose: 'YOU LOSE!', tie: 'DRAW',
  37.     beats: 'beats', ties: 'ties with',
  38.     choose: 'Pick your card', go: 'GO!',
  39.     winStreak: 'streak', reset: 'Score reset'
  40.   };
  41.   const T = (window.APP_LOCALE === 'en') ? en : es;
  43.   const ICON = { rock: 'fa-hand-back-fist', paper: 'fa-hand', scissors: 'fa-hand-scissors' };
  44.   const NAME = { rock: T.rock, paper: T.paper, scissors: T.scissors };
  45.   const iconHTML = (k) => '<i class="fa-solid ' + ICON[k] + '"></i>';
  47.   let locked = false;
  48.   let scores = load();
  49.   let streak = 0;
  51.   render();
  53.   choiceButtons.forEach((btn) => {
  54.     btn.addEventListener('click', () => {
  55.       if (locked) return;
  56.       play(btn.dataset.move);
  57.     });
  58.   });
  60.   playBtn.addEventListener('click', resetRound);
  62.   resetScoreBtn.addEventListener('click', () => {
  63.     scores = { you: 0, ai: 0, tie: 0 };
  64.     streak = 0;
  65.     save();
  66.     render();
  67.     detailEl.textContent = T.reset;
  68.   });
  70.   function play(youKey) {
  71.     locked = true;
  72.     disable(true);
  73.     clearResult();
  75.     const aiKey = randomKey();
  76.     resultEl.textContent = '';
  77.     detailEl.textContent = '';
  79.     // Cuenta atrás 3 · 2 · 1
  80.     const seq = ['3', '2', '1'];
  81.     let i = 0;
  82.     tick(seq[i]);
  83.     const iv = setInterval(() => {
  84.       i++;
  85.       if (i < seq.length) { tick(seq[i]); }
  86.     }, 520);
  88.     setTimeout(() => {
  89.       clearInterval(iv);
  90.       reveal(youKey, aiKey);
  91.     }, 520 * seq.length + 120);
  92.   }
  94.   function tick(txt) {
  95.     countEl.textContent = txt;
  96.     countEl.classList.remove('tick');
  97.     void countEl.offsetWidth;
  98.     countEl.classList.add('tick');
  99.   }
  101.   function reveal(youKey, aiKey) {
  102.     // Destello + choque
  103.     flashEl.classList.remove('go');
  104.     void flashEl.offsetWidth;
  105.     flashEl.classList.add('go');
  106.     countEl.textContent = T.go;
  107.     countEl.classList.remove('tick');
  108.     void countEl.offsetWidth;
  109.     countEl.classList.add('tick');
  111.     vsBadge.classList.remove('clash');
  112.     void vsBadge.offsetWidth;
  113.     vsBadge.classList.add('clash');
  115.     backYou.innerHTML = iconHTML(youKey);
  116.     backAI.innerHTML = iconHTML(aiKey);
  118.     cardYou.classList.add('flipped', 'pulse');
  119.     cardAI.classList.add('flipped', 'pulse');
  120.     setTimeout(() => { cardYou.classList.remove('pulse'); cardAI.classList.remove('pulse'); }, 420);
  122.     const r = result(youKey, aiKey);
  123.     burst(r);
  125.     if (r === 'win') {
  126.       scores.you++;
  127.       streak = streak >= 0 ? streak + 1 : 1;
  128.       cardYou.classList.add('win');
  129.       cardAI.classList.add('lose');
  130.       resultEl.textContent = T.win;
  131.       resultEl.classList.add('win');
  132.       detailEl.textContent = NAME[youKey] + ' ' + T.beats + ' ' + NAME[aiKey];
  133.     } else if (r === 'lose') {
  134.       scores.ai++;
  135.       streak = streak <= 0 ? streak - 1 : -1;
  136.       cardAI.classList.add('win');
  137.       cardYou.classList.add('lose');
  138.       resultEl.textContent = T.lose;
  139.       resultEl.classList.add('lose');
  140.       detailEl.textContent = NAME[aiKey] + ' ' + T.beats + ' ' + NAME[youKey];
  141.     } else {
  142.       scores.tie++;
  143.       streak = 0;
  144.       cardYou.classList.add('tie');
  145.       cardAI.classList.add('tie');
  146.       resultEl.textContent = T.tie;
  147.       resultEl.classList.add('tie');
  148.       detailEl.textContent = NAME[youKey] + ' ' + T.ties + ' ' + NAME[aiKey];
  149.     }
  151.     save();
  152.     render();
  153.     locked = false;
  154.     disable(false);
  155.   }
  157.   function burst(kind) {
  158.     const rect = arenaEl.getBoundingClientRect();
  159.     const cx = rect.width / 2;
  160.     const cy = rect.height / 2;
  161.     const color = kind === 'win' ? '#22c55e' : kind === 'lose' ? '#ff4d6a' : '#b56cff';
  162.     const n = 22;
  163.     for (let k = 0; k < n; k++) {
  164.       const s = document.createElement('span');
  165.       s.className = 'spark';
  166.       s.style.left = cx + 'px';
  167.       s.style.top = cy + 'px';
  168.       s.style.background = color;
  169.       s.style.boxShadow = '0 0 12px ' + color;
  170.       arenaEl.appendChild(s);
  171.       const ang = (Math.PI * 2 * k) / n + Math.random() * 0.5;
  172.       const dist = 70 + Math.random() * 130;
  173.       const dx = Math.cos(ang) * dist;
  174.       const dy = Math.sin(ang) * dist;
  175.       requestAnimationFrame(() => {
  176.         s.style.transition = 'transform 0.6s cubic-bezier(0.2,0.7,0.2,1), opacity 0.6s ease';
  177.         s.style.transform = 'translate(' + dx + 'px,' + dy + 'px) scale(' + (0.3 + Math.random()) + ')';
  178.         s.style.opacity = '0';
  179.       });
  180.       setTimeout(() => s.remove(), 650);
  181.     }
  182.   }
  184.   function resetRound() {
  185.     clearResult();
  186.     cardYou.classList.remove('flipped');
  187.     cardAI.classList.remove('flipped');
  188.     resultEl.textContent = '';
  189.     detailEl.textContent = T.choose;
  190.     disable(false);
  191.     locked = false;
  192.   }
  194.   function clearResult() {
  195.     ['win', 'lose', 'tie', 'pulse'].forEach((c) => {
  196.       cardYou.classList.remove(c);
  197.       cardAI.classList.remove(c);
  198.     });
  199.     resultEl.classList.remove('win', 'lose', 'tie');
  200.   }
  202.   function disable(v) { choiceButtons.forEach((b) => (b.disabled = v)); }
  204.   function randomKey() {
  205.     const keys = ['rock', 'paper', 'scissors'];
  206.     return keys[Math.floor(Math.random() * keys.length)];
  207.   }
  209.   function result(you, ai) {
  210.     if (you === ai) return 'tie';
  211.     if ((you === 'rock' && ai === 'scissors') ||
  212.         (you === 'paper' && ai === 'rock') ||
  213.         (you === 'scissors' && ai === 'paper')) return 'win';
  214.     return 'lose';
  215.   }
  217.   function render() {
  218.     scoreYouEl.textContent = scores.you;
  219.     scoreAIEl.textContent = scores.ai;
  220.     scoreTieEl.textContent = scores.tie;
  221.     if (streakEl) {
  222.       const a = Math.abs(streak);
  223.       streakEl.textContent = streak === 0 ? '—' : (streak > 0 ? '+' + a : '-' + a);
  224.     }
  225.   }
  227.   function save() { try { localStorage.setItem(STORE_KEY, JSON.stringify(scores)); } catch (e) {} }
  228.   function load() {
  229.     try {
  230.       const raw = localStorage.getItem(STORE_KEY);
  231.       if (!raw) return { you: 0, ai: 0, tie: 0 };
  232.       const p = JSON.parse(raw);
  233.       return { you: +p.you || 0, ai: +p.ai || 0, tie: +p.tie || 0 };
  234.     } catch (e) { return { you: 0, ai: 0, tie: 0 }; }
  235.   }
  236. })();
    237.